From 3d4b4111af0293ec92bbf789cf61344b37eb49de Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Mon, 25 Mar 2024 11:24:35 +0100
Subject: [PATCH 01/75] feat: export body of node definition into function

---
 css/main.css                                  |  7 ++++
 source/components/graphComponent.tsx          | 34 +++----------------
 .../model/nodes/handleNodeComponent.tsx       | 17 +++++++++-
 3 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/css/main.css b/css/main.css
index b396124..26a58cc 100644
--- a/css/main.css
+++ b/css/main.css
@@ -5,6 +5,13 @@ body {
 	margin: 0px;
 }
 
+.variable-definition-node {
+	border: solid 2px;
+	padding: 5px;
+	margin: 0px;
+}
+
+
 .use-node {
 	border: solid 2px;
 	padding: 5px;
diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 55676a9..90f1c84 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -22,48 +22,24 @@ import ReactFlow, {
 
 import 'reactflow/dist/style.css';
 import { VisualizationGraph } from './model/graph';
-import { HandleNodeComponent } from './model/nodes/handleNodeComponent';
+import { BodyNodeComoponent, HandleNodeComponent } from './model/nodes/handleNodeComponent';
 
 function VariableDefinitionNode({ data } : { readonly data: NodeProps['data'] }) {
-  return (
-    <HandleNodeComponent>
-      <div style={{ border: 'solid 2px', padding: '5px', margin: '0px' }}>
-        <label htmlFor="text">{data.label}</label>
-      </div>
-    </HandleNodeComponent>
-  );
+  return <BodyNodeComoponent data={data} className='variable-definition-node'/>
 }
 
 function UseNode({ data } : { readonly data: NodeProps['data'] }){
-  return(
-    <HandleNodeComponent>
-      <div className='use-node'>
-        <label htmlFor="text">{data.label}</label>
-      </div>
-    </HandleNodeComponent>
-  )
+  return <BodyNodeComoponent data={data} className='use-node'/>
 }
 
 function FunctionCallNode({ data } : { readonly data: NodeProps['data'] }){
-  return(
-    <HandleNodeComponent>
-      <div className='function-call-node label'>
-        <label htmlFor="text">{data.label}</label>
-      </div>
-    </HandleNodeComponent>
-  )
+  return <BodyNodeComoponent data={data} className='function-call-node'/>
 }
 
 let idCounter = 0
 
 function ExitPointNode({ data } : { readonly data: NodeProps['data'] }) {
-  return (
-    <HandleNodeComponent>
-      <div className='exit-point-node'>
-        <label htmlFor="text">{data.label}</label>
-      </div>
-    </HandleNodeComponent>
-  );
+  return <BodyNodeComoponent data={data} className='exit-point-node'/>
 }
 
 const elk = new ELK();
diff --git a/source/components/model/nodes/handleNodeComponent.tsx b/source/components/model/nodes/handleNodeComponent.tsx
index 9b24c6c..bae2cbc 100644
--- a/source/components/model/nodes/handleNodeComponent.tsx
+++ b/source/components/model/nodes/handleNodeComponent.tsx
@@ -1,9 +1,14 @@
-import { Handle, Position } from "reactflow";
+import { Handle, NodeProps, Position } from "reactflow";
 
 export interface HandleNodeComponentProps {
    targetBackgroundColor: string
 }
 
+export interface BodyNodeComponentProps{
+   className: string
+   data: NodeProps['data']
+}
+
 export function HandleNodeComponent(props : React.PropsWithChildren) {
    return (<>
       <Handle type="target" position={Position.Top} isConnectable={false} className="node-handle"/>
@@ -11,3 +16,13 @@ export function HandleNodeComponent(props : React.PropsWithChildren) {
       <Handle type="source" position={Position.Bottom} isConnectable={false} className="node-handle" />
    </>)
 }
+
+export function BodyNodeComoponent(props: React.PropsWithoutRef<BodyNodeComponentProps>){
+   return (
+      <HandleNodeComponent>
+         <div className = {props.className}>
+            <label htmlFor="text">{props.data.label}</label>
+         </div>
+      </HandleNodeComponent>
+   )
+}
\ No newline at end of file

From 4055072a5c62de596869078747e1fb35a7922078 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Fri, 5 Apr 2024 11:00:21 +0200
Subject: [PATCH 02/75] feat: nodes definitions in new file

---
 source/components/graphComponent.tsx          | 27 +++----------------
 .../components/model/nodes/nodeDefinition.tsx | 20 ++++++++++++++
 2 files changed, 23 insertions(+), 24 deletions(-)
 create mode 100644 source/components/model/nodes/nodeDefinition.tsx

diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 90f1c84..68ebea9 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -22,25 +22,9 @@ import ReactFlow, {
 
 import 'reactflow/dist/style.css';
 import { VisualizationGraph } from './model/graph';
-import { BodyNodeComoponent, HandleNodeComponent } from './model/nodes/handleNodeComponent';
+import { ExitPointNode, FunctionCallNode, UseNode, VariableDefinitionNode } from './model/nodes/nodeDefinition';
 
-function VariableDefinitionNode({ data } : { readonly data: NodeProps['data'] }) {
-  return <BodyNodeComoponent data={data} className='variable-definition-node'/>
-}
-
-function UseNode({ data } : { readonly data: NodeProps['data'] }){
-  return <BodyNodeComoponent data={data} className='use-node'/>
-}
 
-function FunctionCallNode({ data } : { readonly data: NodeProps['data'] }){
-  return <BodyNodeComoponent data={data} className='function-call-node'/>
-}
-
-let idCounter = 0
-
-function ExitPointNode({ data } : { readonly data: NodeProps['data'] }) {
-  return <BodyNodeComoponent data={data} className='exit-point-node'/>
-}
 
 const elk = new ELK();
 
@@ -85,14 +69,13 @@ const elkOptions: LayoutOptions = {
          position: { x: node.x ?? 0, y: node.y ?? 0 },
        })) ?? [],
        edges: (layoutedGraph.edges ?? []).map(e => {
-        const costumEdge: CostumElkExtendedEdge = e as CostumElkExtendedEdge
          return {
            id: e.id,
            source: e.sources[0],
            target: e.targets[0],
            sourceHandle: isHorizontal ? 'right' : 'bottom',
            targetHandle: isHorizontal ? 'left' : 'top',
-           label: costumEdge.label,
+           label: e.id,
            animated: true,
            style: { stroke: '#000' },
            arrowHeadType: 'arrowclosed',
@@ -103,7 +86,7 @@ const elkOptions: LayoutOptions = {
      }
  }
 
- function convertToExtendedEdges(edges: Edge[]): CostumElkExtendedEdge[] {
+ function convertToExtendedEdges(edges: Edge[]): ElkExtendedEdge[] {
    return edges.map(edge => ({
      id: edge.id,
      sources: [edge.source],
@@ -191,7 +174,3 @@ const elkOptions: LayoutOptions = {
    );
  }
 
- interface CostumElkExtendedEdge extends ElkExtendedEdge{
-  label: string
-  edgeType: string
- }
\ No newline at end of file
diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
new file mode 100644
index 0000000..883936c
--- /dev/null
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -0,0 +1,20 @@
+import { NodeProps } from "reactflow"
+import { BodyNodeComoponent } from "./handleNodeComponent"
+
+export function VariableDefinitionNode({ data } : { readonly data: NodeProps['data'] }) {
+    return <BodyNodeComoponent data={data} className='variable-definition-node'/>
+  }
+  
+  export function UseNode({ data } : { readonly data: NodeProps['data'] }){
+    return <BodyNodeComoponent data={data} className='use-node'/>
+  }
+  
+  export function FunctionCallNode({ data } : { readonly data: NodeProps['data'] }){
+    return <BodyNodeComoponent data={data} className='function-call-node'/>
+  }
+  
+  let idCounter = 0
+  
+  export function ExitPointNode({ data } : { readonly data: NodeProps['data'] }) {
+    return <BodyNodeComoponent data={data} className='exit-point-node'/>
+  }
\ No newline at end of file

From 11b4ceced1e25e30801123eed5043c55ac576565 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Fri, 5 Apr 2024 13:14:52 +0200
Subject: [PATCH 03/75] feat: prepare first custom edge

---
 source/components/graphComponent.tsx          |  3 +-
 .../model/nodes/handleNodeComponent.tsx       | 14 ------
 .../components/model/nodes/nodeDefinition.tsx | 43 ++++++++++++-------
 3 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 68ebea9..b46f4c1 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -23,6 +23,7 @@ import ReactFlow, {
 import 'reactflow/dist/style.css';
 import { VisualizationGraph } from './model/graph';
 import { ExitPointNode, FunctionCallNode, UseNode, VariableDefinitionNode } from './model/nodes/nodeDefinition';
+import { bold } from '@eagleoutice/flowr';
 
 
 
@@ -79,7 +80,7 @@ const elkOptions: LayoutOptions = {
            animated: true,
            style: { stroke: '#000' },
            arrowHeadType: 'arrowclosed',
-           type: 'custom-edge',
+           type: 'customEdge',
            data: { label: e.id }
          };
        })
diff --git a/source/components/model/nodes/handleNodeComponent.tsx b/source/components/model/nodes/handleNodeComponent.tsx
index bae2cbc..f3000ec 100644
--- a/source/components/model/nodes/handleNodeComponent.tsx
+++ b/source/components/model/nodes/handleNodeComponent.tsx
@@ -4,11 +4,6 @@ export interface HandleNodeComponentProps {
    targetBackgroundColor: string
 }
 
-export interface BodyNodeComponentProps{
-   className: string
-   data: NodeProps['data']
-}
-
 export function HandleNodeComponent(props : React.PropsWithChildren) {
    return (<>
       <Handle type="target" position={Position.Top} isConnectable={false} className="node-handle"/>
@@ -17,12 +12,3 @@ export function HandleNodeComponent(props : React.PropsWithChildren) {
    </>)
 }
 
-export function BodyNodeComoponent(props: React.PropsWithoutRef<BodyNodeComponentProps>){
-   return (
-      <HandleNodeComponent>
-         <div className = {props.className}>
-            <label htmlFor="text">{props.data.label}</label>
-         </div>
-      </HandleNodeComponent>
-   )
-}
\ No newline at end of file
diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index 883936c..805a259 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -1,20 +1,33 @@
 import { NodeProps } from "reactflow"
-import { BodyNodeComoponent } from "./handleNodeComponent"
+import { HandleNodeComponent } from "./handleNodeComponent"
+
+interface BodyNodeComponentProps{
+  className: string
+  data: NodeProps['data']
+}
+
+export function BodyNodeComoponent(props: React.PropsWithoutRef<BodyNodeComponentProps>){
+  return (
+    <HandleNodeComponent>
+      <div className = {props.className}>
+        <label htmlFor="text">{props.data.label}</label>
+      </div>
+    </HandleNodeComponent>
+  )
+}
 
 export function VariableDefinitionNode({ data } : { readonly data: NodeProps['data'] }) {
-    return <BodyNodeComoponent data={data} className='variable-definition-node'/>
-  }
-  
-  export function UseNode({ data } : { readonly data: NodeProps['data'] }){
-    return <BodyNodeComoponent data={data} className='use-node'/>
-  }
+  return <BodyNodeComoponent data={data} className='variable-definition-node'/>
+}
   
-  export function FunctionCallNode({ data } : { readonly data: NodeProps['data'] }){
-    return <BodyNodeComoponent data={data} className='function-call-node'/>
-  }
+export function UseNode({ data } : { readonly data: NodeProps['data'] }){
+  return <BodyNodeComoponent data={data} className='use-node'/>
+}
   
-  let idCounter = 0
-  
-  export function ExitPointNode({ data } : { readonly data: NodeProps['data'] }) {
-    return <BodyNodeComoponent data={data} className='exit-point-node'/>
-  }
\ No newline at end of file
+export function FunctionCallNode({ data } : { readonly data: NodeProps['data'] }){
+  return <BodyNodeComoponent data={data} className='function-call-node'/>
+}
+
+export function ExitPointNode({ data } : { readonly data: NodeProps['data'] }) {
+  return <BodyNodeComoponent data={data} className='exit-point-node'/>
+}
\ No newline at end of file

From 087bd4c26bbd5a0936161241cb017242a1e1118d Mon Sep 17 00:00:00 2001
From: EagleoutIce <florian.sihler@uni-ulm.de>
Date: Wed, 10 Apr 2024 09:16:25 +0200
Subject: [PATCH 04/75] feat: adding a basic edge label renderer for the custom
 edge

---
 source/components/graphComponent.tsx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index b46f4c1..67b8a0c 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -18,6 +18,7 @@ import ReactFlow, {
   NodeProps,
   getStraightPath,
   BaseEdge,
+  EdgeLabelRenderer,
 } from 'reactflow';
 
 import 'reactflow/dist/style.css';
@@ -97,15 +98,15 @@ const elkOptions: LayoutOptions = {
    }));
  }
 
- export default function CustomEdge({ id, sourceX, sourceY, targetX, targetY } : {
+ export default function CustomEdge({ id, sourceX, sourceY, targetX, targetY, ...props } : {
   id: string,
   sourceX: number,
   sourceY: number,
   targetX: number,
   targetY: number
  }) {
-  const [edgePath] = getStraightPath({
-    sourceX,
+  const [edgePath, labelX, labelY] = getStraightPath({
+    sourceX  ,
     sourceY,
     targetX,
     targetY,
@@ -113,7 +114,20 @@ const elkOptions: LayoutOptions = {
 
   return (
     <>
-      <BaseEdge id={id} path={edgePath} />
+      <BaseEdge id={id} path={edgePath} {...props} label={(<div>{id}</div>)} />
+      <EdgeLabelRenderer>
+        <div
+          style={{
+            position: 'absolute',
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            fontSize: 12,
+            pointerEvents: 'all',
+          }}
+          className="nodrag nopan"
+        >
+          {id}
+        </div>
+      </EdgeLabelRenderer>
     </>
   );
 }

From adba7ab62eb7e70c39914bb1b7634172b8bb4738 Mon Sep 17 00:00:00 2001
From: EagleoutIce <florian.sihler@uni-ulm.de>
Date: Wed, 10 Apr 2024 09:17:13 +0200
Subject: [PATCH 05/75] refactor: fix `comoponent` -> `component`

---
 source/components/model/nodes/nodeDefinition.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index 805a259..2cb9ec9 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -6,7 +6,7 @@ interface BodyNodeComponentProps{
   data: NodeProps['data']
 }
 
-export function BodyNodeComoponent(props: React.PropsWithoutRef<BodyNodeComponentProps>){
+export function BodyNodeComponent(props: React.PropsWithoutRef<BodyNodeComponentProps>){
   return (
     <HandleNodeComponent>
       <div className = {props.className}>
@@ -17,17 +17,17 @@ export function BodyNodeComoponent(props: React.PropsWithoutRef<BodyNodeComponen
 }
 
 export function VariableDefinitionNode({ data } : { readonly data: NodeProps['data'] }) {
-  return <BodyNodeComoponent data={data} className='variable-definition-node'/>
+  return <BodyNodeComponent data={data} className='variable-definition-node'/>
 }
-  
+
 export function UseNode({ data } : { readonly data: NodeProps['data'] }){
-  return <BodyNodeComoponent data={data} className='use-node'/>
+  return <BodyNodeComponent data={data} className='use-node'/>
 }
-  
+
 export function FunctionCallNode({ data } : { readonly data: NodeProps['data'] }){
-  return <BodyNodeComoponent data={data} className='function-call-node'/>
+  return <BodyNodeComponent data={data} className='function-call-node'/>
 }
 
 export function ExitPointNode({ data } : { readonly data: NodeProps['data'] }) {
-  return <BodyNodeComoponent data={data} className='exit-point-node'/>
+  return <BodyNodeComponent data={data} className='exit-point-node'/>
 }
\ No newline at end of file

From b41cac827daeea16b5d370f0c4f46e552225c71d Mon Sep 17 00:00:00 2001
From: EagleoutIce <florian.sihler@uni-ulm.de>
Date: Wed, 10 Apr 2024 09:19:23 +0200
Subject: [PATCH 06/75] feat: example for FC type declaration

---
 source/components/model/nodes/nodeDefinition.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index 2cb9ec9..5136201 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -1,11 +1,16 @@
 import { NodeProps } from "reactflow"
 import { HandleNodeComponent } from "./handleNodeComponent"
+import React from "react";
 
 interface BodyNodeComponentProps{
   className: string
   data: NodeProps['data']
 }
 
+interface NodeComponentProps {
+  readonly data: NodeProps['data']
+}
+
 export function BodyNodeComponent(props: React.PropsWithoutRef<BodyNodeComponentProps>){
   return (
     <HandleNodeComponent>
@@ -16,18 +21,18 @@ export function BodyNodeComponent(props: React.PropsWithoutRef<BodyNodeComponent
   )
 }
 
-export function VariableDefinitionNode({ data } : { readonly data: NodeProps['data'] }) {
+export const VariableDefinitionNode: React.FC<NodeComponentProps> = ({ data }) => {
   return <BodyNodeComponent data={data} className='variable-definition-node'/>
 }
 
-export function UseNode({ data } : { readonly data: NodeProps['data'] }){
+export function UseNode({ data } : NodeComponentProps){
   return <BodyNodeComponent data={data} className='use-node'/>
 }
 
-export function FunctionCallNode({ data } : { readonly data: NodeProps['data'] }){
+export function FunctionCallNode({ data } : NodeComponentProps){
   return <BodyNodeComponent data={data} className='function-call-node'/>
 }
 
-export function ExitPointNode({ data } : { readonly data: NodeProps['data'] }) {
+export function ExitPointNode({ data } : NodeComponentProps) {
   return <BodyNodeComponent data={data} className='exit-point-node'/>
 }
\ No newline at end of file

From ebf2bb14a0da2e4a52401895a77c269fab4c3745 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Wed, 10 Apr 2024 09:37:13 +0200
Subject: [PATCH 07/75] refactor: change Node Definition to improve readability

---
 source/components/model/nodes/nodeDefinition.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index 5136201..7f6cb7b 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -25,14 +25,14 @@ export const VariableDefinitionNode: React.FC<NodeComponentProps> = ({ data }) =
   return <BodyNodeComponent data={data} className='variable-definition-node'/>
 }
 
-export function UseNode({ data } : NodeComponentProps){
+export const UseNode: React.FC<NodeComponentProps> = ({ data }) => {
   return <BodyNodeComponent data={data} className='use-node'/>
 }
 
-export function FunctionCallNode({ data } : NodeComponentProps){
+export const FunctionCallNode: React.FC<NodeComponentProps> = ({ data }) => {
   return <BodyNodeComponent data={data} className='function-call-node'/>
 }
 
-export function ExitPointNode({ data } : NodeComponentProps) {
+export const ExitPointNode: React.FC<NodeComponentProps> = ({ data }) => {
   return <BodyNodeComponent data={data} className='exit-point-node'/>
 }
\ No newline at end of file

From bc51a34eb83763b46b7b13e2e7a58f918c3be646 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Wed, 10 Apr 2024 15:58:51 +0200
Subject: [PATCH 08/75] feat: define relevant edge types

---
 source/components/graphComponent.tsx          |  62 ++--
 .../components/model/edges/edgeDefinition.tsx | 266 ++++++++++++++++++
 source/components/model/graphTransformer.ts   |   4 +-
 source/index.tsx                              |  14 +-
 4 files changed, 298 insertions(+), 48 deletions(-)
 create mode 100644 source/components/model/edges/edgeDefinition.tsx

diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 67b8a0c..77631e9 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -19,12 +19,17 @@ import ReactFlow, {
   getStraightPath,
   BaseEdge,
   EdgeLabelRenderer,
+  getMarkerEnd,
+  MarkerType,
+  EdgeProps,
 } from 'reactflow';
 
 import 'reactflow/dist/style.css';
 import { VisualizationGraph } from './model/graph';
 import { ExitPointNode, FunctionCallNode, UseNode, VariableDefinitionNode } from './model/nodes/nodeDefinition';
 import { bold } from '@eagleoutice/flowr';
+import CustomEdge, { ArgumentEdge, CallsEdge, DefinedByEdge, DefinedByOnCallEdge, DefinesOnCallEdge, RelatesEdge, ReturnsEdge, SameDefDefEdge, SameReadReadEdge, SideEffectOnCallEdge } from './model/edges/edgeDefinition';
+import ReadsEdge from './model/edges/edgeDefinition';
 
 
 
@@ -77,11 +82,12 @@ const elkOptions: LayoutOptions = {
            target: e.targets[0],
            sourceHandle: isHorizontal ? 'right' : 'bottom',
            targetHandle: isHorizontal ? 'left' : 'top',
-           label: e.id,
-           animated: true,
-           style: { stroke: '#000' },
-           arrowHeadType: 'arrowclosed',
-           type: 'customEdge',
+           //label: e.id,
+           //animated: true,
+           //style: { stroke: '#000' },
+           //arrowHeadType: 'arrowclosed',
+           type: 'readsEdge',
+           markerEnd: {type: MarkerType.Arrow},
            data: { label: e.id }
          };
        })
@@ -98,39 +104,7 @@ const elkOptions: LayoutOptions = {
    }));
  }
 
- export default function CustomEdge({ id, sourceX, sourceY, targetX, targetY, ...props } : {
-  id: string,
-  sourceX: number,
-  sourceY: number,
-  targetX: number,
-  targetY: number
- }) {
-  const [edgePath, labelX, labelY] = getStraightPath({
-    sourceX  ,
-    sourceY,
-    targetX,
-    targetY,
-  });
-
-  return (
-    <>
-      <BaseEdge id={id} path={edgePath} {...props} label={(<div>{id}</div>)} />
-      <EdgeLabelRenderer>
-        <div
-          style={{
-            position: 'absolute',
-            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-            fontSize: 12,
-            pointerEvents: 'all',
-          }}
-          className="nodrag nopan"
-        >
-          {id}
-        </div>
-      </EdgeLabelRenderer>
-    </>
-  );
-}
+
 
  export function LayoutFlow({ graph } : { readonly graph: VisualizationGraph}) {
    const [nodes, setNodes, onNodesChange] = useNodesState([]);
@@ -168,7 +142,17 @@ const elkOptions: LayoutOptions = {
 
    /* allows to map custom edge types */
    const edgeTypes = useMemo(() => ({
-    customEdge: CustomEdge,
+    readsEdge: ReadsEdge,
+    definedByEdge: DefinedByEdge,
+    sameReadReadEdge: SameReadReadEdge,
+    sameDefDefEdge: SameDefDefEdge,
+    callsEdge: CallsEdge,
+    returnsEdge: ReturnsEdge,
+    definesOnCallEdge: DefinesOnCallEdge,
+    definedByOnCallEdge: DefinedByOnCallEdge,
+    argumentEdge: ArgumentEdge,
+    sideEffectOnCallEdge: SideEffectOnCallEdge,
+    relatesEdge: RelatesEdge 
   }),[])
 
    return (
diff --git a/source/components/model/edges/edgeDefinition.tsx b/source/components/model/edges/edgeDefinition.tsx
new file mode 100644
index 0000000..46ef54b
--- /dev/null
+++ b/source/components/model/edges/edgeDefinition.tsx
@@ -0,0 +1,266 @@
+import { getStraightPath, BaseEdge, EdgeLabelRenderer, MarkerType, getMarkerEnd } from "reactflow";
+
+
+export function edgeTagMapper(edgeTag:string):string{
+  switch(edgeTag){
+    case 'reads': return 'readsEdge'
+    case 'defined-by': return 'definedByEdge'
+    case 'same-read-read': return 'sameReadReadEdge'
+    case 'same-def-def': return 'sameDefDefEdge'
+    case 'calls': return 'callsEdge'
+    case 'returns': return 'returnsEdge'
+    case 'defines-on-call': return 'definesOnCallEdge'
+    case 'defined-by-on-call': return 'definedByOnCallEdge'
+    case 'argument': return 'argumentEdge'
+    case 'side-effect-on-call': return 'sideEffectOnCallEdge'
+    case 'relates': return 'relatesEdge'
+  }
+  return ''
+}
+
+interface BodyEdgeComponentProps {
+  readonly id: string,
+  readonly sourceX: number,
+  readonly sourceY: number,
+  readonly targetX: number,
+  readonly targetY: number,
+  readonly edgeStyle: React.CSSProperties,
+  readonly label: string,
+  readonly markerEnd: string
+}
+
+function BodyEdgeCompontent(props: React.PropsWithoutRef<BodyEdgeComponentProps>){
+  const [edgePath, labelX, labelY] = getStraightPath({
+    sourceX: props.sourceX ,
+    sourceY: props.sourceY,
+    targetX: props.targetX,
+    targetY: props.targetY,
+  })
+  return (
+    <>
+    <BaseEdge id={props.id} path={edgePath} style={props.edgeStyle} />
+    <EdgeLabelRenderer>
+      <div
+      style={{
+        position: 'absolute',
+        transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+        fontSize: 12,
+        pointerEvents: 'all',
+      }}
+      className="nodrag nopan"
+      >
+      {props.label}
+      </div>
+    </EdgeLabelRenderer>
+    </>
+  );
+}
+
+export default function ReadsEdge({ id, sourceX, sourceY, targetX, targetY} : {
+  id: string,
+  sourceX: number,
+  sourceY: number,
+  targetX: number,
+  targetY: number
+  }) {
+  return <BodyEdgeCompontent 
+    id = {id} 
+    sourceX = {sourceX}
+    sourceY = {sourceY} 
+    targetX = {targetX} 
+    targetY = {targetY}
+    edgeStyle = {{stroke: 'black', strokeDasharray: '5,5'}}
+    label = 'reads'
+    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+  />
+}
+
+export function DefinedByEdge({ id, sourceX, sourceY, targetX, targetY} : {
+  id: string,
+  sourceX: number,
+  sourceY: number,
+  targetX: number,
+  targetY: number
+  }) {
+  return <BodyEdgeCompontent 
+    id = {id} 
+    sourceX = {sourceX}
+    sourceY = {sourceY} 
+    targetX = {targetX} 
+    targetY = {targetY}
+    edgeStyle = {{stroke: 'black'}}
+    label = 'reads'
+    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+  />
+}
+
+export function SameReadReadEdge({ id, sourceX, sourceY, targetX, targetY} : {
+  id: string,
+  sourceX: number,
+  sourceY: number,
+  targetX: number,
+  targetY: number
+  }) {
+  return <BodyEdgeCompontent 
+    id = {id} 
+    sourceX = {sourceX}
+    sourceY = {sourceY} 
+    targetX = {targetX} 
+    targetY = {targetY}
+    edgeStyle = {{stroke: 'grey', strokeDasharray: '2,5'}}
+    label = 'reads'
+    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+  />
+}
+
+export function SameDefDefEdge({ id, sourceX, sourceY, targetX, targetY} : {
+  id: string,
+  sourceX: number,
+  sourceY: number,
+  targetX: number,
+  targetY: number
+  }) {
+  return <BodyEdgeCompontent 
+    id = {id} 
+    sourceX = {sourceX}
+    sourceY = {sourceY} 
+    targetX = {targetX} 
+    targetY = {targetY}
+    edgeStyle = {{stroke: 'blue', strokeDasharray: '2,7'}}
+    label = 'reads'
+    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+  />
+}
+
+export function CallsEdge({ id, sourceX, sourceY, targetX, targetY} : {
+  id: string,
+  sourceX: number,
+  sourceY: number,
+  targetX: number,
+  targetY: number
+  }) {
+  return <BodyEdgeCompontent 
+    id = {id} 
+    sourceX = {sourceX}
+    sourceY = {sourceY} 
+    targetX = {targetX} 
+    targetY = {targetY}
+    edgeStyle = {{stroke: 'blue', strokeDasharray: '3,7'}}
+    label = 'reads'
+    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+  />
+}
+
+export function ReturnsEdge({ id, sourceX, sourceY, targetX, targetY} : {
+  id: string,
+  sourceX: number,
+  sourceY: number,
+  targetX: number,
+  targetY: number
+  }) {
+  return <BodyEdgeCompontent 
+    id = {id} 
+    sourceX = {sourceX}
+    sourceY = {sourceY} 
+    targetX = {targetX} 
+    targetY = {targetY}
+    edgeStyle = {{stroke: 'blue', strokeDasharray: '4,7'}}
+    label = 'reads'
+    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+  />
+}
+
+export function DefinesOnCallEdge({ id, sourceX, sourceY, targetX, targetY} : {
+  id: string,
+  sourceX: number,
+  sourceY: number,
+  targetX: number,
+  targetY: number
+  }) {
+  return <BodyEdgeCompontent 
+    id = {id} 
+    sourceX = {sourceX}
+    sourceY = {sourceY} 
+    targetX = {targetX} 
+    targetY = {targetY}
+    edgeStyle = {{stroke: 'blue', strokeDasharray: '5,7'}}
+    label = 'reads'
+    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+  />
+}
+
+export function DefinedByOnCallEdge({ id, sourceX, sourceY, targetX, targetY} : {
+  id: string,
+  sourceX: number,
+  sourceY: number,
+  targetX: number,
+  targetY: number
+  }) {
+  return <BodyEdgeCompontent 
+    id = {id} 
+    sourceX = {sourceX}
+    sourceY = {sourceY} 
+    targetX = {targetX} 
+    targetY = {targetY}
+    edgeStyle = {{stroke: 'blue', strokeDasharray: '6,7'}}
+    label = 'reads'
+    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+  />
+}
+
+export function ArgumentEdge({ id, sourceX, sourceY, targetX, targetY} : {
+  id: string,
+  sourceX: number,
+  sourceY: number,
+  targetX: number,
+  targetY: number
+  }) {
+  return <BodyEdgeCompontent 
+    id = {id} 
+    sourceX = {sourceX}
+    sourceY = {sourceY} 
+    targetX = {targetX} 
+    targetY = {targetY}
+    edgeStyle = {{stroke: 'blue', strokeDasharray: '7,7'}}
+    label = 'reads'
+    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+  />
+}
+
+export function SideEffectOnCallEdge({ id, sourceX, sourceY, targetX, targetY} : {
+  id: string,
+  sourceX: number,
+  sourceY: number,
+  targetX: number,
+  targetY: number
+  }) {
+  return <BodyEdgeCompontent 
+    id = {id} 
+    sourceX = {sourceX}
+    sourceY = {sourceY} 
+    targetX = {targetX} 
+    targetY = {targetY}
+    edgeStyle = {{stroke: 'blue'}}
+    label = 'reads'
+    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+  />
+}
+
+export function RelatesEdge({ id, sourceX, sourceY, targetX, targetY} : {
+  id: string,
+  sourceX: number,
+  sourceY: number,
+  targetX: number,
+  targetY: number
+  }) {
+  return <BodyEdgeCompontent 
+    id = {id} 
+    sourceX = {sourceX}
+    sourceY = {sourceY} 
+    targetX = {targetX} 
+    targetY = {targetY}
+    edgeStyle = {{stroke: 'blue', strokeDasharray: '2,3'}}
+    label = 'reads'
+    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+  />
+}
\ No newline at end of file
diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphTransformer.ts
index fd7eda6..01580b3 100644
--- a/source/components/model/graphTransformer.ts
+++ b/source/components/model/graphTransformer.ts
@@ -35,8 +35,8 @@ export function transformToVisualizationGraph(dataflowGraph: Graph): Visualizati
                         target: targetNodeId,
                         id: `${sourceNodeId}-${targetNodeId}-${linkEdgeType}`,
                         label: linkEdgeType,
-                        animated: true,
-                        style: { stroke: '#000' },
+                        //animated: true,
+                        //style: { stroke: '#000' },
                         data: { label: linkEdgeType, edgeType: linkEdgeType }
                     }
                 visualizationGraph.edges.push(newEdge)
diff --git a/source/index.tsx b/source/index.tsx
index ae26277..07fe538 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -19,21 +19,21 @@ const flowrGraph: Graph = {
   ]),
   edgeInformation: new Map([
     ['1', new Map([
-      ['2', {types: {foo: 'foo'}}],
-      ['9', {types: {foo: 'foo'}}]
+      ['2', {types: {foo: 'bar1'}}],
+      ['9', {types: {foo: 'bar2'}}]
     ])],
     ['2', new Map([
-      ['3', {types: {foo: 'foo'}}],
-      ['4', {types: {foo: 'foo'}}]
+      ['3', {types: {foo: 'bar3'}}],
+      ['4', {types: {foo: 'bar4'}}]
     ])],
     ['4', new Map([
-      ['5', {types: {foo: 'foo'}}]
+      ['5', {types: {foo: 'bar5'}}]
     ])],
     ['5', new Map([
-      ['3', {types: {foo: 'foo'}}]
+      ['3', {types: {foo: 'bar6'}}]
     ])],
     ['9', new Map([
-      ['2', {types: {foo: 'foo'}}]
+      ['2', {types: {foo: 'bar7'}}]
     ])]
   ])
 }

From 5591a8400a478dcbe6b3a2fe5453d21e4200f65f Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Wed, 10 Apr 2024 18:27:54 +0200
Subject: [PATCH 09/75] feat: show label on hoverover

---
 css/main.css                                  | 24 +++++++++++++++++++
 .../components/model/edges/edgeDefinition.tsx |  2 +-
 source/components/model/graphTransformer.ts   |  2 --
 .../components/model/nodes/nodeDefinition.tsx |  9 +++----
 source/index.tsx                              |  8 +++----
 5 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/css/main.css b/css/main.css
index 26a58cc..97f6b39 100644
--- a/css/main.css
+++ b/css/main.css
@@ -59,3 +59,27 @@ body {
 	width: 100vw;
 	overflow-y: hidden;
 }
+
+/* from https://www.w3schools.com/css/css_tooltip.asp */
+
+.base-node .hover-over-text{
+	visibility: hidden;
+  	background-color: black;
+  	color: #fff;
+  	text-align: center;
+  	padding: 5px 0;
+  	border-radius: 6px;
+ 
+  	content: " ";
+	position: absolute;
+	left: 100%; /* To the right of the tooltip */
+	margin-top: -5px;
+	border-width: 5px;
+	border-style: solid;
+	border-color: transparent transparent transparent black;
+}
+
+
+.base-node:hover .hover-over-text{
+	visibility: visible;
+}
diff --git a/source/components/model/edges/edgeDefinition.tsx b/source/components/model/edges/edgeDefinition.tsx
index 46ef54b..6295976 100644
--- a/source/components/model/edges/edgeDefinition.tsx
+++ b/source/components/model/edges/edgeDefinition.tsx
@@ -49,7 +49,7 @@ function BodyEdgeCompontent(props: React.PropsWithoutRef<BodyEdgeComponentProps>
       }}
       className="nodrag nopan"
       >
-      {props.label}
+      {props.id}
       </div>
     </EdgeLabelRenderer>
     </>
diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphTransformer.ts
index 01580b3..63955e8 100644
--- a/source/components/model/graphTransformer.ts
+++ b/source/components/model/graphTransformer.ts
@@ -35,8 +35,6 @@ export function transformToVisualizationGraph(dataflowGraph: Graph): Visualizati
                         target: targetNodeId,
                         id: `${sourceNodeId}-${targetNodeId}-${linkEdgeType}`,
                         label: linkEdgeType,
-                        //animated: true,
-                        //style: { stroke: '#000' },
                         data: { label: linkEdgeType, edgeType: linkEdgeType }
                     }
                 visualizationGraph.edges.push(newEdge)
diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index 7f6cb7b..3ba1daf 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -15,6 +15,7 @@ export function BodyNodeComponent(props: React.PropsWithoutRef<BodyNodeComponent
   return (
     <HandleNodeComponent>
       <div className = {props.className}>
+        <span className='hover-over-text'>{props.data.label}</span>
         <label htmlFor="text">{props.data.label}</label>
       </div>
     </HandleNodeComponent>
@@ -22,17 +23,17 @@ export function BodyNodeComponent(props: React.PropsWithoutRef<BodyNodeComponent
 }
 
 export const VariableDefinitionNode: React.FC<NodeComponentProps> = ({ data }) => {
-  return <BodyNodeComponent data={data} className='variable-definition-node'/>
+  return <BodyNodeComponent data={data} className='variable-definition-node base-node'/>
 }
 
 export const UseNode: React.FC<NodeComponentProps> = ({ data }) => {
-  return <BodyNodeComponent data={data} className='use-node'/>
+  return <BodyNodeComponent data={data} className='use-node base-node'/>
 }
 
 export const FunctionCallNode: React.FC<NodeComponentProps> = ({ data }) => {
-  return <BodyNodeComponent data={data} className='function-call-node'/>
+  return <BodyNodeComponent data={data} className='function-call-node base-node'/>
 }
 
 export const ExitPointNode: React.FC<NodeComponentProps> = ({ data }) => {
-  return <BodyNodeComponent data={data} className='exit-point-node'/>
+  return <BodyNodeComponent data={data} className='exit-point-node base-node'/>
 }
\ No newline at end of file
diff --git a/source/index.tsx b/source/index.tsx
index 07fe538..154fe52 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -48,10 +48,10 @@ document.body.appendChild(main);
 const root = createRoot(main);
 
 root.render(
-   <MainContainerComponent initialize={() => { console.log('Hey') }}>
-      <ReactFlowProvider>
+  <MainContainerComponent initialize={() => { console.log('Hey') }}>
+    <ReactFlowProvider>
         <LayoutFlow graph={graph}/>
-      </ReactFlowProvider>
-   </MainContainerComponent>
+    </ReactFlowProvider>
+  </MainContainerComponent>
 );
 

From b160c493ca973404357c616ddd91fd935ac5818d Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Thu, 11 Apr 2024 11:22:02 +0200
Subject: [PATCH 10/75] feat: add id to hoverover tooltip of node

---
 css/main.css                                     | 2 +-
 source/components/graphComponent.tsx             | 2 +-
 source/components/model/graphTransformer.ts      | 2 +-
 source/components/model/nodes/nodeDefinition.tsx | 5 ++++-
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/css/main.css b/css/main.css
index 97f6b39..f2ca147 100644
--- a/css/main.css
+++ b/css/main.css
@@ -66,7 +66,7 @@ body {
 	visibility: hidden;
   	background-color: black;
   	color: #fff;
-  	text-align: center;
+  	text-align: left;
   	padding: 5px 0;
   	border-radius: 6px;
  
diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 77631e9..a291870 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -70,7 +70,7 @@ const elkOptions: LayoutOptions = {
    return {
        nodes: layoutedGraph.children?.map(node => ({
          ...node,
-         data: { label: node.labels?.[0]?.text },
+         data: { label: node.labels?.[0]?.text, id: node.id },
          // React Flow expects a position property on the node instead of `x`
          // and `y` fields.
          position: { x: node.x ?? 0, y: node.y ?? 0 },
diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphTransformer.ts
index 63955e8..dfd9a85 100644
--- a/source/components/model/graphTransformer.ts
+++ b/source/components/model/graphTransformer.ts
@@ -16,7 +16,7 @@ export function transformToVisualizationGraph(dataflowGraph: Graph): Visualizati
         /* position will be set by the layout later */
         const newNode: Node = {
             id: nodeId, 
-            data: { label: nodeInfo.name }, 
+            data: { label: nodeInfo.name}, 
             position: { x: 0, y: 0 }, 
             connectable: false, 
             dragging: true, 
diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index 3ba1daf..924f363 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -15,7 +15,10 @@ export function BodyNodeComponent(props: React.PropsWithoutRef<BodyNodeComponent
   return (
     <HandleNodeComponent>
       <div className = {props.className}>
-        <span className='hover-over-text'>{props.data.label}</span>
+        <span className='hover-over-text'>
+          {props.data.label}<br/>
+          {props.data.id}
+          </span>
         <label htmlFor="text">{props.data.label}</label>
       </div>
     </HandleNodeComponent>

From d3d06e0576a7eeff3b1d6623cd8e4cbd529d7f61 Mon Sep 17 00:00:00 2001
From: Core5563 <140061253+Core5563@users.noreply.github.com>
Date: Sun, 14 Apr 2024 10:23:21 +0200
Subject: [PATCH 11/75] Update source/components/model/edges/edgeDefinition.tsx

Co-authored-by: Florian Sihler <florian.sihler@uni-ulm.de>
---
 .../components/model/edges/edgeDefinition.tsx | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/source/components/model/edges/edgeDefinition.tsx b/source/components/model/edges/edgeDefinition.tsx
index 6295976..54e5aff 100644
--- a/source/components/model/edges/edgeDefinition.tsx
+++ b/source/components/model/edges/edgeDefinition.tsx
@@ -1,21 +1,22 @@
 import { getStraightPath, BaseEdge, EdgeLabelRenderer, MarkerType, getMarkerEnd } from "reactflow";
 
 
-export function edgeTagMapper(edgeTag:string):string{
-  switch(edgeTag){
-    case 'reads': return 'readsEdge'
-    case 'defined-by': return 'definedByEdge'
-    case 'same-read-read': return 'sameReadReadEdge'
-    case 'same-def-def': return 'sameDefDefEdge'
-    case 'calls': return 'callsEdge'
-    case 'returns': return 'returnsEdge'
-    case 'defines-on-call': return 'definesOnCallEdge'
-    case 'defined-by-on-call': return 'definedByOnCallEdge'
-    case 'argument': return 'argumentEdge'
-    case 'side-effect-on-call': return 'sideEffectOnCallEdge'
-    case 'relates': return 'relatesEdge'
-  }
-  return ''
+const edgeTagMap = {
+  'reads':               'readsEdge',
+  'defined-by':          'definedByEdge',
+  'same-read-read':      'sameReadReadEdge',
+  'same-def-def':        'sameDefDefEdge',
+  'calls':               'callsEdge',
+  'returns':             'returnsEdge',
+  'defines-on-call':     'definesOnCallEdge',
+  'defined-by-on-call':  'definedByOnCallEdge',
+  'argument':            'argumentEdge',
+  'side-effect-on-call': 'sideEffectOnCallEdge',
+  'relates':             'relatesEdge'
+};
+
+function edgeTagMapper(edgeTag: string): string {
+  return edgeTagMap[edgeTag] ?? '';
 }
 
 interface BodyEdgeComponentProps {

From 77003f736c032da972a626399dae7b2d1a8326fc Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Sun, 14 Apr 2024 10:30:15 +0200
Subject: [PATCH 12/75] refactor: added missing type for index of edgeTagMapper

---
 source/components/model/edges/edgeDefinition.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/source/components/model/edges/edgeDefinition.tsx b/source/components/model/edges/edgeDefinition.tsx
index 54e5aff..cec4d2b 100644
--- a/source/components/model/edges/edgeDefinition.tsx
+++ b/source/components/model/edges/edgeDefinition.tsx
@@ -1,7 +1,7 @@
 import { getStraightPath, BaseEdge, EdgeLabelRenderer, MarkerType, getMarkerEnd } from "reactflow";
 
 
-const edgeTagMap = {
+const edgeTagMap:{[index: string]:string} = {
   'reads':               'readsEdge',
   'defined-by':          'definedByEdge',
   'same-read-read':      'sameReadReadEdge',
@@ -15,7 +15,7 @@ const edgeTagMap = {
   'relates':             'relatesEdge'
 };
 
-function edgeTagMapper(edgeTag: string): string {
+export function edgeTagMapper(edgeTag: string): string {
   return edgeTagMap[edgeTag] ?? '';
 }
 

From 241a55c396ded1d2a2dcf60caca19e4250cd7792 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Sun, 14 Apr 2024 10:36:17 +0200
Subject: [PATCH 13/75] fix: wrong labels for edges corrected

---
 .../components/model/edges/edgeDefinition.tsx | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/source/components/model/edges/edgeDefinition.tsx b/source/components/model/edges/edgeDefinition.tsx
index cec4d2b..79de6ff 100644
--- a/source/components/model/edges/edgeDefinition.tsx
+++ b/source/components/model/edges/edgeDefinition.tsx
@@ -90,7 +90,7 @@ export function DefinedByEdge({ id, sourceX, sourceY, targetX, targetY} : {
     targetX = {targetX} 
     targetY = {targetY}
     edgeStyle = {{stroke: 'black'}}
-    label = 'reads'
+    label = 'defined-by'
     markerEnd = {getMarkerEnd(MarkerType.Arrow)}
   />
 }
@@ -109,7 +109,7 @@ export function SameReadReadEdge({ id, sourceX, sourceY, targetX, targetY} : {
     targetX = {targetX} 
     targetY = {targetY}
     edgeStyle = {{stroke: 'grey', strokeDasharray: '2,5'}}
-    label = 'reads'
+    label = 'same-read-read'
     markerEnd = {getMarkerEnd(MarkerType.Arrow)}
   />
 }
@@ -128,7 +128,7 @@ export function SameDefDefEdge({ id, sourceX, sourceY, targetX, targetY} : {
     targetX = {targetX} 
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue', strokeDasharray: '2,7'}}
-    label = 'reads'
+    label = 'same-def-def'
     markerEnd = {getMarkerEnd(MarkerType.Arrow)}
   />
 }
@@ -147,7 +147,7 @@ export function CallsEdge({ id, sourceX, sourceY, targetX, targetY} : {
     targetX = {targetX} 
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue', strokeDasharray: '3,7'}}
-    label = 'reads'
+    label = 'calls'
     markerEnd = {getMarkerEnd(MarkerType.Arrow)}
   />
 }
@@ -166,7 +166,7 @@ export function ReturnsEdge({ id, sourceX, sourceY, targetX, targetY} : {
     targetX = {targetX} 
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue', strokeDasharray: '4,7'}}
-    label = 'reads'
+    label = 'returns'
     markerEnd = {getMarkerEnd(MarkerType.Arrow)}
   />
 }
@@ -185,7 +185,7 @@ export function DefinesOnCallEdge({ id, sourceX, sourceY, targetX, targetY} : {
     targetX = {targetX} 
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue', strokeDasharray: '5,7'}}
-    label = 'reads'
+    label = 'defines-on-call'
     markerEnd = {getMarkerEnd(MarkerType.Arrow)}
   />
 }
@@ -204,7 +204,7 @@ export function DefinedByOnCallEdge({ id, sourceX, sourceY, targetX, targetY} :
     targetX = {targetX} 
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue', strokeDasharray: '6,7'}}
-    label = 'reads'
+    label = 'defined-by-on-call'
     markerEnd = {getMarkerEnd(MarkerType.Arrow)}
   />
 }
@@ -223,7 +223,7 @@ export function ArgumentEdge({ id, sourceX, sourceY, targetX, targetY} : {
     targetX = {targetX} 
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue', strokeDasharray: '7,7'}}
-    label = 'reads'
+    label = 'argument'
     markerEnd = {getMarkerEnd(MarkerType.Arrow)}
   />
 }
@@ -242,7 +242,7 @@ export function SideEffectOnCallEdge({ id, sourceX, sourceY, targetX, targetY} :
     targetX = {targetX} 
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue'}}
-    label = 'reads'
+    label = 'side-effect-on-call'
     markerEnd = {getMarkerEnd(MarkerType.Arrow)}
   />
 }
@@ -261,7 +261,7 @@ export function RelatesEdge({ id, sourceX, sourceY, targetX, targetY} : {
     targetX = {targetX} 
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue', strokeDasharray: '2,3'}}
-    label = 'reads'
+    label = 'relates'
     markerEnd = {getMarkerEnd(MarkerType.Arrow)}
   />
 }
\ No newline at end of file

From fa2bb5d09458c737ddb7f1ce63eb6cef5935a9f6 Mon Sep 17 00:00:00 2001
From: Florian Sihler <florian.sihler@uni-ulm.de>
Date: Sun, 21 Apr 2024 22:51:37 +0200
Subject: [PATCH 14/75] feat: graph alternative

---
 source/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/source/index.tsx b/source/index.tsx
index 154fe52..6f0ecf2 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -6,6 +6,8 @@ import { ReactFlowProvider } from 'reactflow';
 import { LayoutFlow } from './components/graphComponent';
 
 
+const otherGraph =  {"rootVertices":["0","2","5"],"vertexInformation":[["0",{"tag":"use","id":"0","name":"a","environment":{"current":{"name":".GlobalEnv","id":"760","memory":[["return",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"return","nodeId":"built-in"}]],["cat",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"cat","nodeId":"built-in"}]],["print",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"print","nodeId":"built-in"}]],["source",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"source","nodeId":"built-in"}]]]},"level":0},"when":"maybe"}],["2",{"tag":"use","id":"2","name":"unnamed-argument-2","environment":{"current":{"name":".GlobalEnv","id":"761","memory":[["return",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"return","nodeId":"built-in"}]],["cat",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"cat","nodeId":"built-in"}]],["print",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"print","nodeId":"built-in"}]],["source",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"source","nodeId":"built-in"}]]]},"level":0},"when":"always"}],["5",{"tag":"use","id":"5","name":"unnamed-argument-5","environment":{"current":{"name":".GlobalEnv","id":"763","memory":[["return",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"return","nodeId":"built-in"}]],["cat",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"cat","nodeId":"built-in"}]],["print",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"print","nodeId":"built-in"}]],["source",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"source","nodeId":"built-in"}]]]},"level":0},"when":"always"}]],"edgeInformation":[["0",[["2",{"types":["reads"],"attribute":"always"}],["5",{"types":["reads"],"attribute":"always"}]]]]};
+
 const flowrGraph: Graph = {
   rootVertices: new Set(['1', '2']),
   vertexInformation: new Map([

From 6d45761bb91139dac6e0879df1a0ede859a5a2d5 Mon Sep 17 00:00:00 2001
From: Florian Sihler <florian.sihler@uni-ulm.de>
Date: Sun, 21 Apr 2024 23:08:25 +0200
Subject: [PATCH 15/75] feat: basics for edge markers

---
 source/components/graphComponent.tsx          |  20 +++-
 .../components/model/edges/edgeDefinition.tsx | 113 +++++++++---------
 2 files changed, 74 insertions(+), 59 deletions(-)

diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index a291870..fc01ebc 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -27,7 +27,6 @@ import ReactFlow, {
 import 'reactflow/dist/style.css';
 import { VisualizationGraph } from './model/graph';
 import { ExitPointNode, FunctionCallNode, UseNode, VariableDefinitionNode } from './model/nodes/nodeDefinition';
-import { bold } from '@eagleoutice/flowr';
 import CustomEdge, { ArgumentEdge, CallsEdge, DefinedByEdge, DefinedByOnCallEdge, DefinesOnCallEdge, RelatesEdge, ReturnsEdge, SameDefDefEdge, SameReadReadEdge, SideEffectOnCallEdge } from './model/edges/edgeDefinition';
 import ReadsEdge from './model/edges/edgeDefinition';
 
@@ -152,10 +151,26 @@ const elkOptions: LayoutOptions = {
     definedByOnCallEdge: DefinedByOnCallEdge,
     argumentEdge: ArgumentEdge,
     sideEffectOnCallEdge: SideEffectOnCallEdge,
-    relatesEdge: RelatesEdge 
+    relatesEdge: RelatesEdge
   }),[])
 
    return (
+    <>
+      <svg style={{ position: 'absolute', top: 0, left: 0 }}>
+        <defs>
+        <marker
+          id="triangle"
+          viewBox="0 0 10 10"
+          refX="1"
+          refY="5"
+          markerUnits="strokeWidth"
+          markerWidth="10"
+          markerHeight="10"
+          orient="auto">
+          <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00" />
+    </marker>
+        </defs>
+      </svg>
      <ReactFlow
        nodes={nodes}
        edges={edges}
@@ -170,6 +185,7 @@ const elkOptions: LayoutOptions = {
       <MiniMap />
       <Controls />
      </ReactFlow>
+     </>
    );
  }
 
diff --git a/source/components/model/edges/edgeDefinition.tsx b/source/components/model/edges/edgeDefinition.tsx
index 79de6ff..0a81482 100644
--- a/source/components/model/edges/edgeDefinition.tsx
+++ b/source/components/model/edges/edgeDefinition.tsx
@@ -27,7 +27,8 @@ interface BodyEdgeComponentProps {
   readonly targetY: number,
   readonly edgeStyle: React.CSSProperties,
   readonly label: string,
-  readonly markerEnd: string
+  readonly arrowStart?: boolean;
+  readonly arrowEnd?: boolean;
 }
 
 function BodyEdgeCompontent(props: React.PropsWithoutRef<BodyEdgeComponentProps>){
@@ -39,7 +40,7 @@ function BodyEdgeCompontent(props: React.PropsWithoutRef<BodyEdgeComponentProps>
   })
   return (
     <>
-    <BaseEdge id={props.id} path={edgePath} style={props.edgeStyle} />
+    <BaseEdge id={props.id} path={edgePath} style={props.edgeStyle} markerEnd={props.arrowEnd ? 'url(#triangle)' : undefined} markerStart={props.arrowStart ? 'url(#triangle)' : undefined} />
     <EdgeLabelRenderer>
       <div
       style={{
@@ -64,15 +65,15 @@ export default function ReadsEdge({ id, sourceX, sourceY, targetX, targetY} : {
   targetX: number,
   targetY: number
   }) {
-  return <BodyEdgeCompontent 
-    id = {id} 
+  return <BodyEdgeCompontent
+    id = {id}
     sourceX = {sourceX}
-    sourceY = {sourceY} 
-    targetX = {targetX} 
+    sourceY = {sourceY}
+    targetX = {targetX}
     targetY = {targetY}
     edgeStyle = {{stroke: 'black', strokeDasharray: '5,5'}}
     label = 'reads'
-    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+    arrowEnd = {true}
   />
 }
 
@@ -83,15 +84,15 @@ export function DefinedByEdge({ id, sourceX, sourceY, targetX, targetY} : {
   targetX: number,
   targetY: number
   }) {
-  return <BodyEdgeCompontent 
-    id = {id} 
+  return <BodyEdgeCompontent
+    id = {id}
     sourceX = {sourceX}
-    sourceY = {sourceY} 
-    targetX = {targetX} 
+    sourceY = {sourceY}
+    targetX = {targetX}
     targetY = {targetY}
     edgeStyle = {{stroke: 'black'}}
     label = 'defined-by'
-    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+    arrowEnd = {true}
   />
 }
 
@@ -102,15 +103,14 @@ export function SameReadReadEdge({ id, sourceX, sourceY, targetX, targetY} : {
   targetX: number,
   targetY: number
   }) {
-  return <BodyEdgeCompontent 
-    id = {id} 
+  return <BodyEdgeCompontent
+    id = {id}
     sourceX = {sourceX}
-    sourceY = {sourceY} 
-    targetX = {targetX} 
+    sourceY = {sourceY}
+    targetX = {targetX}
     targetY = {targetY}
     edgeStyle = {{stroke: 'grey', strokeDasharray: '2,5'}}
     label = 'same-read-read'
-    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
   />
 }
 
@@ -121,15 +121,14 @@ export function SameDefDefEdge({ id, sourceX, sourceY, targetX, targetY} : {
   targetX: number,
   targetY: number
   }) {
-  return <BodyEdgeCompontent 
-    id = {id} 
+  return <BodyEdgeCompontent
+    id = {id}
     sourceX = {sourceX}
-    sourceY = {sourceY} 
-    targetX = {targetX} 
+    sourceY = {sourceY}
+    targetX = {targetX}
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue', strokeDasharray: '2,7'}}
     label = 'same-def-def'
-    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
   />
 }
 
@@ -140,15 +139,15 @@ export function CallsEdge({ id, sourceX, sourceY, targetX, targetY} : {
   targetX: number,
   targetY: number
   }) {
-  return <BodyEdgeCompontent 
-    id = {id} 
+  return <BodyEdgeCompontent
+    id = {id}
     sourceX = {sourceX}
-    sourceY = {sourceY} 
-    targetX = {targetX} 
+    sourceY = {sourceY}
+    targetX = {targetX}
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue', strokeDasharray: '3,7'}}
     label = 'calls'
-    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+
   />
 }
 
@@ -159,15 +158,15 @@ export function ReturnsEdge({ id, sourceX, sourceY, targetX, targetY} : {
   targetX: number,
   targetY: number
   }) {
-  return <BodyEdgeCompontent 
-    id = {id} 
+  return <BodyEdgeCompontent
+    id = {id}
     sourceX = {sourceX}
-    sourceY = {sourceY} 
-    targetX = {targetX} 
+    sourceY = {sourceY}
+    targetX = {targetX}
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue', strokeDasharray: '4,7'}}
     label = 'returns'
-    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+
   />
 }
 
@@ -178,15 +177,15 @@ export function DefinesOnCallEdge({ id, sourceX, sourceY, targetX, targetY} : {
   targetX: number,
   targetY: number
   }) {
-  return <BodyEdgeCompontent 
-    id = {id} 
+  return <BodyEdgeCompontent
+    id = {id}
     sourceX = {sourceX}
-    sourceY = {sourceY} 
-    targetX = {targetX} 
+    sourceY = {sourceY}
+    targetX = {targetX}
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue', strokeDasharray: '5,7'}}
     label = 'defines-on-call'
-    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+
   />
 }
 
@@ -197,15 +196,15 @@ export function DefinedByOnCallEdge({ id, sourceX, sourceY, targetX, targetY} :
   targetX: number,
   targetY: number
   }) {
-  return <BodyEdgeCompontent 
-    id = {id} 
+  return <BodyEdgeCompontent
+    id = {id}
     sourceX = {sourceX}
-    sourceY = {sourceY} 
-    targetX = {targetX} 
+    sourceY = {sourceY}
+    targetX = {targetX}
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue', strokeDasharray: '6,7'}}
     label = 'defined-by-on-call'
-    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+
   />
 }
 
@@ -216,15 +215,15 @@ export function ArgumentEdge({ id, sourceX, sourceY, targetX, targetY} : {
   targetX: number,
   targetY: number
   }) {
-  return <BodyEdgeCompontent 
-    id = {id} 
+  return <BodyEdgeCompontent
+    id = {id}
     sourceX = {sourceX}
-    sourceY = {sourceY} 
-    targetX = {targetX} 
+    sourceY = {sourceY}
+    targetX = {targetX}
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue', strokeDasharray: '7,7'}}
     label = 'argument'
-    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+
   />
 }
 
@@ -235,15 +234,15 @@ export function SideEffectOnCallEdge({ id, sourceX, sourceY, targetX, targetY} :
   targetX: number,
   targetY: number
   }) {
-  return <BodyEdgeCompontent 
-    id = {id} 
+  return <BodyEdgeCompontent
+    id = {id}
     sourceX = {sourceX}
-    sourceY = {sourceY} 
-    targetX = {targetX} 
+    sourceY = {sourceY}
+    targetX = {targetX}
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue'}}
     label = 'side-effect-on-call'
-    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+
   />
 }
 
@@ -254,14 +253,14 @@ export function RelatesEdge({ id, sourceX, sourceY, targetX, targetY} : {
   targetX: number,
   targetY: number
   }) {
-  return <BodyEdgeCompontent 
-    id = {id} 
+  return <BodyEdgeCompontent
+    id = {id}
     sourceX = {sourceX}
-    sourceY = {sourceY} 
-    targetX = {targetX} 
+    sourceY = {sourceY}
+    targetX = {targetX}
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue', strokeDasharray: '2,3'}}
     label = 'relates'
-    markerEnd = {getMarkerEnd(MarkerType.Arrow)}
+
   />
 }
\ No newline at end of file

From 658d1f2f27bec3566914a32fea4879f258880eb8 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Fri, 26 Apr 2024 12:11:31 +0200
Subject: [PATCH 16/75] feat: add different graph type as a step towards
 dataflow graph

---
 source/components/graphComponent.tsx        |  2 +-
 source/components/model/graphTransformer.ts | 61 +++++++++++++++++++++
 source/index.tsx                            | 13 ++++-
 3 files changed, 73 insertions(+), 3 deletions(-)

diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index fc01ebc..676d3e3 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -167,7 +167,7 @@ const elkOptions: LayoutOptions = {
           markerWidth="10"
           markerHeight="10"
           orient="auto">
-          <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00" />
+          <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
     </marker>
         </defs>
       </svg>
diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphTransformer.ts
index dfd9a85..cf38772 100644
--- a/source/components/model/graphTransformer.ts
+++ b/source/components/model/graphTransformer.ts
@@ -7,6 +7,24 @@ export interface Graph {
     edgeInformation: Map<string, Map<string, {types: {[key: string]: string}}>>
 }
 
+export interface OtherGraph{
+    "rootVertices": string[]
+    "vertexInformation": ([string, VertexInfo])[]
+    "edgeInformation": ([string, ([string, EdgeInfo])[]])[]
+  }
+  
+  export interface VertexInfo{
+    "tag": string,
+    "id":string,
+    "name":string,
+    "environment"?:any,
+    "when":string
+  }
+  
+  export interface EdgeInfo{
+    "types":string[],
+    "attribute": string
+  }
 
 export function transformToVisualizationGraph(dataflowGraph: Graph): VisualizationGraph {
 
@@ -45,6 +63,49 @@ export function transformToVisualizationGraph(dataflowGraph: Graph): Visualizati
     return visualizationGraph
 }
 
+export function transformToVisualizationGraphForOtherGraph(dataflowGraph: OtherGraph): VisualizationGraph {
+
+    const visualizationGraph: VisualizationGraph = {nodes:[], edges: []}
+
+    for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation.entries()){
+        /* position will be set by the layout later */
+
+        const nodeInfoInfo = nodeInfo[1]
+        const newNode: Node = {
+            id: String(nodeId), 
+            data: { label: nodeInfoInfo.name}, 
+            position: { x: 0, y: 0 }, 
+            connectable: false, 
+            dragging: true, 
+            selectable: true, 
+            type: nodeTagMapper(nodeInfoInfo.tag) 
+        }
+        visualizationGraph.nodes.push(newNode)
+    }
+
+    for( let [sourceNodeId, listOfConnectedNodes] of dataflowGraph.edgeInformation.entries()){
+        const listOfConnectedNodes2 = listOfConnectedNodes[1]
+        for(let [targetNodeId, targetNodeInfo] of listOfConnectedNodes2){
+            for( let linkEdgeType of targetNodeInfo.types){
+                const newEdge: Edge =
+                    {
+                        source: String(sourceNodeId),
+                        target: String(targetNodeId),
+                        id: `${sourceNodeId}-${targetNodeId}-${linkEdgeType}`,
+                        label: linkEdgeType,
+                        data: { label: linkEdgeType, edgeType: linkEdgeType }
+                    }
+                visualizationGraph.edges.push(newEdge)
+            }
+        }
+    }
+
+    return visualizationGraph
+}
+
+
+
+
 function nodeTagMapper(type: string):string{
     switch(type){
         case 'use': return 'useNode'
diff --git a/source/index.tsx b/source/index.tsx
index 6f0ecf2..acfe503 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -1,12 +1,18 @@
 import { createRoot } from 'react-dom/client';
 import '../css/main.css';
 import { MainContainerComponent } from './components/mainContainerComponent';
-import { Graph, transformToVisualizationGraph } from './components/model/graphTransformer';
+import { Graph, OtherGraph, transformToVisualizationGraph, transformToVisualizationGraphForOtherGraph } from './components/model/graphTransformer';
 import { ReactFlowProvider } from 'reactflow';
 import { LayoutFlow } from './components/graphComponent';
 
 
-const otherGraph =  {"rootVertices":["0","2","5"],"vertexInformation":[["0",{"tag":"use","id":"0","name":"a","environment":{"current":{"name":".GlobalEnv","id":"760","memory":[["return",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"return","nodeId":"built-in"}]],["cat",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"cat","nodeId":"built-in"}]],["print",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"print","nodeId":"built-in"}]],["source",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"source","nodeId":"built-in"}]]]},"level":0},"when":"maybe"}],["2",{"tag":"use","id":"2","name":"unnamed-argument-2","environment":{"current":{"name":".GlobalEnv","id":"761","memory":[["return",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"return","nodeId":"built-in"}]],["cat",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"cat","nodeId":"built-in"}]],["print",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"print","nodeId":"built-in"}]],["source",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"source","nodeId":"built-in"}]]]},"level":0},"when":"always"}],["5",{"tag":"use","id":"5","name":"unnamed-argument-5","environment":{"current":{"name":".GlobalEnv","id":"763","memory":[["return",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"return","nodeId":"built-in"}]],["cat",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"cat","nodeId":"built-in"}]],["print",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"print","nodeId":"built-in"}]],["source",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"source","nodeId":"built-in"}]]]},"level":0},"when":"always"}]],"edgeInformation":[["0",[["2",{"types":["reads"],"attribute":"always"}],["5",{"types":["reads"],"attribute":"always"}]]]]};
+const otherGraph:OtherGraph =  {
+  "rootVertices":["0","2","5"],
+  "vertexInformation":[
+    ["0",{"tag":"use","id":"0","name":"a","environment":{"current":{"name":".GlobalEnv","id":"760","memory":[["return",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"return","nodeId":"built-in"}]],["cat",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"cat","nodeId":"built-in"}]],["print",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"print","nodeId":"built-in"}]],["source",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"source","nodeId":"built-in"}]]]},"level":0},"when":"maybe"}],
+    ["2",{"tag":"use","id":"2","name":"unnamed-argument-2","environment":{"current":{"name":".GlobalEnv","id":"761","memory":[["return",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"return","nodeId":"built-in"}]],["cat",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"cat","nodeId":"built-in"}]],["print",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"print","nodeId":"built-in"}]],["source",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"source","nodeId":"built-in"}]]]},"level":0},"when":"always"}],
+    ["5",{"tag":"use","id":"5","name":"unnamed-argument-5","environment":{"current":{"name":".GlobalEnv","id":"763","memory":[["return",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"return","nodeId":"built-in"}]],["cat",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"cat","nodeId":"built-in"}]],["print",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"print","nodeId":"built-in"}]],["source",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"source","nodeId":"built-in"}]]]},"level":0},"when":"always"}]],
+    "edgeInformation":[["0",[["2",{"types":["readsMMMMMMMMMMMMM"],"attribute":"always"}],["5",{"types":["readsMMMMMMMMMMMMMM"],"attribute":"always"}]]]]};
 
 const flowrGraph: Graph = {
   rootVertices: new Set(['1', '2']),
@@ -42,7 +48,10 @@ const flowrGraph: Graph = {
 
 // borderline graph :D
 let graph = transformToVisualizationGraph(flowrGraph)
+let graphFromOtherGraph = transformToVisualizationGraphForOtherGraph(otherGraph)
 
+console.log(graph)
+console.log(graphFromOtherGraph)
 
 const main = document.createElement('div');
 main.id = 'main';

From c331334fd401857b8599882386733d5f86f165a5 Mon Sep 17 00:00:00 2001
From: Florian Sihler <florian.sihler@uni-ulm.de>
Date: Wed, 1 May 2024 10:51:03 +0200
Subject: [PATCH 17/75] fix: graph-iter for other graph

---
 source/components/model/graphTransformer.ts | 43 +++++++++++----------
 source/index.tsx                            | 10 ++---
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphTransformer.ts
index cf38772..23f4eea 100644
--- a/source/components/model/graphTransformer.ts
+++ b/source/components/model/graphTransformer.ts
@@ -9,10 +9,10 @@ export interface Graph {
 
 export interface OtherGraph{
     "rootVertices": string[]
-    "vertexInformation": ([string, VertexInfo])[]
-    "edgeInformation": ([string, ([string, EdgeInfo])[]])[]
+    "vertexInformation": [string, VertexInfo][]
+    "edgeInformation": [string, [string, EdgeInfo][]][]
   }
-  
+
   export interface VertexInfo{
     "tag": string,
     "id":string,
@@ -20,7 +20,7 @@ export interface OtherGraph{
     "environment"?:any,
     "when":string
   }
-  
+
   export interface EdgeInfo{
     "types":string[],
     "attribute": string
@@ -31,15 +31,17 @@ export function transformToVisualizationGraph(dataflowGraph: Graph): Visualizati
     const visualizationGraph: VisualizationGraph = {nodes:[], edges: []}
 
     for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation.entries()){
+        console.log(nodeId, nodeInfo);
+
         /* position will be set by the layout later */
         const newNode: Node = {
-            id: nodeId, 
-            data: { label: nodeInfo.name}, 
-            position: { x: 0, y: 0 }, 
-            connectable: false, 
-            dragging: true, 
-            selectable: true, 
-            type: nodeTagMapper(nodeInfo.tag) 
+            id: nodeId,
+            data: { label: nodeInfo.name},
+            position: { x: 0, y: 0 },
+            connectable: false,
+            dragging: true,
+            selectable: true,
+            type: nodeTagMapper(nodeInfo.tag)
         }
         visualizationGraph.nodes.push(newNode)
     }
@@ -67,18 +69,19 @@ export function transformToVisualizationGraphForOtherGraph(dataflowGraph: OtherG
 
     const visualizationGraph: VisualizationGraph = {nodes:[], edges: []}
 
-    for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation.entries()){
+    for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation){
         /* position will be set by the layout later */
+        console.log(nodeId);
 
-        const nodeInfoInfo = nodeInfo[1]
+        const nodeInfoInfo = nodeInfo
         const newNode: Node = {
-            id: String(nodeId), 
-            data: { label: nodeInfoInfo.name}, 
-            position: { x: 0, y: 0 }, 
-            connectable: false, 
-            dragging: true, 
-            selectable: true, 
-            type: nodeTagMapper(nodeInfoInfo.tag) 
+            id: String(nodeId),
+            data: { label: nodeInfoInfo.name},
+            position: { x: 0, y: 0 },
+            connectable: false,
+            dragging: true,
+            selectable: true,
+            type: nodeTagMapper(nodeInfoInfo.tag)
         }
         visualizationGraph.nodes.push(newNode)
     }
diff --git a/source/index.tsx b/source/index.tsx
index acfe503..df3fb39 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -1,7 +1,7 @@
 import { createRoot } from 'react-dom/client';
 import '../css/main.css';
 import { MainContainerComponent } from './components/mainContainerComponent';
-import { Graph, OtherGraph, transformToVisualizationGraph, transformToVisualizationGraphForOtherGraph } from './components/model/graphTransformer';
+import { Graph, OtherGraph, transformToVisualizationGraphForOtherGraph } from './components/model/graphTransformer';
 import { ReactFlowProvider } from 'reactflow';
 import { LayoutFlow } from './components/graphComponent';
 
@@ -12,7 +12,7 @@ const otherGraph:OtherGraph =  {
     ["0",{"tag":"use","id":"0","name":"a","environment":{"current":{"name":".GlobalEnv","id":"760","memory":[["return",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"return","nodeId":"built-in"}]],["cat",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"cat","nodeId":"built-in"}]],["print",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"print","nodeId":"built-in"}]],["source",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"source","nodeId":"built-in"}]]]},"level":0},"when":"maybe"}],
     ["2",{"tag":"use","id":"2","name":"unnamed-argument-2","environment":{"current":{"name":".GlobalEnv","id":"761","memory":[["return",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"return","nodeId":"built-in"}]],["cat",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"cat","nodeId":"built-in"}]],["print",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"print","nodeId":"built-in"}]],["source",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"source","nodeId":"built-in"}]]]},"level":0},"when":"always"}],
     ["5",{"tag":"use","id":"5","name":"unnamed-argument-5","environment":{"current":{"name":".GlobalEnv","id":"763","memory":[["return",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"return","nodeId":"built-in"}]],["cat",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"cat","nodeId":"built-in"}]],["print",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"print","nodeId":"built-in"}]],["source",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"source","nodeId":"built-in"}]]]},"level":0},"when":"always"}]],
-    "edgeInformation":[["0",[["2",{"types":["readsMMMMMMMMMMMMM"],"attribute":"always"}],["5",{"types":["readsMMMMMMMMMMMMMM"],"attribute":"always"}]]]]};
+    "edgeInformation":[["0",[["2",{"types":["reads"],"attribute":"always"}],["5",{"types":["reads"],"attribute":"always"}]]]]};
 
 const flowrGraph: Graph = {
   rootVertices: new Set(['1', '2']),
@@ -47,10 +47,10 @@ const flowrGraph: Graph = {
 }
 
 // borderline graph :D
-let graph = transformToVisualizationGraph(flowrGraph)
+// let graph = transformToVisualizationGraph(flowrGraph)
 let graphFromOtherGraph = transformToVisualizationGraphForOtherGraph(otherGraph)
 
-console.log(graph)
+// console.log(graph)
 console.log(graphFromOtherGraph)
 
 const main = document.createElement('div');
@@ -61,7 +61,7 @@ const root = createRoot(main);
 root.render(
   <MainContainerComponent initialize={() => { console.log('Hey') }}>
     <ReactFlowProvider>
-        <LayoutFlow graph={graph}/>
+        <LayoutFlow graph={graphFromOtherGraph}/>
     </ReactFlowProvider>
   </MainContainerComponent>
 );

From 4dca2f39236f23f7f001c31cf127c85ee57cbcc4 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Fri, 3 May 2024 12:18:01 +0200
Subject: [PATCH 18/75] feat: show when and id in tooltip in same line

---
 css/main.css                                  |  5 +++++
 source/components/graphComponent.tsx          | 19 +++++++++++++++----
 .../components/model/edges/edgeDefinition.tsx |  2 +-
 source/components/model/graphTransformer.ts   |  3 +--
 .../components/model/nodes/nodeDefinition.tsx |  5 +++--
 source/index.tsx                              |  2 +-
 6 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/css/main.css b/css/main.css
index f2ca147..70a36c1 100644
--- a/css/main.css
+++ b/css/main.css
@@ -77,8 +77,13 @@ body {
 	border-width: 5px;
 	border-style: solid;
 	border-color: transparent transparent transparent black;
+	
+	white-space: nowrap;
 }
 
+.hover-over-text .one-line {
+	display: inline-block
+}
 
 .base-node:hover .hover-over-text{
 	visibility: visible;
diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 676d3e3..f7b14b6 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -27,7 +27,7 @@ import ReactFlow, {
 import 'reactflow/dist/style.css';
 import { VisualizationGraph } from './model/graph';
 import { ExitPointNode, FunctionCallNode, UseNode, VariableDefinitionNode } from './model/nodes/nodeDefinition';
-import CustomEdge, { ArgumentEdge, CallsEdge, DefinedByEdge, DefinedByOnCallEdge, DefinesOnCallEdge, RelatesEdge, ReturnsEdge, SameDefDefEdge, SameReadReadEdge, SideEffectOnCallEdge } from './model/edges/edgeDefinition';
+import CustomEdge, { ArgumentEdge, CallsEdge, DefinedByEdge, DefinedByOnCallEdge, DefinesOnCallEdge, RelatesEdge, ReturnsEdge, SameDefDefEdge, SameReadReadEdge, SideEffectOnCallEdge, edgeTagMapper } from './model/edges/edgeDefinition';
 import ReadsEdge from './model/edges/edgeDefinition';
 
 
@@ -69,12 +69,12 @@ const elkOptions: LayoutOptions = {
    return {
        nodes: layoutedGraph.children?.map(node => ({
          ...node,
-         data: { label: node.labels?.[0]?.text, id: node.id },
+         data: { label: node.labels?.[0]?.text, id: node.id, when:(node as ExtendedElkNode).data.when},
          // React Flow expects a position property on the node instead of `x`
          // and `y` fields.
          position: { x: node.x ?? 0, y: node.y ?? 0 },
        })) ?? [],
-       edges: (layoutedGraph.edges ?? []).map(e => {
+       edges: (layoutedGraph.edges as ExtendedExtendedEdge[] ?? []).map(e => {
          return {
            id: e.id,
            source: e.sources[0],
@@ -85,7 +85,7 @@ const elkOptions: LayoutOptions = {
            //animated: true,
            //style: { stroke: '#000' },
            //arrowHeadType: 'arrowclosed',
-           type: 'readsEdge',
+           type: edgeTagMapper(e.edgeType),
            markerEnd: {type: MarkerType.Arrow},
            data: { label: e.id }
          };
@@ -93,6 +93,17 @@ const elkOptions: LayoutOptions = {
      }
  }
 
+ interface ExtendedExtendedEdge extends ElkExtendedEdge{
+  edgeType: string
+ }
+
+ interface ExtendedElkNode extends ElkNode{
+  data:{
+    label:string, 
+    when:string
+  }
+ }
+
  function convertToExtendedEdges(edges: Edge[]): ElkExtendedEdge[] {
    return edges.map(edge => ({
      id: edge.id,
diff --git a/source/components/model/edges/edgeDefinition.tsx b/source/components/model/edges/edgeDefinition.tsx
index 0a81482..2ef1f74 100644
--- a/source/components/model/edges/edgeDefinition.tsx
+++ b/source/components/model/edges/edgeDefinition.tsx
@@ -51,7 +51,7 @@ function BodyEdgeCompontent(props: React.PropsWithoutRef<BodyEdgeComponentProps>
       }}
       className="nodrag nopan"
       >
-      {props.id}
+      {props.label}
       </div>
     </EdgeLabelRenderer>
     </>
diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphTransformer.ts
index 23f4eea..a81b566 100644
--- a/source/components/model/graphTransformer.ts
+++ b/source/components/model/graphTransformer.ts
@@ -71,12 +71,11 @@ export function transformToVisualizationGraphForOtherGraph(dataflowGraph: OtherG
 
     for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation){
         /* position will be set by the layout later */
-        console.log(nodeId);
 
         const nodeInfoInfo = nodeInfo
         const newNode: Node = {
             id: String(nodeId),
-            data: { label: nodeInfoInfo.name},
+            data: { label: nodeInfoInfo.name, when: nodeInfoInfo.when},
             position: { x: 0, y: 0 },
             connectable: false,
             dragging: true,
diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index 924f363..6757004 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -16,8 +16,9 @@ export function BodyNodeComponent(props: React.PropsWithoutRef<BodyNodeComponent
     <HandleNodeComponent>
       <div className = {props.className}>
         <span className='hover-over-text'>
-          {props.data.label}<br/>
-          {props.data.id}
+          <div className='one-line'>name:{props.data.label}</div><br/>
+          <div className='one-line'>id:{props.data.id}</div><br/>
+          <div className='one-line'>when:{props.data.when}</div><br/>
           </span>
         <label htmlFor="text">{props.data.label}</label>
       </div>
diff --git a/source/index.tsx b/source/index.tsx
index df3fb39..a0f9a06 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -51,7 +51,7 @@ const flowrGraph: Graph = {
 let graphFromOtherGraph = transformToVisualizationGraphForOtherGraph(otherGraph)
 
 // console.log(graph)
-console.log(graphFromOtherGraph)
+//console.log(graphFromOtherGraph)
 
 const main = document.createElement('div');
 main.id = 'main';

From 9a1e3f6380b14638ca50150655f973acef42b555 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Fri, 3 May 2024 12:25:15 +0200
Subject: [PATCH 19/75] refactor: change switch case into map for nodeTagMapper

---
 source/components/model/graphTransformer.ts | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphTransformer.ts
index a81b566..e241753 100644
--- a/source/components/model/graphTransformer.ts
+++ b/source/components/model/graphTransformer.ts
@@ -109,12 +109,13 @@ export function transformToVisualizationGraphForOtherGraph(dataflowGraph: OtherG
 
 
 function nodeTagMapper(type: string):string{
-    switch(type){
-        case 'use': return 'useNode'
-        case 'variable-definition': return 'variableDefinitionNode'
-        case 'function-call': return 'functionCallNode'
-        case 'function-definition': return 'variableDefinitionNode' //for now definition nodes look the same (function as well as variable)
-        case 'exit-point': return 'exitPointNode'
-    }
-    return ''
+    return nodeTagMap[type] ?? ''
+}
+
+const nodeTagMap:{[index: string]:string} = {
+    'use':                  'useNode',
+    'variable-definition':  'variableDefinitionNode',
+    'function-call':        'functionCallNode',
+    'function-definition':  'variableDefinitionNode', //for now definition nodes look the same (function as well as variable)
+    'exit-point':           'exitPointNode'
 }
\ No newline at end of file

From b365ff01c1860cadb8fd7ebba0a17cae95096f45 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Fri, 3 May 2024 12:33:27 +0200
Subject: [PATCH 20/75] feat: edges which should have end arrows now actually
 do

---
 source/components/graphComponent.tsx             |  2 --
 source/components/model/edges/edgeDefinition.tsx | 11 +++++------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index f7b14b6..e61dcd8 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -19,7 +19,6 @@ import ReactFlow, {
   getStraightPath,
   BaseEdge,
   EdgeLabelRenderer,
-  getMarkerEnd,
   MarkerType,
   EdgeProps,
 } from 'reactflow';
@@ -86,7 +85,6 @@ const elkOptions: LayoutOptions = {
            //style: { stroke: '#000' },
            //arrowHeadType: 'arrowclosed',
            type: edgeTagMapper(e.edgeType),
-           markerEnd: {type: MarkerType.Arrow},
            data: { label: e.id }
          };
        })
diff --git a/source/components/model/edges/edgeDefinition.tsx b/source/components/model/edges/edgeDefinition.tsx
index 2ef1f74..fb13cc4 100644
--- a/source/components/model/edges/edgeDefinition.tsx
+++ b/source/components/model/edges/edgeDefinition.tsx
@@ -1,5 +1,4 @@
-import { getStraightPath, BaseEdge, EdgeLabelRenderer, MarkerType, getMarkerEnd } from "reactflow";
-
+import { getStraightPath, BaseEdge, EdgeLabelRenderer} from "reactflow";
 
 const edgeTagMap:{[index: string]:string} = {
   'reads':               'readsEdge',
@@ -147,7 +146,7 @@ export function CallsEdge({ id, sourceX, sourceY, targetX, targetY} : {
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue', strokeDasharray: '3,7'}}
     label = 'calls'
-
+    arrowEnd = {true}
   />
 }
 
@@ -166,7 +165,7 @@ export function ReturnsEdge({ id, sourceX, sourceY, targetX, targetY} : {
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue', strokeDasharray: '4,7'}}
     label = 'returns'
-
+    arrowEnd = {true}
   />
 }
 
@@ -185,7 +184,7 @@ export function DefinesOnCallEdge({ id, sourceX, sourceY, targetX, targetY} : {
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue', strokeDasharray: '5,7'}}
     label = 'defines-on-call'
-
+    arrowEnd = {true}
   />
 }
 
@@ -204,7 +203,7 @@ export function DefinedByOnCallEdge({ id, sourceX, sourceY, targetX, targetY} :
     targetY = {targetY}
     edgeStyle = {{stroke: 'blue', strokeDasharray: '6,7'}}
     label = 'defined-by-on-call'
-
+    arrowEnd = {true}
   />
 }
 

From 72488c42539762b76a9fbaedd20b8ed397656670 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Sun, 12 May 2024 16:02:47 +0200
Subject: [PATCH 21/75] refactor: create HoverOverComponent for better
 readability

---
 .../components/model/nodes/nodeDefinition.tsx | 35 ++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index 6757004..c26bcc9 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -3,15 +3,15 @@ import { HandleNodeComponent } from "./handleNodeComponent"
 import React from "react";
 
 interface BodyNodeComponentProps{
-  className: string
-  data: NodeProps['data']
+  readonly className: string
+  readonly data: NodeProps['data']
 }
 
 interface NodeComponentProps {
   readonly data: NodeProps['data']
 }
 
-export function BodyNodeComponent(props: React.PropsWithoutRef<BodyNodeComponentProps>){
+/* export function BodyNodeComponent(props: React.PropsWithoutRef<BodyNodeComponentProps>){
   return (
     <HandleNodeComponent>
       <div className = {props.className}>
@@ -19,12 +19,39 @@ export function BodyNodeComponent(props: React.PropsWithoutRef<BodyNodeComponent
           <div className='one-line'>name:{props.data.label}</div><br/>
           <div className='one-line'>id:{props.data.id}</div><br/>
           <div className='one-line'>when:{props.data.when}</div><br/>
-          </span>
+        </span>
         <label htmlFor="text">{props.data.label}</label>
       </div>
     </HandleNodeComponent>
   )
 }
+*/
+
+const BodyNodeComponent: React.FC<BodyNodeComponentProps> = (props) => {
+  return (
+    <HandleNodeComponent>
+      <div className = {props.className}>
+        <HoverOverComponent name={props.data.label} id={props.data.id} when= {props.data.when}/>
+      <label htmlFor="text">{props.data.label}</label>
+      </div>
+    </HandleNodeComponent>
+  )
+}
+
+interface HoverOverComponentProps{
+  readonly name: string,
+  readonly id: string,
+  readonly when: string
+}
+export const HoverOverComponent: React.FC<HoverOverComponentProps> = (props) => {
+  return (
+    <span className='hover-over-text'>
+      <div className='one-line'>name:{props.name}</div><br/>
+      <div className='one-line'>id:{props.id}</div><br/>
+      <div className='one-line'>when:{props.when}</div><br/>
+    </span>
+  )
+}
 
 export const VariableDefinitionNode: React.FC<NodeComponentProps> = ({ data }) => {
   return <BodyNodeComponent data={data} className='variable-definition-node base-node'/>

From 11c97034244d1b3b5a160cd2db3f8fd9b26edc57 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Sun, 12 May 2024 16:10:10 +0200
Subject: [PATCH 22/75] refactor: remove commented out code

---
 source/components/model/nodes/nodeDefinition.tsx | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index c26bcc9..1f18914 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -11,22 +11,6 @@ interface NodeComponentProps {
   readonly data: NodeProps['data']
 }
 
-/* export function BodyNodeComponent(props: React.PropsWithoutRef<BodyNodeComponentProps>){
-  return (
-    <HandleNodeComponent>
-      <div className = {props.className}>
-        <span className='hover-over-text'>
-          <div className='one-line'>name:{props.data.label}</div><br/>
-          <div className='one-line'>id:{props.data.id}</div><br/>
-          <div className='one-line'>when:{props.data.when}</div><br/>
-        </span>
-        <label htmlFor="text">{props.data.label}</label>
-      </div>
-    </HandleNodeComponent>
-  )
-}
-*/
-
 const BodyNodeComponent: React.FC<BodyNodeComponentProps> = (props) => {
   return (
     <HandleNodeComponent>

From f563618003c41e096e0402b26faa8bb9432245d6 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Sun, 12 May 2024 16:18:33 +0200
Subject: [PATCH 23/75] lint: wrong indentation in BodyNodeComponent corrected

---
 source/components/model/nodes/nodeDefinition.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index 1f18914..d28b850 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -16,7 +16,7 @@ const BodyNodeComponent: React.FC<BodyNodeComponentProps> = (props) => {
     <HandleNodeComponent>
       <div className = {props.className}>
         <HoverOverComponent name={props.data.label} id={props.data.id} when= {props.data.when}/>
-      <label htmlFor="text">{props.data.label}</label>
+        <label htmlFor="text">{props.data.label}</label>
       </div>
     </HandleNodeComponent>
   )

From 65fee456a916acb4bc6d1ee00fafe6ef021d0be2 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Tue, 21 May 2024 20:48:31 +0200
Subject: [PATCH 24/75] feat: create Websocket class for communication

---
 .../network/visualizerWebsocketClient.ts      | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 source/components/network/visualizerWebsocketClient.ts

diff --git a/source/components/network/visualizerWebsocketClient.ts b/source/components/network/visualizerWebsocketClient.ts
new file mode 100644
index 0000000..4a4f140
--- /dev/null
+++ b/source/components/network/visualizerWebsocketClient.ts
@@ -0,0 +1,33 @@
+
+import { FileAnalysisRequestMessage, FileAnalysisResponseMessageJson } from '@eagleoutice/flowr/cli/repl/server/messages/analysis';
+
+export class VisualizerWebsocketClient{
+  endpoint:string
+  websocket:WebSocket
+  id:number
+
+  constructor(endpoint:string){
+    this.endpoint = endpoint
+    this.websocket = new WebSocket(endpoint)
+    this.id = 0
+    this.websocket.onmessage = function(event) {
+      const parsedJson = JSON.parse(event.data)
+      if(parsedJson.type === 'response-file-analysis'){
+        const requestResponse: FileAnalysisResponseMessageJson = parsedJson
+        //TODO: do smth with results
+      }
+    }
+  }
+
+  sendAnalysisRequestJSON(rCode:string){
+    const msg: FileAnalysisRequestMessage = {
+      id: this.id.toString(),
+      type:     'request-file-analysis',
+      content:  rCode,
+      filename: 'request.R',
+    }
+    this.id++
+    this.websocket.send(JSON.stringify(msg));
+  }
+  
+}
\ No newline at end of file

From f362afa80a630a5acc302f98f306a2c8b33927e9 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Thu, 23 May 2024 14:47:21 +0200
Subject: [PATCH 25/75] refactor: better structure of edge components

---
 source/components/graphComponent.tsx          |  14 +-
 .../components/model/edges/argumentEdge.tsx   |  20 ++
 source/components/model/edges/callsEdge.tsx   |  20 ++
 .../components/model/edges/definedByEdge.tsx  |  20 ++
 .../model/edges/definedByOnCallEdge.tsx       |  20 ++
 .../model/edges/definesOnCallEdge.tsx         |  20 ++
 source/components/model/edges/edgeBase.tsx    |  58 ++++
 .../components/model/edges/edgeDefinition.tsx | 265 ------------------
 source/components/model/edges/readsEdge.tsx   |  20 ++
 source/components/model/edges/relatesEdge.tsx |  20 ++
 source/components/model/edges/returnsEdge.tsx |  20 ++
 .../components/model/edges/sameDefDefEdge.tsx |  19 ++
 .../model/edges/sameReadReadEdge.tsx          |  19 ++
 .../model/edges/sideEffectOnCallEdge.tsx      |  20 ++
 .../network/visualizerWebsocketClient.ts      |   8 +-
 source/index.tsx                              |  16 +-
 16 files changed, 305 insertions(+), 274 deletions(-)
 create mode 100644 source/components/model/edges/argumentEdge.tsx
 create mode 100644 source/components/model/edges/callsEdge.tsx
 create mode 100644 source/components/model/edges/definedByEdge.tsx
 create mode 100644 source/components/model/edges/definedByOnCallEdge.tsx
 create mode 100644 source/components/model/edges/definesOnCallEdge.tsx
 create mode 100644 source/components/model/edges/edgeBase.tsx
 delete mode 100644 source/components/model/edges/edgeDefinition.tsx
 create mode 100644 source/components/model/edges/readsEdge.tsx
 create mode 100644 source/components/model/edges/relatesEdge.tsx
 create mode 100644 source/components/model/edges/returnsEdge.tsx
 create mode 100644 source/components/model/edges/sameDefDefEdge.tsx
 create mode 100644 source/components/model/edges/sameReadReadEdge.tsx
 create mode 100644 source/components/model/edges/sideEffectOnCallEdge.tsx

diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index e61dcd8..f0b9f47 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -26,8 +26,18 @@ import ReactFlow, {
 import 'reactflow/dist/style.css';
 import { VisualizationGraph } from './model/graph';
 import { ExitPointNode, FunctionCallNode, UseNode, VariableDefinitionNode } from './model/nodes/nodeDefinition';
-import CustomEdge, { ArgumentEdge, CallsEdge, DefinedByEdge, DefinedByOnCallEdge, DefinesOnCallEdge, RelatesEdge, ReturnsEdge, SameDefDefEdge, SameReadReadEdge, SideEffectOnCallEdge, edgeTagMapper } from './model/edges/edgeDefinition';
-import ReadsEdge from './model/edges/edgeDefinition';
+import ReadsEdge from './model/edges/readsEdge';
+import { edgeTagMapper } from './model/edges/edgeBase';
+import { ArgumentEdge } from './model/edges/argumentEdge';
+import { CallsEdge } from './model/edges/callsEdge';
+import { DefinedByEdge } from './model/edges/definedByEdge';
+import { DefinedByOnCallEdge } from './model/edges/definedByOnCallEdge';
+import { DefinesOnCallEdge } from './model/edges/definesOnCallEdge';
+import { RelatesEdge } from './model/edges/relatesEdge';
+import { ReturnsEdge } from './model/edges/returnsEdge';
+import { SameDefDefEdge } from './model/edges/sameDefDefEdge';
+import { SameReadReadEdge } from './model/edges/sameReadReadEdge';
+import { SideEffectOnCallEdge } from './model/edges/sideEffectOnCallEdge';
 
 
 
diff --git a/source/components/model/edges/argumentEdge.tsx b/source/components/model/edges/argumentEdge.tsx
new file mode 100644
index 0000000..d201450
--- /dev/null
+++ b/source/components/model/edges/argumentEdge.tsx
@@ -0,0 +1,20 @@
+import { BodyEdgeCompontent } from "./edgeBase"
+
+export function ArgumentEdge({ id, sourceX, sourceY, targetX, targetY} : {
+    id: string,
+    sourceX: number,
+    sourceY: number,
+    targetX: number,
+    targetY: number
+    }) {
+    return <BodyEdgeCompontent
+      id = {id}
+      sourceX = {sourceX}
+      sourceY = {sourceY}
+      targetX = {targetX}
+      targetY = {targetY}
+      edgeStyle = {{stroke: 'blue', strokeDasharray: '7,7'}}
+      label = 'argument'
+  
+    />
+  }
\ No newline at end of file
diff --git a/source/components/model/edges/callsEdge.tsx b/source/components/model/edges/callsEdge.tsx
new file mode 100644
index 0000000..aeff5b9
--- /dev/null
+++ b/source/components/model/edges/callsEdge.tsx
@@ -0,0 +1,20 @@
+import { BodyEdgeCompontent } from "./edgeBase"
+
+export function CallsEdge({ id, sourceX, sourceY, targetX, targetY} : {
+    id: string,
+    sourceX: number,
+    sourceY: number,
+    targetX: number,
+    targetY: number
+    }) {
+    return <BodyEdgeCompontent
+      id = {id}
+      sourceX = {sourceX}
+      sourceY = {sourceY}
+      targetX = {targetX}
+      targetY = {targetY}
+      edgeStyle = {{stroke: 'blue', strokeDasharray: '3,7'}}
+      label = 'calls'
+      arrowEnd = {true}
+    />
+  }
\ No newline at end of file
diff --git a/source/components/model/edges/definedByEdge.tsx b/source/components/model/edges/definedByEdge.tsx
new file mode 100644
index 0000000..b010f30
--- /dev/null
+++ b/source/components/model/edges/definedByEdge.tsx
@@ -0,0 +1,20 @@
+import { BodyEdgeCompontent } from "./edgeBase"
+
+export function DefinedByEdge({ id, sourceX, sourceY, targetX, targetY} : {
+    id: string,
+    sourceX: number,
+    sourceY: number,
+    targetX: number,
+    targetY: number
+    }) {
+    return <BodyEdgeCompontent
+      id = {id}
+      sourceX = {sourceX}
+      sourceY = {sourceY}
+      targetX = {targetX}
+      targetY = {targetY}
+      edgeStyle = {{stroke: 'black'}}
+      label = 'defined-by'
+      arrowEnd = {true}
+    />
+  }
\ No newline at end of file
diff --git a/source/components/model/edges/definedByOnCallEdge.tsx b/source/components/model/edges/definedByOnCallEdge.tsx
new file mode 100644
index 0000000..4e8dda2
--- /dev/null
+++ b/source/components/model/edges/definedByOnCallEdge.tsx
@@ -0,0 +1,20 @@
+import { BodyEdgeCompontent } from "./edgeBase"
+
+export function DefinedByOnCallEdge({ id, sourceX, sourceY, targetX, targetY} : {
+    id: string,
+    sourceX: number,
+    sourceY: number,
+    targetX: number,
+    targetY: number
+    }) {
+    return <BodyEdgeCompontent
+      id = {id}
+      sourceX = {sourceX}
+      sourceY = {sourceY}
+      targetX = {targetX}
+      targetY = {targetY}
+      edgeStyle = {{stroke: 'blue', strokeDasharray: '6,7'}}
+      label = 'defined-by-on-call'
+      arrowEnd = {true}
+    />
+  }
\ No newline at end of file
diff --git a/source/components/model/edges/definesOnCallEdge.tsx b/source/components/model/edges/definesOnCallEdge.tsx
new file mode 100644
index 0000000..606cfcb
--- /dev/null
+++ b/source/components/model/edges/definesOnCallEdge.tsx
@@ -0,0 +1,20 @@
+import { BodyEdgeCompontent } from "./edgeBase"
+
+export function DefinesOnCallEdge({ id, sourceX, sourceY, targetX, targetY} : {
+    id: string,
+    sourceX: number,
+    sourceY: number,
+    targetX: number,
+    targetY: number
+    }) {
+    return <BodyEdgeCompontent
+      id = {id}
+      sourceX = {sourceX}
+      sourceY = {sourceY}
+      targetX = {targetX}
+      targetY = {targetY}
+      edgeStyle = {{stroke: 'blue', strokeDasharray: '5,7'}}
+      label = 'defines-on-call'
+      arrowEnd = {true}
+    />
+  }
\ No newline at end of file
diff --git a/source/components/model/edges/edgeBase.tsx b/source/components/model/edges/edgeBase.tsx
new file mode 100644
index 0000000..37c53a6
--- /dev/null
+++ b/source/components/model/edges/edgeBase.tsx
@@ -0,0 +1,58 @@
+import { getStraightPath, BaseEdge, EdgeLabelRenderer} from "reactflow";
+
+const edgeTagMap:{[index: string]:string} = {
+  'reads':               'readsEdge',
+  'defined-by':          'definedByEdge',
+  'same-read-read':      'sameReadReadEdge',
+  'same-def-def':        'sameDefDefEdge',
+  'calls':               'callsEdge',
+  'returns':             'returnsEdge',
+  'defines-on-call':     'definesOnCallEdge',
+  'defined-by-on-call':  'definedByOnCallEdge',
+  'argument':            'argumentEdge',
+  'side-effect-on-call': 'sideEffectOnCallEdge',
+  'relates':             'relatesEdge'
+};
+
+export function edgeTagMapper(edgeTag: string): string {
+  return edgeTagMap[edgeTag] ?? '';
+}
+
+interface BodyEdgeComponentProps {
+  readonly id: string,
+  readonly sourceX: number,
+  readonly sourceY: number,
+  readonly targetX: number,
+  readonly targetY: number,
+  readonly edgeStyle: React.CSSProperties,
+  readonly label: string,
+  readonly arrowStart?: boolean;
+  readonly arrowEnd?: boolean;
+}
+
+export function BodyEdgeCompontent(props: React.PropsWithoutRef<BodyEdgeComponentProps>){
+  const [edgePath, labelX, labelY] = getStraightPath({
+    sourceX: props.sourceX ,
+    sourceY: props.sourceY,
+    targetX: props.targetX,
+    targetY: props.targetY,
+  })
+  return (
+    <>
+    <BaseEdge id={props.id} path={edgePath} style={props.edgeStyle} markerEnd={props.arrowEnd ? 'url(#triangle)' : undefined} markerStart={props.arrowStart ? 'url(#triangle)' : undefined} />
+    <EdgeLabelRenderer>
+      <div
+      style={{
+        position: 'absolute',
+        transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+        fontSize: 12,
+        pointerEvents: 'all',
+      }}
+      className="nodrag nopan"
+      >
+      {props.label}
+      </div>
+    </EdgeLabelRenderer>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/source/components/model/edges/edgeDefinition.tsx b/source/components/model/edges/edgeDefinition.tsx
deleted file mode 100644
index fb13cc4..0000000
--- a/source/components/model/edges/edgeDefinition.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-import { getStraightPath, BaseEdge, EdgeLabelRenderer} from "reactflow";
-
-const edgeTagMap:{[index: string]:string} = {
-  'reads':               'readsEdge',
-  'defined-by':          'definedByEdge',
-  'same-read-read':      'sameReadReadEdge',
-  'same-def-def':        'sameDefDefEdge',
-  'calls':               'callsEdge',
-  'returns':             'returnsEdge',
-  'defines-on-call':     'definesOnCallEdge',
-  'defined-by-on-call':  'definedByOnCallEdge',
-  'argument':            'argumentEdge',
-  'side-effect-on-call': 'sideEffectOnCallEdge',
-  'relates':             'relatesEdge'
-};
-
-export function edgeTagMapper(edgeTag: string): string {
-  return edgeTagMap[edgeTag] ?? '';
-}
-
-interface BodyEdgeComponentProps {
-  readonly id: string,
-  readonly sourceX: number,
-  readonly sourceY: number,
-  readonly targetX: number,
-  readonly targetY: number,
-  readonly edgeStyle: React.CSSProperties,
-  readonly label: string,
-  readonly arrowStart?: boolean;
-  readonly arrowEnd?: boolean;
-}
-
-function BodyEdgeCompontent(props: React.PropsWithoutRef<BodyEdgeComponentProps>){
-  const [edgePath, labelX, labelY] = getStraightPath({
-    sourceX: props.sourceX ,
-    sourceY: props.sourceY,
-    targetX: props.targetX,
-    targetY: props.targetY,
-  })
-  return (
-    <>
-    <BaseEdge id={props.id} path={edgePath} style={props.edgeStyle} markerEnd={props.arrowEnd ? 'url(#triangle)' : undefined} markerStart={props.arrowStart ? 'url(#triangle)' : undefined} />
-    <EdgeLabelRenderer>
-      <div
-      style={{
-        position: 'absolute',
-        transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-        fontSize: 12,
-        pointerEvents: 'all',
-      }}
-      className="nodrag nopan"
-      >
-      {props.label}
-      </div>
-    </EdgeLabelRenderer>
-    </>
-  );
-}
-
-export default function ReadsEdge({ id, sourceX, sourceY, targetX, targetY} : {
-  id: string,
-  sourceX: number,
-  sourceY: number,
-  targetX: number,
-  targetY: number
-  }) {
-  return <BodyEdgeCompontent
-    id = {id}
-    sourceX = {sourceX}
-    sourceY = {sourceY}
-    targetX = {targetX}
-    targetY = {targetY}
-    edgeStyle = {{stroke: 'black', strokeDasharray: '5,5'}}
-    label = 'reads'
-    arrowEnd = {true}
-  />
-}
-
-export function DefinedByEdge({ id, sourceX, sourceY, targetX, targetY} : {
-  id: string,
-  sourceX: number,
-  sourceY: number,
-  targetX: number,
-  targetY: number
-  }) {
-  return <BodyEdgeCompontent
-    id = {id}
-    sourceX = {sourceX}
-    sourceY = {sourceY}
-    targetX = {targetX}
-    targetY = {targetY}
-    edgeStyle = {{stroke: 'black'}}
-    label = 'defined-by'
-    arrowEnd = {true}
-  />
-}
-
-export function SameReadReadEdge({ id, sourceX, sourceY, targetX, targetY} : {
-  id: string,
-  sourceX: number,
-  sourceY: number,
-  targetX: number,
-  targetY: number
-  }) {
-  return <BodyEdgeCompontent
-    id = {id}
-    sourceX = {sourceX}
-    sourceY = {sourceY}
-    targetX = {targetX}
-    targetY = {targetY}
-    edgeStyle = {{stroke: 'grey', strokeDasharray: '2,5'}}
-    label = 'same-read-read'
-  />
-}
-
-export function SameDefDefEdge({ id, sourceX, sourceY, targetX, targetY} : {
-  id: string,
-  sourceX: number,
-  sourceY: number,
-  targetX: number,
-  targetY: number
-  }) {
-  return <BodyEdgeCompontent
-    id = {id}
-    sourceX = {sourceX}
-    sourceY = {sourceY}
-    targetX = {targetX}
-    targetY = {targetY}
-    edgeStyle = {{stroke: 'blue', strokeDasharray: '2,7'}}
-    label = 'same-def-def'
-  />
-}
-
-export function CallsEdge({ id, sourceX, sourceY, targetX, targetY} : {
-  id: string,
-  sourceX: number,
-  sourceY: number,
-  targetX: number,
-  targetY: number
-  }) {
-  return <BodyEdgeCompontent
-    id = {id}
-    sourceX = {sourceX}
-    sourceY = {sourceY}
-    targetX = {targetX}
-    targetY = {targetY}
-    edgeStyle = {{stroke: 'blue', strokeDasharray: '3,7'}}
-    label = 'calls'
-    arrowEnd = {true}
-  />
-}
-
-export function ReturnsEdge({ id, sourceX, sourceY, targetX, targetY} : {
-  id: string,
-  sourceX: number,
-  sourceY: number,
-  targetX: number,
-  targetY: number
-  }) {
-  return <BodyEdgeCompontent
-    id = {id}
-    sourceX = {sourceX}
-    sourceY = {sourceY}
-    targetX = {targetX}
-    targetY = {targetY}
-    edgeStyle = {{stroke: 'blue', strokeDasharray: '4,7'}}
-    label = 'returns'
-    arrowEnd = {true}
-  />
-}
-
-export function DefinesOnCallEdge({ id, sourceX, sourceY, targetX, targetY} : {
-  id: string,
-  sourceX: number,
-  sourceY: number,
-  targetX: number,
-  targetY: number
-  }) {
-  return <BodyEdgeCompontent
-    id = {id}
-    sourceX = {sourceX}
-    sourceY = {sourceY}
-    targetX = {targetX}
-    targetY = {targetY}
-    edgeStyle = {{stroke: 'blue', strokeDasharray: '5,7'}}
-    label = 'defines-on-call'
-    arrowEnd = {true}
-  />
-}
-
-export function DefinedByOnCallEdge({ id, sourceX, sourceY, targetX, targetY} : {
-  id: string,
-  sourceX: number,
-  sourceY: number,
-  targetX: number,
-  targetY: number
-  }) {
-  return <BodyEdgeCompontent
-    id = {id}
-    sourceX = {sourceX}
-    sourceY = {sourceY}
-    targetX = {targetX}
-    targetY = {targetY}
-    edgeStyle = {{stroke: 'blue', strokeDasharray: '6,7'}}
-    label = 'defined-by-on-call'
-    arrowEnd = {true}
-  />
-}
-
-export function ArgumentEdge({ id, sourceX, sourceY, targetX, targetY} : {
-  id: string,
-  sourceX: number,
-  sourceY: number,
-  targetX: number,
-  targetY: number
-  }) {
-  return <BodyEdgeCompontent
-    id = {id}
-    sourceX = {sourceX}
-    sourceY = {sourceY}
-    targetX = {targetX}
-    targetY = {targetY}
-    edgeStyle = {{stroke: 'blue', strokeDasharray: '7,7'}}
-    label = 'argument'
-
-  />
-}
-
-export function SideEffectOnCallEdge({ id, sourceX, sourceY, targetX, targetY} : {
-  id: string,
-  sourceX: number,
-  sourceY: number,
-  targetX: number,
-  targetY: number
-  }) {
-  return <BodyEdgeCompontent
-    id = {id}
-    sourceX = {sourceX}
-    sourceY = {sourceY}
-    targetX = {targetX}
-    targetY = {targetY}
-    edgeStyle = {{stroke: 'blue'}}
-    label = 'side-effect-on-call'
-
-  />
-}
-
-export function RelatesEdge({ id, sourceX, sourceY, targetX, targetY} : {
-  id: string,
-  sourceX: number,
-  sourceY: number,
-  targetX: number,
-  targetY: number
-  }) {
-  return <BodyEdgeCompontent
-    id = {id}
-    sourceX = {sourceX}
-    sourceY = {sourceY}
-    targetX = {targetX}
-    targetY = {targetY}
-    edgeStyle = {{stroke: 'blue', strokeDasharray: '2,3'}}
-    label = 'relates'
-
-  />
-}
\ No newline at end of file
diff --git a/source/components/model/edges/readsEdge.tsx b/source/components/model/edges/readsEdge.tsx
new file mode 100644
index 0000000..590d567
--- /dev/null
+++ b/source/components/model/edges/readsEdge.tsx
@@ -0,0 +1,20 @@
+import { BodyEdgeCompontent } from "./edgeBase"
+
+export default function ReadsEdge({ id, sourceX, sourceY, targetX, targetY} : {
+    id: string,
+    sourceX: number,
+    sourceY: number,
+    targetX: number,
+    targetY: number
+    }) {
+    return <BodyEdgeCompontent
+      id = {id}
+      sourceX = {sourceX}
+      sourceY = {sourceY}
+      targetX = {targetX}
+      targetY = {targetY}
+      edgeStyle = {{stroke: 'black', strokeDasharray: '5,5'}}
+      label = 'reads'
+      arrowEnd = {true}
+    />
+  }
\ No newline at end of file
diff --git a/source/components/model/edges/relatesEdge.tsx b/source/components/model/edges/relatesEdge.tsx
new file mode 100644
index 0000000..cc21a57
--- /dev/null
+++ b/source/components/model/edges/relatesEdge.tsx
@@ -0,0 +1,20 @@
+import { BodyEdgeCompontent } from "./edgeBase"
+
+export function RelatesEdge({ id, sourceX, sourceY, targetX, targetY} : {
+    id: string,
+    sourceX: number,
+    sourceY: number,
+    targetX: number,
+    targetY: number
+    }) {
+    return <BodyEdgeCompontent
+      id = {id}
+      sourceX = {sourceX}
+      sourceY = {sourceY}
+      targetX = {targetX}
+      targetY = {targetY}
+      edgeStyle = {{stroke: 'blue', strokeDasharray: '2,3'}}
+      label = 'relates'
+  
+    />
+  }
\ No newline at end of file
diff --git a/source/components/model/edges/returnsEdge.tsx b/source/components/model/edges/returnsEdge.tsx
new file mode 100644
index 0000000..0baf857
--- /dev/null
+++ b/source/components/model/edges/returnsEdge.tsx
@@ -0,0 +1,20 @@
+import { BodyEdgeCompontent } from "./edgeBase"
+
+export function ReturnsEdge({ id, sourceX, sourceY, targetX, targetY} : {
+    id: string,
+    sourceX: number,
+    sourceY: number,
+    targetX: number,
+    targetY: number
+    }) {
+    return <BodyEdgeCompontent
+      id = {id}
+      sourceX = {sourceX}
+      sourceY = {sourceY}
+      targetX = {targetX}
+      targetY = {targetY}
+      edgeStyle = {{stroke: 'blue', strokeDasharray: '4,7'}}
+      label = 'returns'
+      arrowEnd = {true}
+    />
+  }
\ No newline at end of file
diff --git a/source/components/model/edges/sameDefDefEdge.tsx b/source/components/model/edges/sameDefDefEdge.tsx
new file mode 100644
index 0000000..0fbeab8
--- /dev/null
+++ b/source/components/model/edges/sameDefDefEdge.tsx
@@ -0,0 +1,19 @@
+import { BodyEdgeCompontent } from "./edgeBase"
+
+export function SameDefDefEdge({ id, sourceX, sourceY, targetX, targetY} : {
+    id: string,
+    sourceX: number,
+    sourceY: number,
+    targetX: number,
+    targetY: number
+    }) {
+    return <BodyEdgeCompontent
+      id = {id}
+      sourceX = {sourceX}
+      sourceY = {sourceY}
+      targetX = {targetX}
+      targetY = {targetY}
+      edgeStyle = {{stroke: 'blue', strokeDasharray: '2,7'}}
+      label = 'same-def-def'
+    />
+  }
\ No newline at end of file
diff --git a/source/components/model/edges/sameReadReadEdge.tsx b/source/components/model/edges/sameReadReadEdge.tsx
new file mode 100644
index 0000000..41bc625
--- /dev/null
+++ b/source/components/model/edges/sameReadReadEdge.tsx
@@ -0,0 +1,19 @@
+import { BodyEdgeCompontent } from "./edgeBase"
+
+export function SameReadReadEdge({ id, sourceX, sourceY, targetX, targetY} : {
+    id: string,
+    sourceX: number,
+    sourceY: number,
+    targetX: number,
+    targetY: number
+    }) {
+    return <BodyEdgeCompontent
+      id = {id}
+      sourceX = {sourceX}
+      sourceY = {sourceY}
+      targetX = {targetX}
+      targetY = {targetY}
+      edgeStyle = {{stroke: 'grey', strokeDasharray: '2,5'}}
+      label = 'same-read-read'
+    />
+  }
\ No newline at end of file
diff --git a/source/components/model/edges/sideEffectOnCallEdge.tsx b/source/components/model/edges/sideEffectOnCallEdge.tsx
new file mode 100644
index 0000000..95910d8
--- /dev/null
+++ b/source/components/model/edges/sideEffectOnCallEdge.tsx
@@ -0,0 +1,20 @@
+import { BodyEdgeCompontent } from "./edgeBase"
+
+export function SideEffectOnCallEdge({ id, sourceX, sourceY, targetX, targetY} : {
+    id: string,
+    sourceX: number,
+    sourceY: number,
+    targetX: number,
+    targetY: number
+    }) {
+    return <BodyEdgeCompontent
+      id = {id}
+      sourceX = {sourceX}
+      sourceY = {sourceY}
+      targetX = {targetX}
+      targetY = {targetY}
+      edgeStyle = {{stroke: 'blue'}}
+      label = 'side-effect-on-call'
+  
+    />
+  }
\ No newline at end of file
diff --git a/source/components/network/visualizerWebsocketClient.ts b/source/components/network/visualizerWebsocketClient.ts
index 4a4f140..26fdf4a 100644
--- a/source/components/network/visualizerWebsocketClient.ts
+++ b/source/components/network/visualizerWebsocketClient.ts
@@ -10,16 +10,18 @@ export class VisualizerWebsocketClient{
     this.endpoint = endpoint
     this.websocket = new WebSocket(endpoint)
     this.id = 0
-    this.websocket.onmessage = function(event) {
+    this.websocket.onmessage = (event) => {
       const parsedJson = JSON.parse(event.data)
       if(parsedJson.type === 'response-file-analysis'){
         const requestResponse: FileAnalysisResponseMessageJson = parsedJson
-        //TODO: do smth with results
+        this.onFileAnalysisResponse(requestResponse)
       }
     }
   }
 
-  sendAnalysisRequestJSON(rCode:string){
+  onFileAnalysisResponse(response:FileAnalysisResponseMessageJson){}
+  
+  sendAnalysisRequestJSON(rCode:string):void{
     const msg: FileAnalysisRequestMessage = {
       id: this.id.toString(),
       type:     'request-file-analysis',
diff --git a/source/index.tsx b/source/index.tsx
index a0f9a06..7a499ca 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -4,6 +4,7 @@ import { MainContainerComponent } from './components/mainContainerComponent';
 import { Graph, OtherGraph, transformToVisualizationGraphForOtherGraph } from './components/model/graphTransformer';
 import { ReactFlowProvider } from 'reactflow';
 import { LayoutFlow } from './components/graphComponent';
+import { VisualizerWebsocketClient } from './components/network/visualizerWebsocketClient';
 
 
 const otherGraph:OtherGraph =  {
@@ -46,13 +47,20 @@ const flowrGraph: Graph = {
   ])
 }
 
+try{
+const client = new VisualizerWebsocketClient('ws://127.0.0.1:1042')
+client.onFileAnalysisResponse = (json) => {
+  console.log(json.results.dataflow.graph)
+}
+client.sendAnalysisRequestJSON('x <- 2 * 3; x')
+} catch(e){
+  console.log(e)
+}
+
+
 // borderline graph :D
-// let graph = transformToVisualizationGraph(flowrGraph)
 let graphFromOtherGraph = transformToVisualizationGraphForOtherGraph(otherGraph)
 
-// console.log(graph)
-//console.log(graphFromOtherGraph)
-
 const main = document.createElement('div');
 main.id = 'main';
 document.body.appendChild(main);

From c434ee5766394aa05ebf5d58acfc4be3939b2cc0 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Thu, 23 May 2024 14:54:41 +0200
Subject: [PATCH 26/75] refactor: explicitly state that BodyEdgeComponent is
 Functional Component

---
 source/components/model/edges/edgeBase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/components/model/edges/edgeBase.tsx b/source/components/model/edges/edgeBase.tsx
index 37c53a6..d7436b5 100644
--- a/source/components/model/edges/edgeBase.tsx
+++ b/source/components/model/edges/edgeBase.tsx
@@ -30,7 +30,7 @@ interface BodyEdgeComponentProps {
   readonly arrowEnd?: boolean;
 }
 
-export function BodyEdgeCompontent(props: React.PropsWithoutRef<BodyEdgeComponentProps>){
+export const BodyEdgeCompontent: React.FC<BodyEdgeComponentProps> = (props) => {
   const [edgePath, labelX, labelY] = getStraightPath({
     sourceX: props.sourceX ,
     sourceY: props.sourceY,

From 2ac426783768303b2df31a2aa4edcab3b81716f7 Mon Sep 17 00:00:00 2001
From: EagleoutIce <florian.sihler@uni-ulm.de>
Date: Wed, 12 Jun 2024 10:43:37 +0200
Subject: [PATCH 27/75] refactor: working ws client

---
 .../network/visualizerWebsocketClient.ts         | 16 ++++++++++++----
 source/index.tsx                                 | 11 +++++++----
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/source/components/network/visualizerWebsocketClient.ts b/source/components/network/visualizerWebsocketClient.ts
index 26fdf4a..ff1e700 100644
--- a/source/components/network/visualizerWebsocketClient.ts
+++ b/source/components/network/visualizerWebsocketClient.ts
@@ -1,12 +1,13 @@
 
 import { FileAnalysisRequestMessage, FileAnalysisResponseMessageJson } from '@eagleoutice/flowr/cli/repl/server/messages/analysis';
+import { FlowrHelloResponseMessage } from '@eagleoutice/flowr/cli/repl/server/messages/hello';
 
 export class VisualizerWebsocketClient{
   endpoint:string
   websocket:WebSocket
   id:number
 
-  constructor(endpoint:string){
+  constructor(endpoint: string){
     this.endpoint = endpoint
     this.websocket = new WebSocket(endpoint)
     this.id = 0
@@ -14,14 +15,21 @@ export class VisualizerWebsocketClient{
       const parsedJson = JSON.parse(event.data)
       if(parsedJson.type === 'response-file-analysis'){
         const requestResponse: FileAnalysisResponseMessageJson = parsedJson
-        this.onFileAnalysisResponse(requestResponse)
+        this.onFileAnalysisResponse?.(requestResponse)
+      } else if(parsedJson.type === 'hello') {
+        const requestResponse: FlowrHelloResponseMessage = parsedJson
+        this.onHelloMessage?.(requestResponse)
       }
     }
   }
 
-  onFileAnalysisResponse(response:FileAnalysisResponseMessageJson){}
+  public onFileAnalysisResponse: ((response: FileAnalysisResponseMessageJson) => void) | undefined;
+  
+  public onHelloMessage: ((response:FlowrHelloResponseMessage) => void) | undefined;
   
   sendAnalysisRequestJSON(rCode:string):void{
+    console.log('send request for', rCode);
+    
     const msg: FileAnalysisRequestMessage = {
       id: this.id.toString(),
       type:     'request-file-analysis',
@@ -29,7 +37,7 @@ export class VisualizerWebsocketClient{
       filename: 'request.R',
     }
     this.id++
-    this.websocket.send(JSON.stringify(msg));
+    this.websocket.send(JSON.stringify(msg) + '\n');
   }
   
 }
\ No newline at end of file
diff --git a/source/index.tsx b/source/index.tsx
index 7a499ca..6252a4d 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -6,7 +6,6 @@ import { ReactFlowProvider } from 'reactflow';
 import { LayoutFlow } from './components/graphComponent';
 import { VisualizerWebsocketClient } from './components/network/visualizerWebsocketClient';
 
-
 const otherGraph:OtherGraph =  {
   "rootVertices":["0","2","5"],
   "vertexInformation":[
@@ -47,17 +46,21 @@ const flowrGraph: Graph = {
   ])
 }
 
+let client: VisualizerWebsocketClient;
 try{
-const client = new VisualizerWebsocketClient('ws://127.0.0.1:1042')
+client = new VisualizerWebsocketClient('ws://127.0.0.1:1042')
 client.onFileAnalysisResponse = (json) => {
   console.log(json.results.dataflow.graph)
+  console.log(json.results.normalize)
+}
+client.onHelloMessage = (json) => {
+  console.log('hello', json);
+  client.sendAnalysisRequestJSON('x <- 2 * 3; x')
 }
-client.sendAnalysisRequestJSON('x <- 2 * 3; x')
 } catch(e){
   console.log(e)
 }
 
-
 // borderline graph :D
 let graphFromOtherGraph = transformToVisualizationGraphForOtherGraph(otherGraph)
 

From d9ab51ae9910fe3dc5dd50d297f14ed8b766cf2b Mon Sep 17 00:00:00 2001
From: EagleoutIce <florian.sihler@uni-ulm.de>
Date: Wed, 12 Jun 2024 11:11:34 +0200
Subject: [PATCH 28/75] input field to live update R code

---
 css/main.css                                  |  6 ++
 source/components/graphComponent.tsx          | 20 ++++--
 source/components/model/graphTransformer.ts   | 10 +--
 .../network/visualizerWebsocketClient.ts      | 10 +++
 source/index.tsx                              | 72 +++++++++----------
 5 files changed, 70 insertions(+), 48 deletions(-)

diff --git a/css/main.css b/css/main.css
index 70a36c1..c288e67 100644
--- a/css/main.css
+++ b/css/main.css
@@ -88,3 +88,9 @@ body {
 .base-node:hover .hover-over-text{
 	visibility: visible;
 }
+
+.r-code-input {
+	position: absolute;
+	top: 15px; 
+	left: 15px;
+}
diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index f0b9f47..88a89c3 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -1,5 +1,5 @@
 import ELK, { ElkExtendedEdge, ElkNode, LayoutOptions } from 'elkjs/lib/elk.bundled.js';
-import React, { ChangeEventHandler, useCallback, useLayoutEffect, useMemo } from 'react';
+import React, { ChangeEventHandler, useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import ReactFlow, {
   addEdge,
   Panel,
@@ -123,17 +123,27 @@ const elkOptions: LayoutOptions = {
  }
 
 
+export interface LayoutFlowProps {
+  readonly graph: VisualizationGraph;
+  readonly assignGraphUpdater: (updater: (g: VisualizationGraph) => void) => void;
+}
 
- export function LayoutFlow({ graph } : { readonly graph: VisualizationGraph}) {
+ export function LayoutFlow({ graph, assignGraphUpdater } : LayoutFlowProps) {
+   const [currentGraph, setCurrentGraph] = useState(graph);
    const [nodes, setNodes, onNodesChange] = useNodesState([]);
    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
    const { fitView } = useReactFlow();
+   
+   assignGraphUpdater(g =>  {
+    setCurrentGraph(g)
+    onLayout({ direction: 'DOWN', useInitialNodes: true })
+  })
 
    const onLayout = useCallback(
      ({ direction , useInitialNodes = false } : { direction: string, useInitialNodes?: boolean }) => {
        const opts = { 'elk.direction': direction, ...elkOptions };
-       const ns = useInitialNodes ? graph.nodes : nodes;
-       const es = useInitialNodes ? graph.edges : edges;
+       const ns = useInitialNodes ? currentGraph.nodes : nodes;
+       const es = useInitialNodes ? currentGraph.edges : edges;
 
        getLayoutedElements(ns, convertToExtendedEdges(es), opts).then(({ nodes: layoutedNodes, edges: layoutedEdges }) => {
          setNodes(layoutedNodes);
@@ -142,7 +152,7 @@ const elkOptions: LayoutOptions = {
          window.requestAnimationFrame(() => fitView());
        });
      },
-     [nodes, edges]
+     [nodes, edges, currentGraph]
    );
 
    // Calculate the initial layout on mount.
diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphTransformer.ts
index e241753..d960baa 100644
--- a/source/components/model/graphTransformer.ts
+++ b/source/components/model/graphTransformer.ts
@@ -88,17 +88,17 @@ export function transformToVisualizationGraphForOtherGraph(dataflowGraph: OtherG
     for( let [sourceNodeId, listOfConnectedNodes] of dataflowGraph.edgeInformation.entries()){
         const listOfConnectedNodes2 = listOfConnectedNodes[1]
         for(let [targetNodeId, targetNodeInfo] of listOfConnectedNodes2){
-            for( let linkEdgeType of targetNodeInfo.types){
+            // for( let linkEdgeType of targetNodeInfo.types){
                 const newEdge: Edge =
                     {
                         source: String(sourceNodeId),
                         target: String(targetNodeId),
-                        id: `${sourceNodeId}-${targetNodeId}-${linkEdgeType}`,
-                        label: linkEdgeType,
-                        data: { label: linkEdgeType, edgeType: linkEdgeType }
+                        id: `${sourceNodeId}-${targetNodeId}-${0}`,
+                        label: '0',
+                        data: { label: '0', edgeType: 'use' }
                     }
                 visualizationGraph.edges.push(newEdge)
-            }
+            // }
         }
     }
 
diff --git a/source/components/network/visualizerWebsocketClient.ts b/source/components/network/visualizerWebsocketClient.ts
index ff1e700..5dbf534 100644
--- a/source/components/network/visualizerWebsocketClient.ts
+++ b/source/components/network/visualizerWebsocketClient.ts
@@ -6,11 +6,21 @@ export class VisualizerWebsocketClient{
   endpoint:string
   websocket:WebSocket
   id:number
+  connected: boolean;
 
   constructor(endpoint: string){
     this.endpoint = endpoint
     this.websocket = new WebSocket(endpoint)
     this.id = 0
+    this.connected = false;
+    this.websocket.onopen = () => {
+      console.log('connected')
+      this.connected = true;
+    }
+    this.websocket.onerror = (event) => {
+      console.log('error', event)
+      this.connected = false;
+    }
     this.websocket.onmessage = (event) => {
       const parsedJson = JSON.parse(event.data)
       if(parsedJson.type === 'response-file-analysis'){
diff --git a/source/index.tsx b/source/index.tsx
index 6252a4d..cb2b4b6 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -1,69 +1,61 @@
 import { createRoot } from 'react-dom/client';
 import '../css/main.css';
 import { MainContainerComponent } from './components/mainContainerComponent';
-import { Graph, OtherGraph, transformToVisualizationGraphForOtherGraph } from './components/model/graphTransformer';
+import { OtherGraph, transformToVisualizationGraphForOtherGraph } from './components/model/graphTransformer';
 import { ReactFlowProvider } from 'reactflow';
 import { LayoutFlow } from './components/graphComponent';
 import { VisualizerWebsocketClient } from './components/network/visualizerWebsocketClient';
+import { FormEvent } from 'react';
+import { VisualizationGraph } from './components/model/graph';
 
 const otherGraph:OtherGraph =  {
   "rootVertices":["0","2","5"],
   "vertexInformation":[
-    ["0",{"tag":"use","id":"0","name":"a","environment":{"current":{"name":".GlobalEnv","id":"760","memory":[["return",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"return","nodeId":"built-in"}]],["cat",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"cat","nodeId":"built-in"}]],["print",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"print","nodeId":"built-in"}]],["source",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"source","nodeId":"built-in"}]]]},"level":0},"when":"maybe"}],
+    ["0",{"tag":"use","id":"0","name":"a", "when": 'always'}],
     ["2",{"tag":"use","id":"2","name":"unnamed-argument-2","environment":{"current":{"name":".GlobalEnv","id":"761","memory":[["return",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"return","nodeId":"built-in"}]],["cat",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"cat","nodeId":"built-in"}]],["print",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"print","nodeId":"built-in"}]],["source",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"source","nodeId":"built-in"}]]]},"level":0},"when":"always"}],
     ["5",{"tag":"use","id":"5","name":"unnamed-argument-5","environment":{"current":{"name":".GlobalEnv","id":"763","memory":[["return",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"return","nodeId":"built-in"}]],["cat",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"cat","nodeId":"built-in"}]],["print",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"print","nodeId":"built-in"}]],["source",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"source","nodeId":"built-in"}]]]},"level":0},"when":"always"}]],
     "edgeInformation":[["0",[["2",{"types":["reads"],"attribute":"always"}],["5",{"types":["reads"],"attribute":"always"}]]]]};
 
-const flowrGraph: Graph = {
-  rootVertices: new Set(['1', '2']),
-  vertexInformation: new Map([
-    ['1', {name: 'foooooooooooooooooooooooooo', tag: 'use'}],
-    ['2', {name: 'exitPoint', tag: 'exit-point'}],
-    ['4', {name: 'useNode', tag: 'use'}],
-    ['5', {name: 'functionCall', tag: 'function-call'}],
-    ['3', {name: 'variableDefinition', tag: 'variable-definition'}],
-    ['9', {name: 'functionDefinition', tag: 'function-definition'}],
-    ['10', {name: 'exitPoint', tag: 'exit-point'}],
-  ]),
-  edgeInformation: new Map([
-    ['1', new Map([
-      ['2', {types: {foo: 'bar1'}}],
-      ['9', {types: {foo: 'bar2'}}]
-    ])],
-    ['2', new Map([
-      ['3', {types: {foo: 'bar3'}}],
-      ['4', {types: {foo: 'bar4'}}]
-    ])],
-    ['4', new Map([
-      ['5', {types: {foo: 'bar5'}}]
-    ])],
-    ['5', new Map([
-      ['3', {types: {foo: 'bar6'}}]
-    ])],
-    ['9', new Map([
-      ['2', {types: {foo: 'bar7'}}]
-    ])]
-  ])
-}
 
-let client: VisualizerWebsocketClient;
+let client: VisualizerWebsocketClient | undefined = undefined;
 try{
 client = new VisualizerWebsocketClient('ws://127.0.0.1:1042')
 client.onFileAnalysisResponse = (json) => {
-  console.log(json.results.dataflow.graph)
+  console.log(JSON.stringify(json.results.dataflow.graph))
   console.log(json.results.normalize)
+  updateGraph(json.results.dataflow.graph as unknown as OtherGraph)
 }
 client.onHelloMessage = (json) => {
   console.log('hello', json);
-  client.sendAnalysisRequestJSON('x <- 2 * 3; x')
+  client?.sendAnalysisRequestJSON('x <- 2 * 3; x')
 }
 } catch(e){
   console.log(e)
 }
 
-// borderline graph :D
+
+let currentValue: string = ''
+function onRCodeInputChange(event: FormEvent<HTMLInputElement>) {
+  currentValue = event.currentTarget.value;
+}
+
+function onRCodeRequest() {
+  client?.sendAnalysisRequestJSON(currentValue)
+}
 let graphFromOtherGraph = transformToVisualizationGraphForOtherGraph(otherGraph)
 
+let graphUpdater: ((graph: VisualizationGraph) => void) | undefined = undefined;
+function setGraphUpdater(updater: (graph: VisualizationGraph) => void) {
+  graphUpdater = updater;
+}
+
+function updateGraph(graph: OtherGraph) {
+  // borderline graph :D
+  let newGraph = transformToVisualizationGraphForOtherGraph(graph)
+  graphUpdater?.(newGraph);
+}
+
+
 const main = document.createElement('div');
 main.id = 'main';
 document.body.appendChild(main);
@@ -72,8 +64,12 @@ const root = createRoot(main);
 root.render(
   <MainContainerComponent initialize={() => { console.log('Hey') }}>
     <ReactFlowProvider>
-        <LayoutFlow graph={graphFromOtherGraph}/>
+        <LayoutFlow graph={graphFromOtherGraph} assignGraphUpdater={setGraphUpdater} />
     </ReactFlowProvider>
+    <div className='r-code-input'>
+    <input onChange={onRCodeInputChange}></input>
+    <button onClick={onRCodeRequest}>Send R code</button>
+    </div>
   </MainContainerComponent>
 );
 

From d211958315ad5b502696604e0bb9e81019416b08 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Mon, 17 Jun 2024 10:50:34 +0200
Subject: [PATCH 29/75] feat: add missing edge non-standard-evaluation

---
 package-lock.json                             | 1057 ++++++++++++-----
 package.json                                  |    2 +-
 source/components/graphComponent.tsx          |    4 +-
 source/components/model/edges/edgeBase.tsx    |   23 +-
 .../model/edges/nonStandardEvaluationEdge.tsx |   20 +
 source/components/model/graphTransformer.ts   |   31 +-
 source/index.tsx                              |   29 +-
 7 files changed, 866 insertions(+), 300 deletions(-)
 create mode 100644 source/components/model/edges/nonStandardEvaluationEdge.tsx

diff --git a/package-lock.json b/package-lock.json
index bd61c48..c351767 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.1",
       "license": "ISC",
       "dependencies": {
-        "@eagleoutice/flowr": "^1.4.1",
+        "@eagleoutice/flowr": "^2.0.9",
         "@types/react": "^18.0.18",
         "@types/react-dom": "^18.0.6",
         "allotment": "^1.17.0",
@@ -88,29 +88,25 @@
       }
     },
     "node_modules/@eagleoutice/flowr": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@eagleoutice/flowr/-/flowr-1.4.1.tgz",
-      "integrity": "sha512-SGCuSqoGIgOZJd94T5Sw6nsol1NbDc5opL+H+B3D3bAnfL0HWix056+fWVd2TRRH2c5DHs2fKvXsGYgzAa3QUw==",
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/@eagleoutice/flowr/-/flowr-2.0.9.tgz",
+      "integrity": "sha512-gJJGS8Zy5Yo3kLd9jACoybPNLZCDQ2lFoYEGYnpBQAItISbXL8CK1vGUqFtISuSzhTEWqtvunbfL7B9+bY01TQ==",
       "dependencies": {
-        "@types/semver": "^7.5.6",
-        "@types/tar": "^6.1.10",
-        "@types/ws": "^8.5.10",
         "@xmldom/xmldom": "^0.8.10",
         "command-line-args": "^5.2.1",
         "command-line-usage": "^7.0.1",
-        "csv-parse": "^5.5.3",
-        "joi": "^17.11.0",
+        "joi": "^17.13.1",
         "n-readlines": "^1.0.1",
         "n3": "^1.17.2",
         "object-hash": "^3.0.0",
+        "object-sizeof": "^2.6.4",
         "rotating-file-stream": "^3.1.1",
         "semver": "^7.5.4",
-        "tar": "^6.2.0",
-        "tmp": "^0.2.1",
+        "tar": "^7.1.0",
+        "tmp": "^0.2.3",
         "ts-essentials": "^9.4.1",
         "tslog": "^4.9.2",
-        "ws": "^8.16.0",
-        "xml2js": "^0.6.2",
+        "ws": "^8.17.0",
         "xpath-ts2": "^1.4.2"
       }
     },
@@ -127,6 +123,58 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -225,6 +273,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@reactflow/background": {
       "version": "11.3.9",
       "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.9.tgz",
@@ -759,11 +816,6 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
-    "node_modules/@types/semver": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz",
-      "integrity": "sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A=="
-    },
     "node_modules/@types/serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -792,15 +844,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/tar": {
-      "version": "6.1.11",
-      "resolved": "https://registry.npmjs.org/@types/tar/-/tar-6.1.11.tgz",
-      "integrity": "sha512-ThA1WD8aDdVU4VLuyq5NEqriwXErF5gEIJeyT6gHBWU7JtSmW2a5qjNv3/vR82O20mW+1vhmeZJfBQPT3HCugg==",
-      "dependencies": {
-        "@types/node": "*",
-        "minipass": "^4.0.0"
-      }
-    },
     "node_modules/@types/uuid": {
       "version": "9.0.2",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.2.tgz",
@@ -811,6 +854,7 @@
       "version": "8.5.10",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
       "integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
+      "dev": true,
       "dependencies": {
         "@types/node": "*"
       }
@@ -1147,7 +1191,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -1303,6 +1346,7 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -1504,11 +1548,11 @@
       }
     },
     "node_modules/chownr": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       }
     },
     "node_modules/chrome-trace-event": {
@@ -1665,7 +1709,8 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
     },
     "node_modules/connect-history-api-fallback": {
       "version": "2.0.0",
@@ -1823,7 +1868,6 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -1934,11 +1978,6 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
       "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
     },
-    "node_modules/csv-parse": {
-      "version": "5.5.3",
-      "resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-5.5.3.tgz",
-      "integrity": "sha512-v0KW6C0qlZzoGjk6u5tLmVfyZxNgPGXZsWTXshpAgKVGmGXzaVWGdlCFxNx5iuzcXT/oJN1HHM9DZKwtAtYa+A=="
-    },
     "node_modules/d3-color": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
@@ -2217,6 +2256,11 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -2233,6 +2277,11 @@
       "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.9.2.tgz",
       "integrity": "sha512-2Y/RaA1pdgSHpY0YG4TYuYCD2wh97CRvu22eLG3Kz0pgQ/6KbIFTxsTnDc4MH/6hFlg2L/9qXrDMG0nMjP63iw=="
     },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    },
     "node_modules/encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -2602,6 +2651,32 @@
         }
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
+      "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -2620,28 +2695,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/fs-minipass": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
-      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
-      "dependencies": {
-        "minipass": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/fs-minipass/node_modules/minipass": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/fs-monkey": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
@@ -2651,7 +2704,8 @@
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
     },
     "node_modules/fsevents": {
       "version": "2.3.2",
@@ -2751,6 +2805,7 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -3203,6 +3258,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -3211,7 +3267,8 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
     },
     "node_modules/inline-style-prefixer": {
       "version": "4.0.2",
@@ -3288,6 +3345,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-function": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
@@ -3370,8 +3435,7 @@
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
     "node_modules/isobject": {
       "version": "3.0.1",
@@ -3390,6 +3454,23 @@
         "whatwg-fetch": ">=0.10.0"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz",
+      "integrity": "sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "node_modules/jest-worker": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
@@ -3404,9 +3485,9 @@
       }
     },
     "node_modules/joi": {
-      "version": "17.12.1",
-      "resolved": "https://registry.npmjs.org/joi/-/joi-17.12.1.tgz",
-      "integrity": "sha512-vtxmq+Lsc5SlfqotnfVjlViWfOL9nt/avKNbKYizwf6gsCfq9NYY/ceYRMFD8XDdrjJ9abJyScWmhmIiy+XRtQ==",
+      "version": "17.13.1",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-17.13.1.tgz",
+      "integrity": "sha512-vaBlIKCyo4FCUtCm7Eu4QZd/q02bWcxfUO6YSXAZOWF6gzcLBeba8kwotUdYJjDLW8Cz8RywsSOqiNJZW0mNvg==",
       "dependencies": {
         "@hapi/hoek": "^9.3.0",
         "@hapi/topo": "^5.1.0",
@@ -3640,6 +3721,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -3648,45 +3730,97 @@
       }
     },
     "node_modules/minipass": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.8.tgz",
-      "integrity": "sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
       "engines": {
-        "node": ">=8"
+        "node": ">=16 || 14 >=14.17"
       }
     },
     "node_modules/minizlib": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
-      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.1.tgz",
+      "integrity": "sha512-umcy022ILvb5/3Djuu8LWeqUa8D68JaBzlttKeMWen48SjabqS3iY5w/vzeMzMUNhLDifyhbOwKDSznB1vvrwg==",
       "dependencies": {
-        "minipass": "^3.0.0",
-        "yallist": "^4.0.0"
+        "minipass": "^7.0.4",
+        "rimraf": "^5.0.5"
       },
       "engines": {
-        "node": ">= 8"
+        "node": ">= 18"
       }
     },
-    "node_modules/minizlib/node_modules/minipass": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+    "node_modules/minizlib/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
       "dependencies": {
-        "yallist": "^4.0.0"
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/minizlib/node_modules/glob": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.1.tgz",
+      "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minizlib/node_modules/minimatch": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
+      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minizlib/node_modules/rimraf": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.7.tgz",
+      "integrity": "sha512-nV6YcJo5wbLW77m+8KjH8aB/7/rxQy9SZ0HY5shnwULfS+9nmTtVXAJET5NdZmCzA4fPI/Hm1wo/Po/4mopOdg==",
+      "dependencies": {
+        "glob": "^10.3.7"
+      },
+      "bin": {
+        "rimraf": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/mkdirp": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
       "bin": {
-        "mkdirp": "bin/cmd.js"
+        "mkdirp": "dist/cjs/src/bin.js"
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/ms": {
@@ -3901,6 +4035,37 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object-sizeof": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/object-sizeof/-/object-sizeof-2.6.4.tgz",
+      "integrity": "sha512-YuJAf7Bi61KROcYmXm8RCeBrBw8UOaJDzTm1gp0eU7RjYi1xEte3/Nmg/VyPaHcJZ3sNojs1Y0xvSrgwkLmcFw==",
+      "dependencies": {
+        "buffer": "^6.0.3"
+      }
+    },
+    "node_modules/object-sizeof/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
     "node_modules/obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -3932,6 +4097,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -4059,6 +4225,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4067,7 +4234,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4078,6 +4244,29 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
+      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
+      "engines": {
+        "node": "14 || >=16.14"
+      }
+    },
     "node_modules/path-to-regexp": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
@@ -4675,6 +4864,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -4743,11 +4933,6 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
-    "node_modules/sax": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
-      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA=="
-    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -4964,7 +5149,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -4976,7 +5160,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -5164,11 +5347,82 @@
         "safe-buffer": "~5.2.0"
       }
     },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/string-width/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/string-width/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -5281,27 +5535,27 @@
       }
     },
     "node_modules/tar": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.0.tgz",
-      "integrity": "sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==",
-      "dependencies": {
-        "chownr": "^2.0.0",
-        "fs-minipass": "^2.0.0",
-        "minipass": "^5.0.0",
-        "minizlib": "^2.1.1",
-        "mkdirp": "^1.0.3",
-        "yallist": "^4.0.0"
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.2.0.tgz",
+      "integrity": "sha512-hctwP0Nb4AB60bj8WQgRYaMOuJYRAPMGiQUAotms5igN8ppfQM+IvjQ5HcKu1MaZh2Wy2KWVTe563Yj8dfc14w==",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.0",
+        "minizlib": "^3.0.1",
+        "mkdirp": "^3.0.1",
+        "yallist": "^5.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       }
     },
-    "node_modules/tar/node_modules/minipass": {
+    "node_modules/tar/node_modules/yallist": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
-      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
       "engines": {
-        "node": ">=8"
+        "node": ">=18"
       }
     },
     "node_modules/terser": {
@@ -5366,14 +5620,11 @@
       "dev": true
     },
     "node_modules/tmp": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
-      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
-      "dependencies": {
-        "rimraf": "^3.0.0"
-      },
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
+      "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==",
       "engines": {
-        "node": ">=8.17.0"
+        "node": ">=14.14"
       }
     },
     "node_modules/to-regex-range": {
@@ -6038,7 +6289,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -6063,15 +6313,103 @@
         "node": ">=12.17"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
     },
     "node_modules/ws": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
       "engines": {
         "node": ">=10.0.0"
       },
@@ -6088,26 +6426,6 @@
         }
       }
     },
-    "node_modules/xml2js": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.6.2.tgz",
-      "integrity": "sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA==",
-      "dependencies": {
-        "sax": ">=0.6.0",
-        "xmlbuilder": "~11.0.0"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/xmlbuilder": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
-      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
     "node_modules/xpath-ts2": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/xpath-ts2/-/xpath-ts2-1.4.2.tgz",
@@ -6200,29 +6518,25 @@
       "dev": true
     },
     "@eagleoutice/flowr": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@eagleoutice/flowr/-/flowr-1.4.1.tgz",
-      "integrity": "sha512-SGCuSqoGIgOZJd94T5Sw6nsol1NbDc5opL+H+B3D3bAnfL0HWix056+fWVd2TRRH2c5DHs2fKvXsGYgzAa3QUw==",
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/@eagleoutice/flowr/-/flowr-2.0.9.tgz",
+      "integrity": "sha512-gJJGS8Zy5Yo3kLd9jACoybPNLZCDQ2lFoYEGYnpBQAItISbXL8CK1vGUqFtISuSzhTEWqtvunbfL7B9+bY01TQ==",
       "requires": {
-        "@types/semver": "^7.5.6",
-        "@types/tar": "^6.1.10",
-        "@types/ws": "^8.5.10",
         "@xmldom/xmldom": "^0.8.10",
         "command-line-args": "^5.2.1",
         "command-line-usage": "^7.0.1",
-        "csv-parse": "^5.5.3",
-        "joi": "^17.11.0",
+        "joi": "^17.13.1",
         "n-readlines": "^1.0.1",
         "n3": "^1.17.2",
         "object-hash": "^3.0.0",
+        "object-sizeof": "^2.6.4",
         "rotating-file-stream": "^3.1.1",
         "semver": "^7.5.4",
-        "tar": "^6.2.0",
-        "tmp": "^0.2.1",
+        "tar": "^7.1.0",
+        "tmp": "^0.2.3",
         "ts-essentials": "^9.4.1",
         "tslog": "^4.9.2",
-        "ws": "^8.16.0",
-        "xml2js": "^0.6.2",
+        "ws": "^8.17.0",
         "xpath-ts2": "^1.4.2"
       }
     },
@@ -6239,6 +6553,42 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "requires": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA=="
+        },
+        "strip-ansi": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+          "requires": {
+            "ansi-regex": "^6.0.1"
+          }
+        }
+      }
+    },
+    "@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "requires": {
+        "minipass": "^7.0.4"
+      }
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -6319,6 +6669,12 @@
         "fastq": "^1.6.0"
       }
     },
+    "@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "optional": true
+    },
     "@reactflow/background": {
       "version": "11.3.9",
       "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.9.tgz",
@@ -6826,11 +7182,6 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
-    "@types/semver": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz",
-      "integrity": "sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A=="
-    },
     "@types/serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -6859,15 +7210,6 @@
         "@types/node": "*"
       }
     },
-    "@types/tar": {
-      "version": "6.1.11",
-      "resolved": "https://registry.npmjs.org/@types/tar/-/tar-6.1.11.tgz",
-      "integrity": "sha512-ThA1WD8aDdVU4VLuyq5NEqriwXErF5gEIJeyT6gHBWU7JtSmW2a5qjNv3/vR82O20mW+1vhmeZJfBQPT3HCugg==",
-      "requires": {
-        "@types/node": "*",
-        "minipass": "^4.0.0"
-      }
-    },
     "@types/uuid": {
       "version": "9.0.2",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.2.tgz",
@@ -6878,6 +7220,7 @@
       "version": "8.5.10",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
       "integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
+      "dev": true,
       "requires": {
         "@types/node": "*"
       }
@@ -7154,8 +7497,7 @@
     "ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
     },
     "ansi-styles": {
       "version": "4.3.0",
@@ -7274,6 +7616,7 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -7399,9 +7742,9 @@
       }
     },
     "chownr": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g=="
     },
     "chrome-trace-event": {
       "version": "1.0.3",
@@ -7531,7 +7874,8 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
     },
     "connect-history-api-fallback": {
       "version": "2.0.0",
@@ -7651,7 +7995,6 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
       "requires": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -7733,11 +8076,6 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
       "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
     },
-    "csv-parse": {
-      "version": "5.5.3",
-      "resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-5.5.3.tgz",
-      "integrity": "sha512-v0KW6C0qlZzoGjk6u5tLmVfyZxNgPGXZsWTXshpAgKVGmGXzaVWGdlCFxNx5iuzcXT/oJN1HHM9DZKwtAtYa+A=="
-    },
     "d3-color": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
@@ -7943,6 +8281,11 @@
         "tslib": "^2.0.3"
       }
     },
+    "eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -7959,6 +8302,11 @@
       "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.9.2.tgz",
       "integrity": "sha512-2Y/RaA1pdgSHpY0YG4TYuYCD2wh97CRvu22eLG3Kz0pgQ/6KbIFTxsTnDc4MH/6hFlg2L/9qXrDMG0nMjP63iw=="
     },
+    "emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    },
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -8248,6 +8596,22 @@
       "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
       "dev": true
     },
+    "foreground-child": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
+      "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
+      "requires": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "dependencies": {
+        "signal-exit": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+          "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="
+        }
+      }
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -8260,24 +8624,6 @@
       "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
       "dev": true
     },
-    "fs-minipass": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
-      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
-      "requires": {
-        "minipass": "^3.0.0"
-      },
-      "dependencies": {
-        "minipass": {
-          "version": "3.3.6",
-          "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-          "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-          "requires": {
-            "yallist": "^4.0.0"
-          }
-        }
-      }
-    },
     "fs-monkey": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
@@ -8287,7 +8633,8 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
     },
     "fsevents": {
       "version": "2.3.2",
@@ -8369,6 +8716,7 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -8693,6 +9041,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -8701,7 +9050,8 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
     },
     "inline-style-prefixer": {
       "version": "4.0.2",
@@ -8754,6 +9104,11 @@
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "dev": true
     },
+    "is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
+    },
     "is-function": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
@@ -8812,8 +9167,7 @@
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
     "isobject": {
       "version": "3.0.1",
@@ -8829,6 +9183,15 @@
         "whatwg-fetch": ">=0.10.0"
       }
     },
+    "jackspeak": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz",
+      "integrity": "sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==",
+      "requires": {
+        "@isaacs/cliui": "^8.0.2",
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "jest-worker": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
@@ -8840,9 +9203,9 @@
       }
     },
     "joi": {
-      "version": "17.12.1",
-      "resolved": "https://registry.npmjs.org/joi/-/joi-17.12.1.tgz",
-      "integrity": "sha512-vtxmq+Lsc5SlfqotnfVjlViWfOL9nt/avKNbKYizwf6gsCfq9NYY/ceYRMFD8XDdrjJ9abJyScWmhmIiy+XRtQ==",
+      "version": "17.13.1",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-17.13.1.tgz",
+      "integrity": "sha512-vaBlIKCyo4FCUtCm7Eu4QZd/q02bWcxfUO6YSXAZOWF6gzcLBeba8kwotUdYJjDLW8Cz8RywsSOqiNJZW0mNvg==",
       "requires": {
         "@hapi/hoek": "^9.3.0",
         "@hapi/topo": "^5.1.0",
@@ -9031,38 +9394,67 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
     },
     "minipass": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.8.tgz",
-      "integrity": "sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ=="
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="
     },
     "minizlib": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
-      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.1.tgz",
+      "integrity": "sha512-umcy022ILvb5/3Djuu8LWeqUa8D68JaBzlttKeMWen48SjabqS3iY5w/vzeMzMUNhLDifyhbOwKDSznB1vvrwg==",
       "requires": {
-        "minipass": "^3.0.0",
-        "yallist": "^4.0.0"
+        "minipass": "^7.0.4",
+        "rimraf": "^5.0.5"
       },
       "dependencies": {
-        "minipass": {
-          "version": "3.3.6",
-          "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-          "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "glob": {
+          "version": "10.4.1",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.1.tgz",
+          "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==",
+          "requires": {
+            "foreground-child": "^3.1.0",
+            "jackspeak": "^3.1.2",
+            "minimatch": "^9.0.4",
+            "minipass": "^7.1.2",
+            "path-scurry": "^1.11.1"
+          }
+        },
+        "minimatch": {
+          "version": "9.0.4",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
+          "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
           "requires": {
-            "yallist": "^4.0.0"
+            "brace-expansion": "^2.0.1"
+          }
+        },
+        "rimraf": {
+          "version": "5.0.7",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.7.tgz",
+          "integrity": "sha512-nV6YcJo5wbLW77m+8KjH8aB/7/rxQy9SZ0HY5shnwULfS+9nmTtVXAJET5NdZmCzA4fPI/Hm1wo/Po/4mopOdg==",
+          "requires": {
+            "glob": "^10.3.7"
           }
         }
       }
     },
     "mkdirp": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg=="
     },
     "ms": {
       "version": "2.0.0",
@@ -9215,6 +9607,25 @@
       "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
       "dev": true
     },
+    "object-sizeof": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/object-sizeof/-/object-sizeof-2.6.4.tgz",
+      "integrity": "sha512-YuJAf7Bi61KROcYmXm8RCeBrBw8UOaJDzTm1gp0eU7RjYi1xEte3/Nmg/VyPaHcJZ3sNojs1Y0xvSrgwkLmcFw==",
+      "requires": {
+        "buffer": "^6.0.3"
+      },
+      "dependencies": {
+        "buffer": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+          "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+          "requires": {
+            "base64-js": "^1.3.1",
+            "ieee754": "^1.2.1"
+          }
+        }
+      }
+    },
     "obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -9240,6 +9651,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
       "requires": {
         "wrappy": "1"
       }
@@ -9333,13 +9745,13 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true
     },
     "path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
     },
     "path-parse": {
       "version": "1.0.7",
@@ -9347,6 +9759,22 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "requires": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "10.2.2",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
+          "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ=="
+        }
+      }
+    },
     "path-to-regexp": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
@@ -9782,6 +10210,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
       "requires": {
         "glob": "^7.1.3"
       }
@@ -9810,11 +10239,6 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
-    "sax": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
-      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA=="
-    },
     "scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -9995,7 +10419,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "requires": {
         "shebang-regex": "^3.0.0"
       }
@@ -10003,8 +10426,7 @@
     "shebang-regex": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
     },
     "side-channel": {
       "version": "1.0.4",
@@ -10152,11 +10574,60 @@
         "safe-buffer": "~5.2.0"
       }
     },
+    "string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "requires": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA=="
+        },
+        "strip-ansi": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+          "requires": {
+            "ansi-regex": "^6.0.1"
+          }
+        }
+      }
+    },
+    "string-width-cjs": {
+      "version": "npm:string-width@4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "requires": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "dependencies": {
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+        }
+      }
+    },
     "strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
+      "requires": {
+        "ansi-regex": "^5.0.1"
+      }
+    },
+    "strip-ansi-cjs": {
+      "version": "npm:strip-ansi@6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
       "requires": {
         "ansi-regex": "^5.0.1"
       }
@@ -10229,22 +10700,22 @@
       "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="
     },
     "tar": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.0.tgz",
-      "integrity": "sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==",
-      "requires": {
-        "chownr": "^2.0.0",
-        "fs-minipass": "^2.0.0",
-        "minipass": "^5.0.0",
-        "minizlib": "^2.1.1",
-        "mkdirp": "^1.0.3",
-        "yallist": "^4.0.0"
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.2.0.tgz",
+      "integrity": "sha512-hctwP0Nb4AB60bj8WQgRYaMOuJYRAPMGiQUAotms5igN8ppfQM+IvjQ5HcKu1MaZh2Wy2KWVTe563Yj8dfc14w==",
+      "requires": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.0",
+        "minizlib": "^3.0.1",
+        "mkdirp": "^3.0.1",
+        "yallist": "^5.0.0"
       },
       "dependencies": {
-        "minipass": {
+        "yallist": {
           "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
-          "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ=="
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+          "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw=="
         }
       }
     },
@@ -10283,12 +10754,9 @@
       "dev": true
     },
     "tmp": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
-      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
-      "requires": {
-        "rimraf": "^3.0.0"
-      }
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
+      "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w=="
     },
     "to-regex-range": {
       "version": "5.0.1",
@@ -10723,7 +11191,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "requires": {
         "isexe": "^2.0.0"
       }
@@ -10739,31 +11206,75 @@
       "resolved": "https://registry.npmjs.org/wordwrapjs/-/wordwrapjs-5.1.0.tgz",
       "integrity": "sha512-JNjcULU2e4KJwUNv6CHgI46UvDGitb6dGryHajXTDiLgg1/RiGoPSDw4kZfYnwGtEXf2ZMeIewDQgFGzkCB2Sg=="
     },
+    "wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "requires": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA=="
+        },
+        "ansi-styles": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+          "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug=="
+        },
+        "strip-ansi": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+          "requires": {
+            "ansi-regex": "^6.0.1"
+          }
+        }
+      }
+    },
+    "wrap-ansi-cjs": {
+      "version": "npm:wrap-ansi@7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+        },
+        "string-width": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+          "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.1"
+          }
+        }
+      }
+    },
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
     },
     "ws": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
       "requires": {}
     },
-    "xml2js": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.6.2.tgz",
-      "integrity": "sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA==",
-      "requires": {
-        "sax": ">=0.6.0",
-        "xmlbuilder": "~11.0.0"
-      }
-    },
-    "xmlbuilder": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
-      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="
-    },
     "xpath-ts2": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/xpath-ts2/-/xpath-ts2-1.4.2.tgz",
diff --git a/package.json b/package.json
index f451e41..f407d8b 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "webpack-dev-server": "^4.11.0"
   },
   "dependencies": {
-    "@eagleoutice/flowr": "^1.4.1",
+    "@eagleoutice/flowr": "^2.0.9",
     "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
     "allotment": "^1.17.0",
diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 88a89c3..58147d7 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -38,6 +38,7 @@ import { ReturnsEdge } from './model/edges/returnsEdge';
 import { SameDefDefEdge } from './model/edges/sameDefDefEdge';
 import { SameReadReadEdge } from './model/edges/sameReadReadEdge';
 import { SideEffectOnCallEdge } from './model/edges/sideEffectOnCallEdge';
+import { NonStandardEvaluationEdge } from './model/edges/nonStandardEvaluationEdge';
 
 
 
@@ -180,7 +181,8 @@ export interface LayoutFlowProps {
     definedByOnCallEdge: DefinedByOnCallEdge,
     argumentEdge: ArgumentEdge,
     sideEffectOnCallEdge: SideEffectOnCallEdge,
-    relatesEdge: RelatesEdge
+    relatesEdge: RelatesEdge,
+    nonStandardEvaluationEdge: NonStandardEvaluationEdge
   }),[])
 
    return (
diff --git a/source/components/model/edges/edgeBase.tsx b/source/components/model/edges/edgeBase.tsx
index d7436b5..9a4b089 100644
--- a/source/components/model/edges/edgeBase.tsx
+++ b/source/components/model/edges/edgeBase.tsx
@@ -1,17 +1,18 @@
 import { getStraightPath, BaseEdge, EdgeLabelRenderer} from "reactflow";
 
 const edgeTagMap:{[index: string]:string} = {
-  'reads':               'readsEdge',
-  'defined-by':          'definedByEdge',
-  'same-read-read':      'sameReadReadEdge',
-  'same-def-def':        'sameDefDefEdge',
-  'calls':               'callsEdge',
-  'returns':             'returnsEdge',
-  'defines-on-call':     'definesOnCallEdge',
-  'defined-by-on-call':  'definedByOnCallEdge',
-  'argument':            'argumentEdge',
-  'side-effect-on-call': 'sideEffectOnCallEdge',
-  'relates':             'relatesEdge'
+  'reads':                   'readsEdge',
+  'defined-by':              'definedByEdge',
+  'same-read-read':          'sameReadReadEdge', //obsolete?
+  'same-def-def':            'sameDefDefEdge', // obsolete?
+  'calls':                   'callsEdge',
+  'returns':                 'returnsEdge',
+  'defines-on-call':         'definesOnCallEdge',
+  'defined-by-on-call':      'definedByOnCallEdge',
+  'argument':                'argumentEdge',
+  'side-effect-on-call':     'sideEffectOnCallEdge',
+  'relates':                 'relatesEdge', //obsolete?
+  'non-standard-evaluation': 'nonStandardEvaluationEdge'
 };
 
 export function edgeTagMapper(edgeTag: string): string {
diff --git a/source/components/model/edges/nonStandardEvaluationEdge.tsx b/source/components/model/edges/nonStandardEvaluationEdge.tsx
new file mode 100644
index 0000000..8716f0e
--- /dev/null
+++ b/source/components/model/edges/nonStandardEvaluationEdge.tsx
@@ -0,0 +1,20 @@
+import { BodyEdgeCompontent } from "./edgeBase"
+
+export function NonStandardEvaluationEdge({ id, sourceX, sourceY, targetX, targetY} : {
+    id: string,
+    sourceX: number,
+    sourceY: number,
+    targetX: number,
+    targetY: number
+    }) {
+    return <BodyEdgeCompontent
+      id = {id}
+      sourceX = {sourceX}
+      sourceY = {sourceY}
+      targetX = {targetX}
+      targetY = {targetY}
+      edgeStyle = {{stroke: 'blue', strokeDasharray: '2,3'}}
+      label = 'Non Standard Evaluation'
+  
+    />
+  }
\ No newline at end of file
diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphTransformer.ts
index d960baa..24e13a6 100644
--- a/source/components/model/graphTransformer.ts
+++ b/source/components/model/graphTransformer.ts
@@ -1,5 +1,6 @@
 import { Edge, Node } from "reactflow";
 import { VisualizationGraph } from "./graph";
+import { EdgeTypeName, edgeTypesToNames } from "@eagleoutice/flowr/dataflow/graph/edge";
 
 export interface Graph {
     rootVertices: Set<string>,
@@ -8,22 +9,26 @@ export interface Graph {
 }
 
 export interface OtherGraph{
-    "rootVertices": string[]
-    "vertexInformation": [string, VertexInfo][]
-    "edgeInformation": [string, [string, EdgeInfo][]][]
+    "rootVertices": number[]
+    "vertexInformation": [number, VertexInfo][]
+    "edgeInformation": [number, [number, EdgeInfo][]][]
+    "_idMap"?:any,
+    "functionCache"?: any
   }
 
   export interface VertexInfo{
     "tag": string,
-    "id":string,
-    "name":string,
-    "environment"?:any,
-    "when":string
+    "id": number,
+    "onlyBuiltin"?: boolean,
+    "name"?: string,
+    "environment"?: any,
+    "when"?: string,
+    "args"?:any
   }
 
   export interface EdgeInfo{
-    "types":string[],
-    "attribute": string
+    "types": number,
+    "attribute"?: string
   }
 
 export function transformToVisualizationGraph(dataflowGraph: Graph): VisualizationGraph {
@@ -88,17 +93,17 @@ export function transformToVisualizationGraphForOtherGraph(dataflowGraph: OtherG
     for( let [sourceNodeId, listOfConnectedNodes] of dataflowGraph.edgeInformation.entries()){
         const listOfConnectedNodes2 = listOfConnectedNodes[1]
         for(let [targetNodeId, targetNodeInfo] of listOfConnectedNodes2){
-            // for( let linkEdgeType of targetNodeInfo.types){
+             for( let linkEdgeType of edgeTypesToNames(targetNodeInfo.types)){
                 const newEdge: Edge =
                     {
                         source: String(sourceNodeId),
                         target: String(targetNodeId),
                         id: `${sourceNodeId}-${targetNodeId}-${0}`,
-                        label: '0',
-                        data: { label: '0', edgeType: 'use' }
+                        label: linkEdgeType,
+                        data: { label: linkEdgeType, edgeType: linkEdgeType }
                     }
                 visualizationGraph.edges.push(newEdge)
-            // }
+             }
         }
     }
 
diff --git a/source/index.tsx b/source/index.tsx
index cb2b4b6..9be6631 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -7,7 +7,7 @@ import { LayoutFlow } from './components/graphComponent';
 import { VisualizerWebsocketClient } from './components/network/visualizerWebsocketClient';
 import { FormEvent } from 'react';
 import { VisualizationGraph } from './components/model/graph';
-
+/* old example
 const otherGraph:OtherGraph =  {
   "rootVertices":["0","2","5"],
   "vertexInformation":[
@@ -15,6 +15,33 @@ const otherGraph:OtherGraph =  {
     ["2",{"tag":"use","id":"2","name":"unnamed-argument-2","environment":{"current":{"name":".GlobalEnv","id":"761","memory":[["return",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"return","nodeId":"built-in"}]],["cat",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"cat","nodeId":"built-in"}]],["print",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"print","nodeId":"built-in"}]],["source",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"source","nodeId":"built-in"}]]]},"level":0},"when":"always"}],
     ["5",{"tag":"use","id":"5","name":"unnamed-argument-5","environment":{"current":{"name":".GlobalEnv","id":"763","memory":[["return",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"return","nodeId":"built-in"}]],["cat",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"cat","nodeId":"built-in"}]],["print",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"print","nodeId":"built-in"}]],["source",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"source","nodeId":"built-in"}]]]},"level":0},"when":"always"}]],
     "edgeInformation":[["0",[["2",{"types":["reads"],"attribute":"always"}],["5",{"types":["reads"],"attribute":"always"}]]]]};
+*/
+
+const otherGraph: OtherGraph = {       "_idMap":{
+  "size":13,
+  "k2v":[[0,{
+  "type":"RSymbol","location":[1,1,1,1],"content":"x","lexeme":"x","info":{
+      "fullRange":[1,1,1,1],"additionalTokens":[],"fullLexeme":"x","id":0,"parent":4,"role":"binop-lhs","index":0,"depth":2}
+  }],[1,{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}}],[2,{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}}],[3,{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}}],[4,{"type":"RBinaryOp","location":[1,3,1,4],"lhs":{"type":"RSymbol","location":[1,1,1,1],"content":"x","lexeme":"x","info":{"fullRange":[1,1,1,1],"additionalTokens":[],"fullLexeme":"x","id":0,"parent":4,"role":"binop-lhs","index":0,"depth":2}},"rhs":{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}},"operator":"<-","lexeme":"<-","info":{"fullRange":[1,1,1,10],"additionalTokens":[],"fullLexeme":"x <- 2 * 3","id":4,"parent":6,"depth":1,"index":0,"role":"expr-list-child"}}],[5,{"type":"RSymbol","location":[1,13,1,13],"content":"x","lexeme":"x","info":{"fullRange":[1,13,1,13],"additionalTokens":[],"fullLexeme":"x","id":5,"parent":6,"role":"expr-list-child","index":1,"depth":1}}],[6,{"type":"RExpressionList","children":[{"type":"RBinaryOp","location":[1,3,1,4],"lhs":{"type":"RSymbol","location":[1,1,1,1],"content":"x","lexeme":"x","info":{"fullRange":[1,1,1,1],"additionalTokens":[],"fullLexeme":"x","id":0,"parent":4,"role":"binop-lhs","index":0,"depth":2}},"rhs":{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}},"operator":"<-","lexeme":"<-","info":{"fullRange":[1,1,1,10],"additionalTokens":[],"fullLexeme":"x <- 2 * 3","id":4,"parent":6,"depth":1,"index":0,"role":"expr-list-child"}},{"type":"RSymbol","location":[1,13,1,13],"content":"x","lexeme":"x","info":{"fullRange":[1,13,1,13],"additionalTokens":[],"fullLexeme":"x","id":5,"parent":6,"role":"expr-list-child","index":1,"depth":1}}],"info":{"additionalTokens":[],"id":6,"depth":0,"role":"root","index":0}}],["4-arg",{"type":"RBinaryOp","location":[1,3,1,4],"lhs":{"type":"RSymbol","location":[1,1,1,1],"content":"x","lexeme":"x","info":{"fullRange":[1,1,1,1],"additionalTokens":[],"fullLexeme":"x","id":0,"parent":4,"role":"binop-lhs","index":0,"depth":2}},"rhs":{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}},"operator":"<-","lexeme":"<-","info":{"fullRange":[1,1,1,10],"additionalTokens":[],"fullLexeme":"x <- 2 * 3","id":4,"parent":6,"depth":1,"index":0,"role":"expr-list-child"}}],["5-arg",{"type":"RSymbol","location":[1,13,1,13],"content":"x","lexeme":"x","info":{"fullRange":[1,13,1,13],"additionalTokens":[],"fullLexeme":"x","id":5,"parent":6,"role":"expr-list-child","index":1,"depth":1}}],["0-arg",{"type":"RSymbol","location":[1,1,1,1],"content":"x","lexeme":"x","info":{"fullRange":[1,1,1,1],"additionalTokens":[],"fullLexeme":"x","id":0,"parent":4,"role":"binop-lhs","index":0,"depth":2}}],["3-arg",{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}}],["1-arg",{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}}],["2-arg",{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}}]],"v2k":{}
+},
+"functionCache":[],
+"rootVertices":[1,2,3,0,4,5],
+"vertexInformation":
+[
+  [1,{"tag":"value","id":1}],
+  [2,{"tag":"value","id":2}],
+  [3,{"tag":"function-call","id":3,"name":"*","onlyBuiltin":true,"args":[{"nodeId":1},{"nodeId":2}]}],[0,{"tag":"variable-definition","id":0}],
+  [4,{"tag":"function-call","id":4,"name":"<-","onlyBuiltin":true,"args":[{"nodeId":0},{"nodeId":3}]}],[5,{"tag":"use","id":5}]
+],
+"edgeInformation":[
+  [3,[[1,{"types":65}],[2,{"types":65}]]],
+  [4,[[3,{"types":64}],[0,{"types":72}]]],
+  [0,[[3,{"types":2}],[4,{"types":2}]]],
+  [5,[[0,{"types":1}]]]
+]
+}
+
+
 
 
 let client: VisualizerWebsocketClient | undefined = undefined;

From 5884e521e9b25ec1cebc3b540a562157464904fb Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Mon, 17 Jun 2024 17:44:34 +0200
Subject: [PATCH 30/75] feat: adjust graph transformation to flowr v2

---
 source/components/model/graphTransformer.ts | 41 +++++++++++++++++----
 source/index.tsx                            | 10 ++++-
 2 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphTransformer.ts
index 24e13a6..a5bf87c 100644
--- a/source/components/model/graphTransformer.ts
+++ b/source/components/model/graphTransformer.ts
@@ -12,11 +12,29 @@ export interface OtherGraph{
     "rootVertices": number[]
     "vertexInformation": [number, VertexInfo][]
     "edgeInformation": [number, [number, EdgeInfo][]][]
-    "_idMap"?:any,
+    "_idMap": IdMapInfo,
     "functionCache"?: any
-  }
+}
+
+export interface IdMapInfo{
+    "size": number,
+    "k2v": [number | string, VertexMapInfo][],
+    "v2k": any
+}
+
+export interface VertexMapInfo{
+    "type": string,
+    "location"?: number[],
+    "content"?: any,
+    "lexeme"?: string,
+    "info": any,
+    "lhs"?: any,
+    "rhs"?: any,
+    "operator"?:any,
+    "children"?: any
+}
 
-  export interface VertexInfo{
+export interface VertexInfo{
     "tag": string,
     "id": number,
     "onlyBuiltin"?: boolean,
@@ -24,12 +42,12 @@ export interface OtherGraph{
     "environment"?: any,
     "when"?: string,
     "args"?:any
-  }
+}
 
-  export interface EdgeInfo{
+export interface EdgeInfo{
     "types": number,
     "attribute"?: string
-  }
+}
 
 export function transformToVisualizationGraph(dataflowGraph: Graph): VisualizationGraph {
 
@@ -72,6 +90,13 @@ export function transformToVisualizationGraph(dataflowGraph: Graph): Visualizati
 
 export function transformToVisualizationGraphForOtherGraph(dataflowGraph: OtherGraph): VisualizationGraph {
 
+    const infoMap = new Map<string, string>()
+
+    dataflowGraph._idMap.k2v.forEach( ([index, key]) => {
+        if(key.lexeme !== undefined){
+            infoMap.set(String(index), key.lexeme)
+        }
+    })
     const visualizationGraph: VisualizationGraph = {nodes:[], edges: []}
 
     for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation){
@@ -80,7 +105,8 @@ export function transformToVisualizationGraphForOtherGraph(dataflowGraph: OtherG
         const nodeInfoInfo = nodeInfo
         const newNode: Node = {
             id: String(nodeId),
-            data: { label: nodeInfoInfo.name, when: nodeInfoInfo.when},
+            data: {label: infoMap.get(String(nodeId)), when: nodeInfo.when},
+            //data: { label: nodeInfoInfo.name, when: nodeInfoInfo.when},
             position: { x: 0, y: 0 },
             connectable: false,
             dragging: true,
@@ -93,6 +119,7 @@ export function transformToVisualizationGraphForOtherGraph(dataflowGraph: OtherG
     for( let [sourceNodeId, listOfConnectedNodes] of dataflowGraph.edgeInformation.entries()){
         const listOfConnectedNodes2 = listOfConnectedNodes[1]
         for(let [targetNodeId, targetNodeInfo] of listOfConnectedNodes2){
+            console.log(edgeTypesToNames(targetNodeInfo.types))
              for( let linkEdgeType of edgeTypesToNames(targetNodeInfo.types)){
                 const newEdge: Edge =
                     {
diff --git a/source/index.tsx b/source/index.tsx
index 9be6631..2d4a268 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -22,7 +22,15 @@ const otherGraph: OtherGraph = {       "_idMap":{
   "k2v":[[0,{
   "type":"RSymbol","location":[1,1,1,1],"content":"x","lexeme":"x","info":{
       "fullRange":[1,1,1,1],"additionalTokens":[],"fullLexeme":"x","id":0,"parent":4,"role":"binop-lhs","index":0,"depth":2}
-  }],[1,{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}}],[2,{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}}],[3,{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}}],[4,{"type":"RBinaryOp","location":[1,3,1,4],"lhs":{"type":"RSymbol","location":[1,1,1,1],"content":"x","lexeme":"x","info":{"fullRange":[1,1,1,1],"additionalTokens":[],"fullLexeme":"x","id":0,"parent":4,"role":"binop-lhs","index":0,"depth":2}},"rhs":{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}},"operator":"<-","lexeme":"<-","info":{"fullRange":[1,1,1,10],"additionalTokens":[],"fullLexeme":"x <- 2 * 3","id":4,"parent":6,"depth":1,"index":0,"role":"expr-list-child"}}],[5,{"type":"RSymbol","location":[1,13,1,13],"content":"x","lexeme":"x","info":{"fullRange":[1,13,1,13],"additionalTokens":[],"fullLexeme":"x","id":5,"parent":6,"role":"expr-list-child","index":1,"depth":1}}],[6,{"type":"RExpressionList","children":[{"type":"RBinaryOp","location":[1,3,1,4],"lhs":{"type":"RSymbol","location":[1,1,1,1],"content":"x","lexeme":"x","info":{"fullRange":[1,1,1,1],"additionalTokens":[],"fullLexeme":"x","id":0,"parent":4,"role":"binop-lhs","index":0,"depth":2}},"rhs":{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}},"operator":"<-","lexeme":"<-","info":{"fullRange":[1,1,1,10],"additionalTokens":[],"fullLexeme":"x <- 2 * 3","id":4,"parent":6,"depth":1,"index":0,"role":"expr-list-child"}},{"type":"RSymbol","location":[1,13,1,13],"content":"x","lexeme":"x","info":{"fullRange":[1,13,1,13],"additionalTokens":[],"fullLexeme":"x","id":5,"parent":6,"role":"expr-list-child","index":1,"depth":1}}],"info":{"additionalTokens":[],"id":6,"depth":0,"role":"root","index":0}}],["4-arg",{"type":"RBinaryOp","location":[1,3,1,4],"lhs":{"type":"RSymbol","location":[1,1,1,1],"content":"x","lexeme":"x","info":{"fullRange":[1,1,1,1],"additionalTokens":[],"fullLexeme":"x","id":0,"parent":4,"role":"binop-lhs","index":0,"depth":2}},"rhs":{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}},"operator":"<-","lexeme":"<-","info":{"fullRange":[1,1,1,10],"additionalTokens":[],"fullLexeme":"x <- 2 * 3","id":4,"parent":6,"depth":1,"index":0,"role":"expr-list-child"}}],["5-arg",{"type":"RSymbol","location":[1,13,1,13],"content":"x","lexeme":"x","info":{"fullRange":[1,13,1,13],"additionalTokens":[],"fullLexeme":"x","id":5,"parent":6,"role":"expr-list-child","index":1,"depth":1}}],["0-arg",{"type":"RSymbol","location":[1,1,1,1],"content":"x","lexeme":"x","info":{"fullRange":[1,1,1,1],"additionalTokens":[],"fullLexeme":"x","id":0,"parent":4,"role":"binop-lhs","index":0,"depth":2}}],["3-arg",{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}}],["1-arg",{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}}],["2-arg",{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}}]],"v2k":{}
+  }],
+  [1,{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}}],
+  [2,{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}}],
+  [3,{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}}],
+  [4,{"type":"RBinaryOp","location":[1,3,1,4],"lhs":{"type":"RSymbol","location":[1,1,1,1],"content":"x","lexeme":"x","info":{"fullRange":[1,1,1,1],"additionalTokens":[],"fullLexeme":"x","id":0,"parent":4,"role":"binop-lhs","index":0,"depth":2}},"rhs":{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}},"operator":"<-","lexeme":"<-","info":{"fullRange":[1,1,1,10],"additionalTokens":[],"fullLexeme":"x <- 2 * 3","id":4,"parent":6,"depth":1,"index":0,"role":"expr-list-child"}}],
+  [5,{"type":"RSymbol","location":[1,13,1,13],"content":"x","lexeme":"x","info":{"fullRange":[1,13,1,13],"additionalTokens":[],"fullLexeme":"x","id":5,"parent":6,"role":"expr-list-child","index":1,"depth":1}}],
+  [6,{"type":"RExpressionList","children":[{"type":"RBinaryOp","location":[1,3,1,4],"lhs":{"type":"RSymbol","location":[1,1,1,1],"content":"x","lexeme":"x","info":{"fullRange":[1,1,1,1],"additionalTokens":[],"fullLexeme":"x","id":0,"parent":4,"role":"binop-lhs","index":0,"depth":2}},"rhs":{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}},"operator":"<-","lexeme":"<-","info":{"fullRange":[1,1,1,10],"additionalTokens":[],"fullLexeme":"x <- 2 * 3","id":4,"parent":6,"depth":1,"index":0,"role":"expr-list-child"}},{"type":"RSymbol","location":[1,13,1,13],"content":"x","lexeme":"x","info":{"fullRange":[1,13,1,13],"additionalTokens":[],"fullLexeme":"x","id":5,"parent":6,"role":"expr-list-child","index":1,"depth":1}}],"info":{"additionalTokens":[],"id":6,"depth":0,"role":"root","index":0}}],
+  ["4-arg",{"type":"RBinaryOp","location":[1,3,1,4],"lhs":{"type":"RSymbol","location":[1,1,1,1],"content":"x","lexeme":"x","info":{"fullRange":[1,1,1,1],"additionalTokens":[],"fullLexeme":"x","id":0,"parent":4,"role":"binop-lhs","index":0,"depth":2}},"rhs":{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}},"operator":"<-","lexeme":"<-","info":{"fullRange":[1,1,1,10],"additionalTokens":[],"fullLexeme":"x <- 2 * 3","id":4,"parent":6,"depth":1,"index":0,"role":"expr-list-child"}}],["5-arg",{"type":"RSymbol","location":[1,13,1,13],"content":"x","lexeme":"x","info":{"fullRange":[1,13,1,13],"additionalTokens":[],"fullLexeme":"x","id":5,"parent":6,"role":"expr-list-child","index":1,"depth":1}}],["0-arg",{"type":"RSymbol","location":[1,1,1,1],"content":"x","lexeme":"x","info":{"fullRange":[1,1,1,1],"additionalTokens":[],"fullLexeme":"x","id":0,"parent":4,"role":"binop-lhs","index":0,"depth":2}}],["3-arg",{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}}],["1-arg",{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}}],["2-arg",{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}}]],
+  "v2k":{}
 },
 "functionCache":[],
 "rootVertices":[1,2,3,0,4,5],

From 4fb4de6ba2fca763e0ac5a525eedc3df22abcfd5 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Mon, 17 Jun 2024 18:35:50 +0200
Subject: [PATCH 31/75] feat: make new node for values

---
 css/main.css                                     | 8 ++++++++
 source/components/graphComponent.tsx             | 5 +++--
 source/components/model/graphTransformer.ts      | 9 +++------
 source/components/model/nodes/nodeDefinition.tsx | 4 ++++
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/css/main.css b/css/main.css
index c288e67..80dc286 100644
--- a/css/main.css
+++ b/css/main.css
@@ -35,6 +35,14 @@ body {
 	border-style: dotted;
 }
 
+.value-node {
+	border: solid 2px;
+	padding: 5px;
+	margin: 0px;
+	border-radius: 50%;
+}
+
+
 .node-handle.react-flow__handle{
 	background: none;
 	border: none;
diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 58147d7..361b6c6 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -25,7 +25,7 @@ import ReactFlow, {
 
 import 'reactflow/dist/style.css';
 import { VisualizationGraph } from './model/graph';
-import { ExitPointNode, FunctionCallNode, UseNode, VariableDefinitionNode } from './model/nodes/nodeDefinition';
+import { ExitPointNode, FunctionCallNode, UseNode, ValueNode, VariableDefinitionNode } from './model/nodes/nodeDefinition';
 import ReadsEdge from './model/edges/readsEdge';
 import { edgeTagMapper } from './model/edges/edgeBase';
 import { ArgumentEdge } from './model/edges/argumentEdge';
@@ -166,7 +166,8 @@ export interface LayoutFlowProps {
     variableDefinitionNode: VariableDefinitionNode,
     useNode: UseNode,
     functionCallNode: FunctionCallNode,
-    exitPointNode: ExitPointNode
+    exitPointNode: ExitPointNode,
+    valueNode: ValueNode
    }), []);
 
    /* allows to map custom edge types */
diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphTransformer.ts
index a5bf87c..bfe6b6e 100644
--- a/source/components/model/graphTransformer.ts
+++ b/source/components/model/graphTransformer.ts
@@ -119,13 +119,12 @@ export function transformToVisualizationGraphForOtherGraph(dataflowGraph: OtherG
     for( let [sourceNodeId, listOfConnectedNodes] of dataflowGraph.edgeInformation.entries()){
         const listOfConnectedNodes2 = listOfConnectedNodes[1]
         for(let [targetNodeId, targetNodeInfo] of listOfConnectedNodes2){
-            console.log(edgeTypesToNames(targetNodeInfo.types))
              for( let linkEdgeType of edgeTypesToNames(targetNodeInfo.types)){
                 const newEdge: Edge =
                     {
                         source: String(sourceNodeId),
                         target: String(targetNodeId),
-                        id: `${sourceNodeId}-${targetNodeId}-${0}`,
+                        id: `${sourceNodeId}-${targetNodeId}-${linkEdgeType}`,
                         label: linkEdgeType,
                         data: { label: linkEdgeType, edgeType: linkEdgeType }
                     }
@@ -137,9 +136,6 @@ export function transformToVisualizationGraphForOtherGraph(dataflowGraph: OtherG
     return visualizationGraph
 }
 
-
-
-
 function nodeTagMapper(type: string):string{
     return nodeTagMap[type] ?? ''
 }
@@ -149,5 +145,6 @@ const nodeTagMap:{[index: string]:string} = {
     'variable-definition':  'variableDefinitionNode',
     'function-call':        'functionCallNode',
     'function-definition':  'variableDefinitionNode', //for now definition nodes look the same (function as well as variable)
-    'exit-point':           'exitPointNode'
+    'exit-point':           'exitPointNode',
+    'value':                'valueNode'
 }
\ No newline at end of file
diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index d28b850..03a9dbb 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -51,4 +51,8 @@ export const FunctionCallNode: React.FC<NodeComponentProps> = ({ data }) => {
 
 export const ExitPointNode: React.FC<NodeComponentProps> = ({ data }) => {
   return <BodyNodeComponent data={data} className='exit-point-node base-node'/>
+}
+
+export const ValueNode: React.FC<NodeComponentProps> = ({ data }) => {
+  return <BodyNodeComponent data={data} className='value-node base-node'/>
 }
\ No newline at end of file

From 4f3c2334a661f87029988956acef17c1dce41c89 Mon Sep 17 00:00:00 2001
From: EagleoutIce <florian.sihler@uni-ulm.de>
Date: Wed, 19 Jun 2024 11:12:03 +0200
Subject: [PATCH 32/75] fix: update graph construction with own idmap

---
 source/components/graphComponent.tsx        | 12 +++++-----
 source/components/model/graphTransformer.ts | 26 +++++++++++++++------
 source/index.tsx                            | 14 +++++++----
 3 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 361b6c6..8b8c5f1 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -137,15 +137,15 @@ export interface LayoutFlowProps {
    
    assignGraphUpdater(g =>  {
     setCurrentGraph(g)
-    onLayout({ direction: 'DOWN', useInitialNodes: true })
+    onLayout({ direction: 'DOWN', g })
   })
 
    const onLayout = useCallback(
-     ({ direction , useInitialNodes = false } : { direction: string, useInitialNodes?: boolean }) => {
+     ({ direction , g = undefined } : { direction: string, g?: VisualizationGraph }) => {
        const opts = { 'elk.direction': direction, ...elkOptions };
-       const ns = useInitialNodes ? currentGraph.nodes : nodes;
-       const es = useInitialNodes ? currentGraph.edges : edges;
-
+       const ns = g ? g.nodes : nodes;
+       const es = g ? g.edges : edges;
+      
        getLayoutedElements(ns, convertToExtendedEdges(es), opts).then(({ nodes: layoutedNodes, edges: layoutedEdges }) => {
          setNodes(layoutedNodes);
          setEdges(layoutedEdges);
@@ -158,7 +158,7 @@ export interface LayoutFlowProps {
 
    // Calculate the initial layout on mount.
    useLayoutEffect(() => {
-     onLayout({ direction: 'DOWN', useInitialNodes: true });
+     onLayout({ direction: 'DOWN', g: currentGraph });
    }, []);
 
    /* allows to map custom node types */
diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphTransformer.ts
index bfe6b6e..3067148 100644
--- a/source/components/model/graphTransformer.ts
+++ b/source/components/model/graphTransformer.ts
@@ -1,6 +1,10 @@
 import { Edge, Node } from "reactflow";
 import { VisualizationGraph } from "./graph";
 import { EdgeTypeName, edgeTypesToNames } from "@eagleoutice/flowr/dataflow/graph/edge";
+import { NodeId } from "@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/node-id";
+import { NormalizedAst, ParentInformation } from "@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/decorate";
+import { visitAst } from "@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/visitor";
+import { RNode } from "@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/model";
 
 export interface Graph {
     rootVertices: Set<string>,
@@ -88,15 +92,23 @@ export function transformToVisualizationGraph(dataflowGraph: Graph): Visualizati
     return visualizationGraph
 }
 
-export function transformToVisualizationGraphForOtherGraph(dataflowGraph: OtherGraph): VisualizationGraph {
 
-    const infoMap = new Map<string, string>()
-
-    dataflowGraph._idMap.k2v.forEach( ([index, key]) => {
-        if(key.lexeme !== undefined){
-            infoMap.set(String(index), key.lexeme)
+function constructLexemeMapping(ast: RNode<ParentInformation>): Map<NodeId, string> {
+    const infoMap = new Map<NodeId, string>()
+    visitAst(ast, node => {
+        if(node.lexeme !== undefined){
+            infoMap.set(node.info.id, node.lexeme)
         }
     })
+    
+    return infoMap
+}
+
+
+export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInformation>, dataflowGraph: OtherGraph): VisualizationGraph {
+
+    const infoMap = constructLexemeMapping(ast);
+
     const visualizationGraph: VisualizationGraph = {nodes:[], edges: []}
 
     for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation){
@@ -105,7 +117,7 @@ export function transformToVisualizationGraphForOtherGraph(dataflowGraph: OtherG
         const nodeInfoInfo = nodeInfo
         const newNode: Node = {
             id: String(nodeId),
-            data: {label: infoMap.get(String(nodeId)), when: nodeInfo.when},
+            data: {label: infoMap.get(nodeId), when: nodeInfo.when},
             //data: { label: nodeInfoInfo.name, when: nodeInfoInfo.when},
             position: { x: 0, y: 0 },
             connectable: false,
diff --git a/source/index.tsx b/source/index.tsx
index 2d4a268..5ced7ed 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -7,6 +7,8 @@ import { LayoutFlow } from './components/graphComponent';
 import { VisualizerWebsocketClient } from './components/network/visualizerWebsocketClient';
 import { FormEvent } from 'react';
 import { VisualizationGraph } from './components/model/graph';
+import { RNode } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/model';
+import { ParentInformation } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/decorate';
 /* old example
 const otherGraph:OtherGraph =  {
   "rootVertices":["0","2","5"],
@@ -58,7 +60,7 @@ client = new VisualizerWebsocketClient('ws://127.0.0.1:1042')
 client.onFileAnalysisResponse = (json) => {
   console.log(JSON.stringify(json.results.dataflow.graph))
   console.log(json.results.normalize)
-  updateGraph(json.results.dataflow.graph as unknown as OtherGraph)
+  updateGraph(json.results.normalize.ast, json.results.dataflow.graph as unknown as OtherGraph)
 }
 client.onHelloMessage = (json) => {
   console.log('hello', json);
@@ -77,20 +79,22 @@ function onRCodeInputChange(event: FormEvent<HTMLInputElement>) {
 function onRCodeRequest() {
   client?.sendAnalysisRequestJSON(currentValue)
 }
-let graphFromOtherGraph = transformToVisualizationGraphForOtherGraph(otherGraph)
+let graphFromOtherGraph: VisualizationGraph = {
+  edges: [],
+  nodes: []
+}
 
 let graphUpdater: ((graph: VisualizationGraph) => void) | undefined = undefined;
 function setGraphUpdater(updater: (graph: VisualizationGraph) => void) {
   graphUpdater = updater;
 }
 
-function updateGraph(graph: OtherGraph) {
+function updateGraph(ast: RNode<ParentInformation>, graph: OtherGraph) {
   // borderline graph :D
-  let newGraph = transformToVisualizationGraphForOtherGraph(graph)
+  const newGraph = transformToVisualizationGraphForOtherGraph(ast, graph)
   graphUpdater?.(newGraph);
 }
 
-
 const main = document.createElement('div');
 main.id = 'main';
 document.body.appendChild(main);

From 58b2b460bb7f50a05c6fb8cc8428edd0b7018588 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Sun, 23 Jun 2024 13:27:33 +0200
Subject: [PATCH 33/75] feat: remove when in the hover over component

---
 source/components/graphComponent.tsx             | 4 ++--
 source/components/model/graphTransformer.ts      | 4 +---
 source/components/model/nodes/nodeDefinition.tsx | 7 ++++---
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 8b8c5f1..0184432 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -79,7 +79,7 @@ const elkOptions: LayoutOptions = {
    return {
        nodes: layoutedGraph.children?.map(node => ({
          ...node,
-         data: { label: node.labels?.[0]?.text, id: node.id, when:(node as ExtendedElkNode).data.when},
+         data: { label: node.labels?.[0]?.text, id: node.id, nodeType:(node as ExtendedElkNode).data.nodeType},
          // React Flow expects a position property on the node instead of `x`
          // and `y` fields.
          position: { x: node.x ?? 0, y: node.y ?? 0 },
@@ -109,7 +109,7 @@ const elkOptions: LayoutOptions = {
  interface ExtendedElkNode extends ElkNode{
   data:{
     label:string, 
-    when:string
+    nodeType:string
   }
  }
 
diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphTransformer.ts
index 3067148..1d3a8fb 100644
--- a/source/components/model/graphTransformer.ts
+++ b/source/components/model/graphTransformer.ts
@@ -113,12 +113,10 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
 
     for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation){
         /* position will be set by the layout later */
-
         const nodeInfoInfo = nodeInfo
         const newNode: Node = {
             id: String(nodeId),
-            data: {label: infoMap.get(nodeId), when: nodeInfo.when},
-            //data: { label: nodeInfoInfo.name, when: nodeInfoInfo.when},
+            data: {label: infoMap.get(nodeId), nodeType: nodeInfoInfo.tag},
             position: { x: 0, y: 0 },
             connectable: false,
             dragging: true,
diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index 03a9dbb..f10cb79 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -1,6 +1,7 @@
 import { NodeProps } from "reactflow"
 import { HandleNodeComponent } from "./handleNodeComponent"
 import React from "react";
+import { ProgressPlugin } from "webpack";
 
 interface BodyNodeComponentProps{
   readonly className: string
@@ -15,7 +16,7 @@ const BodyNodeComponent: React.FC<BodyNodeComponentProps> = (props) => {
   return (
     <HandleNodeComponent>
       <div className = {props.className}>
-        <HoverOverComponent name={props.data.label} id={props.data.id} when= {props.data.when}/>
+        <HoverOverComponent name={props.data.label} id={props.data.id} nodeType= {props.data.nodeType}/>
         <label htmlFor="text">{props.data.label}</label>
       </div>
     </HandleNodeComponent>
@@ -25,14 +26,14 @@ const BodyNodeComponent: React.FC<BodyNodeComponentProps> = (props) => {
 interface HoverOverComponentProps{
   readonly name: string,
   readonly id: string,
-  readonly when: string
+  readonly nodeType: string
 }
 export const HoverOverComponent: React.FC<HoverOverComponentProps> = (props) => {
   return (
     <span className='hover-over-text'>
       <div className='one-line'>name:{props.name}</div><br/>
       <div className='one-line'>id:{props.id}</div><br/>
-      <div className='one-line'>when:{props.when}</div><br/>
+      <div className='one-line'>nodeType:{props.nodeType}</div><br/>
     </span>
   )
 }

From 4f88621ae0020bae779be410eac0f9f22f16c959 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Sun, 23 Jun 2024 14:20:15 +0200
Subject: [PATCH 34/75] fix: corrected wrong connection of edges

---
 source/components/model/graphTransformer.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphTransformer.ts
index 1d3a8fb..996acc6 100644
--- a/source/components/model/graphTransformer.ts
+++ b/source/components/model/graphTransformer.ts
@@ -109,6 +109,8 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
 
     const infoMap = constructLexemeMapping(ast);
 
+    console.log(infoMap)
+
     const visualizationGraph: VisualizationGraph = {nodes:[], edges: []}
 
     for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation){
@@ -126,8 +128,8 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
         visualizationGraph.nodes.push(newNode)
     }
 
-    for( let [sourceNodeId, listOfConnectedNodes] of dataflowGraph.edgeInformation.entries()){
-        const listOfConnectedNodes2 = listOfConnectedNodes[1]
+    for( let [sourceNodeId, listOfConnectedNodes] of dataflowGraph.edgeInformation){
+        const listOfConnectedNodes2 = listOfConnectedNodes
         for(let [targetNodeId, targetNodeInfo] of listOfConnectedNodes2){
              for( let linkEdgeType of edgeTypesToNames(targetNodeInfo.types)){
                 const newEdge: Edge =

From 420021be066b9c793f8731192e411953b89b8902 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Sun, 23 Jun 2024 15:13:02 +0200
Subject: [PATCH 35/75] feat: use bezier Edge instead of linear Edge

---
 .../components/model/edges/argumentEdge.tsx   | 15 +++---------
 source/components/model/edges/callsEdge.tsx   | 15 +++---------
 .../components/model/edges/definedByEdge.tsx  | 15 +++---------
 .../model/edges/definedByOnCallEdge.tsx       | 15 +++---------
 .../model/edges/definesOnCallEdge.tsx         | 15 +++---------
 source/components/model/edges/edgeBase.tsx    | 23 +++++++++----------
 .../model/edges/nonStandardEvaluationEdge.tsx | 15 +++---------
 source/components/model/edges/readsEdge.tsx   | 19 +++++----------
 source/components/model/edges/relatesEdge.tsx | 15 +++---------
 source/components/model/edges/returnsEdge.tsx | 15 +++---------
 .../components/model/edges/sameDefDefEdge.tsx | 15 +++---------
 .../model/edges/sameReadReadEdge.tsx          | 15 +++---------
 .../model/edges/sideEffectOnCallEdge.tsx      | 15 +++---------
 13 files changed, 50 insertions(+), 157 deletions(-)

diff --git a/source/components/model/edges/argumentEdge.tsx b/source/components/model/edges/argumentEdge.tsx
index d201450..9f3194b 100644
--- a/source/components/model/edges/argumentEdge.tsx
+++ b/source/components/model/edges/argumentEdge.tsx
@@ -1,18 +1,9 @@
+import { EdgeProps } from "reactflow"
 import { BodyEdgeCompontent } from "./edgeBase"
 
-export function ArgumentEdge({ id, sourceX, sourceY, targetX, targetY} : {
-    id: string,
-    sourceX: number,
-    sourceY: number,
-    targetX: number,
-    targetY: number
-    }) {
+export function ArgumentEdge(props:EdgeProps) {
     return <BodyEdgeCompontent
-      id = {id}
-      sourceX = {sourceX}
-      sourceY = {sourceY}
-      targetX = {targetX}
-      targetY = {targetY}
+      standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '7,7'}}
       label = 'argument'
   
diff --git a/source/components/model/edges/callsEdge.tsx b/source/components/model/edges/callsEdge.tsx
index aeff5b9..0eb4a36 100644
--- a/source/components/model/edges/callsEdge.tsx
+++ b/source/components/model/edges/callsEdge.tsx
@@ -1,18 +1,9 @@
+import { EdgeProps } from "reactflow"
 import { BodyEdgeCompontent } from "./edgeBase"
 
-export function CallsEdge({ id, sourceX, sourceY, targetX, targetY} : {
-    id: string,
-    sourceX: number,
-    sourceY: number,
-    targetX: number,
-    targetY: number
-    }) {
+export function CallsEdge(props:EdgeProps){
     return <BodyEdgeCompontent
-      id = {id}
-      sourceX = {sourceX}
-      sourceY = {sourceY}
-      targetX = {targetX}
-      targetY = {targetY}
+      standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '3,7'}}
       label = 'calls'
       arrowEnd = {true}
diff --git a/source/components/model/edges/definedByEdge.tsx b/source/components/model/edges/definedByEdge.tsx
index b010f30..2536d89 100644
--- a/source/components/model/edges/definedByEdge.tsx
+++ b/source/components/model/edges/definedByEdge.tsx
@@ -1,18 +1,9 @@
+import { EdgeProps } from "reactflow"
 import { BodyEdgeCompontent } from "./edgeBase"
 
-export function DefinedByEdge({ id, sourceX, sourceY, targetX, targetY} : {
-    id: string,
-    sourceX: number,
-    sourceY: number,
-    targetX: number,
-    targetY: number
-    }) {
+export function DefinedByEdge(props:EdgeProps) {
     return <BodyEdgeCompontent
-      id = {id}
-      sourceX = {sourceX}
-      sourceY = {sourceY}
-      targetX = {targetX}
-      targetY = {targetY}
+      standardEdgeInformation={props}
       edgeStyle = {{stroke: 'black'}}
       label = 'defined-by'
       arrowEnd = {true}
diff --git a/source/components/model/edges/definedByOnCallEdge.tsx b/source/components/model/edges/definedByOnCallEdge.tsx
index 4e8dda2..5ba035e 100644
--- a/source/components/model/edges/definedByOnCallEdge.tsx
+++ b/source/components/model/edges/definedByOnCallEdge.tsx
@@ -1,18 +1,9 @@
+import { EdgeProps } from "reactflow"
 import { BodyEdgeCompontent } from "./edgeBase"
 
-export function DefinedByOnCallEdge({ id, sourceX, sourceY, targetX, targetY} : {
-    id: string,
-    sourceX: number,
-    sourceY: number,
-    targetX: number,
-    targetY: number
-    }) {
+export function DefinedByOnCallEdge(props: EdgeProps) {
     return <BodyEdgeCompontent
-      id = {id}
-      sourceX = {sourceX}
-      sourceY = {sourceY}
-      targetX = {targetX}
-      targetY = {targetY}
+      standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '6,7'}}
       label = 'defined-by-on-call'
       arrowEnd = {true}
diff --git a/source/components/model/edges/definesOnCallEdge.tsx b/source/components/model/edges/definesOnCallEdge.tsx
index 606cfcb..82ddb0d 100644
--- a/source/components/model/edges/definesOnCallEdge.tsx
+++ b/source/components/model/edges/definesOnCallEdge.tsx
@@ -1,18 +1,9 @@
+import { EdgeProps } from "reactflow"
 import { BodyEdgeCompontent } from "./edgeBase"
 
-export function DefinesOnCallEdge({ id, sourceX, sourceY, targetX, targetY} : {
-    id: string,
-    sourceX: number,
-    sourceY: number,
-    targetX: number,
-    targetY: number
-    }) {
+export function DefinesOnCallEdge(props:EdgeProps) {
     return <BodyEdgeCompontent
-      id = {id}
-      sourceX = {sourceX}
-      sourceY = {sourceY}
-      targetX = {targetX}
-      targetY = {targetY}
+      standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '5,7'}}
       label = 'defines-on-call'
       arrowEnd = {true}
diff --git a/source/components/model/edges/edgeBase.tsx b/source/components/model/edges/edgeBase.tsx
index 9a4b089..1f9ac01 100644
--- a/source/components/model/edges/edgeBase.tsx
+++ b/source/components/model/edges/edgeBase.tsx
@@ -1,4 +1,4 @@
-import { getStraightPath, BaseEdge, EdgeLabelRenderer} from "reactflow";
+import { getStraightPath, BaseEdge, EdgeLabelRenderer, EdgeProps, getBezierPath} from "reactflow";
 
 const edgeTagMap:{[index: string]:string} = {
   'reads':                   'readsEdge',
@@ -20,11 +20,7 @@ export function edgeTagMapper(edgeTag: string): string {
 }
 
 interface BodyEdgeComponentProps {
-  readonly id: string,
-  readonly sourceX: number,
-  readonly sourceY: number,
-  readonly targetX: number,
-  readonly targetY: number,
+  readonly standardEdgeInformation: EdgeProps,
   readonly edgeStyle: React.CSSProperties,
   readonly label: string,
   readonly arrowStart?: boolean;
@@ -32,15 +28,18 @@ interface BodyEdgeComponentProps {
 }
 
 export const BodyEdgeCompontent: React.FC<BodyEdgeComponentProps> = (props) => {
-  const [edgePath, labelX, labelY] = getStraightPath({
-    sourceX: props.sourceX ,
-    sourceY: props.sourceY,
-    targetX: props.targetX,
-    targetY: props.targetY,
+  const {sourceX, sourceY, targetX, targetY, id, sourcePosition, targetPosition} = props.standardEdgeInformation
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX: sourceX ,
+    sourceY: sourceY,
+    targetX: targetX,
+    targetY: targetY,
+    targetPosition: targetPosition,
+    sourcePosition: sourcePosition
   })
   return (
     <>
-    <BaseEdge id={props.id} path={edgePath} style={props.edgeStyle} markerEnd={props.arrowEnd ? 'url(#triangle)' : undefined} markerStart={props.arrowStart ? 'url(#triangle)' : undefined} />
+    <BaseEdge id={id} path={edgePath} style={props.edgeStyle} markerEnd={props.arrowEnd ? 'url(#triangle)' : undefined} markerStart={props.arrowStart ? 'url(#triangle)' : undefined} />
     <EdgeLabelRenderer>
       <div
       style={{
diff --git a/source/components/model/edges/nonStandardEvaluationEdge.tsx b/source/components/model/edges/nonStandardEvaluationEdge.tsx
index 8716f0e..880d2fe 100644
--- a/source/components/model/edges/nonStandardEvaluationEdge.tsx
+++ b/source/components/model/edges/nonStandardEvaluationEdge.tsx
@@ -1,18 +1,9 @@
+import { EdgeProps } from "reactflow"
 import { BodyEdgeCompontent } from "./edgeBase"
 
-export function NonStandardEvaluationEdge({ id, sourceX, sourceY, targetX, targetY} : {
-    id: string,
-    sourceX: number,
-    sourceY: number,
-    targetX: number,
-    targetY: number
-    }) {
+export function NonStandardEvaluationEdge(props:EdgeProps) {
     return <BodyEdgeCompontent
-      id = {id}
-      sourceX = {sourceX}
-      sourceY = {sourceY}
-      targetX = {targetX}
-      targetY = {targetY}
+      standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '2,3'}}
       label = 'Non Standard Evaluation'
   
diff --git a/source/components/model/edges/readsEdge.tsx b/source/components/model/edges/readsEdge.tsx
index 590d567..910a6a0 100644
--- a/source/components/model/edges/readsEdge.tsx
+++ b/source/components/model/edges/readsEdge.tsx
@@ -1,20 +1,13 @@
+import { BaseEdge, BezierEdge, EdgeLabelRenderer, EdgeProps, getBezierPath, getStraightPath } from "reactflow"
 import { BodyEdgeCompontent } from "./edgeBase"
 
-export default function ReadsEdge({ id, sourceX, sourceY, targetX, targetY} : {
-    id: string,
-    sourceX: number,
-    sourceY: number,
-    targetX: number,
-    targetY: number
-    }) {
+export default function ReadsEdge(props: EdgeProps) {
     return <BodyEdgeCompontent
-      id = {id}
-      sourceX = {sourceX}
-      sourceY = {sourceY}
-      targetX = {targetX}
-      targetY = {targetY}
+      standardEdgeInformation={props}
       edgeStyle = {{stroke: 'black', strokeDasharray: '5,5'}}
       label = 'reads'
       arrowEnd = {true}
     />
-  }
\ No newline at end of file
+  }
+
+ 
\ No newline at end of file
diff --git a/source/components/model/edges/relatesEdge.tsx b/source/components/model/edges/relatesEdge.tsx
index cc21a57..95ef724 100644
--- a/source/components/model/edges/relatesEdge.tsx
+++ b/source/components/model/edges/relatesEdge.tsx
@@ -1,18 +1,9 @@
+import { EdgeProps } from "reactflow"
 import { BodyEdgeCompontent } from "./edgeBase"
 
-export function RelatesEdge({ id, sourceX, sourceY, targetX, targetY} : {
-    id: string,
-    sourceX: number,
-    sourceY: number,
-    targetX: number,
-    targetY: number
-    }) {
+export function RelatesEdge(props:EdgeProps) {
     return <BodyEdgeCompontent
-      id = {id}
-      sourceX = {sourceX}
-      sourceY = {sourceY}
-      targetX = {targetX}
-      targetY = {targetY}
+      standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '2,3'}}
       label = 'relates'
   
diff --git a/source/components/model/edges/returnsEdge.tsx b/source/components/model/edges/returnsEdge.tsx
index 0baf857..d8ea6a5 100644
--- a/source/components/model/edges/returnsEdge.tsx
+++ b/source/components/model/edges/returnsEdge.tsx
@@ -1,18 +1,9 @@
+import { EdgeProps } from "reactflow"
 import { BodyEdgeCompontent } from "./edgeBase"
 
-export function ReturnsEdge({ id, sourceX, sourceY, targetX, targetY} : {
-    id: string,
-    sourceX: number,
-    sourceY: number,
-    targetX: number,
-    targetY: number
-    }) {
+export function ReturnsEdge(props:EdgeProps) {
     return <BodyEdgeCompontent
-      id = {id}
-      sourceX = {sourceX}
-      sourceY = {sourceY}
-      targetX = {targetX}
-      targetY = {targetY}
+      standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '4,7'}}
       label = 'returns'
       arrowEnd = {true}
diff --git a/source/components/model/edges/sameDefDefEdge.tsx b/source/components/model/edges/sameDefDefEdge.tsx
index 0fbeab8..43e8c8c 100644
--- a/source/components/model/edges/sameDefDefEdge.tsx
+++ b/source/components/model/edges/sameDefDefEdge.tsx
@@ -1,18 +1,9 @@
+import { EdgeProps } from "reactflow"
 import { BodyEdgeCompontent } from "./edgeBase"
 
-export function SameDefDefEdge({ id, sourceX, sourceY, targetX, targetY} : {
-    id: string,
-    sourceX: number,
-    sourceY: number,
-    targetX: number,
-    targetY: number
-    }) {
+export function SameDefDefEdge(props:EdgeProps) {
     return <BodyEdgeCompontent
-      id = {id}
-      sourceX = {sourceX}
-      sourceY = {sourceY}
-      targetX = {targetX}
-      targetY = {targetY}
+      standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '2,7'}}
       label = 'same-def-def'
     />
diff --git a/source/components/model/edges/sameReadReadEdge.tsx b/source/components/model/edges/sameReadReadEdge.tsx
index 41bc625..9e72fa0 100644
--- a/source/components/model/edges/sameReadReadEdge.tsx
+++ b/source/components/model/edges/sameReadReadEdge.tsx
@@ -1,18 +1,9 @@
+import { EdgeProps } from "reactflow"
 import { BodyEdgeCompontent } from "./edgeBase"
 
-export function SameReadReadEdge({ id, sourceX, sourceY, targetX, targetY} : {
-    id: string,
-    sourceX: number,
-    sourceY: number,
-    targetX: number,
-    targetY: number
-    }) {
+export function SameReadReadEdge(props:EdgeProps) {
     return <BodyEdgeCompontent
-      id = {id}
-      sourceX = {sourceX}
-      sourceY = {sourceY}
-      targetX = {targetX}
-      targetY = {targetY}
+      standardEdgeInformation={props}
       edgeStyle = {{stroke: 'grey', strokeDasharray: '2,5'}}
       label = 'same-read-read'
     />
diff --git a/source/components/model/edges/sideEffectOnCallEdge.tsx b/source/components/model/edges/sideEffectOnCallEdge.tsx
index 95910d8..a0dc500 100644
--- a/source/components/model/edges/sideEffectOnCallEdge.tsx
+++ b/source/components/model/edges/sideEffectOnCallEdge.tsx
@@ -1,18 +1,9 @@
+import { EdgeProps } from "reactflow"
 import { BodyEdgeCompontent } from "./edgeBase"
 
-export function SideEffectOnCallEdge({ id, sourceX, sourceY, targetX, targetY} : {
-    id: string,
-    sourceX: number,
-    sourceY: number,
-    targetX: number,
-    targetY: number
-    }) {
+export function SideEffectOnCallEdge(props:EdgeProps) {
     return <BodyEdgeCompontent
-      id = {id}
-      sourceX = {sourceX}
-      sourceY = {sourceY}
-      targetX = {targetX}
-      targetY = {targetY}
+      standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue'}}
       label = 'side-effect-on-call'
   

From e0da0b12048c1da4ad3581b9de4b8029560b7612 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Sun, 23 Jun 2024 17:14:49 +0200
Subject: [PATCH 36/75] feat: improve readability of graph by better position
 of label

---
 source/components/model/edges/edgeBase.tsx  |  7 +++++--
 source/components/model/graphTransformer.ts | 19 +++++++++++--------
 source/index.tsx                            |  1 -
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/source/components/model/edges/edgeBase.tsx b/source/components/model/edges/edgeBase.tsx
index 1f9ac01..f74b0f5 100644
--- a/source/components/model/edges/edgeBase.tsx
+++ b/source/components/model/edges/edgeBase.tsx
@@ -29,7 +29,7 @@ interface BodyEdgeComponentProps {
 
 export const BodyEdgeCompontent: React.FC<BodyEdgeComponentProps> = (props) => {
   const {sourceX, sourceY, targetX, targetY, id, sourcePosition, targetPosition} = props.standardEdgeInformation
-  const [edgePath, labelX, labelY] = getBezierPath({
+  const [edgePath, labelX, labelY, offsetX, offsetY] = getBezierPath({
     sourceX: sourceX ,
     sourceY: sourceY,
     targetX: targetX,
@@ -37,6 +37,9 @@ export const BodyEdgeCompontent: React.FC<BodyEdgeComponentProps> = (props) => {
     targetPosition: targetPosition,
     sourcePosition: sourcePosition
   })
+  
+  const labelPositionX = targetX - sourceX > 0 ? labelX + offsetX / 2 : labelX - offsetX / 2 
+  const labelPositionY = targetY - sourceY > 0 ? labelY + offsetY / 2 : labelY - offsetY / 2
   return (
     <>
     <BaseEdge id={id} path={edgePath} style={props.edgeStyle} markerEnd={props.arrowEnd ? 'url(#triangle)' : undefined} markerStart={props.arrowStart ? 'url(#triangle)' : undefined} />
@@ -44,7 +47,7 @@ export const BodyEdgeCompontent: React.FC<BodyEdgeComponentProps> = (props) => {
       <div
       style={{
         position: 'absolute',
-        transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+        transform: `translate(-50%, -50%) translate(${labelPositionX}px,${labelPositionY}px)`,
         fontSize: 12,
         pointerEvents: 'all',
       }}
diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphTransformer.ts
index 996acc6..951a705 100644
--- a/source/components/model/graphTransformer.ts
+++ b/source/components/model/graphTransformer.ts
@@ -109,8 +109,6 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
 
     const infoMap = constructLexemeMapping(ast);
 
-    console.log(infoMap)
-
     const visualizationGraph: VisualizationGraph = {nodes:[], edges: []}
 
     for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation){
@@ -131,17 +129,22 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
     for( let [sourceNodeId, listOfConnectedNodes] of dataflowGraph.edgeInformation){
         const listOfConnectedNodes2 = listOfConnectedNodes
         for(let [targetNodeId, targetNodeInfo] of listOfConnectedNodes2){
-             for( let linkEdgeType of edgeTypesToNames(targetNodeInfo.types)){
-                const newEdge: Edge =
+            const listOfEdgeTypes = edgeTypesToNames(targetNodeInfo.types)
+            let labelNames:string = ''
+            let lastEdgeType:string = ''
+            for( let linkEdgeType of listOfEdgeTypes){
+                labelNames += linkEdgeType + ' '
+                lastEdgeType = linkEdgeType
+            }
+            const newEdge: Edge =
                     {
                         source: String(sourceNodeId),
                         target: String(targetNodeId),
-                        id: `${sourceNodeId}-${targetNodeId}-${linkEdgeType}`,
-                        label: linkEdgeType,
-                        data: { label: linkEdgeType, edgeType: linkEdgeType }
+                        id: `${sourceNodeId}-${targetNodeId}-${lastEdgeType}`,
+                        label: labelNames,
+                        data: { label: lastEdgeType, edgeType: lastEdgeType }
                     }
                 visualizationGraph.edges.push(newEdge)
-             }
         }
     }
 
diff --git a/source/index.tsx b/source/index.tsx
index 5ced7ed..c38c2a9 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -59,7 +59,6 @@ try{
 client = new VisualizerWebsocketClient('ws://127.0.0.1:1042')
 client.onFileAnalysisResponse = (json) => {
   console.log(JSON.stringify(json.results.dataflow.graph))
-  console.log(json.results.normalize)
   updateGraph(json.results.normalize.ast, json.results.dataflow.graph as unknown as OtherGraph)
 }
 client.onHelloMessage = (json) => {

From ceab6bd9e1c7030354653a053adcb11d97b128dd Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Sun, 23 Jun 2024 18:17:48 +0200
Subject: [PATCH 37/75] fix: show label of muliple edges with same source and
 target correctly

---
 source/components/graphComponent.tsx        | 8 +++++---
 source/components/model/edges/edgeBase.tsx  | 2 +-
 source/components/model/graphTransformer.ts | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 0184432..a244366 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -85,18 +85,19 @@ const elkOptions: LayoutOptions = {
          position: { x: node.x ?? 0, y: node.y ?? 0 },
        })) ?? [],
        edges: (layoutedGraph.edges as ExtendedExtendedEdge[] ?? []).map(e => {
-         return {
+        console.log(e.label) 
+        return {
            id: e.id,
            source: e.sources[0],
            target: e.targets[0],
            sourceHandle: isHorizontal ? 'right' : 'bottom',
            targetHandle: isHorizontal ? 'left' : 'top',
-           //label: e.id,
+           label: e.label,
            //animated: true,
            //style: { stroke: '#000' },
            //arrowHeadType: 'arrowclosed',
            type: edgeTagMapper(e.edgeType),
-           data: { label: e.id }
+           data: { label: e.label }
          };
        })
      }
@@ -104,6 +105,7 @@ const elkOptions: LayoutOptions = {
 
  interface ExtendedExtendedEdge extends ElkExtendedEdge{
   edgeType: string
+  label:string
  }
 
  interface ExtendedElkNode extends ElkNode{
diff --git a/source/components/model/edges/edgeBase.tsx b/source/components/model/edges/edgeBase.tsx
index f74b0f5..7e94f6c 100644
--- a/source/components/model/edges/edgeBase.tsx
+++ b/source/components/model/edges/edgeBase.tsx
@@ -53,7 +53,7 @@ export const BodyEdgeCompontent: React.FC<BodyEdgeComponentProps> = (props) => {
       }}
       className="nodrag nopan"
       >
-      {props.label}
+      {props.standardEdgeInformation.label}
       </div>
     </EdgeLabelRenderer>
     </>
diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphTransformer.ts
index 951a705..2de2323 100644
--- a/source/components/model/graphTransformer.ts
+++ b/source/components/model/graphTransformer.ts
@@ -142,7 +142,7 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
                         target: String(targetNodeId),
                         id: `${sourceNodeId}-${targetNodeId}-${lastEdgeType}`,
                         label: labelNames,
-                        data: { label: lastEdgeType, edgeType: lastEdgeType }
+                        data: { label: labelNames, edgeType: lastEdgeType }
                     }
                 visualizationGraph.edges.push(newEdge)
         }

From 1ac0ee35d10136e1c8cc4b8e0913e75da482ba7b Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Thu, 27 Jun 2024 14:14:53 +0200
Subject: [PATCH 38/75] feat: added floating edges

---
 source/components/graphComponent.tsx          |   6 +-
 source/components/model/edges/edgeBase.tsx    | 120 +++++++++++++++++-
 source/components/model/edges/readsEdge.tsx   |   3 +-
 source/components/model/graphTransformer.ts   |   1 -
 .../components/model/nodes/nodeDefinition.tsx |  58 ++++++++-
 5 files changed, 177 insertions(+), 11 deletions(-)

diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index a244366..d3cd7a2 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -25,7 +25,7 @@ import ReactFlow, {
 
 import 'reactflow/dist/style.css';
 import { VisualizationGraph } from './model/graph';
-import { ExitPointNode, FunctionCallNode, UseNode, ValueNode, VariableDefinitionNode } from './model/nodes/nodeDefinition';
+import FloatingConnectionLine, { ExitPointNode, FunctionCallNode, UseNode, ValueNode, VariableDefinitionNode } from './model/nodes/nodeDefinition';
 import ReadsEdge from './model/edges/readsEdge';
 import { edgeTagMapper } from './model/edges/edgeBase';
 import { ArgumentEdge } from './model/edges/argumentEdge';
@@ -84,8 +84,7 @@ const elkOptions: LayoutOptions = {
          // and `y` fields.
          position: { x: node.x ?? 0, y: node.y ?? 0 },
        })) ?? [],
-       edges: (layoutedGraph.edges as ExtendedExtendedEdge[] ?? []).map(e => {
-        console.log(e.label) 
+       edges: (layoutedGraph.edges as ExtendedExtendedEdge[] ?? []).map(e => { 
         return {
            id: e.id,
            source: e.sources[0],
@@ -213,6 +212,7 @@ export interface LayoutFlowProps {
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        proOptions={{hideAttribution: true}}
+       connectionLineComponent={FloatingConnectionLine}
        fitView
      >
       <Background />
diff --git a/source/components/model/edges/edgeBase.tsx b/source/components/model/edges/edgeBase.tsx
index 7e94f6c..71a9a38 100644
--- a/source/components/model/edges/edgeBase.tsx
+++ b/source/components/model/edges/edgeBase.tsx
@@ -1,4 +1,5 @@
-import { getStraightPath, BaseEdge, EdgeLabelRenderer, EdgeProps, getBezierPath} from "reactflow";
+import { useCallback } from "react";
+import { getStraightPath, BaseEdge, EdgeLabelRenderer, EdgeProps, getBezierPath, Node, Position, useStore, XYPosition} from "reactflow";
 
 const edgeTagMap:{[index: string]:string} = {
   'reads':                   'readsEdge',
@@ -28,21 +29,47 @@ interface BodyEdgeComponentProps {
 }
 
 export const BodyEdgeCompontent: React.FC<BodyEdgeComponentProps> = (props) => {
-  const {sourceX, sourceY, targetX, targetY, id, sourcePosition, targetPosition} = props.standardEdgeInformation
+  
+  const sourceNode = useStore(useCallback((store) => store.nodeInternals.get(props.standardEdgeInformation.source), [props.standardEdgeInformation.source]));
+  const targetNode = useStore(useCallback((store) => store.nodeInternals.get(props.standardEdgeInformation.target), [props.standardEdgeInformation.target]));
+
+  if (!sourceNode || !targetNode) {
+    return null;
+  }
+  
+  const {  sourceX, sourceY, targetX, targetY, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
+
   const [edgePath, labelX, labelY, offsetX, offsetY] = getBezierPath({
+    sourceX: sourceX,
+    sourceY: sourceY,
+    sourcePosition: sourcePos,
+    targetPosition: targetPos,
+    targetX: targetX,
+    targetY: targetY,
+  });
+
+  //const {sourceX, sourceY, targetX, targetY, id, sourcePosition, targetPosition} = props.standardEdgeInformation
+  
+  /* const [edgePath, labelX, labelY, offsetX, offsetY] = getBezierPath({
     sourceX: sourceX ,
     sourceY: sourceY,
     targetX: targetX,
     targetY: targetY,
     targetPosition: targetPosition,
     sourcePosition: sourcePosition
-  })
+  })*/
   
   const labelPositionX = targetX - sourceX > 0 ? labelX + offsetX / 2 : labelX - offsetX / 2 
   const labelPositionY = targetY - sourceY > 0 ? labelY + offsetY / 2 : labelY - offsetY / 2
+  
   return (
     <>
-    <BaseEdge id={id} path={edgePath} style={props.edgeStyle} markerEnd={props.arrowEnd ? 'url(#triangle)' : undefined} markerStart={props.arrowStart ? 'url(#triangle)' : undefined} />
+    <BaseEdge
+      id={props.standardEdgeInformation.id} 
+      path={edgePath} 
+      style={props.edgeStyle} 
+      markerEnd={props.arrowEnd ? 'url(#triangle)' : undefined} markerStart={props.arrowStart ? 'url(#triangle)' : undefined} 
+    />
     <EdgeLabelRenderer>
       <div
       style={{
@@ -58,4 +85,87 @@ export const BodyEdgeCompontent: React.FC<BodyEdgeComponentProps> = (props) => {
     </EdgeLabelRenderer>
     </>
   );
-}
\ No newline at end of file
+}
+
+
+// this helper function returns the intersection point
+// of the line between the center of the intersectionNode and the target node
+function getNodeIntersection(intersectionNode:Node, targetNode:Node):XYPosition {
+  // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
+  const {
+    width: intersectionNodeWidth,
+    height: intersectionNodeHeight,
+    positionAbsolute: intersectionNodePosition,
+  } = intersectionNode;
+
+  const targetPosition = targetNode.positionAbsolute;
+
+  const w = intersectionNodeWidth! / 2;
+  const h = intersectionNodeHeight! / 2;
+
+  const x2 = intersectionNodePosition!.x + w;
+  const y2 = intersectionNodePosition!.y + h;
+  const x1 = targetPosition!.x! + targetNode.width! / 2;
+  const y1 = targetPosition!.y! + targetNode.height! / 2;
+
+  const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
+  const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
+  const a = 1 / (Math.abs(xx1) + Math.abs(yy1));
+  const xx3 = a * xx1;
+  const yy3 = a * yy1;
+  const x = w * (xx3 + yy3) + x2;
+  const y = h * (-xx3 + yy3) + y2;
+
+  return { x, y };
+}
+
+// returns the position (top,right,bottom or right) passed node compared to the intersection point
+function getEdgePosition(node: Node, intersectionPoint:XYPosition): Position {
+  
+  const nodeToLookAt = { ...node.positionAbsolute, ...node };
+  const nx = Math.round(nodeToLookAt.x!);
+  const ny = Math.round(nodeToLookAt.y!);
+  const px = Math.round(intersectionPoint.x);
+  const py = Math.round(intersectionPoint.y);
+
+  const leftPosition = node.positionAbsolute!.x 
+  const rightPosition = node.positionAbsolute!.x + node.width!
+  const topPosition = node.positionAbsolute!.y
+  const buttomPosition = node.positionAbsolute!.y + node.height!
+  
+  if(Math.abs(leftPosition - intersectionPoint.x) <= 0.1){
+    return Position.Left
+  }
+
+  if(Math.abs(rightPosition - intersectionPoint.x) <= 0.1){
+    return Position.Right
+  }
+
+  if(Math.abs(topPosition - intersectionPoint.y) <= 0.1){
+    return Position.Top
+  }
+
+  if(Math.abs(buttomPosition - intersectionPoint.y) <= 0.1){
+    return Position.Bottom
+  }
+
+  return Position.Top
+}
+
+// returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
+export function getEdgeParams(source:Node, target: Node) {
+  const sourceIntersectionPoint = getNodeIntersection(source, target);
+  const targetIntersectionPoint = getNodeIntersection(target, source);
+
+  const sourcePos = getEdgePosition(source, sourceIntersectionPoint);
+  const targetPos = getEdgePosition(target, targetIntersectionPoint);
+
+  return {
+    sourceX: sourceIntersectionPoint.x,
+    sourceY: sourceIntersectionPoint.y,
+    targetX: targetIntersectionPoint.x,
+    targetY: targetIntersectionPoint.y,
+    sourcePos,
+    targetPos,
+  };
+}
diff --git a/source/components/model/edges/readsEdge.tsx b/source/components/model/edges/readsEdge.tsx
index 910a6a0..6730d2d 100644
--- a/source/components/model/edges/readsEdge.tsx
+++ b/source/components/model/edges/readsEdge.tsx
@@ -1,6 +1,7 @@
-import { BaseEdge, BezierEdge, EdgeLabelRenderer, EdgeProps, getBezierPath, getStraightPath } from "reactflow"
+import { EdgeProps} from "reactflow"
 import { BodyEdgeCompontent } from "./edgeBase"
 
+
 export default function ReadsEdge(props: EdgeProps) {
     return <BodyEdgeCompontent
       standardEdgeInformation={props}
diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphTransformer.ts
index 2de2323..b7a5f20 100644
--- a/source/components/model/graphTransformer.ts
+++ b/source/components/model/graphTransformer.ts
@@ -58,7 +58,6 @@ export function transformToVisualizationGraph(dataflowGraph: Graph): Visualizati
     const visualizationGraph: VisualizationGraph = {nodes:[], edges: []}
 
     for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation.entries()){
-        console.log(nodeId, nodeInfo);
 
         /* position will be set by the layout later */
         const newNode: Node = {
diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index f10cb79..8b9ea07 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -1,8 +1,64 @@
-import { NodeProps } from "reactflow"
+import { ConnectionLineComponentProps, Node, NodeProps , Position} from "reactflow"
 import { HandleNodeComponent } from "./handleNodeComponent"
 import React from "react";
 import { ProgressPlugin } from "webpack";
 
+import { getBezierPath } from 'reactflow';
+import { getEdgeParams } from "../edges/edgeBase";
+
+
+function FloatingConnectionLine(props:ConnectionLineComponentProps) {
+  const { toX, toY, fromPosition, toPosition, fromNode} = props
+  
+  if (!fromNode) {
+    return null;
+  }
+
+  const targetNode: Node = {
+    id: 'connection-target',
+    width: 1,
+    height: 1,
+    positionAbsolute: { x: toX, y: toY },
+    position: {x: toX, y: toY},
+    data:{}
+  };
+
+  const { sourceX, sourceY } = getEdgeParams(fromNode, targetNode);
+  const [edgePath] = getBezierPath({
+    sourceX: sourceX,
+    sourceY: sourceY,
+    sourcePosition: fromPosition,
+    targetPosition: toPosition,
+    targetX: toX,
+    targetY: toY
+  });
+
+  return (
+      <g>
+        <path
+            fill="none"
+            stroke="#222"
+            strokeWidth={1.5}
+            className="animated"
+            d={edgePath}
+        />
+        <circle
+            cx={toX}
+            cy={toY}
+            fill="#fff"
+            r={3}
+            stroke="#222"
+            strokeWidth={1.5}
+        />
+      </g>
+  );
+}
+
+export default FloatingConnectionLine;
+
+
+
+
 interface BodyNodeComponentProps{
   readonly className: string
   readonly data: NodeProps['data']

From 3d69aee05a6431aa7f11ae933b17ea3fbb897996 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Sun, 30 Jun 2024 17:56:28 +0200
Subject: [PATCH 39/75] feat: added first iteration of subflows

---
 css/main.css                                  |   3 +
 source/components/graphComponent.tsx          |  96 ++++++++----
 source/components/graphHierachy.ts            | 148 ++++++++++++++++++
 source/components/model/graph.ts              |   1 +
 source/components/model/graphTransformer.ts   |  85 ++++++++--
 .../components/model/nodes/nodeDefinition.tsx |   8 +
 source/index.tsx                              |   5 +-
 7 files changed, 303 insertions(+), 43 deletions(-)
 create mode 100644 source/components/graphHierachy.ts

diff --git a/css/main.css b/css/main.css
index 80dc286..829338f 100644
--- a/css/main.css
+++ b/css/main.css
@@ -42,6 +42,9 @@ body {
 	border-radius: 50%;
 }
 
+.group-node{
+	border: solid 2px;
+}
 
 .node-handle.react-flow__handle{
 	background: none;
diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index d3cd7a2..b9dc620 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -25,7 +25,7 @@ import ReactFlow, {
 
 import 'reactflow/dist/style.css';
 import { VisualizationGraph } from './model/graph';
-import FloatingConnectionLine, { ExitPointNode, FunctionCallNode, UseNode, ValueNode, VariableDefinitionNode } from './model/nodes/nodeDefinition';
+import FloatingConnectionLine, { ExitPointNode, FunctionCallNode, GroupNode, UseNode, ValueNode, VariableDefinitionNode } from './model/nodes/nodeDefinition';
 import ReadsEdge from './model/edges/readsEdge';
 import { edgeTagMapper } from './model/edges/edgeBase';
 import { ArgumentEdge } from './model/edges/argumentEdge';
@@ -39,6 +39,7 @@ import { SameDefDefEdge } from './model/edges/sameDefDefEdge';
 import { SameReadReadEdge } from './model/edges/sameReadReadEdge';
 import { SideEffectOnCallEdge } from './model/edges/sideEffectOnCallEdge';
 import { NonStandardEvaluationEdge } from './model/edges/nonStandardEvaluationEdge';
+import { flattenToNodeArray, foldIntoElkHierarchy } from './graphHierachy';
 
 
 
@@ -56,34 +57,71 @@ const elkOptions: LayoutOptions = {
  };
 
 
- async function getLayoutedElements(nodes: Node[], edges: ElkExtendedEdge[], options: LayoutOptions): Promise<{ nodes: Node[]; edges: Edge[] }> {
+ async function getLayoutedElements(nodes: Node[], nodeIdMap: Map<string,Node>, edges: ElkExtendedEdge[], options: LayoutOptions): Promise<{ nodes: Node[]; edges: Edge[] }> {
    const isHorizontal = options?.['elk.direction'] === 'RIGHT';
+
+   const graph: ElkNode = {
+    id: 'root',
+    layoutOptions: options,
+    children: foldIntoElkHierarchy(nodes,nodeIdMap,isHorizontal),
+    edges: edges
+   };
+   /*
    const graph: ElkNode = {
      id: 'root',
      layoutOptions: options,
-     children: nodes.map(node => ({
-       ...node,
-       // Adjust the target and source handle positions based on the layout
-       // direction.
-       targetPosition: isHorizontal ? 'left' : 'top',
-       sourcePosition: isHorizontal ? 'right' : 'bottom',
-       labels: [{ text: node.data.label }],
-       // Hardcode a width and height for elk to use when layouting.
-       width: 150,
-       height: 50,
-     })),
+     children: nodes.map(node =>{ 
+      if(node.data.parentId !== undefined){
+        return ({
+          ...node,
+          // Adjust the target and source handle positions based on the layout
+          // direction.
+          targetPosition: isHorizontal ? 'left' : 'top',
+          sourcePosition: isHorizontal ? 'right' : 'bottom',
+          labels: [{ text: node.data.label }],
+          // Hardcode a width and height for elk to use when layouting.
+          width: 150,
+          height: 50,
+          parentId: node.data.parentId,
+          extent: 'parent'
+        })
+      }else{
+        return ({
+          ...node,
+          // Adjust the target and source handle positions based on the layout
+          // direction.
+          targetPosition: isHorizontal ? 'left' : 'top',
+          sourcePosition: isHorizontal ? 'right' : 'bottom',
+          labels: [{ text: node.data.label }],
+          // Hardcode a width and height for elk to use when layouting.
+          width: 150,
+          height: 50,
+        })
+      }      
+    }),
      edges: edges
    };
-
+   */
    const layoutedGraph = await elk.layout(graph)
+   console.log(layoutedGraph)
+   const newNodes = flattenToNodeArray(layoutedGraph.children ?? [])
+   console.log(newNodes) 
    return {
-       nodes: layoutedGraph.children?.map(node => ({
-         ...node,
-         data: { label: node.labels?.[0]?.text, id: node.id, nodeType:(node as ExtendedElkNode).data.nodeType},
-         // React Flow expects a position property on the node instead of `x`
-         // and `y` fields.
-         position: { x: node.x ?? 0, y: node.y ?? 0 },
-       })) ?? [],
+       nodes: newNodes
+       /* layoutedGraph.children?.map(node => ({
+        ...node,
+        data: { 
+          label: node.labels?.[0]?.text, 
+          id: node.id, 
+          nodeType:(node as ExtendedElkNode).data.nodeType, 
+          ...((node as ExtendedElkNode).data.parentId !== undefined)&&{parentId:(node as ExtendedElkNode).data.parentId},
+          ...((node as ExtendedElkNode).data.parentId !== undefined)&&{extent: 'parent'},
+        },
+        // React Flow expects a position property on the node instead of `x`
+        // and `y` fields.
+        position: { x: node.x ?? 0, y: node.y ?? 0 },
+     })) ?? []*/
+     ,
        edges: (layoutedGraph.edges as ExtendedExtendedEdge[] ?? []).map(e => { 
         return {
            id: e.id,
@@ -94,7 +132,6 @@ const elkOptions: LayoutOptions = {
            label: e.label,
            //animated: true,
            //style: { stroke: '#000' },
-           //arrowHeadType: 'arrowclosed',
            type: edgeTagMapper(e.edgeType),
            data: { label: e.label }
          };
@@ -107,10 +144,11 @@ const elkOptions: LayoutOptions = {
   label:string
  }
 
- interface ExtendedElkNode extends ElkNode{
+ export interface ExtendedElkNode extends ElkNode{
   data:{
-    label:string, 
-    nodeType:string
+    label: string, 
+    nodeType: string,
+    parentId?: string
   }
  }
 
@@ -134,6 +172,7 @@ export interface LayoutFlowProps {
    const [currentGraph, setCurrentGraph] = useState(graph);
    const [nodes, setNodes, onNodesChange] = useNodesState([]);
    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+   const nodeMap = new Map<string,Node>() // correct Way to do it?????
    const { fitView } = useReactFlow();
    
    assignGraphUpdater(g =>  {
@@ -146,8 +185,8 @@ export interface LayoutFlowProps {
        const opts = { 'elk.direction': direction, ...elkOptions };
        const ns = g ? g.nodes : nodes;
        const es = g ? g.edges : edges;
-      
-       getLayoutedElements(ns, convertToExtendedEdges(es), opts).then(({ nodes: layoutedNodes, edges: layoutedEdges }) => {
+       const nm = g? g.nodeMap: nodeMap; // correct way to do it??????
+       getLayoutedElements(ns, nm, convertToExtendedEdges(es), opts).then(({ nodes: layoutedNodes, edges: layoutedEdges }) => {
          setNodes(layoutedNodes);
          setEdges(layoutedEdges);
 
@@ -168,7 +207,8 @@ export interface LayoutFlowProps {
     useNode: UseNode,
     functionCallNode: FunctionCallNode,
     exitPointNode: ExitPointNode,
-    valueNode: ValueNode
+    valueNode: ValueNode,
+    groupNode:GroupNode
    }), []);
 
    /* allows to map custom edge types */
diff --git a/source/components/graphHierachy.ts b/source/components/graphHierachy.ts
new file mode 100644
index 0000000..5dbc979
--- /dev/null
+++ b/source/components/graphHierachy.ts
@@ -0,0 +1,148 @@
+import { ElkNode } from 'elkjs';
+import {CoordinateExtent, Node} from 'reactflow'
+import { VisualizationNodeProps } from './model/graphTransformer';
+import { ExtendedElkNode } from './graphComponent';
+
+const standardHeight = 50
+const standardWidth  = 150
+
+/**
+ * Transforms the Nodestructure into the structure needed for the ELK Layouting algorithm
+ * @param nodes nodes given from the VisualizationGraph
+ */
+export function foldIntoElkHierarchy(nodes:Node[], nodesIdMap: Map<string,Node>, isHorizontal: boolean):ElkNode[]{
+    const usedMap  = new Map<string, boolean>()
+    nodesIdMap.forEach((node, id) => usedMap.set(id,false))
+
+    const smthToReturn =  (nodes.map((node) => foldOnVisualizationGraphNodes(node, nodesIdMap, usedMap, isHorizontal))).filter(nonEmpty)
+    
+    return smthToReturn
+    /*
+    const returnArray = nodes.map(node =>{ 
+        if(node.data.parentId !== undefined){
+          return ({
+            ...node,
+            // Adjust the target and source handle positions based on the layout
+            // direction.
+            targetPosition: isHorizontal ? 'left' : 'top',
+            sourcePosition: isHorizontal ? 'right' : 'bottom',
+            labels: [{ text: node.data.label }],
+            // Hardcode a width and height for elk to use when layouting.
+            width: standardWidth,
+            height: standardHeight,
+            parentId: node.data.parentId,
+            extent: 'parent'
+          })
+        }else{
+          return ({
+            ...node,
+            // Adjust the target and source handle positions based on the layout
+            // direction.
+            targetPosition: isHorizontal ? 'left' : 'top',
+            sourcePosition: isHorizontal ? 'right' : 'bottom',
+            labels: [{ text: node.data.label }],
+            // Hardcode a width and height for elk to use when layouting.
+            width: standardWidth,
+            height: standardHeight,
+          })
+        }
+      })
+    return returnArray
+    */
+}
+
+export interface HierarchyElkNode extends ElkNode {
+    targetPosition: string,
+    sourcePosition:string,
+    parentId?: string,
+    //extent?: "parent" | CoordinateExtent 
+    children?: HierarchyElkNode[]
+}
+
+function nonEmpty<TValue>(value:TValue| null| undefined): value is TValue{
+    return value !== null && value !== undefined
+}
+
+
+function foldOnVisualizationGraphNodes(currentNode: Node<VisualizationNodeProps>, 
+                                       nodeIdMap: Map<string, Node<VisualizationNodeProps>>, 
+                                       usedIdsMap: Map<string,boolean>,
+                                       isHorizontal: boolean):HierarchyElkNode | undefined{
+    if(currentNode.data.children !== undefined){
+        //calculate Children of the currentNode
+        const childrenOfNode : HierarchyElkNode[]= currentNode.data.children.map((nodeId) => nodeIdMap.get(nodeId)).filter((node => node !== undefined)).map((node) => 
+            foldOnVisualizationGraphNodes(node!,nodeIdMap,usedIdsMap, isHorizontal)
+        ).filter(nonEmpty)
+        const newHeight = childrenOfNode.reduce((accumulatedHeight, node) => accumulatedHeight + (node.height ?? 0), 0) + standardHeight
+        const newWidth = standardWidth + 10
+        const toReturn = {
+            ...currentNode,
+            // Adjust the target and source handle positions based on the layout
+            // direction.
+            targetPosition: isHorizontal ? 'left' : 'top',
+            sourcePosition: isHorizontal ? 'right' : 'bottom',
+            labels: [{ text: currentNode.data.label }],
+            // Hardcode a width and height for elk to use when layouting.
+            width: newWidth,
+            height: newHeight,
+            children: childrenOfNode,
+            ...(currentNode.data.parentId !== undefined) && { parentId: currentNode.data.parentId },
+            ...(currentNode.data.parentId !== undefined) && { extent: 'parent' }
+          }
+
+        return toReturn
+    } 
+
+    if(usedIdsMap.get(currentNode.id)){return undefined}
+
+    usedIdsMap.set(currentNode.id, true)
+    return ({
+        ...currentNode,
+        // Adjust the target and source handle positions based on the layout
+        // direction.
+        targetPosition: isHorizontal ? 'left' : 'top',
+        sourcePosition: isHorizontal ? 'right' : 'bottom',
+        labels: [{ text: currentNode.data.label }],
+        // Hardcode a width and height for elk to use when layouting.
+        width: standardWidth,
+        height: standardHeight,
+        ...(currentNode.data.parentId !== undefined) && { parentId: currentNode.data.parentId },
+        ...(currentNode.data.parentId !== undefined) && { extent: 'parent' }
+      })
+
+}
+
+export interface FinalNodeProps{
+    label: string
+    nodeType: string
+    id: string
+}
+
+export function flattenToNodeArray(nodeArray:ElkNode[]):Node<FinalNodeProps>[] {
+    return nodeArray.map((node) => flattenHierachyNode(node)).flat()
+}
+
+function flattenHierachyNode(currentNode:ElkNode):Node<FinalNodeProps>[]{
+    let toReturnNodeArray: Node<FinalNodeProps>[] = []
+
+    const newNode: Node<FinalNodeProps> = {
+        ...currentNode,
+        data: { 
+          label: currentNode.labels?.[0]?.text ?? '', 
+          id: currentNode.id, 
+          nodeType:(currentNode as ExtendedElkNode).data.nodeType, 
+          ...((currentNode as ExtendedElkNode).data.parentId !== undefined)&&{parentId:(currentNode as ExtendedElkNode).data.parentId},
+          ...((currentNode as ExtendedElkNode).data.parentId !== undefined)&&{extent: 'parent'},
+        },
+        // React Flow expects a position property on the node instead of `x`
+        // and `y` fields.
+        position: { x: currentNode.x ?? 0, y: currentNode.y ?? 0 },
+    }
+    toReturnNodeArray.push(newNode)
+    if(currentNode.children !== undefined){
+        const flattenedChildNodes = currentNode.children.map((node) => flattenHierachyNode(node)).flat()
+        toReturnNodeArray = toReturnNodeArray.concat(flattenedChildNodes)
+    }
+
+    return toReturnNodeArray
+}
\ No newline at end of file
diff --git a/source/components/model/graph.ts b/source/components/model/graph.ts
index fcb585d..62623c5 100644
--- a/source/components/model/graph.ts
+++ b/source/components/model/graph.ts
@@ -3,4 +3,5 @@ import { Edge, Node } from "reactflow";
 export interface VisualizationGraph {
     nodes: Node[]
     edges: Edge[]
+    nodeMap: Map<string, Node>
 }
diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphTransformer.ts
index b7a5f20..4f9fb5e 100644
--- a/source/components/model/graphTransformer.ts
+++ b/source/components/model/graphTransformer.ts
@@ -45,7 +45,12 @@ export interface VertexInfo{
     "name"?: string,
     "environment"?: any,
     "when"?: string,
-    "args"?:any
+    "args"?:any,
+    "subflow"?: SubFlowInfo
+}
+
+interface SubFlowInfo {
+    "graph": number[]
 }
 
 export interface EdgeInfo{
@@ -55,7 +60,7 @@ export interface EdgeInfo{
 
 export function transformToVisualizationGraph(dataflowGraph: Graph): VisualizationGraph {
 
-    const visualizationGraph: VisualizationGraph = {nodes:[], edges: []}
+    const visualizationGraph: VisualizationGraph = {nodes:[], edges: [], nodeMap: new Map<string, Node>()}
 
     for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation.entries()){
 
@@ -103,26 +108,81 @@ function constructLexemeMapping(ast: RNode<ParentInformation>): Map<NodeId, stri
     return infoMap
 }
 
+export interface VisualizationNodeProps{
+    label: string
+    nodeType:string
+    parentId?: string
+    children?: string[]
+}
+
 
 export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInformation>, dataflowGraph: OtherGraph): VisualizationGraph {
 
     const infoMap = constructLexemeMapping(ast);
 
-    const visualizationGraph: VisualizationGraph = {nodes:[], edges: []}
+    const subflowMap = new Map<number, number>()
 
+    const nodeIdMap = new Map<string, Node<VisualizationNodeProps>>()
+    
+    const visualizationGraph: VisualizationGraph = {nodes:[], edges: [], nodeMap:nodeIdMap}
+    
     for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation){
         /* position will be set by the layout later */
         const nodeInfoInfo = nodeInfo
-        const newNode: Node = {
-            id: String(nodeId),
-            data: {label: infoMap.get(nodeId), nodeType: nodeInfoInfo.tag},
-            position: { x: 0, y: 0 },
-            connectable: false,
-            dragging: true,
-            selectable: true,
-            type: nodeTagMapper(nodeInfoInfo.tag)
+        if(nodeInfoInfo.tag ==='function-definition' && nodeInfoInfo.subflow !== undefined){
+            const subflowArray = nodeInfoInfo.subflow.graph
+            console.log(subflowArray)
+            subflowArray.forEach((subNode) => {
+                subflowMap.set(subNode,nodeId)
+            })
+            
+            const idNewNode = String(nodeId) + '-subflow-node'
+            const newNode: Node<VisualizationNodeProps> = {
+                id: idNewNode,
+                data: {label: infoMap.get(nodeId) ?? '', nodeType: 'group', children:[]},
+                position: { x: 0, y: 0 },
+                connectable: false,
+                dragging: true,
+                selectable: true,
+                type: 'groupNode'
+            }
+            visualizationGraph.nodes.push(newNode)
+            nodeIdMap.set(idNewNode, newNode)
+        }
+    }
+
+    for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation){
+        /* position will be set by the layout later */
+        const nodeInfoInfo = nodeInfo
+        if(subflowMap.has(nodeId)){
+            const parentId = String(subflowMap.get(nodeId)) + '-subflow-node'
+            const idNewNode = String(nodeId)
+            const newNode: Node<VisualizationNodeProps> = {
+                id: idNewNode,
+                data: {label: infoMap.get(nodeId) ?? '', nodeType: nodeInfoInfo.tag, parentId:parentId},
+                position: { x: 0, y: 0 },
+                connectable: false,
+                dragging: true,
+                selectable: true,
+                type: nodeTagMapper(nodeInfoInfo.tag)
+            }
+            visualizationGraph.nodes.push(newNode)
+            nodeIdMap.set(idNewNode, newNode)
+            nodeIdMap.get(parentId)?.data.children?.push(idNewNode)
+        } else {
+            const idNewNode = String(nodeId)
+            const newNode: Node<VisualizationNodeProps> = {
+                id: idNewNode,
+                data: {label: infoMap.get(nodeId) ?? '', nodeType: nodeInfoInfo.tag},
+                position: { x: 0, y: 0 },
+                connectable: false,
+                dragging: true,
+                selectable: true,
+                type: nodeTagMapper(nodeInfoInfo.tag),
+            }
+            visualizationGraph.nodes.push(newNode)
+            nodeIdMap.set(idNewNode, newNode)
         }
-        visualizationGraph.nodes.push(newNode)
     }
 
     for( let [sourceNodeId, listOfConnectedNodes] of dataflowGraph.edgeInformation){
@@ -146,7 +206,6 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
                 visualizationGraph.edges.push(newEdge)
         }
     }
-
     return visualizationGraph
 }
 
diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index 8b9ea07..40ecf70 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -112,4 +112,12 @@ export const ExitPointNode: React.FC<NodeComponentProps> = ({ data }) => {
 
 export const ValueNode: React.FC<NodeComponentProps> = ({ data }) => {
   return <BodyNodeComponent data={data} className='value-node base-node'/>
+}
+
+export const GroupNode: React.FC<NodeComponentProps> = ({ data }) => {
+  return ( 
+    <div className = 'group-node'>
+      {data.label}
+    </div>
+  )
 }
\ No newline at end of file
diff --git a/source/index.tsx b/source/index.tsx
index c38c2a9..1cfd523 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -2,7 +2,7 @@ import { createRoot } from 'react-dom/client';
 import '../css/main.css';
 import { MainContainerComponent } from './components/mainContainerComponent';
 import { OtherGraph, transformToVisualizationGraphForOtherGraph } from './components/model/graphTransformer';
-import { ReactFlowProvider } from 'reactflow';
+import { ReactFlowProvider, Node } from 'reactflow';
 import { LayoutFlow } from './components/graphComponent';
 import { VisualizerWebsocketClient } from './components/network/visualizerWebsocketClient';
 import { FormEvent } from 'react';
@@ -80,7 +80,8 @@ function onRCodeRequest() {
 }
 let graphFromOtherGraph: VisualizationGraph = {
   edges: [],
-  nodes: []
+  nodes: [],
+  nodeMap: new Map<string,Node>()
 }
 
 let graphUpdater: ((graph: VisualizationGraph) => void) | undefined = undefined;

From ef90daa15fd3290c110fded613ed081d57607652 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Tue, 2 Jul 2024 11:16:32 +0200
Subject: [PATCH 40/75] fix: node heigth and width not correctly connecting

---
 source/components/graphComponent.tsx        | 61 +++------------------
 source/components/model/edges/edgeBase.tsx  |  4 ++
 source/components/model/graph.ts            |  8 ++-
 source/components/model/graphTransformer.ts | 12 ++--
 source/index.tsx                            |  4 +-
 5 files changed, 26 insertions(+), 63 deletions(-)

diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index b9dc620..3c82e7f 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -66,62 +66,17 @@ const elkOptions: LayoutOptions = {
     children: foldIntoElkHierarchy(nodes,nodeIdMap,isHorizontal),
     edges: edges
    };
-   /*
-   const graph: ElkNode = {
-     id: 'root',
-     layoutOptions: options,
-     children: nodes.map(node =>{ 
-      if(node.data.parentId !== undefined){
-        return ({
-          ...node,
-          // Adjust the target and source handle positions based on the layout
-          // direction.
-          targetPosition: isHorizontal ? 'left' : 'top',
-          sourcePosition: isHorizontal ? 'right' : 'bottom',
-          labels: [{ text: node.data.label }],
-          // Hardcode a width and height for elk to use when layouting.
-          width: 150,
-          height: 50,
-          parentId: node.data.parentId,
-          extent: 'parent'
-        })
-      }else{
-        return ({
-          ...node,
-          // Adjust the target and source handle positions based on the layout
-          // direction.
-          targetPosition: isHorizontal ? 'left' : 'top',
-          sourcePosition: isHorizontal ? 'right' : 'bottom',
-          labels: [{ text: node.data.label }],
-          // Hardcode a width and height for elk to use when layouting.
-          width: 150,
-          height: 50,
-        })
-      }      
-    }),
-     edges: edges
-   };
-   */
+   
    const layoutedGraph = await elk.layout(graph)
    console.log(layoutedGraph)
    const newNodes = flattenToNodeArray(layoutedGraph.children ?? [])
    console.log(newNodes) 
+   newNodes.forEach((node) => {
+    node.height = 0
+    node.width = 0
+   })
    return {
-       nodes: newNodes
-       /* layoutedGraph.children?.map(node => ({
-        ...node,
-        data: { 
-          label: node.labels?.[0]?.text, 
-          id: node.id, 
-          nodeType:(node as ExtendedElkNode).data.nodeType, 
-          ...((node as ExtendedElkNode).data.parentId !== undefined)&&{parentId:(node as ExtendedElkNode).data.parentId},
-          ...((node as ExtendedElkNode).data.parentId !== undefined)&&{extent: 'parent'},
-        },
-        // React Flow expects a position property on the node instead of `x`
-        // and `y` fields.
-        position: { x: node.x ?? 0, y: node.y ?? 0 },
-     })) ?? []*/
-     ,
+       nodes: newNodes,
        edges: (layoutedGraph.edges as ExtendedExtendedEdge[] ?? []).map(e => { 
         return {
            id: e.id,
@@ -183,9 +138,9 @@ export interface LayoutFlowProps {
    const onLayout = useCallback(
      ({ direction , g = undefined } : { direction: string, g?: VisualizationGraph }) => {
        const opts = { 'elk.direction': direction, ...elkOptions };
-       const ns = g ? g.nodes : nodes;
+       const ns = g ? g.nodesInfo.nodes : nodes;
        const es = g ? g.edges : edges;
-       const nm = g? g.nodeMap: nodeMap; // correct way to do it??????
+       const nm = g ? g.nodesInfo.nodeMap: nodeMap;
        getLayoutedElements(ns, nm, convertToExtendedEdges(es), opts).then(({ nodes: layoutedNodes, edges: layoutedEdges }) => {
          setNodes(layoutedNodes);
          setEdges(layoutedEdges);
diff --git a/source/components/model/edges/edgeBase.tsx b/source/components/model/edges/edgeBase.tsx
index 71a9a38..aa156c1 100644
--- a/source/components/model/edges/edgeBase.tsx
+++ b/source/components/model/edges/edgeBase.tsx
@@ -122,6 +122,10 @@ function getNodeIntersection(intersectionNode:Node, targetNode:Node):XYPosition
 // returns the position (top,right,bottom or right) passed node compared to the intersection point
 function getEdgePosition(node: Node, intersectionPoint:XYPosition): Position {
   
+  console.log(node.width)
+  console.log(node.height)
+
+
   const nodeToLookAt = { ...node.positionAbsolute, ...node };
   const nx = Math.round(nodeToLookAt.x!);
   const ny = Math.round(nodeToLookAt.y!);
diff --git a/source/components/model/graph.ts b/source/components/model/graph.ts
index 62623c5..7aeb789 100644
--- a/source/components/model/graph.ts
+++ b/source/components/model/graph.ts
@@ -1,7 +1,11 @@
 import { Edge, Node } from "reactflow";
 
 export interface VisualizationGraph {
-    nodes: Node[]
+    nodesInfo: NodeInformation
     edges: Edge[]
-    nodeMap: Map<string, Node>
 }
+
+export interface NodeInformation{
+    nodes: Node[],
+    nodeMap: Map<string, Node>
+}
\ No newline at end of file
diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphTransformer.ts
index 4f9fb5e..3bb5dde 100644
--- a/source/components/model/graphTransformer.ts
+++ b/source/components/model/graphTransformer.ts
@@ -60,7 +60,7 @@ export interface EdgeInfo{
 
 export function transformToVisualizationGraph(dataflowGraph: Graph): VisualizationGraph {
 
-    const visualizationGraph: VisualizationGraph = {nodes:[], edges: [], nodeMap: new Map<string, Node>()}
+    const visualizationGraph: VisualizationGraph =  {nodesInfo : {nodes:[], nodeMap:new Map<string, Node>()}, edges: [],}
 
     for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation.entries()){
 
@@ -74,7 +74,7 @@ export function transformToVisualizationGraph(dataflowGraph: Graph): Visualizati
             selectable: true,
             type: nodeTagMapper(nodeInfo.tag)
         }
-        visualizationGraph.nodes.push(newNode)
+        visualizationGraph.nodesInfo.nodes.push(newNode)
     }
 
     for( let [sourceNodeId, listOfConnectedNodes] of dataflowGraph.edgeInformation.entries()){
@@ -124,7 +124,7 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
 
     const nodeIdMap = new Map<string, Node<VisualizationNodeProps>>()
     
-    const visualizationGraph: VisualizationGraph = {nodes:[], edges: [], nodeMap:nodeIdMap}
+    const visualizationGraph: VisualizationGraph = {nodesInfo : {nodes:[], nodeMap:nodeIdMap}, edges: [],}
     
     for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation){
         /* position will be set by the layout later */
@@ -146,7 +146,7 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
                 selectable: true,
                 type: 'groupNode'
             }
-            visualizationGraph.nodes.push(newNode)
+            visualizationGraph.nodesInfo.nodes.push(newNode)
             nodeIdMap.set(idNewNode, newNode)
         }
     }
@@ -166,7 +166,7 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
                 selectable: true,
                 type: nodeTagMapper(nodeInfoInfo.tag)
             }
-            visualizationGraph.nodes.push(newNode)
+            visualizationGraph.nodesInfo.nodes.push(newNode)
             nodeIdMap.set(idNewNode, newNode)
             nodeIdMap.get(parentId)?.data.children?.push(idNewNode)
         } else {
@@ -180,7 +180,7 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
                 selectable: true,
                 type: nodeTagMapper(nodeInfoInfo.tag),
             }
-            visualizationGraph.nodes.push(newNode)
+            visualizationGraph.nodesInfo.nodes.push(newNode)
             nodeIdMap.set(idNewNode, newNode)
         }
     }
diff --git a/source/index.tsx b/source/index.tsx
index 1cfd523..e95bf65 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -80,8 +80,8 @@ function onRCodeRequest() {
 }
 let graphFromOtherGraph: VisualizationGraph = {
   edges: [],
-  nodes: [],
-  nodeMap: new Map<string,Node>()
+  nodesInfo: {nodes:[], nodeMap: new Map<string,Node>()}
+  
 }
 
 let graphUpdater: ((graph: VisualizationGraph) => void) | undefined = undefined;

From 24954772886c5490b389a3f789b03c712a718c30 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Fri, 5 Jul 2024 10:44:33 +0200
Subject: [PATCH 41/75] refactor: change structure for transforming of graphs

---
 source/components/graphComponent.tsx          | 52 +++----------------
 source/components/graphHierachy.ts            | 11 +++-
 .../{graphTransformer.ts => graphBuilder.ts}  |  0
 source/components/model/graphTransition.ts    | 48 +++++++++++++++++
 source/index.tsx                              |  2 +-
 5 files changed, 66 insertions(+), 47 deletions(-)
 rename source/components/model/{graphTransformer.ts => graphBuilder.ts} (100%)
 create mode 100644 source/components/model/graphTransition.ts

diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 3c82e7f..391a40f 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -40,6 +40,7 @@ import { SameReadReadEdge } from './model/edges/sameReadReadEdge';
 import { SideEffectOnCallEdge } from './model/edges/sideEffectOnCallEdge';
 import { NonStandardEvaluationEdge } from './model/edges/nonStandardEvaluationEdge';
 import { flattenToNodeArray, foldIntoElkHierarchy } from './graphHierachy';
+import { ExtendedExtendedEdge, transformGraphForLayouting, transformGraphForShowing } from './model/graphTransition';
 
 
 
@@ -57,54 +58,17 @@ const elkOptions: LayoutOptions = {
  };
 
 
- async function getLayoutedElements(nodes: Node[], nodeIdMap: Map<string,Node>, edges: ElkExtendedEdge[], options: LayoutOptions): Promise<{ nodes: Node[]; edges: Edge[] }> {
+ async function getLayoutedElements(nodes: Node[], 
+                                    nodeIdMap: Map<string,Node>, 
+                                    edges: ElkExtendedEdge[], 
+                                    options: LayoutOptions): Promise<{ nodes: Node[]; edges: Edge[] }> {
    const isHorizontal = options?.['elk.direction'] === 'RIGHT';
 
-   const graph: ElkNode = {
-    id: 'root',
-    layoutOptions: options,
-    children: foldIntoElkHierarchy(nodes,nodeIdMap,isHorizontal),
-    edges: edges
-   };
+   const graph: ElkNode = transformGraphForLayouting(nodes,nodeIdMap, edges, options, isHorizontal)
    
    const layoutedGraph = await elk.layout(graph)
-   console.log(layoutedGraph)
-   const newNodes = flattenToNodeArray(layoutedGraph.children ?? [])
-   console.log(newNodes) 
-   newNodes.forEach((node) => {
-    node.height = 0
-    node.width = 0
-   })
-   return {
-       nodes: newNodes,
-       edges: (layoutedGraph.edges as ExtendedExtendedEdge[] ?? []).map(e => { 
-        return {
-           id: e.id,
-           source: e.sources[0],
-           target: e.targets[0],
-           sourceHandle: isHorizontal ? 'right' : 'bottom',
-           targetHandle: isHorizontal ? 'left' : 'top',
-           label: e.label,
-           //animated: true,
-           //style: { stroke: '#000' },
-           type: edgeTagMapper(e.edgeType),
-           data: { label: e.label }
-         };
-       })
-     }
- }
-
- interface ExtendedExtendedEdge extends ElkExtendedEdge{
-  edgeType: string
-  label:string
- }
-
- export interface ExtendedElkNode extends ElkNode{
-  data:{
-    label: string, 
-    nodeType: string,
-    parentId?: string
-  }
+   
+   return transformGraphForShowing(layoutedGraph, isHorizontal)
  }
 
  function convertToExtendedEdges(edges: Edge[]): ElkExtendedEdge[] {
diff --git a/source/components/graphHierachy.ts b/source/components/graphHierachy.ts
index 5dbc979..401a405 100644
--- a/source/components/graphHierachy.ts
+++ b/source/components/graphHierachy.ts
@@ -1,7 +1,6 @@
 import { ElkNode } from 'elkjs';
 import {CoordinateExtent, Node} from 'reactflow'
-import { VisualizationNodeProps } from './model/graphTransformer';
-import { ExtendedElkNode } from './graphComponent';
+import { VisualizationNodeProps } from './model/graphBuilder';
 
 const standardHeight = 50
 const standardWidth  = 150
@@ -51,6 +50,14 @@ export function foldIntoElkHierarchy(nodes:Node[], nodesIdMap: Map<string,Node>,
     */
 }
 
+interface ExtendedElkNode extends ElkNode{
+  data:{
+    label: string, 
+    nodeType: string,
+    parentId?: string
+  }
+ }
+
 export interface HierarchyElkNode extends ElkNode {
     targetPosition: string,
     sourcePosition:string,
diff --git a/source/components/model/graphTransformer.ts b/source/components/model/graphBuilder.ts
similarity index 100%
rename from source/components/model/graphTransformer.ts
rename to source/components/model/graphBuilder.ts
diff --git a/source/components/model/graphTransition.ts b/source/components/model/graphTransition.ts
new file mode 100644
index 0000000..be7a20e
--- /dev/null
+++ b/source/components/model/graphTransition.ts
@@ -0,0 +1,48 @@
+import { ElkExtendedEdge, ElkNode, LayoutOptions } from "elkjs";
+import { flattenToNodeArray, foldIntoElkHierarchy,FinalNodeProps } from "../graphHierachy";
+import { Edge, Node } from "reactflow"
+import { edgeTagMapper } from "./edges/edgeBase";
+
+export function transformGraphForLayouting(nodes: Node[], nodeIdMap: Map<string,Node>, edges: ElkExtendedEdge[], options: LayoutOptions, isHorizontal: boolean):ElkNode{
+  const toReturn: ElkNode = {
+    id: 'root',
+    layoutOptions: options,
+    children: foldIntoElkHierarchy(nodes,nodeIdMap,isHorizontal),
+    edges: edges
+    };
+
+  return toReturn
+}
+
+
+export interface ExtendedExtendedEdge extends ElkExtendedEdge{
+  edgeType: string
+  label:string
+ }
+
+export function transformGraphForShowing(layoutedGraph: ElkNode, isHorizontal: boolean): { nodes: Node[]; edges: Edge[] }{
+  const newNodes = flattenToNodeArray(layoutedGraph.children ?? [])
+  console.log(newNodes) 
+  newNodes.forEach((node) => {
+  node.height = 0
+  node.width = 0
+  })
+
+  return {
+    nodes: newNodes,
+    edges: (layoutedGraph.edges as ExtendedExtendedEdge[] ?? []).map(e => { 
+    return {
+      id: e.id,
+      source: e.sources[0],
+      target: e.targets[0],
+      sourceHandle: isHorizontal ? 'right' : 'bottom',
+      targetHandle: isHorizontal ? 'left' : 'top',
+      label: e.label,
+      //animated: true,
+      //style: { stroke: '#000' },
+      type: edgeTagMapper(e.edgeType),
+      data: { label: e.label }
+      };
+    })
+  }
+}
\ No newline at end of file
diff --git a/source/index.tsx b/source/index.tsx
index e95bf65..411e34a 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -1,7 +1,7 @@
 import { createRoot } from 'react-dom/client';
 import '../css/main.css';
 import { MainContainerComponent } from './components/mainContainerComponent';
-import { OtherGraph, transformToVisualizationGraphForOtherGraph } from './components/model/graphTransformer';
+import { OtherGraph, transformToVisualizationGraphForOtherGraph } from './components/model/graphBuilder';
 import { ReactFlowProvider, Node } from 'reactflow';
 import { LayoutFlow } from './components/graphComponent';
 import { VisualizerWebsocketClient } from './components/network/visualizerWebsocketClient';

From 716d91ae497ae2a4466852c631dcbbace3b79ca4 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Fri, 5 Jul 2024 14:53:38 +0200
Subject: [PATCH 42/75] feat: add multiEdge as first step for hover over edges

---
 css/main.css                                |  4 +-
 source/components/graphComponent.tsx        | 16 ++++-
 source/components/graphHierachy.ts          |  8 +--
 source/components/model/edges/edgeBase.tsx  | 40 ++++-------
 source/components/model/edges/multiEdge.tsx | 74 +++++++++++++++++++++
 source/components/model/graphBuilder.ts     | 61 ++++-------------
 source/components/model/graphTransition.ts  | 17 +++--
 7 files changed, 129 insertions(+), 91 deletions(-)
 create mode 100644 source/components/model/edges/multiEdge.tsx

diff --git a/css/main.css b/css/main.css
index 829338f..365d67a 100644
--- a/css/main.css
+++ b/css/main.css
@@ -50,7 +50,9 @@ body {
 	background: none;
 	border: none;
 }
-
+.edge-label {
+	visibility: hidden;
+}
 
 .label {
 	transition: 3s;
diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 391a40f..000796c 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -21,6 +21,7 @@ import ReactFlow, {
   EdgeLabelRenderer,
   MarkerType,
   EdgeProps,
+  applyEdgeChanges,
 } from 'reactflow';
 
 import 'reactflow/dist/style.css';
@@ -41,6 +42,7 @@ import { SideEffectOnCallEdge } from './model/edges/sideEffectOnCallEdge';
 import { NonStandardEvaluationEdge } from './model/edges/nonStandardEvaluationEdge';
 import { flattenToNodeArray, foldIntoElkHierarchy } from './graphHierachy';
 import { ExtendedExtendedEdge, transformGraphForLayouting, transformGraphForShowing } from './model/graphTransition';
+import { MultiEdge } from './model/edges/multiEdge';
 
 
 
@@ -77,7 +79,8 @@ const elkOptions: LayoutOptions = {
      sources: [edge.source],
      targets: [edge.target],
      label: edge.label as string,
-     edgeType: edge.data.edgeType ?? ''
+     edgeType: edge.data.edgeType ?? '',
+     data:{...edge.data}
    }));
  }
 
@@ -98,7 +101,7 @@ export interface LayoutFlowProps {
     setCurrentGraph(g)
     onLayout({ direction: 'DOWN', g })
   })
-
+  
    const onLayout = useCallback(
      ({ direction , g = undefined } : { direction: string, g?: VisualizationGraph }) => {
        const opts = { 'elk.direction': direction, ...elkOptions };
@@ -143,7 +146,8 @@ export interface LayoutFlowProps {
     argumentEdge: ArgumentEdge,
     sideEffectOnCallEdge: SideEffectOnCallEdge,
     relatesEdge: RelatesEdge,
-    nonStandardEvaluationEdge: NonStandardEvaluationEdge
+    nonStandardEvaluationEdge: NonStandardEvaluationEdge,
+    multiEdge: MultiEdge
   }),[])
 
    return (
@@ -170,6 +174,12 @@ export interface LayoutFlowProps {
        edgeTypes={edgeTypes}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
+       onEdgeMouseEnter={(event, edge) => {
+        edge.data.isHovered = true
+       }}
+       onEdgeMouseLeave={(event, edge) => {
+        edge.data.isHovered = false
+       }}
        proOptions={{hideAttribution: true}}
        connectionLineComponent={FloatingConnectionLine}
        fitView
diff --git a/source/components/graphHierachy.ts b/source/components/graphHierachy.ts
index 401a405..fe71681 100644
--- a/source/components/graphHierachy.ts
+++ b/source/components/graphHierachy.ts
@@ -119,10 +119,10 @@ function foldOnVisualizationGraphNodes(currentNode: Node<VisualizationNodeProps>
 
 }
 
-export interface FinalNodeProps{
-    label: string
-    nodeType: string
-    id: string
+interface FinalNodeProps{
+  label: string
+  nodeType: string
+  id: string
 }
 
 export function flattenToNodeArray(nodeArray:ElkNode[]):Node<FinalNodeProps>[] {
diff --git a/source/components/model/edges/edgeBase.tsx b/source/components/model/edges/edgeBase.tsx
index aa156c1..3452ef1 100644
--- a/source/components/model/edges/edgeBase.tsx
+++ b/source/components/model/edges/edgeBase.tsx
@@ -13,7 +13,8 @@ const edgeTagMap:{[index: string]:string} = {
   'argument':                'argumentEdge',
   'side-effect-on-call':     'sideEffectOnCallEdge',
   'relates':                 'relatesEdge', //obsolete?
-  'non-standard-evaluation': 'nonStandardEvaluationEdge'
+  'non-standard-evaluation': 'nonStandardEvaluationEdge',
+  'multiEdge':               'multiEdge'
 };
 
 export function edgeTagMapper(edgeTag: string): string {
@@ -47,21 +48,10 @@ export const BodyEdgeCompontent: React.FC<BodyEdgeComponentProps> = (props) => {
     targetX: targetX,
     targetY: targetY,
   });
-
-  //const {sourceX, sourceY, targetX, targetY, id, sourcePosition, targetPosition} = props.standardEdgeInformation
-  
-  /* const [edgePath, labelX, labelY, offsetX, offsetY] = getBezierPath({
-    sourceX: sourceX ,
-    sourceY: sourceY,
-    targetX: targetX,
-    targetY: targetY,
-    targetPosition: targetPosition,
-    sourcePosition: sourcePosition
-  })*/
-  
-  const labelPositionX = targetX - sourceX > 0 ? labelX + offsetX / 2 : labelX - offsetX / 2 
-  const labelPositionY = targetY - sourceY > 0 ? labelY + offsetY / 2 : labelY - offsetY / 2
   
+  //const labelPositionX = targetX - sourceX > 0 ? labelX + offsetX / 2 : labelX - offsetX / 2 
+  //const labelPositionY = targetY - sourceY > 0 ? labelY + offsetY / 2 : labelY - offsetY / 2
+   
   return (
     <>
     <BaseEdge
@@ -72,15 +62,15 @@ export const BodyEdgeCompontent: React.FC<BodyEdgeComponentProps> = (props) => {
     />
     <EdgeLabelRenderer>
       <div
-      style={{
-        position: 'absolute',
-        transform: `translate(-50%, -50%) translate(${labelPositionX}px,${labelPositionY}px)`,
-        fontSize: 12,
-        pointerEvents: 'all',
-      }}
-      className="nodrag nopan"
+        style={{
+          position: 'absolute',
+          transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+          fontSize: 12,
+          pointerEvents: 'all',
+        }}
+        className="nodrag nopan"
       >
-      {props.standardEdgeInformation.label}
+        {props.standardEdgeInformation.label}
       </div>
     </EdgeLabelRenderer>
     </>
@@ -122,10 +112,6 @@ function getNodeIntersection(intersectionNode:Node, targetNode:Node):XYPosition
 // returns the position (top,right,bottom or right) passed node compared to the intersection point
 function getEdgePosition(node: Node, intersectionPoint:XYPosition): Position {
   
-  console.log(node.width)
-  console.log(node.height)
-
-
   const nodeToLookAt = { ...node.positionAbsolute, ...node };
   const nx = Math.round(nodeToLookAt.x!);
   const ny = Math.round(nodeToLookAt.y!);
diff --git a/source/components/model/edges/multiEdge.tsx b/source/components/model/edges/multiEdge.tsx
new file mode 100644
index 0000000..e03d19e
--- /dev/null
+++ b/source/components/model/edges/multiEdge.tsx
@@ -0,0 +1,74 @@
+import { useCallback } from "react";
+import { BaseEdge, Edge, EdgeLabelRenderer, EdgeMouseHandler, EdgeProps, getBezierPath, useStore } from "reactflow";
+import { getEdgeParams } from "./edgeBase";
+
+export function MultiEdge(props:EdgeProps){
+    return <BodyMultiEdgeCompontent
+      standardEdgeInformation={props}
+    />
+}
+
+interface BodyMultiEdgeComponentProps {
+    readonly standardEdgeInformation: EdgeProps,
+  }
+  
+  export const BodyMultiEdgeCompontent: React.FC<BodyMultiEdgeComponentProps> = (props) => {
+    
+    const sourceNode = useStore(useCallback((store) => store.nodeInternals.get(props.standardEdgeInformation.source), [props.standardEdgeInformation.source]));
+    const targetNode = useStore(useCallback((store) => store.nodeInternals.get(props.standardEdgeInformation.target), [props.standardEdgeInformation.target]));
+  
+    if (!sourceNode || !targetNode) {
+      return null;
+    }
+    
+    const {  sourceX, sourceY, targetX, targetY, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
+    
+    const [edgePath, labelX, labelY, offsetX, offsetY] = getBezierPath({
+      sourceX: sourceX,
+      sourceY: sourceY,
+      sourcePosition: sourcePos,
+      targetPosition: targetPos,
+      targetX: targetX,
+      targetY: targetY,
+    });
+    
+    //const labelPositionX = targetX - sourceX > 0 ? labelX + offsetX / 2 : labelX - offsetX / 2 
+    //const labelPositionY = targetY - sourceY > 0 ? labelY + offsetY / 2 : labelY - offsetY / 2
+    const edgeStyle: React.CSSProperties = {stroke : 'black'}
+    const arrowEnd = true
+    const arrowStart = false
+
+    let label = ''
+    for(const singleLabel of props.standardEdgeInformation.data.edgeTypes){
+        label += singleLabel + ' '
+    }
+    
+    return (
+      <>
+      <BaseEdge
+        id={props.standardEdgeInformation.id} 
+        path={edgePath} 
+        style={edgeStyle} 
+        markerEnd={arrowEnd ? 'url(#triangle)' : undefined} markerStart={arrowStart ? 'url(#triangle)' : undefined} 
+      />
+      <EdgeLabelRenderer>
+        <div
+        style={{
+          position: 'absolute',
+          transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+          fontSize: 12,
+          pointerEvents: 'all',
+          visibility: props.standardEdgeInformation.data.isHovered ? 'visible' : 'hidden'
+        }}
+        className="nodrag nopan"
+        >
+            {label}
+        </div>
+      </EdgeLabelRenderer>
+      </>
+    );
+  }
+
+function onMouseOver(event: MouseEvent, edge: Edge){
+
+}
diff --git a/source/components/model/graphBuilder.ts b/source/components/model/graphBuilder.ts
index 3bb5dde..6c6d899 100644
--- a/source/components/model/graphBuilder.ts
+++ b/source/components/model/graphBuilder.ts
@@ -58,45 +58,6 @@ export interface EdgeInfo{
     "attribute"?: string
 }
 
-export function transformToVisualizationGraph(dataflowGraph: Graph): VisualizationGraph {
-
-    const visualizationGraph: VisualizationGraph =  {nodesInfo : {nodes:[], nodeMap:new Map<string, Node>()}, edges: [],}
-
-    for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation.entries()){
-
-        /* position will be set by the layout later */
-        const newNode: Node = {
-            id: nodeId,
-            data: { label: nodeInfo.name},
-            position: { x: 0, y: 0 },
-            connectable: false,
-            dragging: true,
-            selectable: true,
-            type: nodeTagMapper(nodeInfo.tag)
-        }
-        visualizationGraph.nodesInfo.nodes.push(newNode)
-    }
-
-    for( let [sourceNodeId, listOfConnectedNodes] of dataflowGraph.edgeInformation.entries()){
-        for(let [targetNodeId, targetNodeInfo] of listOfConnectedNodes){
-            for( let linkEdgeType in targetNodeInfo.types){
-                const newEdge: Edge =
-                    {
-                        source: sourceNodeId,
-                        target: targetNodeId,
-                        id: `${sourceNodeId}-${targetNodeId}-${linkEdgeType}`,
-                        label: linkEdgeType,
-                        data: { label: linkEdgeType, edgeType: linkEdgeType }
-                    }
-                visualizationGraph.edges.push(newEdge)
-            }
-        }
-    }
-
-    return visualizationGraph
-}
-
-
 function constructLexemeMapping(ast: RNode<ParentInformation>): Map<NodeId, string> {
     const infoMap = new Map<NodeId, string>()
     visitAst(ast, node => {
@@ -125,7 +86,8 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
     const nodeIdMap = new Map<string, Node<VisualizationNodeProps>>()
     
     const visualizationGraph: VisualizationGraph = {nodesInfo : {nodes:[], nodeMap:nodeIdMap}, edges: [],}
-    
+
+    //Construct subflow Map and nodeId Map
     for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation){
         /* position will be set by the layout later */
         const nodeInfoInfo = nodeInfo
@@ -151,6 +113,7 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
         }
     }
 
+    //Construct Nodes
     for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation){
         /* position will be set by the layout later */
         const nodeInfoInfo = nodeInfo
@@ -185,6 +148,7 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
         }
     }
 
+    //construct Edges
     for( let [sourceNodeId, listOfConnectedNodes] of dataflowGraph.edgeInformation){
         const listOfConnectedNodes2 = listOfConnectedNodes
         for(let [targetNodeId, targetNodeInfo] of listOfConnectedNodes2){
@@ -195,15 +159,14 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
                 labelNames += linkEdgeType + ' '
                 lastEdgeType = linkEdgeType
             }
-            const newEdge: Edge =
-                    {
-                        source: String(sourceNodeId),
-                        target: String(targetNodeId),
-                        id: `${sourceNodeId}-${targetNodeId}-${lastEdgeType}`,
-                        label: labelNames,
-                        data: { label: labelNames, edgeType: lastEdgeType }
-                    }
-                visualizationGraph.edges.push(newEdge)
+            const newEdge: Edge = {
+                source: String(sourceNodeId),
+                target: String(targetNodeId),
+                id: `${sourceNodeId}-${targetNodeId}`,
+                label: labelNames,
+                data: { label: labelNames, edgeType: 'multiEdge' , edgeTypes: listOfEdgeTypes }
+            }
+            visualizationGraph.edges.push(newEdge)
         }
     }
     return visualizationGraph
diff --git a/source/components/model/graphTransition.ts b/source/components/model/graphTransition.ts
index be7a20e..0f705ae 100644
--- a/source/components/model/graphTransition.ts
+++ b/source/components/model/graphTransition.ts
@@ -1,5 +1,5 @@
 import { ElkExtendedEdge, ElkNode, LayoutOptions } from "elkjs";
-import { flattenToNodeArray, foldIntoElkHierarchy,FinalNodeProps } from "../graphHierachy";
+import { flattenToNodeArray, foldIntoElkHierarchy} from "../graphHierachy";
 import { Edge, Node } from "reactflow"
 import { edgeTagMapper } from "./edges/edgeBase";
 
@@ -16,22 +16,25 @@ export function transformGraphForLayouting(nodes: Node[], nodeIdMap: Map<string,
 
 
 export interface ExtendedExtendedEdge extends ElkExtendedEdge{
+  data:any
   edgeType: string
   label:string
  }
 
 export function transformGraphForShowing(layoutedGraph: ElkNode, isHorizontal: boolean): { nodes: Node[]; edges: Edge[] }{
+  
   const newNodes = flattenToNodeArray(layoutedGraph.children ?? [])
-  console.log(newNodes) 
+
+  //reset node height and width so they will be correctly calculated and set afterwards
   newNodes.forEach((node) => {
-  node.height = 0
-  node.width = 0
+    node.height = 0
+    node.width = 0
   })
-
+  
   return {
     nodes: newNodes,
     edges: (layoutedGraph.edges as ExtendedExtendedEdge[] ?? []).map(e => { 
-    return {
+      return {
       id: e.id,
       source: e.sources[0],
       target: e.targets[0],
@@ -41,7 +44,7 @@ export function transformGraphForShowing(layoutedGraph: ElkNode, isHorizontal: b
       //animated: true,
       //style: { stroke: '#000' },
       type: edgeTagMapper(e.edgeType),
-      data: { label: e.label }
+      data: { ...e.data, isHovered: false}
       };
     })
   }

From 9b4d96e490bd6a3bd88b692eb885c4b557c00c49 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Fri, 5 Jul 2024 14:58:11 +0200
Subject: [PATCH 43/75] debug: show log on change

---
 source/components/graphComponent.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 000796c..27a797d 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -176,9 +176,11 @@ export interface LayoutFlowProps {
        onEdgesChange={onEdgesChange}
        onEdgeMouseEnter={(event, edge) => {
         edge.data.isHovered = true
+        console.log(edge.id, ' is hovered over')
        }}
        onEdgeMouseLeave={(event, edge) => {
         edge.data.isHovered = false
+        console.log(edge.id, ' is not hovered over anymore')
        }}
        proOptions={{hideAttribution: true}}
        connectionLineComponent={FloatingConnectionLine}

From beeb6bdd83ddfd64b93ac928078aeca87a57875d Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Sat, 6 Jul 2024 13:30:39 +0200
Subject: [PATCH 44/75] feat: show edgeLabel only on hoverover of edge with css

---
 css/main.css                                | 18 +++++++++++-
 source/components/graphComponent.tsx        |  8 ------
 source/components/model/edges/edgeBase.tsx  |  1 -
 source/components/model/edges/multiEdge.tsx | 31 +++++++++++++++------
 source/components/model/graphBuilder.ts     |  2 +-
 5 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/css/main.css b/css/main.css
index 365d67a..d4d9412 100644
--- a/css/main.css
+++ b/css/main.css
@@ -5,6 +5,20 @@ body {
 	margin: 0px;
 }
 
+svg {
+	pointer-events: none;
+}
+
+.react-flow__edge-path {
+	pointer-events: none;
+	cursor: none;
+}
+
+.react-flow__edge-interaction {
+	pointer-events: none;
+	cursor: none;
+}
+
 .variable-definition-node {
 	border: solid 2px;
 	padding: 5px;
@@ -50,8 +64,10 @@ body {
 	background: none;
 	border: none;
 }
-.edge-label {
+
+.edge-label { 
 	visibility: hidden;
+	pointer-events: none;
 }
 
 .label {
diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 27a797d..1ca6aba 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -174,14 +174,6 @@ export interface LayoutFlowProps {
        edgeTypes={edgeTypes}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
-       onEdgeMouseEnter={(event, edge) => {
-        edge.data.isHovered = true
-        console.log(edge.id, ' is hovered over')
-       }}
-       onEdgeMouseLeave={(event, edge) => {
-        edge.data.isHovered = false
-        console.log(edge.id, ' is not hovered over anymore')
-       }}
        proOptions={{hideAttribution: true}}
        connectionLineComponent={FloatingConnectionLine}
        fitView
diff --git a/source/components/model/edges/edgeBase.tsx b/source/components/model/edges/edgeBase.tsx
index 3452ef1..5fc29ff 100644
--- a/source/components/model/edges/edgeBase.tsx
+++ b/source/components/model/edges/edgeBase.tsx
@@ -51,7 +51,6 @@ export const BodyEdgeCompontent: React.FC<BodyEdgeComponentProps> = (props) => {
   
   //const labelPositionX = targetX - sourceX > 0 ? labelX + offsetX / 2 : labelX - offsetX / 2 
   //const labelPositionY = targetY - sourceY > 0 ? labelY + offsetY / 2 : labelY - offsetY / 2
-   
   return (
     <>
     <BaseEdge
diff --git a/source/components/model/edges/multiEdge.tsx b/source/components/model/edges/multiEdge.tsx
index e03d19e..a818891 100644
--- a/source/components/model/edges/multiEdge.tsx
+++ b/source/components/model/edges/multiEdge.tsx
@@ -34,7 +34,7 @@ interface BodyMultiEdgeComponentProps {
     
     //const labelPositionX = targetX - sourceX > 0 ? labelX + offsetX / 2 : labelX - offsetX / 2 
     //const labelPositionY = targetY - sourceY > 0 ? labelY + offsetY / 2 : labelY - offsetY / 2
-    const edgeStyle: React.CSSProperties = {stroke : 'black'}
+    const defaultEdgeStyle: React.CSSProperties = {stroke : 'black', pointerEvents: 'none', cursor: 'none'}
     const arrowEnd = true
     const arrowStart = false
 
@@ -42,33 +42,46 @@ interface BodyMultiEdgeComponentProps {
     for(const singleLabel of props.standardEdgeInformation.data.edgeTypes){
         label += singleLabel + ' '
     }
+
+    const edgeLabelId = props.standardEdgeInformation.id + '-edgeLabel'
+    const hoverOverEdgeId = props.standardEdgeInformation.id + '-hoverover-interactive'
+    var cssRule = 
+    `body:has(#${hoverOverEdgeId}:hover) #${edgeLabelId} {visibility: visible;}` // `#${props.standardEdgeInformation.id}:hover ~ #${edgeLabelId} {  background-color: green; }`   
+    //var styleSheet = document.createElement("style")
+    //styleSheet.textContent = cssRule
+    //document.head.appendChild(styleSheet)
     
     return (
       <>
       <BaseEdge
-        id={props.standardEdgeInformation.id} 
+        id={hoverOverEdgeId} //Interaction Edge
+        path={edgePath} 
+        style= {{strokeWidth: 10, visibility: 'hidden', pointerEvents: 'all', cursor: 'pointer'}} 
+      />
+      <BaseEdge
+        id={props.standardEdgeInformation.id} //Shown Edge
         path={edgePath} 
-        style={edgeStyle} 
+        style= {defaultEdgeStyle}
         markerEnd={arrowEnd ? 'url(#triangle)' : undefined} markerStart={arrowStart ? 'url(#triangle)' : undefined} 
       />
+      <style>
+        {cssRule}
+      </style>
       <EdgeLabelRenderer>
         <div
+        id = {edgeLabelId}
         style={{
           position: 'absolute',
           transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
           fontSize: 12,
-          pointerEvents: 'all',
-          visibility: props.standardEdgeInformation.data.isHovered ? 'visible' : 'hidden'
         }}
-        className="nodrag nopan"
+        className="nodrag nopan edge-label"
         >
             {label}
         </div>
+        
       </EdgeLabelRenderer>
       </>
     );
   }
 
-function onMouseOver(event: MouseEvent, edge: Edge){
-
-}
diff --git a/source/components/model/graphBuilder.ts b/source/components/model/graphBuilder.ts
index 6c6d899..a9febcb 100644
--- a/source/components/model/graphBuilder.ts
+++ b/source/components/model/graphBuilder.ts
@@ -162,7 +162,7 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
             const newEdge: Edge = {
                 source: String(sourceNodeId),
                 target: String(targetNodeId),
-                id: `${sourceNodeId}-${targetNodeId}`,
+                id: `edge-${sourceNodeId}-${targetNodeId}`,
                 label: labelNames,
                 data: { label: labelNames, edgeType: 'multiEdge' , edgeTypes: listOfEdgeTypes }
             }

From c5a009dd17f3999a812c48c9a9770615775b6104 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Sat, 6 Jul 2024 13:39:34 +0200
Subject: [PATCH 45/75] refactor: remove commented out code

---
 source/components/model/edges/multiEdge.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/source/components/model/edges/multiEdge.tsx b/source/components/model/edges/multiEdge.tsx
index a818891..c7e0d6e 100644
--- a/source/components/model/edges/multiEdge.tsx
+++ b/source/components/model/edges/multiEdge.tsx
@@ -46,10 +46,7 @@ interface BodyMultiEdgeComponentProps {
     const edgeLabelId = props.standardEdgeInformation.id + '-edgeLabel'
     const hoverOverEdgeId = props.standardEdgeInformation.id + '-hoverover-interactive'
     var cssRule = 
-    `body:has(#${hoverOverEdgeId}:hover) #${edgeLabelId} {visibility: visible;}` // `#${props.standardEdgeInformation.id}:hover ~ #${edgeLabelId} {  background-color: green; }`   
-    //var styleSheet = document.createElement("style")
-    //styleSheet.textContent = cssRule
-    //document.head.appendChild(styleSheet)
+    `body:has(#${hoverOverEdgeId}:hover) #${edgeLabelId} {visibility: visible;}`
     
     return (
       <>

From 5611f26f4b7add145c6178232ae40631fc956a85 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Tue, 9 Jul 2024 10:13:58 +0200
Subject: [PATCH 46/75] feat: added function definiton node with changes to
 structure

---
 css/main.css                                  | 21 +++++++
 source/components/graphComponent.tsx          | 23 +++++---
 source/components/graphHierachy.ts            | 58 ++++++++++++++++---
 source/components/model/graphBuilder.ts       | 40 +++++++++++--
 .../components/model/nodes/nodeDefinition.tsx | 31 +++++++++-
 5 files changed, 149 insertions(+), 24 deletions(-)

diff --git a/css/main.css b/css/main.css
index d4d9412..fadb72e 100644
--- a/css/main.css
+++ b/css/main.css
@@ -9,6 +9,27 @@ svg {
 	pointer-events: none;
 }
 
+.function-definition-node {
+	--b: 3px;   /* border thickness */
+	--s: .45em; /* size of the corner */
+	--color: #373B44;
+	
+	padding: calc(.5em + var(--s)) calc(.9em + var(--s));
+	color: var(--color);
+	--_p: var(--s);
+	background:
+	  conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
+	  var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
+	transition: .3s linear, color 0s, background-color 0s;
+	outline: var(--b) solid #0000;
+	outline-offset: .6em;
+	font-size: 16px;
+  
+	border: 0;
+  
+	user-select: none;
+	-webkit-user-select: none;
+}  
 .react-flow__edge-path {
 	pointer-events: none;
 	cursor: none;
diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 1ca6aba..5259cca 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -26,7 +26,7 @@ import ReactFlow, {
 
 import 'reactflow/dist/style.css';
 import { VisualizationGraph } from './model/graph';
-import FloatingConnectionLine, { ExitPointNode, FunctionCallNode, GroupNode, UseNode, ValueNode, VariableDefinitionNode } from './model/nodes/nodeDefinition';
+import FloatingConnectionLine, { ExitPointNode, FunctionCallNode, FunctionDefinitionNode, GroupNode, UseNode, ValueNode, VariableDefinitionNode } from './model/nodes/nodeDefinition';
 import ReadsEdge from './model/edges/readsEdge';
 import { edgeTagMapper } from './model/edges/edgeBase';
 import { ArgumentEdge } from './model/edges/argumentEdge';
@@ -60,17 +60,23 @@ const elkOptions: LayoutOptions = {
  };
 
 
- async function getLayoutedElements(nodes: Node[], 
-                                    nodeIdMap: Map<string,Node>, 
-                                    edges: ElkExtendedEdge[], 
-                                    options: LayoutOptions): Promise<{ nodes: Node[]; edges: Edge[] }> {
+ async function getLayoutedElements(nodes: Node[], nodeIdMap: Map<string,Node>, edges: ElkExtendedEdge[], options: LayoutOptions): Promise<{ nodes: Node[]; edges: Edge[] }> {
    const isHorizontal = options?.['elk.direction'] === 'RIGHT';
 
    const graph: ElkNode = transformGraphForLayouting(nodes,nodeIdMap, edges, options, isHorizontal)
-   
+  console.log('befor Layout:')
+  console.log(graph)
+
    const layoutedGraph = await elk.layout(graph)
-   
-   return transformGraphForShowing(layoutedGraph, isHorizontal)
+
+   console.log('aftr Layout:')
+   console.log(layoutedGraph)
+   const endGraph = transformGraphForShowing(layoutedGraph, isHorizontal)
+
+   console.log(endGraph)
+
+
+   return endGraph
  }
 
  function convertToExtendedEdges(edges: Edge[]): ElkExtendedEdge[] {
@@ -130,6 +136,7 @@ export interface LayoutFlowProps {
     functionCallNode: FunctionCallNode,
     exitPointNode: ExitPointNode,
     valueNode: ValueNode,
+    functionDefinitionNode: FunctionDefinitionNode,
     groupNode:GroupNode
    }), []);
 
diff --git a/source/components/graphHierachy.ts b/source/components/graphHierachy.ts
index fe71681..07b35b0 100644
--- a/source/components/graphHierachy.ts
+++ b/source/components/graphHierachy.ts
@@ -1,5 +1,5 @@
 import { ElkNode } from 'elkjs';
-import {CoordinateExtent, Node} from 'reactflow'
+import {CoordinateExtent, Node, XYPosition} from 'reactflow'
 import { VisualizationNodeProps } from './model/graphBuilder';
 
 const standardHeight = 50
@@ -54,7 +54,8 @@ interface ExtendedElkNode extends ElkNode{
   data:{
     label: string, 
     nodeType: string,
-    parentId?: string
+    parentId?: string,
+    children?: string[]
   }
  }
 
@@ -123,31 +124,70 @@ interface FinalNodeProps{
   label: string
   nodeType: string
   id: string
+  estimatedMaxX: number
+  estimatedMaxY: number
+  estimatedMinX: number
+  estimatedMinY: number
+}
+
+interface FlattenReturnProperties{
+  node: Node<FinalNodeProps>
+  minX: number
+  minY: number
+  maxX: number
+  maxY: number
 }
 
+
 export function flattenToNodeArray(nodeArray:ElkNode[]):Node<FinalNodeProps>[] {
-    return nodeArray.map((node) => flattenHierachyNode(node)).flat()
+    return nodeArray.map((node) => flattenHierachyNode(node,{x: 0, y: 0})).flat().map((returnProperty) => returnProperty.node)
 }
 
-function flattenHierachyNode(currentNode:ElkNode):Node<FinalNodeProps>[]{
-    let toReturnNodeArray: Node<FinalNodeProps>[] = []
+function flattenHierachyNode(currentNode: ElkNode, positionParentNode: XYPosition):FlattenReturnProperties[]{
+    let toReturnNodeArray: FlattenReturnProperties[] = []
 
+    const absolutePositionX = (currentNode.x ?? 0) + (positionParentNode.x ?? 0) 
+    const absolutePositionY = (currentNode.y ?? 0) + (positionParentNode.y ?? 0)
     const newNode: Node<FinalNodeProps> = {
         ...currentNode,
         data: { 
           label: currentNode.labels?.[0]?.text ?? '', 
           id: currentNode.id, 
-          nodeType:(currentNode as ExtendedElkNode).data.nodeType, 
+          nodeType:(currentNode as ExtendedElkNode).data.nodeType,
+          estimatedMinX: absolutePositionX,
+          estimatedMinY: absolutePositionY,
+          estimatedMaxX: absolutePositionX + (currentNode.width ?? 0),
+          estimatedMaxY: absolutePositionY + (currentNode.height ?? 0),
           ...((currentNode as ExtendedElkNode).data.parentId !== undefined)&&{parentId:(currentNode as ExtendedElkNode).data.parentId},
           ...((currentNode as ExtendedElkNode).data.parentId !== undefined)&&{extent: 'parent'},
+          ...((currentNode as ExtendedElkNode).data.children !== undefined)&&{children:(currentNode as ExtendedElkNode).data.children},
         },
         // React Flow expects a position property on the node instead of `x`
         // and `y` fields.
-        position: { x: currentNode.x ?? 0, y: currentNode.y ?? 0 },
+        //position is adapted since the position the layout generates is relative to the parent
+        position: { x: absolutePositionX, y: absolutePositionY },
     }
-    toReturnNodeArray.push(newNode)
+
+    const newFlattenedProperty: FlattenReturnProperties = {
+      node: newNode,
+      minX: newNode.data.estimatedMinX,
+      minY: newNode.data.estimatedMinY,
+      maxX: newNode.data.estimatedMaxX,
+      maxY: newNode.data.estimatedMaxY
+    }
+
+    toReturnNodeArray.push(newFlattenedProperty)
     if(currentNode.children !== undefined){
-        const flattenedChildNodes = currentNode.children.map((node) => flattenHierachyNode(node)).flat()
+        const flattenedChildNodes = currentNode.children.map((node) => flattenHierachyNode(node, newNode.position)).flat()
+        
+        //calculate dimensions for function definiton node
+        newNode.data.estimatedMaxX = flattenedChildNodes.map((flattenedProperty) => flattenedProperty.maxX).reduce((previousMax, currentMax) => {
+          return previousMax < currentMax ? currentMax : previousMax
+        }, 0)
+        newNode.data.estimatedMaxY = flattenedChildNodes.map((flattenedProperty) => flattenedProperty.maxY).reduce((previousMax, currentMax) => {
+          return previousMax < currentMax ? currentMax : previousMax
+        }, 0)
+
         toReturnNodeArray = toReturnNodeArray.concat(flattenedChildNodes)
     }
 
diff --git a/source/components/model/graphBuilder.ts b/source/components/model/graphBuilder.ts
index a9febcb..f71ac1c 100644
--- a/source/components/model/graphBuilder.ts
+++ b/source/components/model/graphBuilder.ts
@@ -93,20 +93,19 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
         const nodeInfoInfo = nodeInfo
         if(nodeInfoInfo.tag ==='function-definition' && nodeInfoInfo.subflow !== undefined){
             const subflowArray = nodeInfoInfo.subflow.graph
-            console.log(subflowArray)
             subflowArray.forEach((subNode) => {
                 subflowMap.set(subNode,nodeId)
             })
             
-            const idNewNode = String(nodeId) + '-subflow-node'
+            const idNewNode = String(nodeId) //+ '-subflow-node'
             const newNode: Node<VisualizationNodeProps> = {
                 id: idNewNode,
-                data: {label: infoMap.get(nodeId) ?? '', nodeType: 'group', children:[]},
+                data: {label: infoMap.get(nodeId) ?? '', nodeType: nodeInfoInfo.tag, children:[]},
                 position: { x: 0, y: 0 },
                 connectable: false,
                 dragging: true,
                 selectable: true,
-                type: 'groupNode'
+                type: nodeTagMapper(nodeInfoInfo.tag)
             }
             visualizationGraph.nodesInfo.nodes.push(newNode)
             nodeIdMap.set(idNewNode, newNode)
@@ -117,6 +116,36 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
     for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation){
         /* position will be set by the layout later */
         const nodeInfoInfo = nodeInfo
+        
+        const idNewNode = String(nodeId)
+        const newNode: Node<VisualizationNodeProps> = {
+            id: idNewNode,
+            data: {label: infoMap.get(nodeId) ?? '', nodeType: nodeInfoInfo.tag},
+            position: { x: 0, y: 0 },
+            connectable: false,
+            dragging: true,
+            selectable: true,
+            type: nodeTagMapper(nodeInfoInfo.tag),
+        }
+
+        
+        if(!nodeIdMap.has(idNewNode)){
+            nodeIdMap.set(idNewNode, newNode)
+            visualizationGraph.nodesInfo.nodes.push(newNode)
+        }
+        
+        if(subflowMap.has(nodeId)){
+            const toAlterNode = nodeIdMap.get(idNewNode)
+            const parentId = String(subflowMap.get(nodeId))
+            toAlterNode!.data = {
+                ...toAlterNode!.data,
+                parentId: parentId
+            }
+            nodeIdMap.get(parentId)?.data.children?.push(idNewNode)
+        }
+        
+        
+        /*
         if(subflowMap.has(nodeId)){
             const parentId = String(subflowMap.get(nodeId)) + '-subflow-node'
             const idNewNode = String(nodeId)
@@ -146,6 +175,7 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
             visualizationGraph.nodesInfo.nodes.push(newNode)
             nodeIdMap.set(idNewNode, newNode)
         }
+        */
     }
 
     //construct Edges
@@ -180,7 +210,7 @@ const nodeTagMap:{[index: string]:string} = {
     'use':                  'useNode',
     'variable-definition':  'variableDefinitionNode',
     'function-call':        'functionCallNode',
-    'function-definition':  'variableDefinitionNode', //for now definition nodes look the same (function as well as variable)
+    'function-definition':  'functionDefinitionNode',
     'exit-point':           'exitPointNode',
     'value':                'valueNode'
 }
\ No newline at end of file
diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index 40ecf70..d337b65 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -1,4 +1,4 @@
-import { ConnectionLineComponentProps, Node, NodeProps , Position} from "reactflow"
+import { ConnectionLineComponentProps, Node, NodeProps , NodeResizer, Position} from "reactflow"
 import { HandleNodeComponent } from "./handleNodeComponent"
 import React from "react";
 import { ProgressPlugin } from "webpack";
@@ -106,6 +106,28 @@ export const FunctionCallNode: React.FC<NodeComponentProps> = ({ data }) => {
   return <BodyNodeComponent data={data} className='function-call-node base-node'/>
 }
 
+
+export const FunctionDefinitionNode: React.FC<NodeComponentProps> = ({ data }) => {
+  const {estimatedMinX, estimatedMinY, estimatedMaxX, estimatedMaxY} = data
+  const divStyle: React.CSSProperties = {}
+  divStyle.width = estimatedMaxX - estimatedMinX
+  divStyle.height = estimatedMaxY - estimatedMinY
+  const minWidth = estimatedMaxX - estimatedMinX
+  const minHeight = estimatedMaxY - estimatedMinY
+  //<NodeResizer minWidth={minWidth} minHeight={minHeight}/>
+  //
+  return ( 
+    <HandleNodeComponent>
+      
+      <div className = 'function-definition-node base-node' style = {divStyle}>
+        <HoverOverComponent name={data.label} id={data.id} nodeType= {data.nodeType}/>
+        <label htmlFor="text">{data.label}</label>
+      </div>
+    </HandleNodeComponent>
+  )
+}
+
+
 export const ExitPointNode: React.FC<NodeComponentProps> = ({ data }) => {
   return <BodyNodeComponent data={data} className='exit-point-node base-node'/>
 }
@@ -115,8 +137,13 @@ export const ValueNode: React.FC<NodeComponentProps> = ({ data }) => {
 }
 
 export const GroupNode: React.FC<NodeComponentProps> = ({ data }) => {
+  const {estimatedMinX, estimatedMinY, estimatedMaxX, estimatedMaxY} = data
+  const divStyle: React.CSSProperties = {}
+  divStyle.width = estimatedMaxX - estimatedMinX
+  divStyle.height = estimatedMaxY - estimatedMinY
+  
   return ( 
-    <div className = 'group-node'>
+    <div className = 'group-node' style = {divStyle}>
       {data.label}
     </div>
   )

From 54eec2200bee5dd82a01ccbc0747b4badedc03e4 Mon Sep 17 00:00:00 2001
From: EagleoutIce <florian.sihler@uni-ulm.de>
Date: Wed, 10 Jul 2024 11:20:59 +0200
Subject: [PATCH 47/75] wip: big xyflow update

---
 package-lock.json                             | 1761 +++--------------
 package.json                                  |    4 +-
 source/components/graphComponent.tsx          |   15 +-
 source/components/graphHierachy.ts            |    6 +-
 .../components/model/edges/argumentEdge.tsx   |    5 +-
 source/components/model/edges/callsEdge.tsx   |    4 +-
 .../components/model/edges/definedByEdge.tsx  |    4 +-
 .../model/edges/definedByOnCallEdge.tsx       |    4 +-
 .../model/edges/definesOnCallEdge.tsx         |    4 +-
 source/components/model/edges/edgeBase.tsx    |   24 +-
 source/components/model/edges/multiEdge.tsx   |   16 +-
 .../model/edges/nonStandardEvaluationEdge.tsx |    5 +-
 source/components/model/edges/readsEdge.tsx   |    4 +-
 source/components/model/edges/relatesEdge.tsx |    5 +-
 source/components/model/edges/returnsEdge.tsx |    4 +-
 .../components/model/edges/sameDefDefEdge.tsx |    4 +-
 .../model/edges/sameReadReadEdge.tsx          |    4 +-
 .../model/edges/sideEffectOnCallEdge.tsx      |    5 +-
 source/components/model/graph.ts              |    2 +-
 source/components/model/graphBuilder.ts       |    8 +-
 source/components/model/graphTransition.ts    |    2 +-
 .../model/nodes/handleNodeComponent.tsx       |    2 +-
 .../components/model/nodes/nodeDefinition.tsx |   29 +-
 source/index.tsx                              |    2 +-
 24 files changed, 424 insertions(+), 1499 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c351767..fdf7e7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@eagleoutice/flowr": "^2.0.9",
         "@types/react": "^18.0.18",
         "@types/react-dom": "^18.0.6",
+        "@xyflow/react": "^12.0.0",
         "allotment": "^1.17.0",
         "css-loader": "^6.7.1",
         "elkjs": "^0.9.2",
@@ -19,8 +20,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.11.2",
-        "react-split-pane": "^2.0.3",
-        "reactflow": "^11.10.4",
+        "react-split-pane": "^0.1.92",
         "style-loader": "^3.3.1",
         "uuid": "^9.0.0",
         "webpack-manifest-plugin": "^5.0.0"
@@ -282,102 +282,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/@reactflow/background": {
-      "version": "11.3.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.9.tgz",
-      "integrity": "sha512-byj/G9pEC8tN0wT/ptcl/LkEP/BBfa33/SvBkqE4XwyofckqF87lKp573qGlisfnsijwAbpDlf81PuFL41So4Q==",
-      "dependencies": {
-        "@reactflow/core": "11.10.4",
-        "classcat": "^5.0.3",
-        "zustand": "^4.4.1"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
-    "node_modules/@reactflow/controls": {
-      "version": "11.2.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.2.9.tgz",
-      "integrity": "sha512-e8nWplbYfOn83KN1BrxTXS17+enLyFnjZPbyDgHSRLtI5ZGPKF/8iRXV+VXb2LFVzlu4Wh3la/pkxtfP/0aguA==",
-      "dependencies": {
-        "@reactflow/core": "11.10.4",
-        "classcat": "^5.0.3",
-        "zustand": "^4.4.1"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
-    "node_modules/@reactflow/core": {
-      "version": "11.10.4",
-      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.10.4.tgz",
-      "integrity": "sha512-j3i9b2fsTX/sBbOm+RmNzYEFWbNx4jGWGuGooh2r1jQaE2eV+TLJgiG/VNOp0q5mBl9f6g1IXs3Gm86S9JfcGw==",
-      "dependencies": {
-        "@types/d3": "^7.4.0",
-        "@types/d3-drag": "^3.0.1",
-        "@types/d3-selection": "^3.0.3",
-        "@types/d3-zoom": "^3.0.1",
-        "classcat": "^5.0.3",
-        "d3-drag": "^3.0.0",
-        "d3-selection": "^3.0.0",
-        "d3-zoom": "^3.0.0",
-        "zustand": "^4.4.1"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
-    "node_modules/@reactflow/minimap": {
-      "version": "11.7.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.7.9.tgz",
-      "integrity": "sha512-le95jyTtt3TEtJ1qa7tZ5hyM4S7gaEQkW43cixcMOZLu33VAdc2aCpJg/fXcRrrf7moN2Mbl9WIMNXUKsp5ILA==",
-      "dependencies": {
-        "@reactflow/core": "11.10.4",
-        "@types/d3-selection": "^3.0.3",
-        "@types/d3-zoom": "^3.0.1",
-        "classcat": "^5.0.3",
-        "d3-selection": "^3.0.0",
-        "d3-zoom": "^3.0.0",
-        "zustand": "^4.4.1"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
-    "node_modules/@reactflow/node-resizer": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.2.9.tgz",
-      "integrity": "sha512-HfickMm0hPDIHt9qH997nLdgLt0kayQyslKE0RS/GZvZ4UMQJlx/NRRyj5y47Qyg0NnC66KYOQWDM9LLzRTnUg==",
-      "dependencies": {
-        "@reactflow/core": "11.10.4",
-        "classcat": "^5.0.4",
-        "d3-drag": "^3.0.0",
-        "d3-selection": "^3.0.0",
-        "zustand": "^4.4.1"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
-    "node_modules/@reactflow/node-toolbar": {
-      "version": "1.3.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.3.9.tgz",
-      "integrity": "sha512-VmgxKmToax4sX1biZ9LXA7cj/TBJ+E5cklLGwquCCVVxh+lxpZGTBF3a5FJGVHiUNBBtFsC8ldcSZIK4cAlQww==",
-      "dependencies": {
-        "@reactflow/core": "11.10.4",
-        "classcat": "^5.0.3",
-        "zustand": "^4.4.1"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
     "node_modules/@remix-run/router": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz",
@@ -466,93 +370,11 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/d3": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
-      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
-      "dependencies": {
-        "@types/d3-array": "*",
-        "@types/d3-axis": "*",
-        "@types/d3-brush": "*",
-        "@types/d3-chord": "*",
-        "@types/d3-color": "*",
-        "@types/d3-contour": "*",
-        "@types/d3-delaunay": "*",
-        "@types/d3-dispatch": "*",
-        "@types/d3-drag": "*",
-        "@types/d3-dsv": "*",
-        "@types/d3-ease": "*",
-        "@types/d3-fetch": "*",
-        "@types/d3-force": "*",
-        "@types/d3-format": "*",
-        "@types/d3-geo": "*",
-        "@types/d3-hierarchy": "*",
-        "@types/d3-interpolate": "*",
-        "@types/d3-path": "*",
-        "@types/d3-polygon": "*",
-        "@types/d3-quadtree": "*",
-        "@types/d3-random": "*",
-        "@types/d3-scale": "*",
-        "@types/d3-scale-chromatic": "*",
-        "@types/d3-selection": "*",
-        "@types/d3-shape": "*",
-        "@types/d3-time": "*",
-        "@types/d3-time-format": "*",
-        "@types/d3-timer": "*",
-        "@types/d3-transition": "*",
-        "@types/d3-zoom": "*"
-      }
-    },
-    "node_modules/@types/d3-array": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
-      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg=="
-    },
-    "node_modules/@types/d3-axis": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
-      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
-      "dependencies": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "node_modules/@types/d3-brush": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
-      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
-      "dependencies": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "node_modules/@types/d3-chord": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
-      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg=="
-    },
     "node_modules/@types/d3-color": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
       "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="
     },
-    "node_modules/@types/d3-contour": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
-      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
-      "dependencies": {
-        "@types/d3-array": "*",
-        "@types/geojson": "*"
-      }
-    },
-    "node_modules/@types/d3-delaunay": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
-      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw=="
-    },
-    "node_modules/@types/d3-dispatch": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.6.tgz",
-      "integrity": "sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ=="
-    },
     "node_modules/@types/d3-drag": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
@@ -561,47 +383,6 @@
         "@types/d3-selection": "*"
       }
     },
-    "node_modules/@types/d3-dsv": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
-      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g=="
-    },
-    "node_modules/@types/d3-ease": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
-      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="
-    },
-    "node_modules/@types/d3-fetch": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
-      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
-      "dependencies": {
-        "@types/d3-dsv": "*"
-      }
-    },
-    "node_modules/@types/d3-force": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.9.tgz",
-      "integrity": "sha512-IKtvyFdb4Q0LWna6ymywQsEYjK/94SGhPrMfEr1TIc5OBeziTi+1jcCvttts8e0UWZIxpasjnQk9MNk/3iS+kA=="
-    },
-    "node_modules/@types/d3-format": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
-      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g=="
-    },
-    "node_modules/@types/d3-geo": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
-      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
-      "dependencies": {
-        "@types/geojson": "*"
-      }
-    },
-    "node_modules/@types/d3-hierarchy": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.6.tgz",
-      "integrity": "sha512-qlmD/8aMk5xGorUvTUWHCiumvgaUXYldYjNVOWtYoTYY/L+WwIEAmJxUmTgr9LoGNG0PPAOmqMDJVDPc7DOpPw=="
-    },
     "node_modules/@types/d3-interpolate": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
@@ -610,67 +391,11 @@
         "@types/d3-color": "*"
       }
     },
-    "node_modules/@types/d3-path": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.0.tgz",
-      "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ=="
-    },
-    "node_modules/@types/d3-polygon": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
-      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA=="
-    },
-    "node_modules/@types/d3-quadtree": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
-      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg=="
-    },
-    "node_modules/@types/d3-random": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
-      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ=="
-    },
-    "node_modules/@types/d3-scale": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
-      "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==",
-      "dependencies": {
-        "@types/d3-time": "*"
-      }
-    },
-    "node_modules/@types/d3-scale-chromatic": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.3.tgz",
-      "integrity": "sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw=="
-    },
     "node_modules/@types/d3-selection": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.10.tgz",
       "integrity": "sha512-cuHoUgS/V3hLdjJOLTT691+G2QoqAjCVLmr4kJXR4ha56w1Zdu8UUQ5TxLRqudgNjwXeQxKMq4j+lyf9sWuslg=="
     },
-    "node_modules/@types/d3-shape": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz",
-      "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==",
-      "dependencies": {
-        "@types/d3-path": "*"
-      }
-    },
-    "node_modules/@types/d3-time": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz",
-      "integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw=="
-    },
-    "node_modules/@types/d3-time-format": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
-      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg=="
-    },
-    "node_modules/@types/d3-timer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
-      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="
-    },
     "node_modules/@types/d3-transition": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.8.tgz",
@@ -734,11 +459,6 @@
         "@types/range-parser": "*"
       }
     },
-    "node_modules/@types/geojson": {
-      "version": "7946.0.14",
-      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
-      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg=="
-    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -1044,6 +764,34 @@
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
+    "node_modules/@xyflow/react": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.0.0.tgz",
+      "integrity": "sha512-f0cboW5ZbKR+xGUr2QtYiIZwGvxDHzCjdtp2KBSNcQCmyc9xgaJ2PMCKBpwAUF0u+RoA7mEW2jE3mPI9WCBy0A==",
+      "dependencies": {
+        "@xyflow/system": "0.0.34",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.34",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.34.tgz",
+      "integrity": "sha512-Gcc2aSPZX5YMn+Rv6a2lxRes005YLc6LRaMtzRsobCcIEMpBUWzEx8/OrvpAYOCM3UCxlqfUOK2ekglxbjzYEQ==",
+      "dependencies": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
     "node_modules/abort-controller": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
@@ -1242,11 +990,6 @@
       "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
       "dev": true
     },
-    "node_modules/asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
-    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1287,21 +1030,21 @@
       }
     },
     "node_modules/body-parser": {
-      "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.0.tgz",
-      "integrity": "sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==",
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
+      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
       "dev": true,
       "dependencies": {
         "bytes": "3.1.2",
-        "content-type": "~1.0.4",
+        "content-type": "~1.0.5",
         "debug": "2.6.9",
         "depd": "2.0.0",
         "destroy": "1.2.0",
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.10.3",
-        "raw-body": "2.5.1",
+        "qs": "6.11.0",
+        "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
       },
@@ -1337,11 +1080,6 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
-    "node_modules/bowser": {
-      "version": "1.9.4",
-      "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
-      "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ=="
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1353,22 +1091,17 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/brcast": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/brcast/-/brcast-3.0.2.tgz",
-      "integrity": "sha512-f5XwwFCCuvgqP2nMH/hJ74FqnGmb4X3D+NC//HphxJzzhsZvSZa+Hk/syB7j3ZHpPDLMoYU8oBgviRWfNvEfKA=="
-    },
     "node_modules/browserslist": {
       "version": "4.21.3",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz",
@@ -1396,29 +1129,6 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "node_modules/buffer": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "dependencies": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.1.13"
-      }
-    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -1434,14 +1144,19 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
-      "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "dev": true,
       "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.1",
-        "set-function-length": "^1.1.1"
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -1457,14 +1172,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/camelize": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
-      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001393",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001393.tgz",
@@ -1564,9 +1271,9 @@
       }
     },
     "node_modules/classcat": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.4.tgz",
-      "integrity": "sha512-sbpkOw6z413p+HDGcBENe498WM9woqWHiJxCq7nvmxe9WmrUmqfAcxpIwAiMtM5Q3AhYkzXcNQHqsWq0mND51g=="
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w=="
     },
     "node_modules/classnames": {
       "version": "2.3.1",
@@ -1734,18 +1441,18 @@
       }
     },
     "node_modules/content-type": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
       "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/cookie": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
       "dev": true,
       "engines": {
         "node": ">= 0.6"
@@ -1846,12 +1553,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/core-js": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
-      "integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA==",
-      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js."
-    },
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -1877,23 +1578,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/css-color-keywords": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/css-in-js-utils": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
-      "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
-      "dependencies": {
-        "hyphenate-style-name": "^1.0.2",
-        "isobject": "^3.0.1"
-      }
-    },
     "node_modules/css-loader": {
       "version": "6.7.1",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",
@@ -1935,21 +1619,6 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
-    "node_modules/css-to-react-native": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz",
-      "integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==",
-      "dependencies": {
-        "camelize": "^1.0.0",
-        "css-color-keywords": "^1.0.0",
-        "postcss-value-parser": "^3.3.0"
-      }
-    },
-    "node_modules/css-to-react-native/node_modules/postcss-value-parser": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
-    },
     "node_modules/css-what": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -2096,17 +1765,20 @@
       }
     },
     "node_modules/define-data-property": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
-      "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.2.1",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/define-lazy-prop": {
@@ -2291,25 +1963,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/encoding": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
-      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-      "dependencies": {
-        "iconv-lite": "^0.6.2"
-      }
-    },
-    "node_modules/encoding/node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/enhanced-resolve": {
       "version": "5.15.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
@@ -2343,6 +1996,27 @@
         "node": ">=4"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-module-lexer": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.0.tgz",
@@ -2455,17 +2129,17 @@
       }
     },
     "node_modules/express": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.1.tgz",
-      "integrity": "sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
       "dev": true,
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.0",
+        "body-parser": "1.20.2",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.5.0",
+        "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -2481,7 +2155,7 @@
         "parseurl": "~1.3.3",
         "path-to-regexp": "0.1.7",
         "proxy-addr": "~2.0.7",
-        "qs": "6.10.3",
+        "qs": "6.11.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
         "send": "0.18.0",
@@ -2528,11 +2202,6 @@
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
-    "node_modules/fast-memoize": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
-      "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
-    },
     "node_modules/fastest-levenshtein": {
       "version": "1.0.16",
       "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
@@ -2563,24 +2232,10 @@
         "node": ">=0.8.0"
       }
     },
-    "node_modules/fbjs": {
-      "version": "0.8.18",
-      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz",
-      "integrity": "sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==",
-      "dependencies": {
-        "core-js": "^1.0.0",
-        "isomorphic-fetch": "^2.1.1",
-        "loose-envify": "^1.0.0",
-        "object-assign": "^4.1.0",
-        "promise": "^7.1.1",
-        "setimmediate": "^1.0.5",
-        "ua-parser-js": "^0.7.30"
-      }
-    },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -2632,9 +2287,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "dev": true,
       "funding": [
         {
@@ -2731,16 +2386,20 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
-      "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
       "dev": true,
       "dependencies": {
+        "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
         "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3",
         "hasown": "^2.0.0"
       },
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -2757,50 +2416,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/glamor": {
-      "version": "2.20.40",
-      "resolved": "https://registry.npmjs.org/glamor/-/glamor-2.20.40.tgz",
-      "integrity": "sha512-DNXCd+c14N9QF8aAKrfl4xakPk5FdcFwmH7sD0qnC0Pr7xoZ5W9yovhUrY/dJc3psfGGXC58vqQyRtuskyUJxA==",
-      "dependencies": {
-        "fbjs": "^0.8.12",
-        "inline-style-prefixer": "^3.0.6",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.5.10",
-        "through": "^2.3.8"
-      }
-    },
-    "node_modules/glamor/node_modules/inline-style-prefixer": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz",
-      "integrity": "sha512-ne8XIyyqkRaNJ1JfL1NYzNdCNxq+MCBQhC8NgOQlzNm2vv3XxlP0VSLQUbSRCF6KPEoveCVEpayHoHzcMyZsMQ==",
-      "dependencies": {
-        "bowser": "^1.7.3",
-        "css-in-js-utils": "^2.0.0"
-      }
-    },
-    "node_modules/glamorous": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/glamorous/-/glamorous-4.13.1.tgz",
-      "integrity": "sha512-x9yCGlRrPEkHF63m+WoZXHnpSet5ipS/fxczx5ic0ZKPPd2mMDyCZ0iEhse49OFlag0yxbJTc7k/L0g1GCmCYQ==",
-      "dependencies": {
-        "brcast": "^3.0.0",
-        "csstype": "^2.2.0",
-        "fast-memoize": "^2.2.7",
-        "html-tag-names": "^1.1.1",
-        "is-function": "^1.0.1",
-        "is-plain-object": "^2.0.4",
-        "react-html-attributes": "^1.4.2",
-        "svg-tag-names": "^1.1.0"
-      },
-      "peerDependencies": {
-        "glamor": ">=2"
-      }
-    },
-    "node_modules/glamorous/node_modules/csstype": {
-      "version": "2.6.21",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
-      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
-    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -2901,21 +2516,21 @@
       }
     },
     "node_modules/has-property-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
-      "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.2.2"
+        "es-define-property": "^1.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/has-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
       "dev": true,
       "engines": {
         "node": ">= 0.4"
@@ -2937,9 +2552,9 @@
       }
     },
     "node_modules/hasown": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
-      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
       "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -2965,11 +2580,6 @@
         "node": ">=12.0.0"
       }
     },
-    "node_modules/hoist-non-react-statics": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
-      "integrity": "sha512-r8huvKK+m+VraiRipdZYc+U4XW43j6OFG/oIafe7GfDbRpCduRoX9JI/DRxqgtBSCeL+et6N6ibZoedHS2NyOQ=="
-    },
     "node_modules/hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -3012,11 +2622,6 @@
         "safe-buffer": "~5.1.0"
       }
     },
-    "node_modules/html-element-attributes": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/html-element-attributes/-/html-element-attributes-1.3.1.tgz",
-      "integrity": "sha512-UrRKgp5sQmRnDy4TEwAUsu14XBUlzKB8U3hjIYDjcZ3Hbp86Jtftzxfgrv6E/ii/h78tsaZwAnAE8HwnHr0dPA=="
-    },
     "node_modules/html-entities": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.3.tgz",
@@ -3053,15 +2658,6 @@
         "node": ">= 12"
       }
     },
-    "node_modules/html-tag-names": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/html-tag-names/-/html-tag-names-1.1.5.tgz",
-      "integrity": "sha512-aI5tKwNTBzOZApHIynaAwecLBv8TlZTEy/P4Sj2SzzAhBrGuI8yGZ0UIXVPQzOHGS+to2mjb04iy6VWt/8+d8A==",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/html-webpack-plugin": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
@@ -3179,11 +2775,6 @@
         "node": ">=10.17.0"
       }
     },
-    "node_modules/hyphenate-style-name": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
-      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
-    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -3270,15 +2861,6 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
-    "node_modules/inline-style-prefixer": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-4.0.2.tgz",
-      "integrity": "sha512-N8nVhwfYga9MiV9jWlwfdj1UDIaZlBFu4cJSJkIr7tZX7sHpHhGR5su1qdpW+7KPL8ISTvCIkcaFi/JdBknvPg==",
-      "dependencies": {
-        "bowser": "^1.7.3",
-        "css-in-js-utils": "^2.0.0"
-      }
-    },
     "node_modules/interpret": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
@@ -3353,11 +2935,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-function": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
-      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
-    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -3395,6 +2972,7 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
       "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
       "dependencies": {
         "isobject": "^3.0.1"
       },
@@ -3441,19 +3019,11 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/isomorphic-fetch": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
-      "integrity": "sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==",
-      "dependencies": {
-        "node-fetch": "^1.0.1",
-        "whatwg-fetch": ">=0.10.0"
-      }
-    },
     "node_modules/jackspeak": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz",
@@ -3941,23 +3511,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/node-fetch": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
-      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
-      "dependencies": {
-        "encoding": "^0.1.11",
-        "is-stream": "^1.0.1"
-      }
-    },
-    "node_modules/node-fetch/node_modules/is-stream": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -3981,11 +3534,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/normalize.css": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-7.0.0.tgz",
-      "integrity": "sha512-LYaFZxj2Q1Q9e1VJ0f6laG46Rt5s9URhKyckNaA2vZnL/0gwQHWhM7ALQkp3WBQKM5sXRLQ5Ehrfkp+E/ZiCRg=="
-    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -4027,10 +3575,13 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
       "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -4434,14 +3985,6 @@
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "dev": true
     },
-    "node_modules/promise": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "dependencies": {
-        "asap": "~2.0.3"
-      }
-    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -4483,9 +4026,9 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.10.3",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
-      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
       "dev": true,
       "dependencies": {
         "side-channel": "^1.0.4"
@@ -4534,9 +4077,9 @@
       }
     },
     "node_modules/raw-body": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
-      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
       "dev": true,
       "dependencies": {
         "bytes": "3.1.2",
@@ -4580,19 +4123,16 @@
         "react": "^18.2.0"
       }
     },
-    "node_modules/react-html-attributes": {
-      "version": "1.4.6",
-      "resolved": "https://registry.npmjs.org/react-html-attributes/-/react-html-attributes-1.4.6.tgz",
-      "integrity": "sha512-uS3MmThNKFH2EZUQQw4k5pIcU7XIr208UE5dktrj/GOH1CMagqxDl4DCLpt3o2l9x+IB5nVYBeN3Cr4IutBXAg==",
-      "dependencies": {
-        "html-element-attributes": "^1.0.0"
-      }
-    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "node_modules/react-router": {
       "version": "6.11.2",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz",
@@ -4624,108 +4164,25 @@
       }
     },
     "node_modules/react-split-pane": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/react-split-pane/-/react-split-pane-2.0.3.tgz",
-      "integrity": "sha512-1rW+EMSJTkS7eYMYethCaNFOjiAVDm/B2LlxJXLr1Uu8ddLrV9pfc5P/fngRBkTGC/0tvxRkW1dLxGY7zvHVkA==",
-      "dependencies": {
-        "glamor": "^2.20.40",
-        "glamorous": "^4.11.2",
-        "inline-style-prefixer": "^4.0.0",
-        "normalize.css": "^7.0.0",
-        "prop-types": "^15.6.0",
-        "react": "^16.2.0",
-        "react-dom": "^16.2.0",
-        "styled-components": "^2.4.0"
-      }
-    },
-    "node_modules/react-split-pane/node_modules/has-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-      "integrity": "sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-split-pane/node_modules/react": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
-      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-split-pane/node_modules/react-dom": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
-      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.1"
-      },
-      "peerDependencies": {
-        "react": "^16.14.0"
-      }
-    },
-    "node_modules/react-split-pane/node_modules/scheduler": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "version": "0.1.92",
+      "resolved": "https://registry.npmjs.org/react-split-pane/-/react-split-pane-0.1.92.tgz",
+      "integrity": "sha512-GfXP1xSzLMcLJI5BM36Vh7GgZBpy+U/X0no+VM3fxayv+p1Jly5HpMofZJraeaMl73b3hvlr+N9zJKvLB/uz9w==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      }
-    },
-    "node_modules/react-split-pane/node_modules/styled-components": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-2.4.1.tgz",
-      "integrity": "sha512-dO0MpONBmVfjA/DSdpcLYObQZcbM+ZXoBOx5ytk4ZmUuyo3JG7QFMvHQEIvVRL1Uogf6x0DI9XWve6pyW9TTiA==",
-      "dependencies": {
-        "buffer": "^5.0.3",
-        "css-to-react-native": "^2.0.3",
-        "fbjs": "^0.8.9",
-        "hoist-non-react-statics": "^1.2.0",
-        "is-plain-object": "^2.0.1",
-        "prop-types": "^15.5.4",
-        "stylis": "^3.4.0",
-        "supports-color": "^3.2.3"
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.4",
+        "react-style-proptype": "^3.2.2"
       },
       "peerDependencies": {
-        "react": ">= 0.14.0 < 17.0.0-0"
-      }
-    },
-    "node_modules/react-split-pane/node_modules/supports-color": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
-      "integrity": "sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==",
-      "dependencies": {
-        "has-flag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.8.0"
+        "react": "^16.0.0-0",
+        "react-dom": "^16.0.0-0"
       }
     },
-    "node_modules/reactflow": {
-      "version": "11.10.4",
-      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.10.4.tgz",
-      "integrity": "sha512-0CApYhtYicXEDg/x2kvUHiUk26Qur8lAtTtiSlptNKuyEuGti6P1y5cS32YGaUoDMoCqkm/m+jcKkfMOvSCVRA==",
+    "node_modules/react-style-proptype": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-style-proptype/-/react-style-proptype-3.2.2.tgz",
+      "integrity": "sha512-ywYLSjNkxKHiZOqNlso9PZByNEY+FTyh3C+7uuziK0xFXu9xzdyfHwg4S9iyiRRoPCR4k2LqaBBsWVmSBwCWYQ==",
       "dependencies": {
-        "@reactflow/background": "11.3.9",
-        "@reactflow/controls": "11.2.9",
-        "@reactflow/core": "11.10.4",
-        "@reactflow/minimap": "11.7.9",
-        "@reactflow/node-resizer": "2.2.9",
-        "@reactflow/node-toolbar": "1.3.9"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
+        "prop-types": "^15.5.4"
       }
     },
     "node_modules/readable-stream": {
@@ -4931,7 +4388,8 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
     },
     "node_modules/scheduler": {
       "version": "0.23.0",
@@ -5107,26 +4565,22 @@
       }
     },
     "node_modules/set-function-length": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.0.tgz",
-      "integrity": "sha512-4DBHDoyHlM1IRPGYcoxexgh67y4ueR53FKV1yyxwFMY7aCqcN/38M1+SwZ/qJQ8iLv7+ck385ot4CcisOAPT9w==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
       "dev": true,
       "dependencies": {
-        "define-data-property": "^1.1.1",
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.2",
+        "get-intrinsic": "^1.2.4",
         "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.1"
+        "has-property-descriptors": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
-    "node_modules/setimmediate": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
-    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -5165,14 +4619,18 @@
       }
     },
     "node_modules/side-channel": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -5454,11 +4912,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/stylis": {
-      "version": "3.5.4",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
-      "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
-    },
     "node_modules/supports-color": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -5485,11 +4938,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/svg-tag-names": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/svg-tag-names/-/svg-tag-names-1.1.2.tgz",
-      "integrity": "sha512-LIDOy8NRLGfJegTEnpizWA/ofg3Gyx58JgPEEjvATFciUJW9dHZ2aPTYY0Mn2rQYCeUGZElpHfu91OcWK0IMIw=="
-    },
     "node_modules/table-layout": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/table-layout/-/table-layout-3.0.2.tgz",
@@ -5608,11 +5056,6 @@
         }
       }
     },
-    "node_modules/through": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
-    },
     "node_modules/thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
@@ -5772,29 +5215,7 @@
       "resolved": "https://registry.npmjs.org/typical/-/typical-4.0.0.tgz",
       "integrity": "sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw==",
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/ua-parser-js": {
-      "version": "0.7.37",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.37.tgz",
-      "integrity": "sha512-xV8kqRKM+jhMvcHWUKthV9fNebIzrNy//2O9ZwWcfiBFR5f25XVZPLlEajk/sf3Ra15V92isyQqnIEXRDaZWEA==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/ua-parser-js"
-        },
-        {
-          "type": "paypal",
-          "url": "https://paypal.me/faisalman"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/faisalman"
-        }
-      ],
-      "engines": {
-        "node": "*"
+        "node": ">=8"
       }
     },
     "node_modules/unpipe": {
@@ -6026,9 +5447,9 @@
       }
     },
     "node_modules/webpack-dev-middleware": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
-      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
+      "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
       "dev": true,
       "dependencies": {
         "colorette": "^2.0.10",
@@ -6280,11 +5701,6 @@
         "node": ">=0.8.0"
       }
     },
-    "node_modules/whatwg-fetch": {
-      "version": "3.6.20",
-      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
-      "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg=="
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -6446,9 +5862,9 @@
       }
     },
     "node_modules/zustand": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz",
-      "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==",
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.4.tgz",
+      "integrity": "sha512-/BPMyLKJPtFEvVL0E9E9BTUM63MNyhPGlvxk1XjrfWTUlV+BR8jufjsovHzrtR6YNcBEcL7cMHovL1n9xHawEg==",
       "dependencies": {
         "use-sync-external-store": "1.2.0"
       },
@@ -6675,78 +6091,6 @@
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
       "optional": true
     },
-    "@reactflow/background": {
-      "version": "11.3.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.9.tgz",
-      "integrity": "sha512-byj/G9pEC8tN0wT/ptcl/LkEP/BBfa33/SvBkqE4XwyofckqF87lKp573qGlisfnsijwAbpDlf81PuFL41So4Q==",
-      "requires": {
-        "@reactflow/core": "11.10.4",
-        "classcat": "^5.0.3",
-        "zustand": "^4.4.1"
-      }
-    },
-    "@reactflow/controls": {
-      "version": "11.2.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.2.9.tgz",
-      "integrity": "sha512-e8nWplbYfOn83KN1BrxTXS17+enLyFnjZPbyDgHSRLtI5ZGPKF/8iRXV+VXb2LFVzlu4Wh3la/pkxtfP/0aguA==",
-      "requires": {
-        "@reactflow/core": "11.10.4",
-        "classcat": "^5.0.3",
-        "zustand": "^4.4.1"
-      }
-    },
-    "@reactflow/core": {
-      "version": "11.10.4",
-      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.10.4.tgz",
-      "integrity": "sha512-j3i9b2fsTX/sBbOm+RmNzYEFWbNx4jGWGuGooh2r1jQaE2eV+TLJgiG/VNOp0q5mBl9f6g1IXs3Gm86S9JfcGw==",
-      "requires": {
-        "@types/d3": "^7.4.0",
-        "@types/d3-drag": "^3.0.1",
-        "@types/d3-selection": "^3.0.3",
-        "@types/d3-zoom": "^3.0.1",
-        "classcat": "^5.0.3",
-        "d3-drag": "^3.0.0",
-        "d3-selection": "^3.0.0",
-        "d3-zoom": "^3.0.0",
-        "zustand": "^4.4.1"
-      }
-    },
-    "@reactflow/minimap": {
-      "version": "11.7.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.7.9.tgz",
-      "integrity": "sha512-le95jyTtt3TEtJ1qa7tZ5hyM4S7gaEQkW43cixcMOZLu33VAdc2aCpJg/fXcRrrf7moN2Mbl9WIMNXUKsp5ILA==",
-      "requires": {
-        "@reactflow/core": "11.10.4",
-        "@types/d3-selection": "^3.0.3",
-        "@types/d3-zoom": "^3.0.1",
-        "classcat": "^5.0.3",
-        "d3-selection": "^3.0.0",
-        "d3-zoom": "^3.0.0",
-        "zustand": "^4.4.1"
-      }
-    },
-    "@reactflow/node-resizer": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.2.9.tgz",
-      "integrity": "sha512-HfickMm0hPDIHt9qH997nLdgLt0kayQyslKE0RS/GZvZ4UMQJlx/NRRyj5y47Qyg0NnC66KYOQWDM9LLzRTnUg==",
-      "requires": {
-        "@reactflow/core": "11.10.4",
-        "classcat": "^5.0.4",
-        "d3-drag": "^3.0.0",
-        "d3-selection": "^3.0.0",
-        "zustand": "^4.4.1"
-      }
-    },
-    "@reactflow/node-toolbar": {
-      "version": "1.3.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.3.9.tgz",
-      "integrity": "sha512-VmgxKmToax4sX1biZ9LXA7cj/TBJ+E5cklLGwquCCVVxh+lxpZGTBF3a5FJGVHiUNBBtFsC8ldcSZIK4cAlQww==",
-      "requires": {
-        "@reactflow/core": "11.10.4",
-        "classcat": "^5.0.3",
-        "zustand": "^4.4.1"
-      }
-    },
     "@remix-run/router": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz",
@@ -6832,93 +6176,11 @@
         "@types/node": "*"
       }
     },
-    "@types/d3": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
-      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
-      "requires": {
-        "@types/d3-array": "*",
-        "@types/d3-axis": "*",
-        "@types/d3-brush": "*",
-        "@types/d3-chord": "*",
-        "@types/d3-color": "*",
-        "@types/d3-contour": "*",
-        "@types/d3-delaunay": "*",
-        "@types/d3-dispatch": "*",
-        "@types/d3-drag": "*",
-        "@types/d3-dsv": "*",
-        "@types/d3-ease": "*",
-        "@types/d3-fetch": "*",
-        "@types/d3-force": "*",
-        "@types/d3-format": "*",
-        "@types/d3-geo": "*",
-        "@types/d3-hierarchy": "*",
-        "@types/d3-interpolate": "*",
-        "@types/d3-path": "*",
-        "@types/d3-polygon": "*",
-        "@types/d3-quadtree": "*",
-        "@types/d3-random": "*",
-        "@types/d3-scale": "*",
-        "@types/d3-scale-chromatic": "*",
-        "@types/d3-selection": "*",
-        "@types/d3-shape": "*",
-        "@types/d3-time": "*",
-        "@types/d3-time-format": "*",
-        "@types/d3-timer": "*",
-        "@types/d3-transition": "*",
-        "@types/d3-zoom": "*"
-      }
-    },
-    "@types/d3-array": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
-      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg=="
-    },
-    "@types/d3-axis": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
-      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
-      "requires": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "@types/d3-brush": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
-      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
-      "requires": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "@types/d3-chord": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
-      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg=="
-    },
     "@types/d3-color": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
       "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="
     },
-    "@types/d3-contour": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
-      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
-      "requires": {
-        "@types/d3-array": "*",
-        "@types/geojson": "*"
-      }
-    },
-    "@types/d3-delaunay": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
-      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw=="
-    },
-    "@types/d3-dispatch": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.6.tgz",
-      "integrity": "sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ=="
-    },
     "@types/d3-drag": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
@@ -6927,47 +6189,6 @@
         "@types/d3-selection": "*"
       }
     },
-    "@types/d3-dsv": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
-      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g=="
-    },
-    "@types/d3-ease": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
-      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="
-    },
-    "@types/d3-fetch": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
-      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
-      "requires": {
-        "@types/d3-dsv": "*"
-      }
-    },
-    "@types/d3-force": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.9.tgz",
-      "integrity": "sha512-IKtvyFdb4Q0LWna6ymywQsEYjK/94SGhPrMfEr1TIc5OBeziTi+1jcCvttts8e0UWZIxpasjnQk9MNk/3iS+kA=="
-    },
-    "@types/d3-format": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
-      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g=="
-    },
-    "@types/d3-geo": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
-      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
-      "requires": {
-        "@types/geojson": "*"
-      }
-    },
-    "@types/d3-hierarchy": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.6.tgz",
-      "integrity": "sha512-qlmD/8aMk5xGorUvTUWHCiumvgaUXYldYjNVOWtYoTYY/L+WwIEAmJxUmTgr9LoGNG0PPAOmqMDJVDPc7DOpPw=="
-    },
     "@types/d3-interpolate": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
@@ -6976,67 +6197,11 @@
         "@types/d3-color": "*"
       }
     },
-    "@types/d3-path": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.0.tgz",
-      "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ=="
-    },
-    "@types/d3-polygon": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
-      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA=="
-    },
-    "@types/d3-quadtree": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
-      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg=="
-    },
-    "@types/d3-random": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
-      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ=="
-    },
-    "@types/d3-scale": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
-      "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==",
-      "requires": {
-        "@types/d3-time": "*"
-      }
-    },
-    "@types/d3-scale-chromatic": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.3.tgz",
-      "integrity": "sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw=="
-    },
     "@types/d3-selection": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.10.tgz",
       "integrity": "sha512-cuHoUgS/V3hLdjJOLTT691+G2QoqAjCVLmr4kJXR4ha56w1Zdu8UUQ5TxLRqudgNjwXeQxKMq4j+lyf9sWuslg=="
     },
-    "@types/d3-shape": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz",
-      "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==",
-      "requires": {
-        "@types/d3-path": "*"
-      }
-    },
-    "@types/d3-time": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz",
-      "integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw=="
-    },
-    "@types/d3-time-format": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
-      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg=="
-    },
-    "@types/d3-timer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
-      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="
-    },
     "@types/d3-transition": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.8.tgz",
@@ -7100,11 +6265,6 @@
         "@types/range-parser": "*"
       }
     },
-    "@types/geojson": {
-      "version": "7946.0.14",
-      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
-      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg=="
-    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -7394,6 +6554,30 @@
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
+    "@xyflow/react": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.0.0.tgz",
+      "integrity": "sha512-f0cboW5ZbKR+xGUr2QtYiIZwGvxDHzCjdtp2KBSNcQCmyc9xgaJ2PMCKBpwAUF0u+RoA7mEW2jE3mPI9WCBy0A==",
+      "requires": {
+        "@xyflow/system": "0.0.34",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      }
+    },
+    "@xyflow/system": {
+      "version": "0.0.34",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.34.tgz",
+      "integrity": "sha512-Gcc2aSPZX5YMn+Rv6a2lxRes005YLc6LRaMtzRsobCcIEMpBUWzEx8/OrvpAYOCM3UCxlqfUOK2ekglxbjzYEQ==",
+      "requires": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
     "abort-controller": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
@@ -7534,11 +6718,6 @@
       "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
       "dev": true
     },
-    "asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
-    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -7562,21 +6741,21 @@
       "dev": true
     },
     "body-parser": {
-      "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.0.tgz",
-      "integrity": "sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==",
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
+      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
       "dev": true,
       "requires": {
         "bytes": "3.1.2",
-        "content-type": "~1.0.4",
+        "content-type": "~1.0.5",
         "debug": "2.6.9",
         "depd": "2.0.0",
         "destroy": "1.2.0",
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.10.3",
-        "raw-body": "2.5.1",
+        "qs": "6.11.0",
+        "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
       },
@@ -7607,11 +6786,6 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
-    "bowser": {
-      "version": "1.9.4",
-      "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
-      "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ=="
-    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -7623,19 +6797,14 @@
       }
     },
     "braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "requires": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       }
     },
-    "brcast": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/brcast/-/brcast-3.0.2.tgz",
-      "integrity": "sha512-f5XwwFCCuvgqP2nMH/hJ74FqnGmb4X3D+NC//HphxJzzhsZvSZa+Hk/syB7j3ZHpPDLMoYU8oBgviRWfNvEfKA=="
-    },
     "browserslist": {
       "version": "4.21.3",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz",
@@ -7647,15 +6816,6 @@
         "update-browserslist-db": "^1.0.5"
       }
     },
-    "buffer": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "requires": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.1.13"
-      }
-    },
     "buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -7668,14 +6828,16 @@
       "dev": true
     },
     "call-bind": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
-      "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "dev": true,
       "requires": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.1",
-        "set-function-length": "^1.1.1"
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
       }
     },
     "camel-case": {
@@ -7688,11 +6850,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "camelize": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
-      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="
-    },
     "caniuse-lite": {
       "version": "1.0.30001393",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001393.tgz",
@@ -7752,9 +6909,9 @@
       "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg=="
     },
     "classcat": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.4.tgz",
-      "integrity": "sha512-sbpkOw6z413p+HDGcBENe498WM9woqWHiJxCq7nvmxe9WmrUmqfAcxpIwAiMtM5Q3AhYkzXcNQHqsWq0mND51g=="
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w=="
     },
     "classnames": {
       "version": "2.3.1",
@@ -7893,15 +7050,15 @@
       }
     },
     "content-type": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
       "dev": true
     },
     "cookie": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
       "dev": true
     },
     "cookie-signature": {
@@ -7974,11 +7131,6 @@
         }
       }
     },
-    "core-js": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
-      "integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA=="
-    },
     "core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -8001,20 +7153,6 @@
         "which": "^2.0.1"
       }
     },
-    "css-color-keywords": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="
-    },
-    "css-in-js-utils": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
-      "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
-      "requires": {
-        "hyphenate-style-name": "^1.0.2",
-        "isobject": "^3.0.1"
-      }
-    },
     "css-loader": {
       "version": "6.7.1",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",
@@ -8043,23 +7181,6 @@
         "nth-check": "^2.0.1"
       }
     },
-    "css-to-react-native": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz",
-      "integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==",
-      "requires": {
-        "camelize": "^1.0.0",
-        "css-color-keywords": "^1.0.0",
-        "postcss-value-parser": "^3.3.0"
-      },
-      "dependencies": {
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
-        }
-      }
-    },
     "css-what": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -8161,14 +7282,14 @@
       }
     },
     "define-data-property": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
-      "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
       "dev": true,
       "requires": {
-        "get-intrinsic": "^1.2.1",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
       }
     },
     "define-lazy-prop": {
@@ -8313,24 +7434,6 @@
       "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
       "dev": true
     },
-    "encoding": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
-      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-      "requires": {
-        "iconv-lite": "^0.6.2"
-      },
-      "dependencies": {
-        "iconv-lite": {
-          "version": "0.6.3",
-          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-          "requires": {
-            "safer-buffer": ">= 2.1.2 < 3.0.0"
-          }
-        }
-      }
-    },
     "enhanced-resolve": {
       "version": "5.15.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
@@ -8352,6 +7455,21 @@
       "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
       "dev": true
     },
+    "es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.2.4"
+      }
+    },
+    "es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true
+    },
     "es-module-lexer": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.0.tgz",
@@ -8436,17 +7554,17 @@
       }
     },
     "express": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.1.tgz",
-      "integrity": "sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
       "dev": true,
       "requires": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.0",
+        "body-parser": "1.20.2",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.5.0",
+        "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -8462,7 +7580,7 @@
         "parseurl": "~1.3.3",
         "path-to-regexp": "0.1.7",
         "proxy-addr": "~2.0.7",
-        "qs": "6.10.3",
+        "qs": "6.11.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
         "send": "0.18.0",
@@ -8505,11 +7623,6 @@
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
-    "fast-memoize": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
-      "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
-    },
     "fastest-levenshtein": {
       "version": "1.0.16",
       "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
@@ -8534,24 +7647,10 @@
         "websocket-driver": ">=0.5.1"
       }
     },
-    "fbjs": {
-      "version": "0.8.18",
-      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz",
-      "integrity": "sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==",
-      "requires": {
-        "core-js": "^1.0.0",
-        "isomorphic-fetch": "^2.1.1",
-        "loose-envify": "^1.0.0",
-        "object-assign": "^4.1.0",
-        "promise": "^7.1.1",
-        "setimmediate": "^1.0.5",
-        "ua-parser-js": "^0.7.30"
-      }
-    },
     "fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "requires": {
         "to-regex-range": "^5.0.1"
@@ -8591,9 +7690,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "dev": true
     },
     "foreground-child": {
@@ -8650,11 +7749,12 @@
       "dev": true
     },
     "get-intrinsic": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
-      "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
       "dev": true,
       "requires": {
+        "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
         "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3",
@@ -8667,51 +7767,6 @@
       "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
       "dev": true
     },
-    "glamor": {
-      "version": "2.20.40",
-      "resolved": "https://registry.npmjs.org/glamor/-/glamor-2.20.40.tgz",
-      "integrity": "sha512-DNXCd+c14N9QF8aAKrfl4xakPk5FdcFwmH7sD0qnC0Pr7xoZ5W9yovhUrY/dJc3psfGGXC58vqQyRtuskyUJxA==",
-      "requires": {
-        "fbjs": "^0.8.12",
-        "inline-style-prefixer": "^3.0.6",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.5.10",
-        "through": "^2.3.8"
-      },
-      "dependencies": {
-        "inline-style-prefixer": {
-          "version": "3.0.8",
-          "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz",
-          "integrity": "sha512-ne8XIyyqkRaNJ1JfL1NYzNdCNxq+MCBQhC8NgOQlzNm2vv3XxlP0VSLQUbSRCF6KPEoveCVEpayHoHzcMyZsMQ==",
-          "requires": {
-            "bowser": "^1.7.3",
-            "css-in-js-utils": "^2.0.0"
-          }
-        }
-      }
-    },
-    "glamorous": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/glamorous/-/glamorous-4.13.1.tgz",
-      "integrity": "sha512-x9yCGlRrPEkHF63m+WoZXHnpSet5ipS/fxczx5ic0ZKPPd2mMDyCZ0iEhse49OFlag0yxbJTc7k/L0g1GCmCYQ==",
-      "requires": {
-        "brcast": "^3.0.0",
-        "csstype": "^2.2.0",
-        "fast-memoize": "^2.2.7",
-        "html-tag-names": "^1.1.1",
-        "is-function": "^1.0.1",
-        "is-plain-object": "^2.0.4",
-        "react-html-attributes": "^1.4.2",
-        "svg-tag-names": "^1.1.0"
-      },
-      "dependencies": {
-        "csstype": {
-          "version": "2.6.21",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
-          "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
-        }
-      }
-    },
     "glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -8788,18 +7843,18 @@
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
     },
     "has-property-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
-      "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
       "dev": true,
       "requires": {
-        "get-intrinsic": "^1.2.2"
+        "es-define-property": "^1.0.0"
       }
     },
     "has-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
       "dev": true
     },
     "has-symbols": {
@@ -8809,9 +7864,9 @@
       "dev": true
     },
     "hasown": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
-      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
       "dev": true,
       "requires": {
         "function-bind": "^1.1.2"
@@ -8828,11 +7883,6 @@
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.6.0.tgz",
       "integrity": "sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw=="
     },
-    "hoist-non-react-statics": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
-      "integrity": "sha512-r8huvKK+m+VraiRipdZYc+U4XW43j6OFG/oIafe7GfDbRpCduRoX9JI/DRxqgtBSCeL+et6N6ibZoedHS2NyOQ=="
-    },
     "hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -8877,11 +7927,6 @@
         }
       }
     },
-    "html-element-attributes": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/html-element-attributes/-/html-element-attributes-1.3.1.tgz",
-      "integrity": "sha512-UrRKgp5sQmRnDy4TEwAUsu14XBUlzKB8U3hjIYDjcZ3Hbp86Jtftzxfgrv6E/ii/h78tsaZwAnAE8HwnHr0dPA=="
-    },
     "html-entities": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.3.tgz",
@@ -8911,11 +7956,6 @@
         }
       }
     },
-    "html-tag-names": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/html-tag-names/-/html-tag-names-1.1.5.tgz",
-      "integrity": "sha512-aI5tKwNTBzOZApHIynaAwecLBv8TlZTEy/P4Sj2SzzAhBrGuI8yGZ0UIXVPQzOHGS+to2mjb04iy6VWt/8+d8A=="
-    },
     "html-webpack-plugin": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
@@ -8996,11 +8036,6 @@
       "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
       "dev": true
     },
-    "hyphenate-style-name": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
-      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
-    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -9053,15 +8088,6 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
-    "inline-style-prefixer": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-4.0.2.tgz",
-      "integrity": "sha512-N8nVhwfYga9MiV9jWlwfdj1UDIaZlBFu4cJSJkIr7tZX7sHpHhGR5su1qdpW+7KPL8ISTvCIkcaFi/JdBknvPg==",
-      "requires": {
-        "bowser": "^1.7.3",
-        "css-in-js-utils": "^2.0.0"
-      }
-    },
     "interpret": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
@@ -9109,11 +8135,6 @@
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
     },
-    "is-function": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
-      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
-    },
     "is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -9139,6 +8160,7 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
       "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
       "requires": {
         "isobject": "^3.0.1"
       }
@@ -9172,16 +8194,8 @@
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
-    },
-    "isomorphic-fetch": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
-      "integrity": "sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==",
-      "requires": {
-        "node-fetch": "^1.0.1",
-        "whatwg-fetch": ">=0.10.0"
-      }
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true
     },
     "jackspeak": {
       "version": "3.4.0",
@@ -9535,22 +8549,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node-fetch": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
-      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
-      "requires": {
-        "encoding": "^0.1.11",
-        "is-stream": "^1.0.1"
-      },
-      "dependencies": {
-        "is-stream": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-          "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ=="
-        }
-      }
-    },
     "node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -9568,11 +8566,6 @@
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "dev": true
     },
-    "normalize.css": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-7.0.0.tgz",
-      "integrity": "sha512-LYaFZxj2Q1Q9e1VJ0f6laG46Rt5s9URhKyckNaA2vZnL/0gwQHWhM7ALQkp3WBQKM5sXRLQ5Ehrfkp+E/ZiCRg=="
-    },
     "npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -9602,9 +8595,9 @@
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="
     },
     "object-inspect": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
       "dev": true
     },
     "object-sizeof": {
@@ -9884,14 +8877,6 @@
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "dev": true
     },
-    "promise": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "requires": {
-        "asap": "~2.0.3"
-      }
-    },
     "prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -9926,9 +8911,9 @@
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="
     },
     "qs": {
-      "version": "6.10.3",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
-      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
       "dev": true,
       "requires": {
         "side-channel": "^1.0.4"
@@ -9954,9 +8939,9 @@
       "dev": true
     },
     "raw-body": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
-      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
       "dev": true,
       "requires": {
         "bytes": "3.1.2",
@@ -9990,19 +8975,16 @@
         "scheduler": "^0.23.0"
       }
     },
-    "react-html-attributes": {
-      "version": "1.4.6",
-      "resolved": "https://registry.npmjs.org/react-html-attributes/-/react-html-attributes-1.4.6.tgz",
-      "integrity": "sha512-uS3MmThNKFH2EZUQQw4k5pIcU7XIr208UE5dktrj/GOH1CMagqxDl4DCLpt3o2l9x+IB5nVYBeN3Cr4IutBXAg==",
-      "requires": {
-        "html-element-attributes": "^1.0.0"
-      }
-    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-router": {
       "version": "6.11.2",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz",
@@ -10021,91 +9003,21 @@
       }
     },
     "react-split-pane": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/react-split-pane/-/react-split-pane-2.0.3.tgz",
-      "integrity": "sha512-1rW+EMSJTkS7eYMYethCaNFOjiAVDm/B2LlxJXLr1Uu8ddLrV9pfc5P/fngRBkTGC/0tvxRkW1dLxGY7zvHVkA==",
+      "version": "0.1.92",
+      "resolved": "https://registry.npmjs.org/react-split-pane/-/react-split-pane-0.1.92.tgz",
+      "integrity": "sha512-GfXP1xSzLMcLJI5BM36Vh7GgZBpy+U/X0no+VM3fxayv+p1Jly5HpMofZJraeaMl73b3hvlr+N9zJKvLB/uz9w==",
       "requires": {
-        "glamor": "^2.20.40",
-        "glamorous": "^4.11.2",
-        "inline-style-prefixer": "^4.0.0",
-        "normalize.css": "^7.0.0",
-        "prop-types": "^15.6.0",
-        "react": "^16.2.0",
-        "react-dom": "^16.2.0",
-        "styled-components": "^2.4.0"
-      },
-      "dependencies": {
-        "has-flag": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-          "integrity": "sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA=="
-        },
-        "react": {
-          "version": "16.14.0",
-          "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
-          "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
-          "requires": {
-            "loose-envify": "^1.1.0",
-            "object-assign": "^4.1.1",
-            "prop-types": "^15.6.2"
-          }
-        },
-        "react-dom": {
-          "version": "16.14.0",
-          "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
-          "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
-          "requires": {
-            "loose-envify": "^1.1.0",
-            "object-assign": "^4.1.1",
-            "prop-types": "^15.6.2",
-            "scheduler": "^0.19.1"
-          }
-        },
-        "scheduler": {
-          "version": "0.19.1",
-          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-          "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
-          "requires": {
-            "loose-envify": "^1.1.0",
-            "object-assign": "^4.1.1"
-          }
-        },
-        "styled-components": {
-          "version": "2.4.1",
-          "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-2.4.1.tgz",
-          "integrity": "sha512-dO0MpONBmVfjA/DSdpcLYObQZcbM+ZXoBOx5ytk4ZmUuyo3JG7QFMvHQEIvVRL1Uogf6x0DI9XWve6pyW9TTiA==",
-          "requires": {
-            "buffer": "^5.0.3",
-            "css-to-react-native": "^2.0.3",
-            "fbjs": "^0.8.9",
-            "hoist-non-react-statics": "^1.2.0",
-            "is-plain-object": "^2.0.1",
-            "prop-types": "^15.5.4",
-            "stylis": "^3.4.0",
-            "supports-color": "^3.2.3"
-          }
-        },
-        "supports-color": {
-          "version": "3.2.3",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
-          "integrity": "sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==",
-          "requires": {
-            "has-flag": "^1.0.0"
-          }
-        }
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.4",
+        "react-style-proptype": "^3.2.2"
       }
     },
-    "reactflow": {
-      "version": "11.10.4",
-      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.10.4.tgz",
-      "integrity": "sha512-0CApYhtYicXEDg/x2kvUHiUk26Qur8lAtTtiSlptNKuyEuGti6P1y5cS32YGaUoDMoCqkm/m+jcKkfMOvSCVRA==",
+    "react-style-proptype": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-style-proptype/-/react-style-proptype-3.2.2.tgz",
+      "integrity": "sha512-ywYLSjNkxKHiZOqNlso9PZByNEY+FTyh3C+7uuziK0xFXu9xzdyfHwg4S9iyiRRoPCR4k2LqaBBsWVmSBwCWYQ==",
       "requires": {
-        "@reactflow/background": "11.3.9",
-        "@reactflow/controls": "11.2.9",
-        "@reactflow/core": "11.10.4",
-        "@reactflow/minimap": "11.7.9",
-        "@reactflow/node-resizer": "2.2.9",
-        "@reactflow/node-toolbar": "1.3.9"
+        "prop-types": "^15.5.4"
       }
     },
     "readable-stream": {
@@ -10237,7 +9149,8 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
     },
     "scheduler": {
       "version": "0.23.0",
@@ -10383,23 +9296,19 @@
       }
     },
     "set-function-length": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.0.tgz",
-      "integrity": "sha512-4DBHDoyHlM1IRPGYcoxexgh67y4ueR53FKV1yyxwFMY7aCqcN/38M1+SwZ/qJQ8iLv7+ck385ot4CcisOAPT9w==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
       "dev": true,
       "requires": {
-        "define-data-property": "^1.1.1",
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.2",
+        "get-intrinsic": "^1.2.4",
         "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.1"
+        "has-property-descriptors": "^1.0.2"
       }
     },
-    "setimmediate": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
-    },
     "setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -10429,14 +9338,15 @@
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
     },
     "side-channel": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
       }
     },
     "signal-exit": {
@@ -10644,11 +9554,6 @@
       "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
       "requires": {}
     },
-    "stylis": {
-      "version": "3.5.4",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
-      "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
-    },
     "supports-color": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -10663,11 +9568,6 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
-    "svg-tag-names": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/svg-tag-names/-/svg-tag-names-1.1.2.tgz",
-      "integrity": "sha512-LIDOy8NRLGfJegTEnpizWA/ofg3Gyx58JgPEEjvATFciUJW9dHZ2aPTYY0Mn2rQYCeUGZElpHfu91OcWK0IMIw=="
-    },
     "table-layout": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/table-layout/-/table-layout-3.0.2.tgz",
@@ -10742,11 +9642,6 @@
         "terser": "^5.16.8"
       }
     },
-    "through": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
-    },
     "thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
@@ -10845,11 +9740,6 @@
       "resolved": "https://registry.npmjs.org/typical/-/typical-4.0.0.tgz",
       "integrity": "sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw=="
     },
-    "ua-parser-js": {
-      "version": "0.7.37",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.37.tgz",
-      "integrity": "sha512-xV8kqRKM+jhMvcHWUKthV9fNebIzrNy//2O9ZwWcfiBFR5f25XVZPLlEajk/sf3Ra15V92isyQqnIEXRDaZWEA=="
-    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -10999,9 +9889,9 @@
       }
     },
     "webpack-dev-middleware": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
-      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
+      "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
       "dev": true,
       "requires": {
         "colorette": "^2.0.10",
@@ -11182,11 +10072,6 @@
       "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
-    "whatwg-fetch": {
-      "version": "3.6.20",
-      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
-      "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg=="
-    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -11292,9 +10177,9 @@
       "dev": true
     },
     "zustand": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz",
-      "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==",
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.4.tgz",
+      "integrity": "sha512-/BPMyLKJPtFEvVL0E9E9BTUM63MNyhPGlvxk1XjrfWTUlV+BR8jufjsovHzrtR6YNcBEcL7cMHovL1n9xHawEg==",
       "requires": {
         "use-sync-external-store": "1.2.0"
       }
diff --git a/package.json b/package.json
index f407d8b..972a20e 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@eagleoutice/flowr": "^2.0.9",
     "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
+    "@xyflow/react": "^12.0.0",
     "allotment": "^1.17.0",
     "css-loader": "^6.7.1",
     "elkjs": "^0.9.2",
@@ -34,8 +35,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.2",
-    "react-split-pane": "^2.0.3",
-    "reactflow": "^11.10.4",
+    "react-split-pane": "^0.1.92",
     "style-loader": "^3.3.1",
     "uuid": "^9.0.0",
     "webpack-manifest-plugin": "^5.0.0"
diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 5259cca..79a064b 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -1,6 +1,7 @@
 import ELK, { ElkExtendedEdge, ElkNode, LayoutOptions } from 'elkjs/lib/elk.bundled.js';
 import React, { ChangeEventHandler, useCallback, useLayoutEffect, useMemo, useState } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Panel,
   useNodesState,
@@ -22,9 +23,10 @@ import ReactFlow, {
   MarkerType,
   EdgeProps,
   applyEdgeChanges,
-} from 'reactflow';
+} from '@xyflow/react';
+
+import '@xyflow/react/dist/style.css';
 
-import 'reactflow/dist/style.css';
 import { VisualizationGraph } from './model/graph';
 import FloatingConnectionLine, { ExitPointNode, FunctionCallNode, FunctionDefinitionNode, GroupNode, UseNode, ValueNode, VariableDefinitionNode } from './model/nodes/nodeDefinition';
 import ReadsEdge from './model/edges/readsEdge';
@@ -85,7 +87,7 @@ const elkOptions: LayoutOptions = {
      sources: [edge.source],
      targets: [edge.target],
      label: edge.label as string,
-     edgeType: edge.data.edgeType ?? '',
+     edgeType: edge.data?.edgeType ?? '',
      data:{...edge.data}
    }));
  }
@@ -98,8 +100,8 @@ export interface LayoutFlowProps {
 
  export function LayoutFlow({ graph, assignGraphUpdater } : LayoutFlowProps) {
    const [currentGraph, setCurrentGraph] = useState(graph);
-   const [nodes, setNodes, onNodesChange] = useNodesState([]);
-   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
    const nodeMap = new Map<string,Node>() // correct Way to do it?????
    const { fitView } = useReactFlow();
    
@@ -117,6 +119,7 @@ export interface LayoutFlowProps {
        getLayoutedElements(ns, nm, convertToExtendedEdges(es), opts).then(({ nodes: layoutedNodes, edges: layoutedEdges }) => {
          setNodes(layoutedNodes);
          setEdges(layoutedEdges);
+         console.log(layoutedNodes)
 
          window.requestAnimationFrame(() => fitView());
        });
diff --git a/source/components/graphHierachy.ts b/source/components/graphHierachy.ts
index 07b35b0..aa1ff87 100644
--- a/source/components/graphHierachy.ts
+++ b/source/components/graphHierachy.ts
@@ -1,5 +1,5 @@
 import { ElkNode } from 'elkjs';
-import {CoordinateExtent, Node, XYPosition} from 'reactflow'
+import {CoordinateExtent, Node, XYPosition} from '@xyflow/react'
 import { VisualizationNodeProps } from './model/graphBuilder';
 
 const standardHeight = 50
@@ -13,7 +13,7 @@ export function foldIntoElkHierarchy(nodes:Node[], nodesIdMap: Map<string,Node>,
     const usedMap  = new Map<string, boolean>()
     nodesIdMap.forEach((node, id) => usedMap.set(id,false))
 
-    const smthToReturn =  (nodes.map((node) => foldOnVisualizationGraphNodes(node, nodesIdMap, usedMap, isHorizontal))).filter(nonEmpty)
+    const smthToReturn =  (nodes.map((node) => foldOnVisualizationGraphNodes(node as Node<VisualizationNodeProps>, nodesIdMap as Map<string, Node<VisualizationNodeProps>>, usedMap, isHorizontal))).filter(nonEmpty)
     
     return smthToReturn
     /*
@@ -120,7 +120,7 @@ function foldOnVisualizationGraphNodes(currentNode: Node<VisualizationNodeProps>
 
 }
 
-interface FinalNodeProps{
+interface FinalNodeProps extends Record<string, unknown> {
   label: string
   nodeType: string
   id: string
diff --git a/source/components/model/edges/argumentEdge.tsx b/source/components/model/edges/argumentEdge.tsx
index 9f3194b..d122a35 100644
--- a/source/components/model/edges/argumentEdge.tsx
+++ b/source/components/model/edges/argumentEdge.tsx
@@ -1,4 +1,4 @@
-import { EdgeProps } from "reactflow"
+import { EdgeProps } from '@xyflow/react'
 import { BodyEdgeCompontent } from "./edgeBase"
 
 export function ArgumentEdge(props:EdgeProps) {
@@ -6,6 +6,7 @@ export function ArgumentEdge(props:EdgeProps) {
       standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '7,7'}}
       label = 'argument'
-  
+      source={props.source}
+      target={props.target}
     />
   }
\ No newline at end of file
diff --git a/source/components/model/edges/callsEdge.tsx b/source/components/model/edges/callsEdge.tsx
index 0eb4a36..396db33 100644
--- a/source/components/model/edges/callsEdge.tsx
+++ b/source/components/model/edges/callsEdge.tsx
@@ -1,4 +1,4 @@
-import { EdgeProps } from "reactflow"
+import { EdgeProps } from '@xyflow/react'
 import { BodyEdgeCompontent } from "./edgeBase"
 
 export function CallsEdge(props:EdgeProps){
@@ -7,5 +7,7 @@ export function CallsEdge(props:EdgeProps){
       edgeStyle = {{stroke: 'blue', strokeDasharray: '3,7'}}
       label = 'calls'
       arrowEnd = {true}
+      source={props.source}
+      target={props.target}
     />
   }
\ No newline at end of file
diff --git a/source/components/model/edges/definedByEdge.tsx b/source/components/model/edges/definedByEdge.tsx
index 2536d89..fc38cd5 100644
--- a/source/components/model/edges/definedByEdge.tsx
+++ b/source/components/model/edges/definedByEdge.tsx
@@ -1,4 +1,4 @@
-import { EdgeProps } from "reactflow"
+import { EdgeProps } from '@xyflow/react'
 import { BodyEdgeCompontent } from "./edgeBase"
 
 export function DefinedByEdge(props:EdgeProps) {
@@ -7,5 +7,7 @@ export function DefinedByEdge(props:EdgeProps) {
       edgeStyle = {{stroke: 'black'}}
       label = 'defined-by'
       arrowEnd = {true}
+      source={props.source}
+      target={props.target}
     />
   }
\ No newline at end of file
diff --git a/source/components/model/edges/definedByOnCallEdge.tsx b/source/components/model/edges/definedByOnCallEdge.tsx
index 5ba035e..6859118 100644
--- a/source/components/model/edges/definedByOnCallEdge.tsx
+++ b/source/components/model/edges/definedByOnCallEdge.tsx
@@ -1,4 +1,4 @@
-import { EdgeProps } from "reactflow"
+import { EdgeProps } from '@xyflow/react'
 import { BodyEdgeCompontent } from "./edgeBase"
 
 export function DefinedByOnCallEdge(props: EdgeProps) {
@@ -7,5 +7,7 @@ export function DefinedByOnCallEdge(props: EdgeProps) {
       edgeStyle = {{stroke: 'blue', strokeDasharray: '6,7'}}
       label = 'defined-by-on-call'
       arrowEnd = {true}
+      source={props.source}
+      target={props.target}
     />
   }
\ No newline at end of file
diff --git a/source/components/model/edges/definesOnCallEdge.tsx b/source/components/model/edges/definesOnCallEdge.tsx
index 82ddb0d..e876cd5 100644
--- a/source/components/model/edges/definesOnCallEdge.tsx
+++ b/source/components/model/edges/definesOnCallEdge.tsx
@@ -1,4 +1,4 @@
-import { EdgeProps } from "reactflow"
+import { EdgeProps } from '@xyflow/react'
 import { BodyEdgeCompontent } from "./edgeBase"
 
 export function DefinesOnCallEdge(props:EdgeProps) {
@@ -7,5 +7,7 @@ export function DefinesOnCallEdge(props:EdgeProps) {
       edgeStyle = {{stroke: 'blue', strokeDasharray: '5,7'}}
       label = 'defines-on-call'
       arrowEnd = {true}
+      source={props.source}
+      target={props.target}
     />
   }
\ No newline at end of file
diff --git a/source/components/model/edges/edgeBase.tsx b/source/components/model/edges/edgeBase.tsx
index 5fc29ff..419fab5 100644
--- a/source/components/model/edges/edgeBase.tsx
+++ b/source/components/model/edges/edgeBase.tsx
@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { getStraightPath, BaseEdge, EdgeLabelRenderer, EdgeProps, getBezierPath, Node, Position, useStore, XYPosition} from "reactflow";
+import { getStraightPath, BaseEdge, EdgeLabelRenderer, EdgeProps, getBezierPath, Node, Position, useStore, XYPosition, useInternalNode} from '@xyflow/react';
 
 const edgeTagMap:{[index: string]:string} = {
   'reads':                   'readsEdge',
@@ -27,13 +27,15 @@ interface BodyEdgeComponentProps {
   readonly label: string,
   readonly arrowStart?: boolean;
   readonly arrowEnd?: boolean;
+  readonly source: string;
+  readonly target: string;
 }
 
 export const BodyEdgeCompontent: React.FC<BodyEdgeComponentProps> = (props) => {
   
-  const sourceNode = useStore(useCallback((store) => store.nodeInternals.get(props.standardEdgeInformation.source), [props.standardEdgeInformation.source]));
-  const targetNode = useStore(useCallback((store) => store.nodeInternals.get(props.standardEdgeInformation.target), [props.standardEdgeInformation.target]));
-
+  const sourceNode = useInternalNode(props.source)
+  const targetNode = useInternalNode(props.target)
+    
   if (!sourceNode || !targetNode) {
     return null;
   }
@@ -84,10 +86,10 @@ function getNodeIntersection(intersectionNode:Node, targetNode:Node):XYPosition
   const {
     width: intersectionNodeWidth,
     height: intersectionNodeHeight,
-    positionAbsolute: intersectionNodePosition,
+    position: intersectionNodePosition,
   } = intersectionNode;
 
-  const targetPosition = targetNode.positionAbsolute;
+  const targetPosition = targetNode.position;
 
   const w = intersectionNodeWidth! / 2;
   const h = intersectionNodeHeight! / 2;
@@ -111,16 +113,16 @@ function getNodeIntersection(intersectionNode:Node, targetNode:Node):XYPosition
 // returns the position (top,right,bottom or right) passed node compared to the intersection point
 function getEdgePosition(node: Node, intersectionPoint:XYPosition): Position {
   
-  const nodeToLookAt = { ...node.positionAbsolute, ...node };
+  const nodeToLookAt = { ...node.position, ...node };
   const nx = Math.round(nodeToLookAt.x!);
   const ny = Math.round(nodeToLookAt.y!);
   const px = Math.round(intersectionPoint.x);
   const py = Math.round(intersectionPoint.y);
 
-  const leftPosition = node.positionAbsolute!.x 
-  const rightPosition = node.positionAbsolute!.x + node.width!
-  const topPosition = node.positionAbsolute!.y
-  const buttomPosition = node.positionAbsolute!.y + node.height!
+  const leftPosition = node.position!.x 
+  const rightPosition = node.position!.x + node.width!
+  const topPosition = node.position!.y
+  const buttomPosition = node.position!.y + node.height!
   
   if(Math.abs(leftPosition - intersectionPoint.x) <= 0.1){
     return Position.Left
diff --git a/source/components/model/edges/multiEdge.tsx b/source/components/model/edges/multiEdge.tsx
index c7e0d6e..f56fc63 100644
--- a/source/components/model/edges/multiEdge.tsx
+++ b/source/components/model/edges/multiEdge.tsx
@@ -1,22 +1,26 @@
 import { useCallback } from "react";
-import { BaseEdge, Edge, EdgeLabelRenderer, EdgeMouseHandler, EdgeProps, getBezierPath, useStore } from "reactflow";
+import { BaseEdge, Edge, EdgeLabelRenderer, EdgeMouseHandler, EdgeProps, getBezierPath, useInternalNode, useStore } from '@xyflow/react';
 import { getEdgeParams } from "./edgeBase";
 
 export function MultiEdge(props:EdgeProps){
     return <BodyMultiEdgeCompontent
       standardEdgeInformation={props}
+      source={props.source}
+      target={props.target}
     />
 }
 
 interface BodyMultiEdgeComponentProps {
-    readonly standardEdgeInformation: EdgeProps,
+    readonly standardEdgeInformation: EdgeProps;
+    readonly arrowEnd?: boolean;
+    readonly source: string;
+    readonly target: string;
   }
   
   export const BodyMultiEdgeCompontent: React.FC<BodyMultiEdgeComponentProps> = (props) => {
-    
-    const sourceNode = useStore(useCallback((store) => store.nodeInternals.get(props.standardEdgeInformation.source), [props.standardEdgeInformation.source]));
-    const targetNode = useStore(useCallback((store) => store.nodeInternals.get(props.standardEdgeInformation.target), [props.standardEdgeInformation.target]));
   
+    const sourceNode = useInternalNode(props.source)
+    const targetNode = useInternalNode(props.target)
     if (!sourceNode || !targetNode) {
       return null;
     }
@@ -39,7 +43,7 @@ interface BodyMultiEdgeComponentProps {
     const arrowStart = false
 
     let label = ''
-    for(const singleLabel of props.standardEdgeInformation.data.edgeTypes){
+    for(const singleLabel of (props.standardEdgeInformation.data?.edgeTypes as string[] ?? [])){
         label += singleLabel + ' '
     }
 
diff --git a/source/components/model/edges/nonStandardEvaluationEdge.tsx b/source/components/model/edges/nonStandardEvaluationEdge.tsx
index 880d2fe..b285476 100644
--- a/source/components/model/edges/nonStandardEvaluationEdge.tsx
+++ b/source/components/model/edges/nonStandardEvaluationEdge.tsx
@@ -1,4 +1,4 @@
-import { EdgeProps } from "reactflow"
+import { EdgeProps } from '@xyflow/react'
 import { BodyEdgeCompontent } from "./edgeBase"
 
 export function NonStandardEvaluationEdge(props:EdgeProps) {
@@ -6,6 +6,7 @@ export function NonStandardEvaluationEdge(props:EdgeProps) {
       standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '2,3'}}
       label = 'Non Standard Evaluation'
-  
+      source={props.source}
+      target={props.target}
     />
   }
\ No newline at end of file
diff --git a/source/components/model/edges/readsEdge.tsx b/source/components/model/edges/readsEdge.tsx
index 6730d2d..b0a6fad 100644
--- a/source/components/model/edges/readsEdge.tsx
+++ b/source/components/model/edges/readsEdge.tsx
@@ -1,4 +1,4 @@
-import { EdgeProps} from "reactflow"
+import { EdgeProps} from '@xyflow/react'
 import { BodyEdgeCompontent } from "./edgeBase"
 
 
@@ -8,6 +8,8 @@ export default function ReadsEdge(props: EdgeProps) {
       edgeStyle = {{stroke: 'black', strokeDasharray: '5,5'}}
       label = 'reads'
       arrowEnd = {true}
+      source={props.source}
+      target={props.target}
     />
   }
 
diff --git a/source/components/model/edges/relatesEdge.tsx b/source/components/model/edges/relatesEdge.tsx
index 95ef724..7c48e51 100644
--- a/source/components/model/edges/relatesEdge.tsx
+++ b/source/components/model/edges/relatesEdge.tsx
@@ -1,4 +1,4 @@
-import { EdgeProps } from "reactflow"
+import { EdgeProps } from '@xyflow/react'
 import { BodyEdgeCompontent } from "./edgeBase"
 
 export function RelatesEdge(props:EdgeProps) {
@@ -6,6 +6,7 @@ export function RelatesEdge(props:EdgeProps) {
       standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '2,3'}}
       label = 'relates'
-  
+      source={props.source}
+      target={props.target}
     />
   }
\ No newline at end of file
diff --git a/source/components/model/edges/returnsEdge.tsx b/source/components/model/edges/returnsEdge.tsx
index d8ea6a5..6847d60 100644
--- a/source/components/model/edges/returnsEdge.tsx
+++ b/source/components/model/edges/returnsEdge.tsx
@@ -1,4 +1,4 @@
-import { EdgeProps } from "reactflow"
+import { EdgeProps } from '@xyflow/react'
 import { BodyEdgeCompontent } from "./edgeBase"
 
 export function ReturnsEdge(props:EdgeProps) {
@@ -7,5 +7,7 @@ export function ReturnsEdge(props:EdgeProps) {
       edgeStyle = {{stroke: 'blue', strokeDasharray: '4,7'}}
       label = 'returns'
       arrowEnd = {true}
+      source={props.source}
+      target={props.target}
     />
   }
\ No newline at end of file
diff --git a/source/components/model/edges/sameDefDefEdge.tsx b/source/components/model/edges/sameDefDefEdge.tsx
index 43e8c8c..6b6ee75 100644
--- a/source/components/model/edges/sameDefDefEdge.tsx
+++ b/source/components/model/edges/sameDefDefEdge.tsx
@@ -1,4 +1,4 @@
-import { EdgeProps } from "reactflow"
+import { EdgeProps } from '@xyflow/react'
 import { BodyEdgeCompontent } from "./edgeBase"
 
 export function SameDefDefEdge(props:EdgeProps) {
@@ -6,5 +6,7 @@ export function SameDefDefEdge(props:EdgeProps) {
       standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '2,7'}}
       label = 'same-def-def'
+      source={props.source}
+      target={props.target}
     />
   }
\ No newline at end of file
diff --git a/source/components/model/edges/sameReadReadEdge.tsx b/source/components/model/edges/sameReadReadEdge.tsx
index 9e72fa0..fc1af94 100644
--- a/source/components/model/edges/sameReadReadEdge.tsx
+++ b/source/components/model/edges/sameReadReadEdge.tsx
@@ -1,4 +1,4 @@
-import { EdgeProps } from "reactflow"
+import { EdgeProps } from '@xyflow/react'
 import { BodyEdgeCompontent } from "./edgeBase"
 
 export function SameReadReadEdge(props:EdgeProps) {
@@ -6,5 +6,7 @@ export function SameReadReadEdge(props:EdgeProps) {
       standardEdgeInformation={props}
       edgeStyle = {{stroke: 'grey', strokeDasharray: '2,5'}}
       label = 'same-read-read'
+      source={props.source}
+      target={props.target}
     />
   }
\ No newline at end of file
diff --git a/source/components/model/edges/sideEffectOnCallEdge.tsx b/source/components/model/edges/sideEffectOnCallEdge.tsx
index a0dc500..41a8f23 100644
--- a/source/components/model/edges/sideEffectOnCallEdge.tsx
+++ b/source/components/model/edges/sideEffectOnCallEdge.tsx
@@ -1,4 +1,4 @@
-import { EdgeProps } from "reactflow"
+import { EdgeProps } from '@xyflow/react'
 import { BodyEdgeCompontent } from "./edgeBase"
 
 export function SideEffectOnCallEdge(props:EdgeProps) {
@@ -6,6 +6,7 @@ export function SideEffectOnCallEdge(props:EdgeProps) {
       standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue'}}
       label = 'side-effect-on-call'
-  
+      source={props.source}
+      target={props.target}
     />
   }
\ No newline at end of file
diff --git a/source/components/model/graph.ts b/source/components/model/graph.ts
index 7aeb789..aadc851 100644
--- a/source/components/model/graph.ts
+++ b/source/components/model/graph.ts
@@ -1,4 +1,4 @@
-import { Edge, Node } from "reactflow";
+import { Edge, Node } from '@xyflow/react';
 
 export interface VisualizationGraph {
     nodesInfo: NodeInformation
diff --git a/source/components/model/graphBuilder.ts b/source/components/model/graphBuilder.ts
index f71ac1c..d6db46f 100644
--- a/source/components/model/graphBuilder.ts
+++ b/source/components/model/graphBuilder.ts
@@ -1,4 +1,4 @@
-import { Edge, Node } from "reactflow";
+import { Edge, Node } from '@xyflow/react';
 import { VisualizationGraph } from "./graph";
 import { EdgeTypeName, edgeTypesToNames } from "@eagleoutice/flowr/dataflow/graph/edge";
 import { NodeId } from "@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/node-id";
@@ -69,9 +69,10 @@ function constructLexemeMapping(ast: RNode<ParentInformation>): Map<NodeId, stri
     return infoMap
 }
 
-export interface VisualizationNodeProps{
+export interface VisualizationNodeProps extends Record<string, unknown> { 
     label: string
     nodeType:string
+    extent?: string
     parentId?: string
     children?: string[]
 }
@@ -139,7 +140,8 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
             const parentId = String(subflowMap.get(nodeId))
             toAlterNode!.data = {
                 ...toAlterNode!.data,
-                parentId: parentId
+                parentId: parentId,
+                extent: 'parent'
             }
             nodeIdMap.get(parentId)?.data.children?.push(idNewNode)
         }
diff --git a/source/components/model/graphTransition.ts b/source/components/model/graphTransition.ts
index 0f705ae..809b368 100644
--- a/source/components/model/graphTransition.ts
+++ b/source/components/model/graphTransition.ts
@@ -1,6 +1,6 @@
 import { ElkExtendedEdge, ElkNode, LayoutOptions } from "elkjs";
 import { flattenToNodeArray, foldIntoElkHierarchy} from "../graphHierachy";
-import { Edge, Node } from "reactflow"
+import { Edge, Node } from '@xyflow/react'
 import { edgeTagMapper } from "./edges/edgeBase";
 
 export function transformGraphForLayouting(nodes: Node[], nodeIdMap: Map<string,Node>, edges: ElkExtendedEdge[], options: LayoutOptions, isHorizontal: boolean):ElkNode{
diff --git a/source/components/model/nodes/handleNodeComponent.tsx b/source/components/model/nodes/handleNodeComponent.tsx
index f3000ec..1eaccf0 100644
--- a/source/components/model/nodes/handleNodeComponent.tsx
+++ b/source/components/model/nodes/handleNodeComponent.tsx
@@ -1,4 +1,4 @@
-import { Handle, NodeProps, Position } from "reactflow";
+import { Handle, NodeProps, Position } from '@xyflow/react';
 
 export interface HandleNodeComponentProps {
    targetBackgroundColor: string
diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index d337b65..3d54864 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -1,9 +1,9 @@
-import { ConnectionLineComponentProps, Node, NodeProps , NodeResizer, Position} from "reactflow"
+import { ConnectionLineComponentProps, Node, NodeProps , NodeResizer, Position} from '@xyflow/react'
 import { HandleNodeComponent } from "./handleNodeComponent"
 import React from "react";
 import { ProgressPlugin } from "webpack";
 
-import { getBezierPath } from 'reactflow';
+import { getBezierPath } from '@xyflow/react';
 import { getEdgeParams } from "../edges/edgeBase";
 
 
@@ -18,7 +18,6 @@ function FloatingConnectionLine(props:ConnectionLineComponentProps) {
     id: 'connection-target',
     width: 1,
     height: 1,
-    positionAbsolute: { x: toX, y: toY },
     position: {x: toX, y: toY},
     data:{}
   };
@@ -72,8 +71,8 @@ const BodyNodeComponent: React.FC<BodyNodeComponentProps> = (props) => {
   return (
     <HandleNodeComponent>
       <div className = {props.className}>
-        <HoverOverComponent name={props.data.label} id={props.data.id} nodeType= {props.data.nodeType}/>
-        <label htmlFor="text">{props.data.label}</label>
+        <HoverOverComponent name={props.data.label as string} id={props.data.id as string} nodeType= {props.data.nodeType as string}/>
+        <label htmlFor="text">{props.data.label as string}</label>
       </div>
     </HandleNodeComponent>
   )
@@ -108,7 +107,12 @@ export const FunctionCallNode: React.FC<NodeComponentProps> = ({ data }) => {
 
 
 export const FunctionDefinitionNode: React.FC<NodeComponentProps> = ({ data }) => {
-  const {estimatedMinX, estimatedMinY, estimatedMaxX, estimatedMaxY} = data
+  const {estimatedMinX, estimatedMinY, estimatedMaxX, estimatedMaxY} = data as {
+    estimatedMinX: number,
+    estimatedMinY: number,
+    estimatedMaxX: number,
+    estimatedMaxY: number
+  }
   const divStyle: React.CSSProperties = {}
   divStyle.width = estimatedMaxX - estimatedMinX
   divStyle.height = estimatedMaxY - estimatedMinY
@@ -120,8 +124,8 @@ export const FunctionDefinitionNode: React.FC<NodeComponentProps> = ({ data }) =
     <HandleNodeComponent>
       
       <div className = 'function-definition-node base-node' style = {divStyle}>
-        <HoverOverComponent name={data.label} id={data.id} nodeType= {data.nodeType}/>
-        <label htmlFor="text">{data.label}</label>
+        <HoverOverComponent name={data.label as string} id={data.id as string} nodeType= {data.nodeType as string}/>
+        <label htmlFor="text">{data.label as string}</label>
       </div>
     </HandleNodeComponent>
   )
@@ -137,14 +141,19 @@ export const ValueNode: React.FC<NodeComponentProps> = ({ data }) => {
 }
 
 export const GroupNode: React.FC<NodeComponentProps> = ({ data }) => {
-  const {estimatedMinX, estimatedMinY, estimatedMaxX, estimatedMaxY} = data
+  const {estimatedMinX, estimatedMinY, estimatedMaxX, estimatedMaxY} = data as {
+    estimatedMinX: number,
+    estimatedMinY: number,
+    estimatedMaxX: number,
+    estimatedMaxY: number
+  }
   const divStyle: React.CSSProperties = {}
   divStyle.width = estimatedMaxX - estimatedMinX
   divStyle.height = estimatedMaxY - estimatedMinY
   
   return ( 
     <div className = 'group-node' style = {divStyle}>
-      {data.label}
+      {data.label as string}
     </div>
   )
 }
\ No newline at end of file
diff --git a/source/index.tsx b/source/index.tsx
index 411e34a..55acc92 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -2,7 +2,7 @@ import { createRoot } from 'react-dom/client';
 import '../css/main.css';
 import { MainContainerComponent } from './components/mainContainerComponent';
 import { OtherGraph, transformToVisualizationGraphForOtherGraph } from './components/model/graphBuilder';
-import { ReactFlowProvider, Node } from 'reactflow';
+import { ReactFlowProvider, Node } from '@xyflow/react';
 import { LayoutFlow } from './components/graphComponent';
 import { VisualizerWebsocketClient } from './components/network/visualizerWebsocketClient';
 import { FormEvent } from 'react';

From b620e706f55f421e7c9b58e243562a32ca0d7fb9 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Fri, 12 Jul 2024 08:53:23 +0200
Subject: [PATCH 48/75] fix: issues regarding introduction of reactflow v12

---
 source/components/graphComponent.tsx          |  6 +--
 .../{graphHierachy.ts => graphHierarchy.ts}   |  8 ++--
 .../components/model/edges/argumentEdge.tsx   |  4 +-
 source/components/model/edges/callsEdge.tsx   |  4 +-
 .../components/model/edges/definedByEdge.tsx  |  4 +-
 .../model/edges/definedByOnCallEdge.tsx       |  4 +-
 .../model/edges/definesOnCallEdge.tsx         |  4 +-
 source/components/model/edges/edgeBase.tsx    | 47 +++++++++++++------
 source/components/model/edges/multiEdge.tsx   | 10 ++--
 .../model/edges/nonStandardEvaluationEdge.tsx |  4 +-
 source/components/model/edges/readsEdge.tsx   |  4 +-
 source/components/model/edges/relatesEdge.tsx |  4 +-
 source/components/model/edges/returnsEdge.tsx |  4 +-
 .../components/model/edges/sameDefDefEdge.tsx |  4 +-
 .../model/edges/sameReadReadEdge.tsx          |  4 +-
 .../model/edges/sideEffectOnCallEdge.tsx      |  4 +-
 source/components/model/graphTransition.ts    |  9 ++--
 .../model/nodes/handleNodeComponent.tsx       | 11 +++--
 .../components/model/nodes/nodeDefinition.tsx |  9 ++--
 source/index.tsx                              |  2 +
 20 files changed, 89 insertions(+), 61 deletions(-)
 rename source/components/{graphHierachy.ts => graphHierarchy.ts} (95%)

diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 79a064b..0832e1e 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -42,7 +42,7 @@ import { SameDefDefEdge } from './model/edges/sameDefDefEdge';
 import { SameReadReadEdge } from './model/edges/sameReadReadEdge';
 import { SideEffectOnCallEdge } from './model/edges/sideEffectOnCallEdge';
 import { NonStandardEvaluationEdge } from './model/edges/nonStandardEvaluationEdge';
-import { flattenToNodeArray, foldIntoElkHierarchy } from './graphHierachy';
+import { flattenToNodeArray, foldIntoElkHierarchy } from './graphHierarchy';
 import { ExtendedExtendedEdge, transformGraphForLayouting, transformGraphForShowing } from './model/graphTransition';
 import { MultiEdge } from './model/edges/multiEdge';
 
@@ -66,12 +66,12 @@ const elkOptions: LayoutOptions = {
    const isHorizontal = options?.['elk.direction'] === 'RIGHT';
 
    const graph: ElkNode = transformGraphForLayouting(nodes,nodeIdMap, edges, options, isHorizontal)
-  console.log('befor Layout:')
+  console.log('before Layout:')
   console.log(graph)
 
    const layoutedGraph = await elk.layout(graph)
 
-   console.log('aftr Layout:')
+   console.log('after Layout:')
    console.log(layoutedGraph)
    const endGraph = transformGraphForShowing(layoutedGraph, isHorizontal)
 
diff --git a/source/components/graphHierachy.ts b/source/components/graphHierarchy.ts
similarity index 95%
rename from source/components/graphHierachy.ts
rename to source/components/graphHierarchy.ts
index aa1ff87..d8d3e4e 100644
--- a/source/components/graphHierachy.ts
+++ b/source/components/graphHierarchy.ts
@@ -140,10 +140,10 @@ interface FlattenReturnProperties{
 
 
 export function flattenToNodeArray(nodeArray:ElkNode[]):Node<FinalNodeProps>[] {
-    return nodeArray.map((node) => flattenHierachyNode(node,{x: 0, y: 0})).flat().map((returnProperty) => returnProperty.node)
+    return nodeArray.map((node) => flattenHierarchyNode(node,{x: 0, y: 0})).flat().map((returnProperty) => returnProperty.node)
 }
 
-function flattenHierachyNode(currentNode: ElkNode, positionParentNode: XYPosition):FlattenReturnProperties[]{
+function flattenHierarchyNode(currentNode: ElkNode, positionParentNode: XYPosition):FlattenReturnProperties[]{
     let toReturnNodeArray: FlattenReturnProperties[] = []
 
     const absolutePositionX = (currentNode.x ?? 0) + (positionParentNode.x ?? 0) 
@@ -178,9 +178,9 @@ function flattenHierachyNode(currentNode: ElkNode, positionParentNode: XYPositio
 
     toReturnNodeArray.push(newFlattenedProperty)
     if(currentNode.children !== undefined){
-        const flattenedChildNodes = currentNode.children.map((node) => flattenHierachyNode(node, newNode.position)).flat()
+        const flattenedChildNodes = currentNode.children.map((node) => flattenHierarchyNode(node, newNode.position)).flat()
         
-        //calculate dimensions for function definiton node
+        //calculate dimensions for function definition node
         newNode.data.estimatedMaxX = flattenedChildNodes.map((flattenedProperty) => flattenedProperty.maxX).reduce((previousMax, currentMax) => {
           return previousMax < currentMax ? currentMax : previousMax
         }, 0)
diff --git a/source/components/model/edges/argumentEdge.tsx b/source/components/model/edges/argumentEdge.tsx
index d122a35..ad00d60 100644
--- a/source/components/model/edges/argumentEdge.tsx
+++ b/source/components/model/edges/argumentEdge.tsx
@@ -1,8 +1,8 @@
 import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeCompontent } from "./edgeBase"
+import { BodyEdgeComponent } from "./edgeBase"
 
 export function ArgumentEdge(props:EdgeProps) {
-    return <BodyEdgeCompontent
+    return <BodyEdgeComponent
       standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '7,7'}}
       label = 'argument'
diff --git a/source/components/model/edges/callsEdge.tsx b/source/components/model/edges/callsEdge.tsx
index 396db33..4d06095 100644
--- a/source/components/model/edges/callsEdge.tsx
+++ b/source/components/model/edges/callsEdge.tsx
@@ -1,8 +1,8 @@
 import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeCompontent } from "./edgeBase"
+import { BodyEdgeComponent } from "./edgeBase"
 
 export function CallsEdge(props:EdgeProps){
-    return <BodyEdgeCompontent
+    return <BodyEdgeComponent
       standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '3,7'}}
       label = 'calls'
diff --git a/source/components/model/edges/definedByEdge.tsx b/source/components/model/edges/definedByEdge.tsx
index fc38cd5..df8f64b 100644
--- a/source/components/model/edges/definedByEdge.tsx
+++ b/source/components/model/edges/definedByEdge.tsx
@@ -1,8 +1,8 @@
 import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeCompontent } from "./edgeBase"
+import { BodyEdgeComponent } from "./edgeBase"
 
 export function DefinedByEdge(props:EdgeProps) {
-    return <BodyEdgeCompontent
+    return <BodyEdgeComponent
       standardEdgeInformation={props}
       edgeStyle = {{stroke: 'black'}}
       label = 'defined-by'
diff --git a/source/components/model/edges/definedByOnCallEdge.tsx b/source/components/model/edges/definedByOnCallEdge.tsx
index 6859118..f9e0c2d 100644
--- a/source/components/model/edges/definedByOnCallEdge.tsx
+++ b/source/components/model/edges/definedByOnCallEdge.tsx
@@ -1,8 +1,8 @@
 import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeCompontent } from "./edgeBase"
+import { BodyEdgeComponent } from "./edgeBase"
 
 export function DefinedByOnCallEdge(props: EdgeProps) {
-    return <BodyEdgeCompontent
+    return <BodyEdgeComponent
       standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '6,7'}}
       label = 'defined-by-on-call'
diff --git a/source/components/model/edges/definesOnCallEdge.tsx b/source/components/model/edges/definesOnCallEdge.tsx
index e876cd5..0b12c12 100644
--- a/source/components/model/edges/definesOnCallEdge.tsx
+++ b/source/components/model/edges/definesOnCallEdge.tsx
@@ -1,8 +1,8 @@
 import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeCompontent } from "./edgeBase"
+import { BodyEdgeComponent } from "./edgeBase"
 
 export function DefinesOnCallEdge(props:EdgeProps) {
-    return <BodyEdgeCompontent
+    return <BodyEdgeComponent
       standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '5,7'}}
       label = 'defines-on-call'
diff --git a/source/components/model/edges/edgeBase.tsx b/source/components/model/edges/edgeBase.tsx
index 419fab5..4c15d5f 100644
--- a/source/components/model/edges/edgeBase.tsx
+++ b/source/components/model/edges/edgeBase.tsx
@@ -31,8 +31,9 @@ interface BodyEdgeComponentProps {
   readonly target: string;
 }
 
-export const BodyEdgeCompontent: React.FC<BodyEdgeComponentProps> = (props) => {
-  
+export const BodyEdgeComponent: React.FC<BodyEdgeComponentProps> = (props) => {
+
+
   const sourceNode = useInternalNode(props.source)
   const targetNode = useInternalNode(props.target)
     
@@ -42,6 +43,7 @@ export const BodyEdgeCompontent: React.FC<BodyEdgeComponentProps> = (props) => {
   
   const {  sourceX, sourceY, targetX, targetY, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
 
+
   const [edgePath, labelX, labelY, offsetX, offsetY] = getBezierPath({
     sourceX: sourceX,
     sourceY: sourceY,
@@ -83,21 +85,35 @@ export const BodyEdgeCompontent: React.FC<BodyEdgeComponentProps> = (props) => {
 // of the line between the center of the intersectionNode and the target node
 function getNodeIntersection(intersectionNode:Node, targetNode:Node):XYPosition {
   // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
+  
+
+
+  const intersectionNodeWidth = intersectionNode.measured?.width
+  const intersectionNodeHeight = intersectionNode.measured?.height
+
+  const targetNodeWidth = targetNode.measured?.width
+  const targetNodeHeight = targetNode.measured?.height
+  
+  if(intersectionNodeHeight === undefined || intersectionNodeWidth === undefined || targetNodeWidth === undefined || targetNodeHeight === undefined){
+    throw Error('width or height not measured')
+  }
+  /*
   const {
     width: intersectionNodeWidth,
     height: intersectionNodeHeight,
     position: intersectionNodePosition,
   } = intersectionNode;
-
+  */
   const targetPosition = targetNode.position;
+  const intersectionNodePosition = intersectionNode.position
 
-  const w = intersectionNodeWidth! / 2;
-  const h = intersectionNodeHeight! / 2;
+  const w = intersectionNodeWidth / 2;
+  const h = intersectionNodeHeight / 2;
 
-  const x2 = intersectionNodePosition!.x + w;
-  const y2 = intersectionNodePosition!.y + h;
-  const x1 = targetPosition!.x! + targetNode.width! / 2;
-  const y1 = targetPosition!.y! + targetNode.height! / 2;
+  const x2 = intersectionNodePosition.x + w;
+  const y2 = intersectionNodePosition.y + h;
+  const x1 = targetPosition.x + targetNodeWidth / 2;
+  const y1 = targetPosition.y + targetNodeHeight / 2;
 
   const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
   const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
@@ -119,10 +135,13 @@ function getEdgePosition(node: Node, intersectionPoint:XYPosition): Position {
   const px = Math.round(intersectionPoint.x);
   const py = Math.round(intersectionPoint.y);
 
-  const leftPosition = node.position!.x 
-  const rightPosition = node.position!.x + node.width!
-  const topPosition = node.position!.y
-  const buttomPosition = node.position!.y + node.height!
+  if(node.position.x === undefined || node.position.y === undefined || node.measured?.height === undefined || node.measured.width === undefined){
+    throw Error('position or measured dimension undefined')
+  }
+  const leftPosition = node.position.x 
+  const rightPosition = node.position.x + node.measured.width
+  const topPosition = node.position.y
+  const bottomPosition = node.position.y + node.measured.height
   
   if(Math.abs(leftPosition - intersectionPoint.x) <= 0.1){
     return Position.Left
@@ -136,7 +155,7 @@ function getEdgePosition(node: Node, intersectionPoint:XYPosition): Position {
     return Position.Top
   }
 
-  if(Math.abs(buttomPosition - intersectionPoint.y) <= 0.1){
+  if(Math.abs(bottomPosition - intersectionPoint.y) <= 0.1){
     return Position.Bottom
   }
 
diff --git a/source/components/model/edges/multiEdge.tsx b/source/components/model/edges/multiEdge.tsx
index f56fc63..7b73007 100644
--- a/source/components/model/edges/multiEdge.tsx
+++ b/source/components/model/edges/multiEdge.tsx
@@ -1,9 +1,10 @@
 import { useCallback } from "react";
-import { BaseEdge, Edge, EdgeLabelRenderer, EdgeMouseHandler, EdgeProps, getBezierPath, useInternalNode, useStore } from '@xyflow/react';
+import { BaseEdge, Edge, EdgeLabelRenderer, EdgeMouseHandler, EdgeProps, InternalNode, getBezierPath, useInternalNode, useStore } from '@xyflow/react';
 import { getEdgeParams } from "./edgeBase";
 
 export function MultiEdge(props:EdgeProps){
-    return <BodyMultiEdgeCompontent
+    
+  return <BodyMultiEdgeComponent
       standardEdgeInformation={props}
       source={props.source}
       target={props.target}
@@ -17,14 +18,15 @@ interface BodyMultiEdgeComponentProps {
     readonly target: string;
   }
   
-  export const BodyMultiEdgeCompontent: React.FC<BodyMultiEdgeComponentProps> = (props) => {
-  
+  export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = (props) => {
     const sourceNode = useInternalNode(props.source)
     const targetNode = useInternalNode(props.target)
+
     if (!sourceNode || !targetNode) {
       return null;
     }
     
+
     const {  sourceX, sourceY, targetX, targetY, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
     
     const [edgePath, labelX, labelY, offsetX, offsetY] = getBezierPath({
diff --git a/source/components/model/edges/nonStandardEvaluationEdge.tsx b/source/components/model/edges/nonStandardEvaluationEdge.tsx
index b285476..ae01dc6 100644
--- a/source/components/model/edges/nonStandardEvaluationEdge.tsx
+++ b/source/components/model/edges/nonStandardEvaluationEdge.tsx
@@ -1,8 +1,8 @@
 import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeCompontent } from "./edgeBase"
+import { BodyEdgeComponent } from "./edgeBase"
 
 export function NonStandardEvaluationEdge(props:EdgeProps) {
-    return <BodyEdgeCompontent
+    return <BodyEdgeComponent
       standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '2,3'}}
       label = 'Non Standard Evaluation'
diff --git a/source/components/model/edges/readsEdge.tsx b/source/components/model/edges/readsEdge.tsx
index b0a6fad..7812d78 100644
--- a/source/components/model/edges/readsEdge.tsx
+++ b/source/components/model/edges/readsEdge.tsx
@@ -1,9 +1,9 @@
 import { EdgeProps} from '@xyflow/react'
-import { BodyEdgeCompontent } from "./edgeBase"
+import { BodyEdgeComponent } from "./edgeBase"
 
 
 export default function ReadsEdge(props: EdgeProps) {
-    return <BodyEdgeCompontent
+    return <BodyEdgeComponent
       standardEdgeInformation={props}
       edgeStyle = {{stroke: 'black', strokeDasharray: '5,5'}}
       label = 'reads'
diff --git a/source/components/model/edges/relatesEdge.tsx b/source/components/model/edges/relatesEdge.tsx
index 7c48e51..92bfbe3 100644
--- a/source/components/model/edges/relatesEdge.tsx
+++ b/source/components/model/edges/relatesEdge.tsx
@@ -1,8 +1,8 @@
 import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeCompontent } from "./edgeBase"
+import { BodyEdgeComponent } from "./edgeBase"
 
 export function RelatesEdge(props:EdgeProps) {
-    return <BodyEdgeCompontent
+    return <BodyEdgeComponent
       standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '2,3'}}
       label = 'relates'
diff --git a/source/components/model/edges/returnsEdge.tsx b/source/components/model/edges/returnsEdge.tsx
index 6847d60..f5a1fd8 100644
--- a/source/components/model/edges/returnsEdge.tsx
+++ b/source/components/model/edges/returnsEdge.tsx
@@ -1,8 +1,8 @@
 import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeCompontent } from "./edgeBase"
+import { BodyEdgeComponent } from "./edgeBase"
 
 export function ReturnsEdge(props:EdgeProps) {
-    return <BodyEdgeCompontent
+    return <BodyEdgeComponent
       standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '4,7'}}
       label = 'returns'
diff --git a/source/components/model/edges/sameDefDefEdge.tsx b/source/components/model/edges/sameDefDefEdge.tsx
index 6b6ee75..6a91597 100644
--- a/source/components/model/edges/sameDefDefEdge.tsx
+++ b/source/components/model/edges/sameDefDefEdge.tsx
@@ -1,8 +1,8 @@
 import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeCompontent } from "./edgeBase"
+import { BodyEdgeComponent } from "./edgeBase"
 
 export function SameDefDefEdge(props:EdgeProps) {
-    return <BodyEdgeCompontent
+    return <BodyEdgeComponent
       standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue', strokeDasharray: '2,7'}}
       label = 'same-def-def'
diff --git a/source/components/model/edges/sameReadReadEdge.tsx b/source/components/model/edges/sameReadReadEdge.tsx
index fc1af94..f0ea8ad 100644
--- a/source/components/model/edges/sameReadReadEdge.tsx
+++ b/source/components/model/edges/sameReadReadEdge.tsx
@@ -1,8 +1,8 @@
 import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeCompontent } from "./edgeBase"
+import { BodyEdgeComponent } from "./edgeBase"
 
 export function SameReadReadEdge(props:EdgeProps) {
-    return <BodyEdgeCompontent
+    return <BodyEdgeComponent
       standardEdgeInformation={props}
       edgeStyle = {{stroke: 'grey', strokeDasharray: '2,5'}}
       label = 'same-read-read'
diff --git a/source/components/model/edges/sideEffectOnCallEdge.tsx b/source/components/model/edges/sideEffectOnCallEdge.tsx
index 41a8f23..267940d 100644
--- a/source/components/model/edges/sideEffectOnCallEdge.tsx
+++ b/source/components/model/edges/sideEffectOnCallEdge.tsx
@@ -1,8 +1,8 @@
 import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeCompontent } from "./edgeBase"
+import { BodyEdgeComponent } from "./edgeBase"
 
 export function SideEffectOnCallEdge(props:EdgeProps) {
-    return <BodyEdgeCompontent
+    return <BodyEdgeComponent
       standardEdgeInformation={props}
       edgeStyle = {{stroke: 'blue'}}
       label = 'side-effect-on-call'
diff --git a/source/components/model/graphTransition.ts b/source/components/model/graphTransition.ts
index 809b368..da7b13d 100644
--- a/source/components/model/graphTransition.ts
+++ b/source/components/model/graphTransition.ts
@@ -1,5 +1,5 @@
 import { ElkExtendedEdge, ElkNode, LayoutOptions } from "elkjs";
-import { flattenToNodeArray, foldIntoElkHierarchy} from "../graphHierachy";
+import { flattenToNodeArray, foldIntoElkHierarchy} from "../graphHierarchy";
 import { Edge, Node } from '@xyflow/react'
 import { edgeTagMapper } from "./edges/edgeBase";
 
@@ -26,9 +26,12 @@ export function transformGraphForShowing(layoutedGraph: ElkNode, isHorizontal: b
   const newNodes = flattenToNodeArray(layoutedGraph.children ?? [])
 
   //reset node height and width so they will be correctly calculated and set afterwards
+  
   newNodes.forEach((node) => {
-    node.height = 0
-    node.width = 0
+    delete node['height']
+    delete node['width']
+    //node.height = 0
+    //node.width = 0
   })
   
   return {
diff --git a/source/components/model/nodes/handleNodeComponent.tsx b/source/components/model/nodes/handleNodeComponent.tsx
index 1eaccf0..4ec7a41 100644
--- a/source/components/model/nodes/handleNodeComponent.tsx
+++ b/source/components/model/nodes/handleNodeComponent.tsx
@@ -1,14 +1,15 @@
 import { Handle, NodeProps, Position } from '@xyflow/react';
 
-export interface HandleNodeComponentProps {
-   targetBackgroundColor: string
+ interface HandleNodeComponentProps {
+   targetHandleId:string
+   sourceHandleId:string
 }
 
-export function HandleNodeComponent(props : React.PropsWithChildren) {
+export const HandleNodeComponent:React.FC<React.PropsWithChildren<HandleNodeComponentProps>> = (props) => {
    return (<>
-      <Handle type="target" position={Position.Top} isConnectable={false} className="node-handle"/>
+      <Handle id = {'top'} type="target" position={Position.Top} isConnectable={false} className="node-handle"/>
       {props.children}
-      <Handle type="source" position={Position.Bottom} isConnectable={false} className="node-handle" />
+      <Handle id = {'bottom'} type="source" position={Position.Bottom} isConnectable={false} className="node-handle" />
    </>)
 }
 
diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index 3d54864..2c867a4 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -1,6 +1,6 @@
-import { ConnectionLineComponentProps, Node, NodeProps , NodeResizer, Position} from '@xyflow/react'
+import { ConnectionLineComponentProps, Node, NodeProps , NodeResizer, Position, useUpdateNodeInternals} from '@xyflow/react'
 import { HandleNodeComponent } from "./handleNodeComponent"
-import React from "react";
+import React, { useState } from "react";
 import { ProgressPlugin } from "webpack";
 
 import { getBezierPath } from '@xyflow/react';
@@ -68,8 +68,9 @@ interface NodeComponentProps {
 }
 
 const BodyNodeComponent: React.FC<BodyNodeComponentProps> = (props) => {
+ 
   return (
-    <HandleNodeComponent>
+    <HandleNodeComponent targetHandleId={props.data.id as string + '-targetHandle'} sourceHandleId={props.data.id as string + '-sourceHandle'}>
       <div className = {props.className}>
         <HoverOverComponent name={props.data.label as string} id={props.data.id as string} nodeType= {props.data.nodeType as string}/>
         <label htmlFor="text">{props.data.label as string}</label>
@@ -121,7 +122,7 @@ export const FunctionDefinitionNode: React.FC<NodeComponentProps> = ({ data }) =
   //<NodeResizer minWidth={minWidth} minHeight={minHeight}/>
   //
   return ( 
-    <HandleNodeComponent>
+    <HandleNodeComponent targetHandleId={data.id as string + '-targetHandle'} sourceHandleId={data.id as string + '-sourceHandle'}>
       
       <div className = 'function-definition-node base-node' style = {divStyle}>
         <HoverOverComponent name={data.label as string} id={data.id as string} nodeType= {data.nodeType as string}/>
diff --git a/source/index.tsx b/source/index.tsx
index 55acc92..e40775b 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -1,5 +1,7 @@
 import { createRoot } from 'react-dom/client';
 import '../css/main.css';
+import '@xyflow/react/dist/style.css'
+import '@xyflow/react/dist/base.css'
 import { MainContainerComponent } from './components/mainContainerComponent';
 import { OtherGraph, transformToVisualizationGraphForOtherGraph } from './components/model/graphBuilder';
 import { ReactFlowProvider, Node } from '@xyflow/react';

From 28c2a0489ab80a93ce2f7224ef1d971b778b5300 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Fri, 12 Jul 2024 12:56:55 +0200
Subject: [PATCH 49/75] fix: problems with absolute and relative positions

---
 source/components/graphHierarchy.ts        | 47 +++++-----------------
 source/components/model/edges/edgeBase.tsx | 25 ++++++++----
 2 files changed, 27 insertions(+), 45 deletions(-)

diff --git a/source/components/graphHierarchy.ts b/source/components/graphHierarchy.ts
index d8d3e4e..7d84e12 100644
--- a/source/components/graphHierarchy.ts
+++ b/source/components/graphHierarchy.ts
@@ -13,41 +13,9 @@ export function foldIntoElkHierarchy(nodes:Node[], nodesIdMap: Map<string,Node>,
     const usedMap  = new Map<string, boolean>()
     nodesIdMap.forEach((node, id) => usedMap.set(id,false))
 
-    const smthToReturn =  (nodes.map((node) => foldOnVisualizationGraphNodes(node as Node<VisualizationNodeProps>, nodesIdMap as Map<string, Node<VisualizationNodeProps>>, usedMap, isHorizontal))).filter(nonEmpty)
+    const toReturn =  (nodes.map((node) => foldOnVisualizationGraphNodes(node as Node<VisualizationNodeProps>, nodesIdMap as Map<string, Node<VisualizationNodeProps>>, usedMap, isHorizontal))).filter(nonEmpty)
     
-    return smthToReturn
-    /*
-    const returnArray = nodes.map(node =>{ 
-        if(node.data.parentId !== undefined){
-          return ({
-            ...node,
-            // Adjust the target and source handle positions based on the layout
-            // direction.
-            targetPosition: isHorizontal ? 'left' : 'top',
-            sourcePosition: isHorizontal ? 'right' : 'bottom',
-            labels: [{ text: node.data.label }],
-            // Hardcode a width and height for elk to use when layouting.
-            width: standardWidth,
-            height: standardHeight,
-            parentId: node.data.parentId,
-            extent: 'parent'
-          })
-        }else{
-          return ({
-            ...node,
-            // Adjust the target and source handle positions based on the layout
-            // direction.
-            targetPosition: isHorizontal ? 'left' : 'top',
-            sourcePosition: isHorizontal ? 'right' : 'bottom',
-            labels: [{ text: node.data.label }],
-            // Hardcode a width and height for elk to use when layouting.
-            width: standardWidth,
-            height: standardHeight,
-          })
-        }
-      })
-    return returnArray
-    */
+    return toReturn
 }
 
 interface ExtendedElkNode extends ElkNode{
@@ -78,9 +46,12 @@ function foldOnVisualizationGraphNodes(currentNode: Node<VisualizationNodeProps>
                                        isHorizontal: boolean):HierarchyElkNode | undefined{
     if(currentNode.data.children !== undefined){
         //calculate Children of the currentNode
-        const childrenOfNode : HierarchyElkNode[]= currentNode.data.children.map((nodeId) => nodeIdMap.get(nodeId)).filter((node => node !== undefined)).map((node) => 
-            foldOnVisualizationGraphNodes(node!,nodeIdMap,usedIdsMap, isHorizontal)
-        ).filter(nonEmpty)
+        const childrenOfNode : HierarchyElkNode[]= 
+          currentNode.data.children
+          .map((nodeId) => nodeIdMap.get(nodeId))
+          .filter((node => node !== undefined))
+          .map((node) => foldOnVisualizationGraphNodes(node!,nodeIdMap,usedIdsMap, isHorizontal))
+          .filter(nonEmpty)
         const newHeight = childrenOfNode.reduce((accumulatedHeight, node) => accumulatedHeight + (node.height ?? 0), 0) + standardHeight
         const newWidth = standardWidth + 10
         const toReturn = {
@@ -165,7 +136,7 @@ function flattenHierarchyNode(currentNode: ElkNode, positionParentNode: XYPositi
         // React Flow expects a position property on the node instead of `x`
         // and `y` fields.
         //position is adapted since the position the layout generates is relative to the parent
-        position: { x: absolutePositionX, y: absolutePositionY },
+        position: { x: currentNode.x ?? 0, y: currentNode.y ?? 0 },
     }
 
     const newFlattenedProperty: FlattenReturnProperties = {
diff --git a/source/components/model/edges/edgeBase.tsx b/source/components/model/edges/edgeBase.tsx
index 4c15d5f..c81e039 100644
--- a/source/components/model/edges/edgeBase.tsx
+++ b/source/components/model/edges/edgeBase.tsx
@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { getStraightPath, BaseEdge, EdgeLabelRenderer, EdgeProps, getBezierPath, Node, Position, useStore, XYPosition, useInternalNode} from '@xyflow/react';
+import { getStraightPath, BaseEdge, EdgeLabelRenderer, EdgeProps, getBezierPath, Node, Position, useStore, XYPosition, useInternalNode, InternalNode} from '@xyflow/react';
 
 const edgeTagMap:{[index: string]:string} = {
   'reads':                   'readsEdge',
@@ -104,9 +104,11 @@ function getNodeIntersection(intersectionNode:Node, targetNode:Node):XYPosition
     position: intersectionNodePosition,
   } = intersectionNode;
   */
-  const targetPosition = targetNode.position;
-  const intersectionNodePosition = intersectionNode.position
+  const targetPosition = getAbsolutePosition(targetNode);
+  const intersectionNodePosition = getAbsolutePosition(intersectionNode)
 
+  //Set position correctly because subnode position is relative to parent
+  
   const w = intersectionNodeWidth / 2;
   const h = intersectionNodeHeight / 2;
 
@@ -138,10 +140,13 @@ function getEdgePosition(node: Node, intersectionPoint:XYPosition): Position {
   if(node.position.x === undefined || node.position.y === undefined || node.measured?.height === undefined || node.measured.width === undefined){
     throw Error('position or measured dimension undefined')
   }
-  const leftPosition = node.position.x 
-  const rightPosition = node.position.x + node.measured.width
-  const topPosition = node.position.y
-  const bottomPosition = node.position.y + node.measured.height
+
+  const absolutePositionNode = getAbsolutePosition(node)
+
+  const leftPosition = absolutePositionNode.x 
+  const rightPosition = absolutePositionNode.x + node.measured.width
+  const topPosition = absolutePositionNode.y
+  const bottomPosition = absolutePositionNode.y + node.measured.height
   
   if(Math.abs(leftPosition - intersectionPoint.x) <= 0.1){
     return Position.Left
@@ -179,3 +184,9 @@ export function getEdgeParams(source:Node, target: Node) {
     targetPos,
   };
 }
+
+
+function getAbsolutePosition(currentNode:Node):XYPosition{
+  const internalNode= useInternalNode(currentNode.id)
+  return internalNode?.internals.positionAbsolute ?? currentNode.position
+}
\ No newline at end of file

From 9c75d71b2bbe04f384f4c4e508af2a5282f36c8d Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Mon, 22 Jul 2024 09:48:18 +0200
Subject: [PATCH 50/75] feat: add symbols to edges

---
 source/components/graphComponent.tsx        |  89 +++++--
 source/components/model/edges/edgeBase.tsx  |   3 -
 source/components/model/edges/multiEdge.tsx | 265 +++++++++++++++++++-
 3 files changed, 331 insertions(+), 26 deletions(-)

diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 0832e1e..53c6b9d 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -66,16 +66,16 @@ const elkOptions: LayoutOptions = {
    const isHorizontal = options?.['elk.direction'] === 'RIGHT';
 
    const graph: ElkNode = transformGraphForLayouting(nodes,nodeIdMap, edges, options, isHorizontal)
-  console.log('before Layout:')
-  console.log(graph)
+  //console.log('before Layout:')
+  //console.log(graph)
 
    const layoutedGraph = await elk.layout(graph)
 
-   console.log('after Layout:')
-   console.log(layoutedGraph)
+   //console.log('after Layout:')
+   //console.log(layoutedGraph)
    const endGraph = transformGraphForShowing(layoutedGraph, isHorizontal)
 
-   console.log(endGraph)
+   //console.log(endGraph)
 
 
    return endGraph
@@ -119,7 +119,7 @@ export interface LayoutFlowProps {
        getLayoutedElements(ns, nm, convertToExtendedEdges(es), opts).then(({ nodes: layoutedNodes, edges: layoutedEdges }) => {
          setNodes(layoutedNodes);
          setEdges(layoutedEdges);
-         console.log(layoutedNodes)
+         //console.log(layoutedNodes)
 
          window.requestAnimationFrame(() => fitView());
        });
@@ -164,17 +164,72 @@ export interface LayoutFlowProps {
     <>
       <svg style={{ position: 'absolute', top: 0, left: 0 }}>
         <defs>
-        <marker
-          id="triangle"
-          viewBox="0 0 10 10"
-          refX="1"
-          refY="5"
-          markerUnits="strokeWidth"
-          markerWidth="10"
-          markerHeight="10"
-          orient="auto">
-          <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
-    </marker>
+          <marker
+            id="triangle"
+            viewBox="0 0 10 10"
+            refX="1"
+            refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="10"
+            markerHeight="10"
+            orient="auto">
+            <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
+          </marker>
+
+          <symbol id="dotSymbol" width="10" height="10" overflow={'visible'}>
+            <g>
+              <circle r = '3' cx={0} cy = {0} overflow={'visible'} />
+            </g>
+          </symbol>
+
+          <symbol id="crossSymbol" width="10" height="10" overflow={'visible'}>  
+            <g>
+              <line x1='0' y1='3' x2='0' y2='-3' style={{stroke:'black', strokeWidth: '1'}}></line>
+            <line x1='3' y1='0' x2='-3' y2='0' style={{stroke:'black', strokeWidth: '1'}}></line>
+          </g>
+            </symbol>
+          
+          <symbol id = 'hexagonHollowSymbol' width="2.5" height="2.5" viewBox = '0 0 5 5' overflow={'visible'}>
+            <g transform='translate(-12,-12)'>
+              <path d="m16.476 3c.369 0 .709.197.887.514.9 1.595 3.633 6.445 4.509 8.001.075.131.118.276.126.423.012.187-.029.377-.126.547-.876 1.556-3.609 6.406-4.509 8-.178.318-.518.515-.887.515h-8.951c-.369 0-.709-.197-.887-.515-.899-1.594-3.634-6.444-4.51-8-.085-.151-.128-.318-.128-.485s.043-.334.128-.485c.876-1.556 3.611-6.406 4.51-8.001.178-.317.518-.514.887-.514zm-8.672 1.5-4.228 7.5 4.228 7.5h8.393l4.227-7.5-4.227-7.5z"/>
+            </g>
+          </symbol>
+          
+          <symbol id = 'rectangleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
+            <g transform='translate(-2.5,-2.5)'>
+              <svg clip-rule="evenodd" fillRule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3 17v3c0 .621.52 1 1 1h3v-1.5h-2.5v-2.5zm8.5 4h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5zm5-4h-1.5v2.5h-2.5v1.5h3c.478 0 1-.379 1-1zm-1.5-1v-3.363h1.5v3.363zm-15-3.363v3.363h-1.5v-3.363zm15-1v-3.637h1.5v3.637zm-15-3.637v3.637h-1.5v-3.637zm12.5-5v1.5h2.5v2.5h1.5v-3c0-.478-.379-1-1-1zm-10 0h-3c-.62 0-1 .519-1 1v3h1.5v-2.5h2.5zm4.5 1.5h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5z" fill-rule="nonzero"/></svg>
+            </g>
+          </symbol>
+          
+          <symbol id = 'triangleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
+            <g transform='translate(-2.5,-2.5)'>
+              <svg clip-rule="evenodd" fillRule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.882 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm1.935-.384h15.939l-7.97-14.22z" fill-rule="nonzero"/></svg>
+            </g>
+          </symbol>
+          
+          <symbol id='rhombusHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
+            <g transform='translate(-2.5,-2.5)'>
+              <svg clip-rule="evenodd" fillRule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.262 2.306c.196-.196.461-.306.738-.306s.542.11.738.306c1.917 1.917 7.039 7.039 8.956 8.956.196.196.306.461.306.738s-.11.542-.306.738c-1.917 1.917-7.039 7.039-8.956 8.956-.196.196-.461.306-.738.306s-.542-.11-.738-.306c-1.917-1.917-7.039-7.039-8.956-8.956-.196-.196-.306-.461-.306-.738s.11-.542.306-.738c1.917-1.917 7.039-7.039 8.956-8.956zm-7.573 9.694 8.311 8.311 8.311-8.311-8.311-8.311z" fill-rule="nonzero"/></svg>
+            </g>
+          </symbol>
+
+          <symbol id='starFilledSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
+            <g transform='translate(-2.5,-2.5)'>
+            <svg clip-rule="evenodd" fillRule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.322 2.923c.126-.259.39-.423.678-.423.289 0 .552.164.678.423.974 1.998 2.65 5.44 2.65 5.44s3.811.524 6.022.829c.403.055.65.396.65.747 0 .19-.072.383-.231.536-1.61 1.538-4.382 4.191-4.382 4.191s.677 3.767 1.069 5.952c.083.462-.275.882-.742.882-.122 0-.244-.029-.355-.089-1.968-1.048-5.359-2.851-5.359-2.851s-3.391 1.803-5.359 2.851c-.111.06-.234.089-.356.089-.465 0-.825-.421-.741-.882.393-2.185 1.07-5.952 1.07-5.952s-2.773-2.653-4.382-4.191c-.16-.153-.232-.346-.232-.535 0-.352.249-.694.651-.748 2.211-.305 6.021-.829 6.021-.829s1.677-3.442 2.65-5.44z" fill-rule="nonzero"/></svg>
+            </g>
+          </symbol>
+
+          <symbol id='circleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
+            <g transform='translate(-2.5,-2.5)'>
+            <svg clip-rule="evenodd" fillRule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.998 2c5.517 0 9.997 4.48 9.997 9.998 0 5.517-4.48 9.997-9.997 9.997-5.518 0-9.998-4.48-9.998-9.997 0-5.518 4.48-9.998 9.998-9.998zm0 1.5c-4.69 0-8.498 3.808-8.498 8.498s3.808 8.497 8.498 8.497 8.497-3.807 8.497-8.497-3.807-8.498-8.497-8.498z" fill-rule="nonzero"/></svg>
+            </g>
+          </symbol>
+
+          <symbol id='cubeFilledSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
+            <g transform='translate(-2.5,-2.5)'>
+              <svg clip-rule="evenodd" fillRule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.514 6.61c-.317.179-.514.519-.514.887v8.95c0 .37.197.708.514.887 1.597.901 6.456 3.639 8.005 4.512.152.085.319.128.487.128.164 0 .328-.041.477-.123 1.549-.855 6.39-3.523 7.994-4.408.323-.177.523-.519.523-.891v-9.055c0-.368-.197-.708-.515-.887-1.595-.899-6.444-3.632-7.999-4.508-.151-.085-.319-.128-.486-.128-.168 0-.335.043-.486.128-1.555.876-6.405 3.609-8 4.508m15.986 2.115v7.525l-6.75 3.722v-7.578zm-15 7.425v-7.458l6.75 3.75v7.511zm.736-8.769 6.764-3.813 6.801 3.834-6.801 3.716z" fill-rule="nonzero"/></svg>
+            </g>
+          </symbol>
         </defs>
       </svg>
      <ReactFlow
diff --git a/source/components/model/edges/edgeBase.tsx b/source/components/model/edges/edgeBase.tsx
index c81e039..1e79409 100644
--- a/source/components/model/edges/edgeBase.tsx
+++ b/source/components/model/edges/edgeBase.tsx
@@ -4,15 +4,12 @@ import { getStraightPath, BaseEdge, EdgeLabelRenderer, EdgeProps, getBezierPath,
 const edgeTagMap:{[index: string]:string} = {
   'reads':                   'readsEdge',
   'defined-by':              'definedByEdge',
-  'same-read-read':          'sameReadReadEdge', //obsolete?
-  'same-def-def':            'sameDefDefEdge', // obsolete?
   'calls':                   'callsEdge',
   'returns':                 'returnsEdge',
   'defines-on-call':         'definesOnCallEdge',
   'defined-by-on-call':      'definedByOnCallEdge',
   'argument':                'argumentEdge',
   'side-effect-on-call':     'sideEffectOnCallEdge',
-  'relates':                 'relatesEdge', //obsolete?
   'non-standard-evaluation': 'nonStandardEvaluationEdge',
   'multiEdge':               'multiEdge'
 };
diff --git a/source/components/model/edges/multiEdge.tsx b/source/components/model/edges/multiEdge.tsx
index 7b73007..ffa731f 100644
--- a/source/components/model/edges/multiEdge.tsx
+++ b/source/components/model/edges/multiEdge.tsx
@@ -1,7 +1,12 @@
 import { useCallback } from "react";
-import { BaseEdge, Edge, EdgeLabelRenderer, EdgeMouseHandler, EdgeProps, InternalNode, getBezierPath, useInternalNode, useStore } from '@xyflow/react';
+import { BaseEdge, Edge, EdgeLabelRenderer, EdgeMouseHandler, EdgeProps, EdgeTypes, InternalNode, XYPosition, getBezierPath, useInternalNode, useStore } from '@xyflow/react';
 import { getEdgeParams } from "./edgeBase";
+import { EdgeType, EdgeTypeName } from "@eagleoutice/flowr/dataflow/graph/edge";
 
+const amountOfSamplePointsForLength = 100
+const lengthBetweenMarkerPoints = 10
+const startEndDistanceToMarkers = 5
+const bezierSplitConst = 1 // 0 <= bezierSplitConst <= 1
 export function MultiEdge(props:EdgeProps){
     
   return <BodyMultiEdgeComponent
@@ -37,10 +42,10 @@ interface BodyMultiEdgeComponentProps {
       targetX: targetX,
       targetY: targetY,
     });
-    
+
     //const labelPositionX = targetX - sourceX > 0 ? labelX + offsetX / 2 : labelX - offsetX / 2 
     //const labelPositionY = targetY - sourceY > 0 ? labelY + offsetY / 2 : labelY - offsetY / 2
-    const defaultEdgeStyle: React.CSSProperties = {stroke : 'black', pointerEvents: 'none', cursor: 'none'}
+    const defaultEdgeStyle: React.CSSProperties = {stroke: 'black', pointerEvents: 'none', cursor: 'none'}
     const arrowEnd = true
     const arrowStart = false
 
@@ -48,12 +53,24 @@ interface BodyMultiEdgeComponentProps {
     for(const singleLabel of (props.standardEdgeInformation.data?.edgeTypes as string[] ?? [])){
         label += singleLabel + ' '
     }
-
+    /*
+      <BaseEdge
+        id={hoverOverEdgeId} //Interaction Edge
+        path={edgePath} 
+        style= {{strokeWidth: 10, visibility: 'hidden', pointerEvents: 'all', cursor: 'pointer'}} 
+      />
+      <BaseEdge
+        id={props.standardEdgeInformation.id} //Shown Edge
+        path={edgePath} 
+        style= {defaultEdgeStyle}
+        markerEnd={arrowEnd ? 'url(#triangle)' : undefined} markerStart={arrowStart ? 'url(#triangle)' : undefined} 
+      />
+    */ 
     const edgeLabelId = props.standardEdgeInformation.id + '-edgeLabel'
     const hoverOverEdgeId = props.standardEdgeInformation.id + '-hoverover-interactive'
-    var cssRule = 
-    `body:has(#${hoverOverEdgeId}:hover) #${edgeLabelId} {visibility: visible;}`
+    var cssRule = `body:has(#${hoverOverEdgeId}:hover) #${edgeLabelId} {visibility: visible;}`
     
+    const givenEdgeTypes = props.standardEdgeInformation.data?.edgeTypes as Set<EdgeTypeName> ?? new Set<EdgeTypeName>()
     return (
       <>
       <BaseEdge
@@ -67,6 +84,7 @@ interface BodyMultiEdgeComponentProps {
         style= {defaultEdgeStyle}
         markerEnd={arrowEnd ? 'url(#triangle)' : undefined} markerStart={arrowStart ? 'url(#triangle)' : undefined} 
       />
+      <EdgeSymbolComponent id={props.standardEdgeInformation.id} edgeTypes={givenEdgeTypes} edgePath={edgePath}/>
       <style>
         {cssRule}
       </style>
@@ -88,3 +106,238 @@ interface BodyMultiEdgeComponentProps {
     );
   }
 
+//see also https://en.wikipedia.org/wiki/B%C3%A9zier_curve
+/**
+ * Calculates Point on BezierCurve 
+ * @param t 0 <= t <= 1
+ * @param startingPoint 
+ * @param startControlPoint 
+ * @param endControlPoint 
+ * @param endingPoint 
+ * @returns Point on BezierCurve equal to the percentage given in t
+ */
+function bezierCurve(t:number, startingPoint:XYPosition, startControlPoint:XYPosition, endControlPoint: XYPosition, endingPoint:XYPosition):XYPosition {
+  return ({
+    x:
+    ((1 - t) * (1 - t) * (1 - t) * startingPoint.x +
+    3 * (1 - t) * (1 - t) * t * startControlPoint.x +
+    3 * (1 - t) * t * t * endControlPoint.x +
+    t * t * t * endingPoint.x),
+    y:
+    ((1 - t) * (1 - t) * (1 - t) * startingPoint.y +
+    3 * (1 - t) * (1 - t) * t * startControlPoint.y +
+    3 * (1 - t) * t * t * endControlPoint.y +
+    t * t * t * endingPoint.y)
+  }
+  );
+}
+
+function calculateLengthOfBezierCurve(startingPoint:XYPosition, startControlPoint:XYPosition, endControlPoint: XYPosition, endingPoint:XYPosition): number{
+  const rangeForSamplePoints = range(0,1, amountOfSamplePointsForLength, true)
+  const samplePoints = rangeForSamplePoints.map((percentage) => bezierCurve(percentage, startingPoint, startControlPoint, endControlPoint,endingPoint))
+  // approximate length with linear interpolation
+  const intermediateResult = samplePoints.reduce((prev, curr) => ({point: curr, sum: prev.sum + Math.sqrt(Math.pow(curr.x - prev.point.x, 2) + Math.pow(curr.y - prev.point.y, 2))}),{point: startingPoint, sum:0})
+  return intermediateResult.sum
+}
+
+function range(start: number, end: number, amountOfNumbers:number, includeEnd: boolean): number[]{
+  const divideBy = includeEnd ? (amountOfNumbers - 1) : amountOfNumbers
+  return Array.from(Array(amountOfNumbers).keys()).map((key) => start + (end - start) / divideBy * key)
+}
+
+interface BezierCurve {
+  readonly startPoint: XYPosition,
+  readonly controlPointStart:XYPosition,
+  readonly controlPointEnd:XYPosition,
+  readonly endPoint: XYPosition,
+}
+
+interface EdgeSymbolComponentProps {
+  edgePath: string,
+  edgeTypes: Set<EdgeTypeName>
+  id: string
+}
+
+const edgeTypeNameMap:{[index: string]:string} = {
+  'reads':                   'dotSymbol',
+  'defined-by':              'hexagonHollowSymbol',
+  'calls':                   'starFilledSymbol',
+  'returns':                 'circleHollowSymbol',
+  'defines-on-call':         'rectangleHollowSymbol',
+  'defined-by-on-call':      'rhombusHollowSymbol',
+  'argument':                'triangleHollowSymbol',
+  'side-effect-on-call':     'crossSymbol',
+  'non-standard-evaluation': 'cubeFilledSymbol',
+};
+
+export function edgeTypeToSymbolIdMapper(edgeTag: string): string {
+  return edgeTypeNameMap[edgeTag] ?? '';
+}
+
+/**
+ * Creates Evenly spaced Symbols to the corresponding MarkerTypes
+ * @param props 
+ * @returns list of <use> tags which point to the corresponding symbol
+ */
+const EdgeSymbolComponent : React.FC<EdgeSymbolComponentProps> = (props) => {
+  //Parse 4 Points from the calculated bezier curve
+  const pointArray = props.edgePath.replace('M','').replace('C','').split(' ').map((stringPoint)=> stringPoint.split(',').map((stringNumber) => +stringNumber))
+  const startPointBez = {x: pointArray[0][0], y:pointArray[0][1]}
+  const startControlPointBez = {x: pointArray[1][0], y:pointArray[1][1]}
+  const endControlPointBez = {x: pointArray[2][0], y:pointArray[2][1]}
+  const endPointBez = {x: pointArray[3][0], y:pointArray[3][1]}
+
+  const lengthOfCurve = calculateLengthOfBezierCurve(startPointBez,startControlPointBez,endControlPointBez,endPointBez)
+
+  //check if curve is too small to fit many points
+  let amountOfMarkerPoints = Math.floor((lengthOfCurve - startEndDistanceToMarkers) / lengthBetweenMarkerPoints)
+  if(amountOfMarkerPoints <= props.edgeTypes.size){
+    amountOfMarkerPoints = props.edgeTypes.size
+  }
+
+  const individualMarkerPoints = Math.floor(amountOfMarkerPoints / props.edgeTypes.size) 
+
+  //calculate which symbols need to be on which points
+  const markerMap = new Map<number, string>()
+  const pointsMap = new Map<number, XYPosition[]>()
+  let indexOfMarkerType = 0
+  for(let value of props.edgeTypes){
+    markerMap.set(indexOfMarkerType, edgeTypeToSymbolIdMapper(value))
+
+    //evenly space markerPoints
+    let percentageArray: number[] = []
+    if(individualMarkerPoints === 1){
+      percentageArray = props.edgeTypes.size === 1 ? [0.5] : [1 / props.edgeTypes.size* (1 + indexOfMarkerType) ]
+    } else {
+      let nextPoint = (startEndDistanceToMarkers  + indexOfMarkerType * lengthBetweenMarkerPoints) / lengthOfCurve 
+      while (nextPoint < 1 - startEndDistanceToMarkers / lengthOfCurve){
+        percentageArray.push(nextPoint)
+        nextPoint += lengthBetweenMarkerPoints * props.edgeTypes.size / lengthOfCurve
+      }
+    }
+    
+    //get points on BezierCurve
+    const pointsOnCurve = percentageArray.map((percentage) => bezierCurve(percentage, startPointBez, startControlPointBez, endControlPointBez, endPointBez))
+    pointsMap.set(indexOfMarkerType, pointsOnCurve)
+    indexOfMarkerType += 1
+  }
+  
+  //create use elements
+  let useArray:JSX.Element[] = []
+  markerMap.forEach((edgeSymbolId,offsetIndex) => {
+    const pointsOfMarker = pointsMap.get(offsetIndex)
+    const useBlockArray = pointsOfMarker?.map((point) =>{return (<use id = {props.id + '-' + point.x + '-' + point.y} href={`#${edgeSymbolId}`} x={point.x} y={point.y} />)}) ?? []
+    useArray = useArray.concat(useBlockArray)
+  })
+  
+  return (
+  <>
+    <svg width = {'100%'} height = {'100%'} style = {{overflow: 'visible'}}>
+      {useArray.map((self) => self)}
+    </svg>
+  </>)
+}
+
+
+/**
+ * calculate the splitted parts of a cubic bezierCurve
+ * @param t All values must follow the format 0 < t[i] < 1 && t[i] < t[i + 1]
+ * @param startingPoint 
+ * @param startControlPoint 
+ * @param endControlPoint 
+ * @param endingPoint 
+ * @returns Array of BezierCurves
+ */
+function splitBezierCurve(t:number[], startingPoint:XYPosition, startControlPoint:XYPosition, endControlPoint: XYPosition, endingPoint:XYPosition):BezierCurve[]{
+  
+  let currentStartPoint = startingPoint
+  let currentStartControlPoint = startControlPoint
+  let currentEndControlPoint = endControlPoint
+  let currentEndPoint = endingPoint
+  
+  const returnArray:BezierCurve[] = []
+  const percentageDifferenceForDerivative = 0.01 
+
+  for(let percentIndex = 0; percentIndex < t.length; percentIndex++){
+    const currentSplitPercent = t[percentIndex]
+    const splitBezierCurvePoint = bezierCurve(currentSplitPercent, startingPoint, startControlPoint, endControlPoint, endingPoint)  
+    const closeToSplitPoint = bezierCurve(currentSplitPercent + percentageDifferenceForDerivative, startingPoint, startControlPoint, endControlPoint,endingPoint)
+
+
+    const crossPoint1 = calculateIntersectionPoint(currentStartPoint, currentStartControlPoint, splitBezierCurvePoint, closeToSplitPoint) ?? 
+                        {x: currentStartPoint.x + (splitBezierCurvePoint.x - currentStartPoint.x) * 0.5,
+                        y: currentStartPoint.y + (splitBezierCurvePoint.y - currentStartPoint.y) * 0.5}
+    const newStartControlPointFirstBezierCurve: XYPosition = {x: currentStartPoint.x + (crossPoint1.x - currentStartPoint.x) * bezierSplitConst, y: currentStartPoint.y + (crossPoint1.y - currentStartPoint.y)}
+    const newEndControlPointFirstBezierCurve: XYPosition = {x: splitBezierCurvePoint.x - (splitBezierCurvePoint.x - crossPoint1.x) * bezierSplitConst, y: splitBezierCurvePoint.y - (splitBezierCurvePoint.y - crossPoint1.y) * bezierSplitConst}
+    const crossPoint2 = calculateIntersectionPoint(splitBezierCurvePoint, closeToSplitPoint, currentEndControlPoint, currentEndPoint)??
+                        {x: splitBezierCurvePoint.x + (currentEndPoint.x - splitBezierCurvePoint.x) * 0.5, 
+                        y: splitBezierCurvePoint.y + (currentEndPoint.y - splitBezierCurvePoint.y) * 0.5}
+    const newStartControlPointSecondBezierCurve: XYPosition = {x: splitBezierCurvePoint.x + (crossPoint2.x - splitBezierCurvePoint.x ) * bezierSplitConst, y: splitBezierCurvePoint.y + (crossPoint2.y - splitBezierCurvePoint.y ) * bezierSplitConst}
+    const newEndControlPointSecondBezierCurve: XYPosition = {x: currentEndPoint.x - (currentEndPoint.x - crossPoint2.x) * bezierSplitConst, y: currentEndPoint.y - (currentEndPoint.y - crossPoint2.y) * bezierSplitConst}
+    
+
+
+
+    const toPush: BezierCurve = {
+      startPoint: currentStartPoint,
+      controlPointStart: newStartControlPointFirstBezierCurve,
+      controlPointEnd: newEndControlPointFirstBezierCurve,
+      endPoint: splitBezierCurvePoint
+    }
+    returnArray.push(toPush)
+
+    currentStartPoint = splitBezierCurvePoint
+    currentStartControlPoint = newStartControlPointSecondBezierCurve
+    currentEndControlPoint = newEndControlPointSecondBezierCurve
+    currentEndPoint = endingPoint
+    
+  }
+  returnArray.push({
+    startPoint: currentStartPoint,
+    controlPointStart: currentStartControlPoint,
+    controlPointEnd: currentEndControlPoint,
+    endPoint: currentEndPoint
+  })
+  return returnArray
+}
+
+// from https://paulbourke.net/geometry/pointlineplane/javascript.txt
+// line intercept math by Paul Bourke http://paulbourke.net/geometry/pointlineplane/
+// Determine the intersection point of two line segments
+// Return FALSE if the lines don't intersect
+function calculateIntersectionPoint(point1Line1:XYPosition, point2line1:XYPosition, point1line2:XYPosition, point2line2:XYPosition):XYPosition | undefined{
+
+  const {x:x1, y:y1} = point1Line1
+  const {x:x2, y:y2} = point2line1
+  const {x:x3, y:y3} = point1line2
+  const {x:x4, y:y4} = point2line2
+
+  // Check if none of the lines are of length 0
+	if ((x1 === x2 && y1 === y2) || (x3 === x4 && y3 === y4)) {
+    throw Error('lines are of length 0')
+
+	}
+
+	const denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1))
+
+  // Lines are parallel
+	if (denominator === 0) {
+		//throw Error('lines are parallel')
+    return undefined
+	}
+
+	let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator
+	let ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator
+
+  // is the intersection along the segments
+	/*
+  if (ua < 0 || ua > 1 || ub < 0 || ub > 1) {
+		throw Error('intersection not along segments')
+	}
+  */
+  // Return a object with the x and y coordinates of the intersection
+	let x = x1 + ua * (x2 - x1)
+	let y = y1 + ua * (y2 - y1)
+
+	return {x, y}
+}
\ No newline at end of file

From 90e0e8172d4ee708565ce738bcc309c11cd96f40 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Mon, 22 Jul 2024 13:06:37 +0200
Subject: [PATCH 51/75] feat: add basic legend slide in functionality

---
 css/main.css                         | 66 +++++++++++++++++++++++++++-
 source/components/legendComonent.tsx | 26 +++++++++++
 source/index.tsx                     |  9 +++-
 3 files changed, 98 insertions(+), 3 deletions(-)
 create mode 100644 source/components/legendComonent.tsx

diff --git a/css/main.css b/css/main.css
index fadb72e..0194fe4 100644
--- a/css/main.css
+++ b/css/main.css
@@ -9,6 +9,68 @@ svg {
 	pointer-events: none;
 }
 
+#slide-in-legend {
+    position: fixed;
+    left: 0;
+    top: 0;
+
+    width: 25vw;
+    height: 100vh;
+	background: white;
+}
+
+#legend-close-button-div {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+}
+
+.button-close-legend {
+  background: #FF4742;
+  border: 1px solid #FF4742;
+  border-radius: 6px;
+  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
+  box-sizing: border-box;
+  color: #FFFFFF;
+  cursor: pointer;
+  display: inline-block;
+  font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif;
+  font-size: 16px;
+  font-weight: 800;
+  line-height: 16px;
+  min-height: 40px;
+  outline: 0;
+  padding: 12px 14px;
+  text-align: center;
+  text-rendering: geometricprecision;
+  text-transform: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: middle;
+}
+
+.button-close-legend:hover,
+.button-close-legend:active {
+  background-color: initial;
+  background-position: 0 0;
+  color: #FF4742;
+}
+
+.button-close-legend:active {
+  opacity: .5;
+}
+
+.slide-in-legend-invisible {
+	transform: translate3d(-100vw, 0, 0);
+	transition: 1s;
+}
+
+.slide-in-legend-visible {
+	transform: translate3d(0, 0, 0);
+	transition: 1s;
+}
+
 .function-definition-node {
 	--b: 3px;   /* border thickness */
 	--s: .45em; /* size of the corner */
@@ -29,7 +91,9 @@ svg {
   
 	user-select: none;
 	-webkit-user-select: none;
-}  
+}
+
+
 .react-flow__edge-path {
 	pointer-events: none;
 	cursor: none;
diff --git a/source/components/legendComonent.tsx b/source/components/legendComonent.tsx
new file mode 100644
index 0000000..c84a405
--- /dev/null
+++ b/source/components/legendComonent.tsx
@@ -0,0 +1,26 @@
+
+
+interface LegendComponentProps {
+    
+}
+
+export function slideInLegend() {
+    const element: HTMLDivElement = document.getElementById('slide-in-legend') as HTMLDivElement ?? new HTMLDivElement()
+    element.className = 'slide-in-legend-visible'
+}
+
+export function slideOutLegend(){
+    const element: HTMLDivElement = document.getElementById('slide-in-legend') as HTMLDivElement ?? new HTMLDivElement()
+    element.className = 'slide-in-legend-invisible'
+}
+
+export const LegendComponent: React.FC<LegendComponentProps> = (props) => {
+
+    return (
+        <div className = 'slide-in-legend-invisible' id = 'slide-in-legend' >
+            <div id = 'legend-close-button-div'>
+                <button className = {'button-close-legend'} onClick = {slideOutLegend} >X</button>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/source/index.tsx b/source/index.tsx
index e40775b..786213f 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -11,6 +11,7 @@ import { FormEvent } from 'react';
 import { VisualizationGraph } from './components/model/graph';
 import { RNode } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/model';
 import { ParentInformation } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/decorate';
+import { LegendComponent, slideInLegend } from './components/legendComonent';
 /* old example
 const otherGraph:OtherGraph =  {
   "rootVertices":["0","2","5"],
@@ -108,9 +109,13 @@ root.render(
         <LayoutFlow graph={graphFromOtherGraph} assignGraphUpdater={setGraphUpdater} />
     </ReactFlowProvider>
     <div className='r-code-input'>
-    <input onChange={onRCodeInputChange}></input>
-    <button onClick={onRCodeRequest}>Send R code</button>
+      <input onChange={onRCodeInputChange}></input>
+      <button onClick={onRCodeRequest}>Send R code</button>
     </div>
+    <div id = {'legend-button-div'}>
+      <button onClick={slideInLegend}>Legend</button>
+    </div>
+    <LegendComponent/>
   </MainContainerComponent>
 );
 

From 1af24775835248e09c123a6a8594b1481ab6545f Mon Sep 17 00:00:00 2001
From: EagleoutIce <florian.sihler@uni-ulm.de>
Date: Wed, 24 Jul 2024 11:08:40 +0200
Subject: [PATCH 52/75] refactor: minor css updates :sparkles:

---
 css/main.css                         | 52 ++++++++++++++++------------
 source/components/legendComonent.tsx |  6 ++--
 2 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/css/main.css b/css/main.css
index 0194fe4..518fc00 100644
--- a/css/main.css
+++ b/css/main.css
@@ -9,15 +9,6 @@ svg {
 	pointer-events: none;
 }
 
-#slide-in-legend {
-    position: fixed;
-    left: 0;
-    top: 0;
-
-    width: 25vw;
-    height: 100vh;
-	background: white;
-}
 
 #legend-close-button-div {
 	position: absolute;
@@ -28,19 +19,19 @@ svg {
 .button-close-legend {
   background: #FF4742;
   border: 1px solid #FF4742;
-  border-radius: 6px;
+  border-radius: 0px 8px 0px 8px;
   box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
   box-sizing: border-box;
   color: #FFFFFF;
   cursor: pointer;
   display: inline-block;
   font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif;
-  font-size: 16px;
+  font-size: 12px;
   font-weight: 800;
-  line-height: 16px;
-  min-height: 40px;
+  line-height: 6px;
+  min-height: 10px;
   outline: 0;
-  padding: 12px 14px;
+  padding: 6px 8px;
   text-align: center;
   text-rendering: geometricprecision;
   text-transform: none;
@@ -48,10 +39,13 @@ svg {
   -webkit-user-select: none;
   touch-action: manipulation;
   vertical-align: middle;
+  transition: all 250ms ease-in-out;
+  position: absolute;
+  top: 0;
+  right: 0;
 }
 
-.button-close-legend:hover,
-.button-close-legend:active {
+.button-close-legend:hover, .button-close-legend:focus {
   background-color: initial;
   background-position: 0 0;
   color: #FF4742;
@@ -59,16 +53,30 @@ svg {
 
 .button-close-legend:active {
   opacity: .5;
+  background: #9b0f0b;
 }
 
-.slide-in-legend-invisible {
-	transform: translate3d(-100vw, 0, 0);
-	transition: 1s;
+
+.slide-in-legend {
+	position: absolute;
+	left: 0;
+	bottom: 0;
+
+	width: 65vw;
+	height: 30vh;
+	background: rgba(255, 255, 255, .9);
+	backdrop-filter: blur(5px);
+	filter: none;
+	border-radius: 0px 8px 0px 0px;
+	overflow: hidden;
+	
+	transform: translateX(-100%);
+	transition: 300ms ease-in-out;
 }
 
-.slide-in-legend-visible {
-	transform: translate3d(0, 0, 0);
-	transition: 1s;
+.slide-in-legend.visible {
+	transform: translateX(0);
+	filter: drop-shadow(0px 0px 8px gray);
 }
 
 .function-definition-node {
diff --git a/source/components/legendComonent.tsx b/source/components/legendComonent.tsx
index c84a405..09a7466 100644
--- a/source/components/legendComonent.tsx
+++ b/source/components/legendComonent.tsx
@@ -6,18 +6,18 @@ interface LegendComponentProps {
 
 export function slideInLegend() {
     const element: HTMLDivElement = document.getElementById('slide-in-legend') as HTMLDivElement ?? new HTMLDivElement()
-    element.className = 'slide-in-legend-visible'
+    element.classList.toggle('visible');
 }
 
 export function slideOutLegend(){
     const element: HTMLDivElement = document.getElementById('slide-in-legend') as HTMLDivElement ?? new HTMLDivElement()
-    element.className = 'slide-in-legend-invisible'
+    element.classList.toggle('visible');
 }
 
 export const LegendComponent: React.FC<LegendComponentProps> = (props) => {
 
     return (
-        <div className = 'slide-in-legend-invisible' id = 'slide-in-legend' >
+        <div className = 'slide-in-legend' id = 'slide-in-legend' >
             <div id = 'legend-close-button-div'>
                 <button className = {'button-close-legend'} onClick = {slideOutLegend} >X</button>
             </div>

From bd6544a1a9cdfc3da326431825c0ccd633334a96 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Wed, 24 Jul 2024 13:03:36 +0200
Subject: [PATCH 53/75] feat: change legend button to be part of existing
 controls

---
 source/components/graphComponent.tsx | 16 +++++++++++-----
 source/index.tsx                     |  3 ---
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 53c6b9d..51911b1 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -23,6 +23,7 @@ import {
   MarkerType,
   EdgeProps,
   applyEdgeChanges,
+  ControlButton,
 } from '@xyflow/react';
 
 import '@xyflow/react/dist/style.css';
@@ -45,6 +46,7 @@ import { NonStandardEvaluationEdge } from './model/edges/nonStandardEvaluationEd
 import { flattenToNodeArray, foldIntoElkHierarchy } from './graphHierarchy';
 import { ExtendedExtendedEdge, transformGraphForLayouting, transformGraphForShowing } from './model/graphTransition';
 import { MultiEdge } from './model/edges/multiEdge';
+import { slideInLegend } from './legendComonent';
 
 
 
@@ -197,13 +199,13 @@ export interface LayoutFlowProps {
           
           <symbol id = 'rectangleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
             <g transform='translate(-2.5,-2.5)'>
-              <svg clip-rule="evenodd" fillRule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3 17v3c0 .621.52 1 1 1h3v-1.5h-2.5v-2.5zm8.5 4h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5zm5-4h-1.5v2.5h-2.5v1.5h3c.478 0 1-.379 1-1zm-1.5-1v-3.363h1.5v3.363zm-15-3.363v3.363h-1.5v-3.363zm15-1v-3.637h1.5v3.637zm-15-3.637v3.637h-1.5v-3.637zm12.5-5v1.5h2.5v2.5h1.5v-3c0-.478-.379-1-1-1zm-10 0h-3c-.62 0-1 .519-1 1v3h1.5v-2.5h2.5zm4.5 1.5h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5z" fill-rule="nonzero"/></svg>
+              <svg clipRule="evenodd" fillRule="evenodd" stroke-linejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3 17v3c0 .621.52 1 1 1h3v-1.5h-2.5v-2.5zm8.5 4h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5zm5-4h-1.5v2.5h-2.5v1.5h3c.478 0 1-.379 1-1zm-1.5-1v-3.363h1.5v3.363zm-15-3.363v3.363h-1.5v-3.363zm15-1v-3.637h1.5v3.637zm-15-3.637v3.637h-1.5v-3.637zm12.5-5v1.5h2.5v2.5h1.5v-3c0-.478-.379-1-1-1zm-10 0h-3c-.62 0-1 .519-1 1v3h1.5v-2.5h2.5zm4.5 1.5h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5z" fillRule="nonzero"/></svg>
             </g>
           </symbol>
           
           <symbol id = 'triangleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
             <g transform='translate(-2.5,-2.5)'>
-              <svg clip-rule="evenodd" fillRule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.882 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm1.935-.384h15.939l-7.97-14.22z" fill-rule="nonzero"/></svg>
+              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.882 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm1.935-.384h15.939l-7.97-14.22z" fillRule="nonzero"/></svg>
             </g>
           </symbol>
           
@@ -221,13 +223,13 @@ export interface LayoutFlowProps {
 
           <symbol id='circleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
             <g transform='translate(-2.5,-2.5)'>
-            <svg clip-rule="evenodd" fillRule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.998 2c5.517 0 9.997 4.48 9.997 9.998 0 5.517-4.48 9.997-9.997 9.997-5.518 0-9.998-4.48-9.998-9.997 0-5.518 4.48-9.998 9.998-9.998zm0 1.5c-4.69 0-8.498 3.808-8.498 8.498s3.808 8.497 8.498 8.497 8.497-3.807 8.497-8.497-3.807-8.498-8.497-8.498z" fill-rule="nonzero"/></svg>
+            <svg clip-rule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.998 2c5.517 0 9.997 4.48 9.997 9.998 0 5.517-4.48 9.997-9.997 9.997-5.518 0-9.998-4.48-9.998-9.997 0-5.518 4.48-9.998 9.998-9.998zm0 1.5c-4.69 0-8.498 3.808-8.498 8.498s3.808 8.497 8.498 8.497 8.497-3.807 8.497-8.497-3.807-8.498-8.497-8.498z" fill-rule="nonzero"/></svg>
             </g>
           </symbol>
 
           <symbol id='cubeFilledSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
             <g transform='translate(-2.5,-2.5)'>
-              <svg clip-rule="evenodd" fillRule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.514 6.61c-.317.179-.514.519-.514.887v8.95c0 .37.197.708.514.887 1.597.901 6.456 3.639 8.005 4.512.152.085.319.128.487.128.164 0 .328-.041.477-.123 1.549-.855 6.39-3.523 7.994-4.408.323-.177.523-.519.523-.891v-9.055c0-.368-.197-.708-.515-.887-1.595-.899-6.444-3.632-7.999-4.508-.151-.085-.319-.128-.486-.128-.168 0-.335.043-.486.128-1.555.876-6.405 3.609-8 4.508m15.986 2.115v7.525l-6.75 3.722v-7.578zm-15 7.425v-7.458l6.75 3.75v7.511zm.736-8.769 6.764-3.813 6.801 3.834-6.801 3.716z" fill-rule="nonzero"/></svg>
+              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.514 6.61c-.317.179-.514.519-.514.887v8.95c0 .37.197.708.514.887 1.597.901 6.456 3.639 8.005 4.512.152.085.319.128.487.128.164 0 .328-.041.477-.123 1.549-.855 6.39-3.523 7.994-4.408.323-.177.523-.519.523-.891v-9.055c0-.368-.197-.708-.515-.887-1.595-.899-6.444-3.632-7.999-4.508-.151-.085-.319-.128-.486-.128-.168 0-.335.043-.486.128-1.555.876-6.405 3.609-8 4.508m15.986 2.115v7.525l-6.75 3.722v-7.578zm-15 7.425v-7.458l6.75 3.75v7.511zm.736-8.769 6.764-3.813 6.801 3.834-6.801 3.716z" fill-rule="nonzero"/></svg>
             </g>
           </symbol>
         </defs>
@@ -245,7 +247,11 @@ export interface LayoutFlowProps {
      >
       <Background />
       <MiniMap />
-      <Controls />
+      <Controls>
+        <ControlButton onClick={slideInLegend}>
+        ☰
+        </ControlButton>
+      </Controls>
      </ReactFlow>
      </>
    );
diff --git a/source/index.tsx b/source/index.tsx
index 786213f..5f46c7f 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -112,9 +112,6 @@ root.render(
       <input onChange={onRCodeInputChange}></input>
       <button onClick={onRCodeRequest}>Send R code</button>
     </div>
-    <div id = {'legend-button-div'}>
-      <button onClick={slideInLegend}>Legend</button>
-    </div>
     <LegendComponent/>
   </MainContainerComponent>
 );

From d75bc951a3f08559317d07e81c7c94e63b7eb36e Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Wed, 24 Jul 2024 14:59:13 +0200
Subject: [PATCH 54/75] fix: spacing of edge symbols

---
 source/components/model/edges/multiEdge.tsx | 27 ++++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/source/components/model/edges/multiEdge.tsx b/source/components/model/edges/multiEdge.tsx
index ffa731f..dc2e075 100644
--- a/source/components/model/edges/multiEdge.tsx
+++ b/source/components/model/edges/multiEdge.tsx
@@ -190,12 +190,16 @@ const EdgeSymbolComponent : React.FC<EdgeSymbolComponentProps> = (props) => {
   const lengthOfCurve = calculateLengthOfBezierCurve(startPointBez,startControlPointBez,endControlPointBez,endPointBez)
 
   //check if curve is too small to fit many points
-  let amountOfMarkerPoints = Math.floor((lengthOfCurve - startEndDistanceToMarkers) / lengthBetweenMarkerPoints)
-  if(amountOfMarkerPoints <= props.edgeTypes.size){
-    amountOfMarkerPoints = props.edgeTypes.size
+  let amountOfMarkerPointsInBetween = Math.floor((lengthOfCurve - startEndDistanceToMarkers * 2 - 2 * lengthBetweenMarkerPoints * props.edgeTypes.size) / lengthBetweenMarkerPoints)
+  if(amountOfMarkerPointsInBetween <= 0){
+    amountOfMarkerPointsInBetween = 0
   }
 
-  const individualMarkerPoints = Math.floor(amountOfMarkerPoints / props.edgeTypes.size) 
+  const maximumOfInBetweenPoints = 4
+
+  const individualMarkerPointsInBetween = Math.floor(amountOfMarkerPointsInBetween / props.edgeTypes.size) > maximumOfInBetweenPoints ? 
+                                          maximumOfInBetweenPoints : 
+                                          Math.floor(amountOfMarkerPointsInBetween / props.edgeTypes.size) 
 
   //calculate which symbols need to be on which points
   const markerMap = new Map<number, string>()
@@ -206,14 +210,19 @@ const EdgeSymbolComponent : React.FC<EdgeSymbolComponentProps> = (props) => {
 
     //evenly space markerPoints
     let percentageArray: number[] = []
-    if(individualMarkerPoints === 1){
-      percentageArray = props.edgeTypes.size === 1 ? [0.5] : [1 / props.edgeTypes.size* (1 + indexOfMarkerType) ]
+    if(individualMarkerPointsInBetween === 0){
+      percentageArray = [1 / (1 + props.edgeTypes.size) * (1 + indexOfMarkerType) ]
     } else {
-      let nextPoint = (startEndDistanceToMarkers  + indexOfMarkerType * lengthBetweenMarkerPoints) / lengthOfCurve 
-      while (nextPoint < 1 - startEndDistanceToMarkers / lengthOfCurve){
+      let nextPoint = (startEndDistanceToMarkers + lengthBetweenMarkerPoints *  indexOfMarkerType)/ lengthOfCurve // first Marker
+      while (nextPoint < 1 - (startEndDistanceToMarkers + lengthBetweenMarkerPoints *  props.edgeTypes.size)/ lengthOfCurve){
         percentageArray.push(nextPoint)
-        nextPoint += lengthBetweenMarkerPoints * props.edgeTypes.size / lengthOfCurve
+        nextPoint += (props.edgeTypes.size) * //Correctly jump for each marker
+                      (1 - 2 * (startEndDistanceToMarkers + lengthBetweenMarkerPoints * props.edgeTypes.size) / lengthOfCurve) * // use in between distance as reference 
+                      1 / (individualMarkerPointsInBetween * props.edgeTypes.size + 1) //spacing between points
       }
+      // last marker
+      nextPoint = 1 - (startEndDistanceToMarkers + lengthBetweenMarkerPoints *  (props.edgeTypes.size - (indexOfMarkerType + 1)))/ lengthOfCurve 
+      percentageArray.push(nextPoint)
     }
     
     //get points on BezierCurve

From 0d50ab46011fb13c09404ca54361e0decf08719a Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Wed, 24 Jul 2024 15:45:41 +0200
Subject: [PATCH 55/75] fix: even spacing for edge symbols

---
 source/components/model/edges/multiEdge.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/source/components/model/edges/multiEdge.tsx b/source/components/model/edges/multiEdge.tsx
index dc2e075..cc70029 100644
--- a/source/components/model/edges/multiEdge.tsx
+++ b/source/components/model/edges/multiEdge.tsx
@@ -5,7 +5,7 @@ import { EdgeType, EdgeTypeName } from "@eagleoutice/flowr/dataflow/graph/edge";
 
 const amountOfSamplePointsForLength = 100
 const lengthBetweenMarkerPoints = 10
-const startEndDistanceToMarkers = 5
+const startEndDistanceToMarkers = 10
 const bezierSplitConst = 1 // 0 <= bezierSplitConst <= 1
 export function MultiEdge(props:EdgeProps){
     
@@ -140,6 +140,21 @@ function calculateLengthOfBezierCurve(startingPoint:XYPosition, startControlPoin
   return intermediateResult.sum
 }
 
+function linearPercentageBezierCurve(t:number, startingPoint:XYPosition, startControlPoint:XYPosition, endControlPoint: XYPosition, endingPoint:XYPosition):XYPosition{
+  const curveLengthTotal = calculateLengthOfBezierCurve(startingPoint, startControlPoint, endControlPoint, endingPoint)
+  const rangeForSamplePoints = range(0,1, amountOfSamplePointsForLength, true)
+  let approximatedLength = 0
+  for(let indexOfPercentageArray = 1; indexOfPercentageArray < rangeForSamplePoints.length; indexOfPercentageArray++){
+    const lastPoint = bezierCurve(rangeForSamplePoints[indexOfPercentageArray - 1],startingPoint, startControlPoint, endControlPoint, endingPoint)
+    const currentPoint = bezierCurve(rangeForSamplePoints[indexOfPercentageArray],startingPoint, startControlPoint, endControlPoint, endingPoint)
+    approximatedLength += Math.sqrt(Math.pow(currentPoint.x - lastPoint.x, 2) + Math.pow(currentPoint.y - lastPoint.y, 2))
+    if(approximatedLength / curveLengthTotal >= t){
+      return currentPoint
+    }
+  }
+  return endingPoint
+}
+
 function range(start: number, end: number, amountOfNumbers:number, includeEnd: boolean): number[]{
   const divideBy = includeEnd ? (amountOfNumbers - 1) : amountOfNumbers
   return Array.from(Array(amountOfNumbers).keys()).map((key) => start + (end - start) / divideBy * key)
@@ -226,7 +241,7 @@ const EdgeSymbolComponent : React.FC<EdgeSymbolComponentProps> = (props) => {
     }
     
     //get points on BezierCurve
-    const pointsOnCurve = percentageArray.map((percentage) => bezierCurve(percentage, startPointBez, startControlPointBez, endControlPointBez, endPointBez))
+    const pointsOnCurve = percentageArray.map((percentage) => linearPercentageBezierCurve(percentage, startPointBez, startControlPointBez, endControlPointBez, endPointBez))
     pointsMap.set(indexOfMarkerType, pointsOnCurve)
     indexOfMarkerType += 1
   }

From cf7a1340c8efdc6df33174e4d6bd3c4b756e6946 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Wed, 24 Jul 2024 17:33:22 +0200
Subject: [PATCH 56/75] fix: overlapping edges

---
 source/components/graphComponent.tsx          |  10 +-
 source/components/model/edges/edgeBase.tsx    |  76 +++++++-
 source/components/model/edges/multiEdge.tsx   | 173 +++++++++---------
 .../components/model/nodes/nodeDefinition.tsx |   2 +-
 4 files changed, 164 insertions(+), 97 deletions(-)

diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 51911b1..5a301d6 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -199,7 +199,7 @@ export interface LayoutFlowProps {
           
           <symbol id = 'rectangleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
             <g transform='translate(-2.5,-2.5)'>
-              <svg clipRule="evenodd" fillRule="evenodd" stroke-linejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3 17v3c0 .621.52 1 1 1h3v-1.5h-2.5v-2.5zm8.5 4h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5zm5-4h-1.5v2.5h-2.5v1.5h3c.478 0 1-.379 1-1zm-1.5-1v-3.363h1.5v3.363zm-15-3.363v3.363h-1.5v-3.363zm15-1v-3.637h1.5v3.637zm-15-3.637v3.637h-1.5v-3.637zm12.5-5v1.5h2.5v2.5h1.5v-3c0-.478-.379-1-1-1zm-10 0h-3c-.62 0-1 .519-1 1v3h1.5v-2.5h2.5zm4.5 1.5h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5z" fillRule="nonzero"/></svg>
+              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3 17v3c0 .621.52 1 1 1h3v-1.5h-2.5v-2.5zm8.5 4h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5zm5-4h-1.5v2.5h-2.5v1.5h3c.478 0 1-.379 1-1zm-1.5-1v-3.363h1.5v3.363zm-15-3.363v3.363h-1.5v-3.363zm15-1v-3.637h1.5v3.637zm-15-3.637v3.637h-1.5v-3.637zm12.5-5v1.5h2.5v2.5h1.5v-3c0-.478-.379-1-1-1zm-10 0h-3c-.62 0-1 .519-1 1v3h1.5v-2.5h2.5zm4.5 1.5h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5z" fillRule="nonzero"/></svg>
             </g>
           </symbol>
           
@@ -211,25 +211,25 @@ export interface LayoutFlowProps {
           
           <symbol id='rhombusHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
             <g transform='translate(-2.5,-2.5)'>
-              <svg clip-rule="evenodd" fillRule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.262 2.306c.196-.196.461-.306.738-.306s.542.11.738.306c1.917 1.917 7.039 7.039 8.956 8.956.196.196.306.461.306.738s-.11.542-.306.738c-1.917 1.917-7.039 7.039-8.956 8.956-.196.196-.461.306-.738.306s-.542-.11-.738-.306c-1.917-1.917-7.039-7.039-8.956-8.956-.196-.196-.306-.461-.306-.738s.11-.542.306-.738c1.917-1.917 7.039-7.039 8.956-8.956zm-7.573 9.694 8.311 8.311 8.311-8.311-8.311-8.311z" fill-rule="nonzero"/></svg>
+              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.262 2.306c.196-.196.461-.306.738-.306s.542.11.738.306c1.917 1.917 7.039 7.039 8.956 8.956.196.196.306.461.306.738s-.11.542-.306.738c-1.917 1.917-7.039 7.039-8.956 8.956-.196.196-.461.306-.738.306s-.542-.11-.738-.306c-1.917-1.917-7.039-7.039-8.956-8.956-.196-.196-.306-.461-.306-.738s.11-.542.306-.738c1.917-1.917 7.039-7.039 8.956-8.956zm-7.573 9.694 8.311 8.311 8.311-8.311-8.311-8.311z" fillRule="nonzero"/></svg>
             </g>
           </symbol>
 
           <symbol id='starFilledSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
             <g transform='translate(-2.5,-2.5)'>
-            <svg clip-rule="evenodd" fillRule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.322 2.923c.126-.259.39-.423.678-.423.289 0 .552.164.678.423.974 1.998 2.65 5.44 2.65 5.44s3.811.524 6.022.829c.403.055.65.396.65.747 0 .19-.072.383-.231.536-1.61 1.538-4.382 4.191-4.382 4.191s.677 3.767 1.069 5.952c.083.462-.275.882-.742.882-.122 0-.244-.029-.355-.089-1.968-1.048-5.359-2.851-5.359-2.851s-3.391 1.803-5.359 2.851c-.111.06-.234.089-.356.089-.465 0-.825-.421-.741-.882.393-2.185 1.07-5.952 1.07-5.952s-2.773-2.653-4.382-4.191c-.16-.153-.232-.346-.232-.535 0-.352.249-.694.651-.748 2.211-.305 6.021-.829 6.021-.829s1.677-3.442 2.65-5.44z" fill-rule="nonzero"/></svg>
+            <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.322 2.923c.126-.259.39-.423.678-.423.289 0 .552.164.678.423.974 1.998 2.65 5.44 2.65 5.44s3.811.524 6.022.829c.403.055.65.396.65.747 0 .19-.072.383-.231.536-1.61 1.538-4.382 4.191-4.382 4.191s.677 3.767 1.069 5.952c.083.462-.275.882-.742.882-.122 0-.244-.029-.355-.089-1.968-1.048-5.359-2.851-5.359-2.851s-3.391 1.803-5.359 2.851c-.111.06-.234.089-.356.089-.465 0-.825-.421-.741-.882.393-2.185 1.07-5.952 1.07-5.952s-2.773-2.653-4.382-4.191c-.16-.153-.232-.346-.232-.535 0-.352.249-.694.651-.748 2.211-.305 6.021-.829 6.021-.829s1.677-3.442 2.65-5.44z" fillRule="nonzero"/></svg>
             </g>
           </symbol>
 
           <symbol id='circleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
             <g transform='translate(-2.5,-2.5)'>
-            <svg clip-rule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.998 2c5.517 0 9.997 4.48 9.997 9.998 0 5.517-4.48 9.997-9.997 9.997-5.518 0-9.998-4.48-9.998-9.997 0-5.518 4.48-9.998 9.998-9.998zm0 1.5c-4.69 0-8.498 3.808-8.498 8.498s3.808 8.497 8.498 8.497 8.497-3.807 8.497-8.497-3.807-8.498-8.497-8.498z" fill-rule="nonzero"/></svg>
+            <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.998 2c5.517 0 9.997 4.48 9.997 9.998 0 5.517-4.48 9.997-9.997 9.997-5.518 0-9.998-4.48-9.998-9.997 0-5.518 4.48-9.998 9.998-9.998zm0 1.5c-4.69 0-8.498 3.808-8.498 8.498s3.808 8.497 8.498 8.497 8.497-3.807 8.497-8.497-3.807-8.498-8.497-8.498z" fillRule="nonzero"/></svg>
             </g>
           </symbol>
 
           <symbol id='cubeFilledSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
             <g transform='translate(-2.5,-2.5)'>
-              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.514 6.61c-.317.179-.514.519-.514.887v8.95c0 .37.197.708.514.887 1.597.901 6.456 3.639 8.005 4.512.152.085.319.128.487.128.164 0 .328-.041.477-.123 1.549-.855 6.39-3.523 7.994-4.408.323-.177.523-.519.523-.891v-9.055c0-.368-.197-.708-.515-.887-1.595-.899-6.444-3.632-7.999-4.508-.151-.085-.319-.128-.486-.128-.168 0-.335.043-.486.128-1.555.876-6.405 3.609-8 4.508m15.986 2.115v7.525l-6.75 3.722v-7.578zm-15 7.425v-7.458l6.75 3.75v7.511zm.736-8.769 6.764-3.813 6.801 3.834-6.801 3.716z" fill-rule="nonzero"/></svg>
+              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.514 6.61c-.317.179-.514.519-.514.887v8.95c0 .37.197.708.514.887 1.597.901 6.456 3.639 8.005 4.512.152.085.319.128.487.128.164 0 .328-.041.477-.123 1.549-.855 6.39-3.523 7.994-4.408.323-.177.523-.519.523-.891v-9.055c0-.368-.197-.708-.515-.887-1.595-.899-6.444-3.632-7.999-4.508-.151-.085-.319-.128-.486-.128-.168 0-.335.043-.486.128-1.555.876-6.405 3.609-8 4.508m15.986 2.115v7.525l-6.75 3.722v-7.578zm-15 7.425v-7.458l6.75 3.75v7.511zm.736-8.769 6.764-3.813 6.801 3.834-6.801 3.716z" fillRule="nonzero"/></svg>
             </g>
           </symbol>
         </defs>
diff --git a/source/components/model/edges/edgeBase.tsx b/source/components/model/edges/edgeBase.tsx
index 1e79409..f161837 100644
--- a/source/components/model/edges/edgeBase.tsx
+++ b/source/components/model/edges/edgeBase.tsx
@@ -38,7 +38,7 @@ export const BodyEdgeComponent: React.FC<BodyEdgeComponentProps> = (props) => {
     return null;
   }
   
-  const {  sourceX, sourceY, targetX, targetY, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
+  const {  sourceX, sourceY, targetX, targetY, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode,false);
 
 
   const [edgePath, labelX, labelY, offsetX, offsetY] = getBezierPath({
@@ -125,14 +125,45 @@ function getNodeIntersection(intersectionNode:Node, targetNode:Node):XYPosition
   return { x, y };
 }
 
+function getNodeIntersectionForTargetPosition(intersectionNode:Node, targetPosition:XYPosition):XYPosition {
+
+
+
+  const intersectionNodeWidth = intersectionNode.measured?.width
+  const intersectionNodeHeight = intersectionNode.measured?.height
+
+  
+  if(intersectionNodeHeight === undefined || intersectionNodeWidth === undefined){
+    throw Error('width or height not measured')
+  }
+  
+  const intersectionNodePosition = getAbsolutePosition(intersectionNode)
+
+  //Set position correctly because subnode position is relative to parent
+  
+  const w = intersectionNodeWidth / 2;
+  const h = intersectionNodeHeight / 2;
+
+  const x2 = intersectionNodePosition.x + w;
+  const y2 = intersectionNodePosition.y + h;
+  const x1 = targetPosition.x 
+  const y1 = targetPosition.y 
+
+  const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
+  const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
+  const a = 1 / (Math.abs(xx1) + Math.abs(yy1));
+  const xx3 = a * xx1;
+  const yy3 = a * yy1;
+  const x = w * (xx3 + yy3) + x2;
+  const y = h * (-xx3 + yy3) + y2;
+
+  return { x, y };
+}
+
+
 // returns the position (top,right,bottom or right) passed node compared to the intersection point
 function getEdgePosition(node: Node, intersectionPoint:XYPosition): Position {
   
-  const nodeToLookAt = { ...node.position, ...node };
-  const nx = Math.round(nodeToLookAt.x!);
-  const ny = Math.round(nodeToLookAt.y!);
-  const px = Math.round(intersectionPoint.x);
-  const py = Math.round(intersectionPoint.y);
 
   if(node.position.x === undefined || node.position.y === undefined || node.measured?.height === undefined || node.measured.width === undefined){
     throw Error('position or measured dimension undefined')
@@ -165,9 +196,16 @@ function getEdgePosition(node: Node, intersectionPoint:XYPosition): Position {
 }
 
 // returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
-export function getEdgeParams(source:Node, target: Node) {
-  const sourceIntersectionPoint = getNodeIntersection(source, target);
-  const targetIntersectionPoint = getNodeIntersection(target, source);
+export function getEdgeParams(source:Node, target: Node, isBidirectionalEdge:boolean) {
+  let sourceIntersectionPoint = getNodeIntersection(source, target);
+  let targetIntersectionPoint = getNodeIntersection(target, source);
+
+
+  const degreeOfRotation = 20
+  if(isBidirectionalEdge){
+    sourceIntersectionPoint = rotatePositionOnNodeDegrees(source, sourceIntersectionPoint, degreeOfRotation)
+    targetIntersectionPoint = rotatePositionOnNodeDegrees(target, targetIntersectionPoint, -degreeOfRotation)
+  }
 
   const sourcePos = getEdgePosition(source, sourceIntersectionPoint);
   const targetPos = getEdgePosition(target, targetIntersectionPoint);
@@ -186,4 +224,24 @@ export function getEdgeParams(source:Node, target: Node) {
 function getAbsolutePosition(currentNode:Node):XYPosition{
   const internalNode= useInternalNode(currentNode.id)
   return internalNode?.internals.positionAbsolute ?? currentNode.position
+}
+
+function rotatePositionOnNodeDegrees(node:Node, intersectionPoint:XYPosition, angleInDegrees: number):XYPosition{
+  if(node.position.x === undefined || node.position.y === undefined || node.measured?.height === undefined || node.measured.width === undefined){
+    throw Error('position or measured dimension undefined')
+  }
+  const nodeMiddle:XYPosition = {x: node.position.x + 1/2 * node.measured.width, y:node.position.y + 1/2 * node.measured.height}
+  
+  const distanceToMiddle:XYPosition = {x: intersectionPoint.x - nodeMiddle.x, y: intersectionPoint.y - nodeMiddle.y}
+  let degreeFromMiddle  = 0
+  if(distanceToMiddle.x === 0){
+    degreeFromMiddle = distanceToMiddle.y >= 0 ?  Math.PI / 2 : Math.PI * 3/2 
+  } else {
+    degreeFromMiddle = Math.atan2(distanceToMiddle.y , distanceToMiddle.x)
+  }
+  console.log(degreeFromMiddle)
+  const newAngle = degreeFromMiddle + angleInDegrees / 360 * 2 * Math.PI
+  const lengthLongerFromMiddleOfNode = node.measured.height + node.measured.width
+  const newReferencePoint:XYPosition = {x: Math.cos(newAngle) * lengthLongerFromMiddleOfNode + nodeMiddle.x, y: Math.sin(newAngle) * lengthLongerFromMiddleOfNode + nodeMiddle.y} 
+  return getNodeIntersectionForTargetPosition(node, newReferencePoint)
 }
\ No newline at end of file
diff --git a/source/components/model/edges/multiEdge.tsx b/source/components/model/edges/multiEdge.tsx
index cc70029..2af97fb 100644
--- a/source/components/model/edges/multiEdge.tsx
+++ b/source/components/model/edges/multiEdge.tsx
@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { BaseEdge, Edge, EdgeLabelRenderer, EdgeMouseHandler, EdgeProps, EdgeTypes, InternalNode, XYPosition, getBezierPath, useInternalNode, useStore } from '@xyflow/react';
+import { BaseEdge, Edge, EdgeLabelRenderer, EdgeMouseHandler, EdgeProps, EdgeTypes, InternalNode, ReactFlowState, XYPosition, getBezierPath, useInternalNode, useStore } from '@xyflow/react';
 import { getEdgeParams } from "./edgeBase";
 import { EdgeType, EdgeTypeName } from "@eagleoutice/flowr/dataflow/graph/edge";
 
@@ -21,90 +21,99 @@ interface BodyMultiEdgeComponentProps {
     readonly arrowEnd?: boolean;
     readonly source: string;
     readonly target: string;
-  }
-  
-  export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = (props) => {
-    const sourceNode = useInternalNode(props.source)
-    const targetNode = useInternalNode(props.target)
+}
 
-    if (!sourceNode || !targetNode) {
-      return null;
-    }
-    
+export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = (props) => {
+  const sourceNode = useInternalNode(props.source)
+  const targetNode = useInternalNode(props.target)
 
-    const {  sourceX, sourceY, targetX, targetY, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
-    
-    const [edgePath, labelX, labelY, offsetX, offsetY] = getBezierPath({
-      sourceX: sourceX,
-      sourceY: sourceY,
-      sourcePosition: sourcePos,
-      targetPosition: targetPos,
-      targetX: targetX,
-      targetY: targetY,
-    });
-
-    //const labelPositionX = targetX - sourceX > 0 ? labelX + offsetX / 2 : labelX - offsetX / 2 
-    //const labelPositionY = targetY - sourceY > 0 ? labelY + offsetY / 2 : labelY - offsetY / 2
-    const defaultEdgeStyle: React.CSSProperties = {stroke: 'black', pointerEvents: 'none', cursor: 'none'}
-    const arrowEnd = true
-    const arrowStart = false
-
-    let label = ''
-    for(const singleLabel of (props.standardEdgeInformation.data?.edgeTypes as string[] ?? [])){
-        label += singleLabel + ' '
-    }
-    /*
-      <BaseEdge
-        id={hoverOverEdgeId} //Interaction Edge
-        path={edgePath} 
-        style= {{strokeWidth: 10, visibility: 'hidden', pointerEvents: 'all', cursor: 'pointer'}} 
-      />
-      <BaseEdge
-        id={props.standardEdgeInformation.id} //Shown Edge
-        path={edgePath} 
-        style= {defaultEdgeStyle}
-        markerEnd={arrowEnd ? 'url(#triangle)' : undefined} markerStart={arrowStart ? 'url(#triangle)' : undefined} 
-      />
-    */ 
-    const edgeLabelId = props.standardEdgeInformation.id + '-edgeLabel'
-    const hoverOverEdgeId = props.standardEdgeInformation.id + '-hoverover-interactive'
-    var cssRule = `body:has(#${hoverOverEdgeId}:hover) #${edgeLabelId} {visibility: visible;}`
-    
-    const givenEdgeTypes = props.standardEdgeInformation.data?.edgeTypes as Set<EdgeTypeName> ?? new Set<EdgeTypeName>()
-    return (
-      <>
-      <BaseEdge
-        id={hoverOverEdgeId} //Interaction Edge
-        path={edgePath} 
-        style= {{strokeWidth: 10, visibility: 'hidden', pointerEvents: 'all', cursor: 'pointer'}} 
-      />
-      <BaseEdge
-        id={props.standardEdgeInformation.id} //Shown Edge
-        path={edgePath} 
-        style= {defaultEdgeStyle}
-        markerEnd={arrowEnd ? 'url(#triangle)' : undefined} markerStart={arrowStart ? 'url(#triangle)' : undefined} 
-      />
-      <EdgeSymbolComponent id={props.standardEdgeInformation.id} edgeTypes={givenEdgeTypes} edgePath={edgePath}/>
-      <style>
-        {cssRule}
-      </style>
-      <EdgeLabelRenderer>
-        <div
-        id = {edgeLabelId}
-        style={{
-          position: 'absolute',
-          transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-          fontSize: 12,
-        }}
-        className="nodrag nopan edge-label"
-        >
-            {label}
-        </div>
-        
-      </EdgeLabelRenderer>
-      </>
+  if (!sourceNode || !targetNode) {
+    return null;
+  }
+
+  const isBiDirectionEdge = useStore((s: ReactFlowState) => {
+    const edgeExists = s.edges.some(
+      (e) =>
+        (e.source === props.standardEdgeInformation.target && e.target === props.standardEdgeInformation.source) ||
+        (e.target === props.standardEdgeInformation.source && e.source === props.standardEdgeInformation.target),
     );
+
+    return edgeExists;
+  });
+
+  const {  sourceX, sourceY, targetX, targetY, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode, isBiDirectionEdge);
+
+  const [edgePath, labelX, labelY, offsetX, offsetY] = getBezierPath({
+    sourceX: sourceX,
+    sourceY: sourceY,
+    sourcePosition: sourcePos,
+    targetPosition: targetPos,
+    targetX: targetX,
+    targetY: targetY,
+  });
+
+  //const labelPositionX = targetX - sourceX > 0 ? labelX + offsetX / 2 : labelX - offsetX / 2 
+  //const labelPositionY = targetY - sourceY > 0 ? labelY + offsetY / 2 : labelY - offsetY / 2
+  const defaultEdgeStyle: React.CSSProperties = {stroke: 'black', pointerEvents: 'none', cursor: 'none'}
+  const arrowEnd = true
+  const arrowStart = false
+
+  let label = ''
+  for(const singleLabel of (props.standardEdgeInformation.data?.edgeTypes as string[] ?? [])){
+      label += singleLabel + ' '
   }
+  /*
+    <BaseEdge
+      id={hoverOverEdgeId} //Interaction Edge
+      path={edgePath} 
+      style= {{strokeWidth: 10, visibility: 'hidden', pointerEvents: 'all', cursor: 'pointer'}} 
+    />
+    <BaseEdge
+      id={props.standardEdgeInformation.id} //Shown Edge
+      path={edgePath} 
+      style= {defaultEdgeStyle}
+      markerEnd={arrowEnd ? 'url(#triangle)' : undefined} markerStart={arrowStart ? 'url(#triangle)' : undefined} 
+    />
+  */ 
+  const edgeLabelId = props.standardEdgeInformation.id + '-edgeLabel'
+  const hoverOverEdgeId = props.standardEdgeInformation.id + '-hoverover-interactive'
+  var cssRule = `body:has(#${hoverOverEdgeId}:hover) #${edgeLabelId} {visibility: visible;}`
+  
+  const givenEdgeTypes = props.standardEdgeInformation.data?.edgeTypes as Set<EdgeTypeName> ?? new Set<EdgeTypeName>()
+  return (
+    <>
+    <BaseEdge
+      id={hoverOverEdgeId} //Interaction Edge
+      path={edgePath} 
+      style= {{strokeWidth: 10, visibility: 'hidden', pointerEvents: 'all', cursor: 'pointer'}} 
+    />
+    <BaseEdge
+      id={props.standardEdgeInformation.id} //Shown Edge
+      path={edgePath} 
+      style= {defaultEdgeStyle}
+      markerEnd={arrowEnd ? 'url(#triangle)' : undefined} markerStart={arrowStart ? 'url(#triangle)' : undefined} 
+    />
+    <EdgeSymbolComponent id={props.standardEdgeInformation.id} edgeTypes={givenEdgeTypes} edgePath={edgePath}/>
+    <style>
+      {cssRule}
+    </style>
+    <EdgeLabelRenderer>
+      <div
+      id = {edgeLabelId}
+      style={{
+        position: 'absolute',
+        transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+        fontSize: 12,
+      }}
+      className="nodrag nopan edge-label"
+      >
+          {label}
+      </div>
+      
+    </EdgeLabelRenderer>
+    </>
+  );
+}
 
 //see also https://en.wikipedia.org/wiki/B%C3%A9zier_curve
 /**
@@ -250,7 +259,7 @@ const EdgeSymbolComponent : React.FC<EdgeSymbolComponentProps> = (props) => {
   let useArray:JSX.Element[] = []
   markerMap.forEach((edgeSymbolId,offsetIndex) => {
     const pointsOfMarker = pointsMap.get(offsetIndex)
-    const useBlockArray = pointsOfMarker?.map((point) =>{return (<use id = {props.id + '-' + point.x + '-' + point.y} href={`#${edgeSymbolId}`} x={point.x} y={point.y} />)}) ?? []
+    const useBlockArray = pointsOfMarker?.map((point) =>{return (<use key = {props.id + '-' + point.x + '-' + point.y} id = {props.id + '-' + point.x + '-' + point.y} href={`#${edgeSymbolId}`} x={point.x} y={point.y} />)}) ?? []
     useArray = useArray.concat(useBlockArray)
   })
   
diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index 2c867a4..34509c6 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -22,7 +22,7 @@ function FloatingConnectionLine(props:ConnectionLineComponentProps) {
     data:{}
   };
 
-  const { sourceX, sourceY } = getEdgeParams(fromNode, targetNode);
+  const { sourceX, sourceY } = getEdgeParams(fromNode, targetNode, false);
   const [edgePath] = getBezierPath({
     sourceX: sourceX,
     sourceY: sourceY,

From 423ea984eb6ecf0b692998214bf40e042b7fcfa2 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Wed, 24 Jul 2024 17:36:19 +0200
Subject: [PATCH 57/75] fix: forgotten console.log statement

---
 source/components/model/edges/edgeBase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/components/model/edges/edgeBase.tsx b/source/components/model/edges/edgeBase.tsx
index f161837..b003f72 100644
--- a/source/components/model/edges/edgeBase.tsx
+++ b/source/components/model/edges/edgeBase.tsx
@@ -239,7 +239,7 @@ function rotatePositionOnNodeDegrees(node:Node, intersectionPoint:XYPosition, an
   } else {
     degreeFromMiddle = Math.atan2(distanceToMiddle.y , distanceToMiddle.x)
   }
-  console.log(degreeFromMiddle)
+  
   const newAngle = degreeFromMiddle + angleInDegrees / 360 * 2 * Math.PI
   const lengthLongerFromMiddleOfNode = node.measured.height + node.measured.width
   const newReferencePoint:XYPosition = {x: Math.cos(newAngle) * lengthLongerFromMiddleOfNode + nodeMiddle.x, y: Math.sin(newAngle) * lengthLongerFromMiddleOfNode + nodeMiddle.y} 

From 7c0d9cba3d83b8d0b2f6d0a3572f0a91c30e4cac Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Mon, 29 Jul 2024 16:37:08 +0200
Subject: [PATCH 58/75] feat: fill legend with node types and edge types

---
 css/main.css                         |  2 +-
 source/components/legendComonent.tsx | 58 +++++++++++++++++++++++++++-
 2 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/css/main.css b/css/main.css
index 518fc00..c567b0d 100644
--- a/css/main.css
+++ b/css/main.css
@@ -62,7 +62,7 @@ svg {
 	left: 0;
 	bottom: 0;
 
-	width: 65vw;
+	width: 30vw;
 	height: 30vh;
 	background: rgba(255, 255, 255, .9);
 	backdrop-filter: blur(5px);
diff --git a/source/components/legendComonent.tsx b/source/components/legendComonent.tsx
index 09a7466..e6b34d7 100644
--- a/source/components/legendComonent.tsx
+++ b/source/components/legendComonent.tsx
@@ -1,3 +1,5 @@
+import { edgeTypeToSymbolIdMapper } from "./model/edges/multiEdge";
+import { SideEffectOnCallEdge } from "./model/edges/sideEffectOnCallEdge";
 
 
 interface LegendComponentProps {
@@ -15,12 +17,66 @@ export function slideOutLegend(){
 }
 
 export const LegendComponent: React.FC<LegendComponentProps> = (props) => {
+    const readsEdgeSymbolId = edgeTypeToSymbolIdMapper('reads')
+    const definedByEdgeSymbolId = edgeTypeToSymbolIdMapper('defined-by')
+    const callsEdgeSymbolId = edgeTypeToSymbolIdMapper('calls')
+    const returnsEdgeSymbolId = edgeTypeToSymbolIdMapper('returns')
+    const definesOnCallEdgeSymbolId = edgeTypeToSymbolIdMapper('defines-on-call')
+    const definedByOnCallEdgeSymbolId = edgeTypeToSymbolIdMapper('defined-by-on-call')
+    const argumentEdgeSymbolId = edgeTypeToSymbolIdMapper('argument')
+    const sideEffectOnCallEdge = edgeTypeToSymbolIdMapper('side-effect-on-call')
+    const nonStandardEvaluationEdge = edgeTypeToSymbolIdMapper('non-standard-evaluation')
 
     return (
         <div className = 'slide-in-legend' id = 'slide-in-legend' >
+            <div className='variable-definition-node' style={{position: 'absolute',top: 0,  left: 10, display: 'inline-block'}}>variable-definition</div>
+            <div className='function-definition-node' style={{position: 'absolute',top: 38,  left: 4, display: 'inline-block'}}>function-definition</div>
+            <div className='value-node' style={{position: 'absolute',top: 90,  left: 10, display: 'inline-block'}}>value-node</div>
+            <div className='function-call-node' style={{position: 'absolute',top: 130,  left: 10, display: 'inline-block'}}>function-call</div>
+            <div className='use-node' style={{position: 'absolute',top: 170,  left: 10, display: 'inline-block'}}>use</div>
+            <div className='exit-point-node' style={{position: 'absolute',top: 210,  left: 10, display: 'inline-block'}}>exit-point</div>
+            
+            <EdgeLegendComponent symbolId={readsEdgeSymbolId} edgeText='reads' fromTop={0} fromLeft={200}/>
+            <EdgeLegendComponent symbolId={definedByEdgeSymbolId} edgeText='defined-by' fromTop={20} fromLeft={200}/>
+            <EdgeLegendComponent symbolId={callsEdgeSymbolId} edgeText='calls' fromTop={40} fromLeft={200}/>
+            <EdgeLegendComponent symbolId={returnsEdgeSymbolId} edgeText='returns' fromTop={60} fromLeft={200}/>
+            <EdgeLegendComponent symbolId={definesOnCallEdgeSymbolId} edgeText='defines-on-call' fromTop={80} fromLeft={200}/>
+            <EdgeLegendComponent symbolId={definedByOnCallEdgeSymbolId} edgeText='defined-by-on-call' fromTop={100} fromLeft={200}/>
+            <EdgeLegendComponent symbolId={argumentEdgeSymbolId} edgeText='argument' fromTop={120} fromLeft={200}/>
+            <EdgeLegendComponent symbolId={sideEffectOnCallEdge} edgeText='side-effect-on-call' fromTop={140} fromLeft={200}/>
+            <EdgeLegendComponent symbolId={nonStandardEvaluationEdge} edgeText='non-standard-evaluation' fromTop={160} fromLeft={200}/>
             <div id = 'legend-close-button-div'>
                 <button className = {'button-close-legend'} onClick = {slideOutLegend} >X</button>
             </div>
         </div>
     )
-}
\ No newline at end of file
+}
+
+interface SymbolComponentProps {
+    symbolId: string
+}
+
+const SymbolComponent: React.FC<SymbolComponentProps> = (props) => {
+    return(<>
+        <use key = {'legend-symbol-1' + props.symbolId} href = {`#${props.symbolId}`} x = {20} y = {10}></use>
+        <use key = {'legend-symbol-2' + props.symbolId} href = {`#${props.symbolId}`} x = {40} y = {10}></use>
+        <use key = {'legend-symbol-3' + props.symbolId} href = {`#${props.symbolId}`} x = {60} y = {10}></use>
+    </>    
+    )
+}
+
+interface EdgeLegendComponentProps {
+    symbolId: string
+    edgeText:string
+    fromTop: number
+    fromLeft: number
+}
+
+const EdgeLegendComponent: React.FC<EdgeLegendComponentProps> = (props) => {
+    return(<svg style={{position: 'absolute',top: props.fromTop,  left:props.fromLeft}}>
+        <path d='m0 10 l80 0' markerEnd='url(#triangle)' style={{stroke:'black', strokeWidth: 1}}></path>
+        <SymbolComponent symbolId= {props.symbolId}/>
+        <text x = {92} y = {15}>{props.edgeText}</text>
+    </svg>)
+}
+

From e40ad2b016f14e28be46430a4fb8c2573aaf7e95 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Mon, 29 Jul 2024 19:06:39 +0200
Subject: [PATCH 59/75] feat: add legend interactivity with css rules

---
 css/main.css                                |  1 -
 source/components/legendComonent.tsx        | 65 ++++++++++++++++++---
 source/components/model/edges/multiEdge.tsx | 22 +++++--
 3 files changed, 76 insertions(+), 12 deletions(-)

diff --git a/css/main.css b/css/main.css
index c567b0d..494c08e 100644
--- a/css/main.css
+++ b/css/main.css
@@ -78,7 +78,6 @@ svg {
 	transform: translateX(0);
 	filter: drop-shadow(0px 0px 8px gray);
 }
-
 .function-definition-node {
 	--b: 3px;   /* border thickness */
 	--s: .45em; /* size of the corner */
diff --git a/source/components/legendComonent.tsx b/source/components/legendComonent.tsx
index e6b34d7..ddf7a84 100644
--- a/source/components/legendComonent.tsx
+++ b/source/components/legendComonent.tsx
@@ -17,6 +17,42 @@ export function slideOutLegend(){
 }
 
 export const LegendComponent: React.FC<LegendComponentProps> = (props) => {
+    //make cssRules
+    const nodeTypes = ['variable-definition-node', 'function-definition-node','value-node', 'function-call-node', 'use-node','exit-point-node']
+    const edgeTypes = ['reads', 'defined-by','calls','returns','defines-on-call','defined-by-on-call', 'argument', 'side-effect-on-call', 'non-standard-evaluation']
+    const tempRule = 'body:has(.reads-legend-edge-interactive:hover) .function-call-node {opacity:20%}body:has(.reads-legend-edge-interactive:hover) .use-node{opacity:20%}'
+    let cssRule = ''
+    nodeTypes.forEach((hoveredNodeType) => {
+        nodeTypes.forEach((toHideNodeType) => {
+            if(hoveredNodeType === toHideNodeType){
+                return
+            }
+            cssRule += `body:has(.${hoveredNodeType}-legend:hover) .${toHideNodeType} {opacity: 20%}`
+        })
+        edgeTypes.forEach((toHideEdgeType) => {
+            //hide edge line
+            cssRule += `body:has(.${hoveredNodeType}-legend:hover) .${toHideEdgeType}-edge {opacity: 20%}`
+            //hide edge symbol
+            cssRule += `body:has(.${hoveredNodeType}-legend:hover) .${toHideEdgeType}-edge-symbol {opacity: 20%}`
+        })
+        //cssRule += `body:has(.${hoveredNodeType}-legend:hover) .${hoveredNodeType} {opacity: 100%}`
+    })
+    edgeTypes.forEach((hoveredEdgeType)=>{
+        nodeTypes.forEach((toHideNodeType)=> {
+            cssRule += `body:has(.${hoveredEdgeType}-legend-edge-interactive:hover) .${toHideNodeType} {opacity: 20%}`
+        })
+        edgeTypes.forEach((toHideEdgeType) => {
+            if(hoveredEdgeType === toHideEdgeType){
+                return
+            }
+            //hide edge line
+            cssRule += `body:has(.${hoveredEdgeType}-legend-edge-interactive:hover) .${toHideEdgeType}-edge {opacity: 20%}`
+            //hide edge symbol
+            cssRule += `body:has(.${hoveredEdgeType}-legend-edge-interactive:hover) .${toHideEdgeType}-edge-symbol {opacity: 20%}`
+        })
+        cssRule += `body:has(.${hoveredEdgeType}-legend-edge-interactive:hover) .${hoveredEdgeType}-edge {opacity: 100%}`
+    })
+    
     const readsEdgeSymbolId = edgeTypeToSymbolIdMapper('reads')
     const definedByEdgeSymbolId = edgeTypeToSymbolIdMapper('defined-by')
     const callsEdgeSymbolId = edgeTypeToSymbolIdMapper('calls')
@@ -29,12 +65,12 @@ export const LegendComponent: React.FC<LegendComponentProps> = (props) => {
 
     return (
         <div className = 'slide-in-legend' id = 'slide-in-legend' >
-            <div className='variable-definition-node' style={{position: 'absolute',top: 0,  left: 10, display: 'inline-block'}}>variable-definition</div>
-            <div className='function-definition-node' style={{position: 'absolute',top: 38,  left: 4, display: 'inline-block'}}>function-definition</div>
-            <div className='value-node' style={{position: 'absolute',top: 90,  left: 10, display: 'inline-block'}}>value-node</div>
-            <div className='function-call-node' style={{position: 'absolute',top: 130,  left: 10, display: 'inline-block'}}>function-call</div>
-            <div className='use-node' style={{position: 'absolute',top: 170,  left: 10, display: 'inline-block'}}>use</div>
-            <div className='exit-point-node' style={{position: 'absolute',top: 210,  left: 10, display: 'inline-block'}}>exit-point</div>
+            <div className='variable-definition-node variable-definition-node-legend' style={{position: 'absolute',top: 0,  left: 10, display: 'inline-block'}}>variable-definition</div>
+            <div className='function-definition-node function-definition-node-legend' style={{position: 'absolute',top: 38,  left: 4, display: 'inline-block'}}>function-definition</div>
+            <div className='value-node value-node-legend' style={{position: 'absolute',top: 90,  left: 10, display: 'inline-block'}}>value-node</div>
+            <div className='function-call-node function-call-node-legend' style={{position: 'absolute',top: 130,  left: 10, display: 'inline-block'}}>function-call</div>
+            <div className='use-node use-node-legend' style={{position: 'absolute',top: 170,  left: 10, display: 'inline-block'}}>use</div>
+            <div className='exit-point-node exit-point-node-legend' style={{position: 'absolute',top: 210,  left: 10, display: 'inline-block'}}>exit-point</div>
             
             <EdgeLegendComponent symbolId={readsEdgeSymbolId} edgeText='reads' fromTop={0} fromLeft={200}/>
             <EdgeLegendComponent symbolId={definedByEdgeSymbolId} edgeText='defined-by' fromTop={20} fromLeft={200}/>
@@ -48,6 +84,9 @@ export const LegendComponent: React.FC<LegendComponentProps> = (props) => {
             <div id = 'legend-close-button-div'>
                 <button className = {'button-close-legend'} onClick = {slideOutLegend} >X</button>
             </div>
+            <style>
+                {cssRule}
+            </style>
         </div>
     )
 }
@@ -74,9 +113,21 @@ interface EdgeLegendComponentProps {
 
 const EdgeLegendComponent: React.FC<EdgeLegendComponentProps> = (props) => {
     return(<svg style={{position: 'absolute',top: props.fromTop,  left:props.fromLeft}}>
-        <path d='m0 10 l80 0' markerEnd='url(#triangle)' style={{stroke:'black', strokeWidth: 1}}></path>
+        <path className={props.edgeText + '-legend-edge'} d='m0 10 l80 0' markerEnd='url(#triangle)' style={{stroke:'black', strokeWidth: 1}}></path>
+        <path className = {props.edgeText + '-legend-edge-interactive'} d='m0 10 l80 0' style={{pointerEvents:'all', strokeWidth: 10}}></path>
         <SymbolComponent symbolId= {props.symbolId}/>
         <text x = {92} y = {15}>{props.edgeText}</text>
     </svg>)
 }
 
+interface OpacityRuleComponentProps{
+
+}
+
+const OpacityRuleComponent: React.FC<OpacityRuleComponentProps> = (props) => {
+    const nodeTypes = ['variable-definition-node', 'function-definition-node','value-node', 'function-call-node', 'use-node']
+ 
+ return(<style>
+          
+ </style>)   
+}
\ No newline at end of file
diff --git a/source/components/model/edges/multiEdge.tsx b/source/components/model/edges/multiEdge.tsx
index 2af97fb..6adb48d 100644
--- a/source/components/model/edges/multiEdge.tsx
+++ b/source/components/model/edges/multiEdge.tsx
@@ -80,6 +80,10 @@ export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = (pr
   var cssRule = `body:has(#${hoverOverEdgeId}:hover) #${edgeLabelId} {visibility: visible;}`
   
   const givenEdgeTypes = props.standardEdgeInformation.data?.edgeTypes as Set<EdgeTypeName> ?? new Set<EdgeTypeName>()
+  //insert respective className
+  let classNameString = ''
+  givenEdgeTypes.forEach((edgeTypeName) => {classNameString += ' ' + edgeTypeName + '-edge'})
+  classNameString = classNameString.slice(1)
   return (
     <>
     <BaseEdge
@@ -89,6 +93,7 @@ export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = (pr
     />
     <BaseEdge
       id={props.standardEdgeInformation.id} //Shown Edge
+      className={classNameString}
       path={edgePath} 
       style= {defaultEdgeStyle}
       markerEnd={arrowEnd ? 'url(#triangle)' : undefined} markerStart={arrowStart ? 'url(#triangle)' : undefined} 
@@ -123,7 +128,7 @@ export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = (pr
  * @param startControlPoint 
  * @param endControlPoint 
  * @param endingPoint 
- * @returns Point on BezierCurve equal to the percentage given in t
+ * @returns Point on BezierCurve 
  */
 function bezierCurve(t:number, startingPoint:XYPosition, startControlPoint:XYPosition, endControlPoint: XYPosition, endingPoint:XYPosition):XYPosition {
   return ({
@@ -149,6 +154,15 @@ function calculateLengthOfBezierCurve(startingPoint:XYPosition, startControlPoin
   return intermediateResult.sum
 }
 
+/**
+ * calculates the percentage wise (in relation to length) point on bezier curve
+ * @param t 0 <= t <= 1
+ * @param startingPoint 
+ * @param startControlPoint 
+ * @param endControlPoint 
+ * @param endingPoint 
+ * @returns point which is approximately t percent through the bezier curve
+ */
 function linearPercentageBezierCurve(t:number, startingPoint:XYPosition, startControlPoint:XYPosition, endControlPoint: XYPosition, endingPoint:XYPosition):XYPosition{
   const curveLengthTotal = calculateLengthOfBezierCurve(startingPoint, startControlPoint, endControlPoint, endingPoint)
   const rangeForSamplePoints = range(0,1, amountOfSamplePointsForLength, true)
@@ -230,7 +244,7 @@ const EdgeSymbolComponent : React.FC<EdgeSymbolComponentProps> = (props) => {
   const pointsMap = new Map<number, XYPosition[]>()
   let indexOfMarkerType = 0
   for(let value of props.edgeTypes){
-    markerMap.set(indexOfMarkerType, edgeTypeToSymbolIdMapper(value))
+    markerMap.set(indexOfMarkerType, value)
 
     //evenly space markerPoints
     let percentageArray: number[] = []
@@ -257,9 +271,9 @@ const EdgeSymbolComponent : React.FC<EdgeSymbolComponentProps> = (props) => {
   
   //create use elements
   let useArray:JSX.Element[] = []
-  markerMap.forEach((edgeSymbolId,offsetIndex) => {
+  markerMap.forEach((edgeType,offsetIndex) => {
     const pointsOfMarker = pointsMap.get(offsetIndex)
-    const useBlockArray = pointsOfMarker?.map((point) =>{return (<use key = {props.id + '-' + point.x + '-' + point.y} id = {props.id + '-' + point.x + '-' + point.y} href={`#${edgeSymbolId}`} x={point.x} y={point.y} />)}) ?? []
+    const useBlockArray = pointsOfMarker?.map((point) =>{return (<use className = {`${edgeType}-edge-symbol`}key = {props.id + '-' + point.x + '-' + point.y} id = {props.id + '-' + point.x + '-' + point.y} href={`#${edgeTypeToSymbolIdMapper(edgeType)}`} x={point.x} y={point.y} />)}) ?? []
     useArray = useArray.concat(useBlockArray)
   })
   

From 47076a74e7d4ee5fa6329fdc060b917686a30338 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Mon, 29 Jul 2024 19:11:08 +0200
Subject: [PATCH 60/75] refactor: remove unused component

---
 source/components/legendComonent.tsx | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/source/components/legendComonent.tsx b/source/components/legendComonent.tsx
index ddf7a84..68e2998 100644
--- a/source/components/legendComonent.tsx
+++ b/source/components/legendComonent.tsx
@@ -119,15 +119,3 @@ const EdgeLegendComponent: React.FC<EdgeLegendComponentProps> = (props) => {
         <text x = {92} y = {15}>{props.edgeText}</text>
     </svg>)
 }
-
-interface OpacityRuleComponentProps{
-
-}
-
-const OpacityRuleComponent: React.FC<OpacityRuleComponentProps> = (props) => {
-    const nodeTypes = ['variable-definition-node', 'function-definition-node','value-node', 'function-call-node', 'use-node']
- 
- return(<style>
-          
- </style>)   
-}
\ No newline at end of file

From 02529287fd234ef80a2587ce922761aeb9deca65 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Tue, 30 Jul 2024 13:08:41 +0200
Subject: [PATCH 61/75] refactor: edges interactivity

---
 source/components/legendComonent.tsx | 53 ++++++++++++++++------------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/source/components/legendComonent.tsx b/source/components/legendComonent.tsx
index 68e2998..bcd8d4a 100644
--- a/source/components/legendComonent.tsx
+++ b/source/components/legendComonent.tsx
@@ -22,35 +22,37 @@ export const LegendComponent: React.FC<LegendComponentProps> = (props) => {
     const edgeTypes = ['reads', 'defined-by','calls','returns','defines-on-call','defined-by-on-call', 'argument', 'side-effect-on-call', 'non-standard-evaluation']
     const tempRule = 'body:has(.reads-legend-edge-interactive:hover) .function-call-node {opacity:20%}body:has(.reads-legend-edge-interactive:hover) .use-node{opacity:20%}'
     let cssRule = ''
+    const greyOutStyle = '{opacity: 20%}'
+    const keepNormalStyle = '{opacity: 100%}'
     nodeTypes.forEach((hoveredNodeType) => {
         nodeTypes.forEach((toHideNodeType) => {
             if(hoveredNodeType === toHideNodeType){
                 return
             }
-            cssRule += `body:has(.${hoveredNodeType}-legend:hover) .${toHideNodeType} {opacity: 20%}`
+            cssRule += `body:has(.${hoveredNodeType}-legend:hover) .${toHideNodeType} ${greyOutStyle}`
         })
         edgeTypes.forEach((toHideEdgeType) => {
             //hide edge line
-            cssRule += `body:has(.${hoveredNodeType}-legend:hover) .${toHideEdgeType}-edge {opacity: 20%}`
+            cssRule += `body:has(.${hoveredNodeType}-legend:hover) .${toHideEdgeType}-edge ${greyOutStyle}`
             //hide edge symbol
-            cssRule += `body:has(.${hoveredNodeType}-legend:hover) .${toHideEdgeType}-edge-symbol {opacity: 20%}`
+            cssRule += `body:has(.${hoveredNodeType}-legend:hover) .${toHideEdgeType}-edge-symbol ${greyOutStyle}`
         })
         //cssRule += `body:has(.${hoveredNodeType}-legend:hover) .${hoveredNodeType} {opacity: 100%}`
     })
     edgeTypes.forEach((hoveredEdgeType)=>{
         nodeTypes.forEach((toHideNodeType)=> {
-            cssRule += `body:has(.${hoveredEdgeType}-legend-edge-interactive:hover) .${toHideNodeType} {opacity: 20%}`
+            cssRule += `body:has(.${hoveredEdgeType}-legend-edge-interactive:hover) .${toHideNodeType} ${greyOutStyle}`
         })
         edgeTypes.forEach((toHideEdgeType) => {
             if(hoveredEdgeType === toHideEdgeType){
                 return
             }
             //hide edge line
-            cssRule += `body:has(.${hoveredEdgeType}-legend-edge-interactive:hover) .${toHideEdgeType}-edge {opacity: 20%}`
+            cssRule += `body:has(.${hoveredEdgeType}-legend-edge-interactive:hover) .${toHideEdgeType}-edge ${greyOutStyle}`
             //hide edge symbol
-            cssRule += `body:has(.${hoveredEdgeType}-legend-edge-interactive:hover) .${toHideEdgeType}-edge-symbol {opacity: 20%}`
+            cssRule += `body:has(.${hoveredEdgeType}-legend-edge-interactive:hover) .${toHideEdgeType}-edge-symbol ${greyOutStyle}`
         })
-        cssRule += `body:has(.${hoveredEdgeType}-legend-edge-interactive:hover) .${hoveredEdgeType}-edge {opacity: 100%}`
+        cssRule += `body:has(.${hoveredEdgeType}-legend-edge-interactive:hover) .${hoveredEdgeType}-edge ${keepNormalStyle}`
     })
     
     const readsEdgeSymbolId = edgeTypeToSymbolIdMapper('reads')
@@ -72,15 +74,15 @@ export const LegendComponent: React.FC<LegendComponentProps> = (props) => {
             <div className='use-node use-node-legend' style={{position: 'absolute',top: 170,  left: 10, display: 'inline-block'}}>use</div>
             <div className='exit-point-node exit-point-node-legend' style={{position: 'absolute',top: 210,  left: 10, display: 'inline-block'}}>exit-point</div>
             
-            <EdgeLegendComponent symbolId={readsEdgeSymbolId} edgeText='reads' fromTop={0} fromLeft={200}/>
-            <EdgeLegendComponent symbolId={definedByEdgeSymbolId} edgeText='defined-by' fromTop={20} fromLeft={200}/>
-            <EdgeLegendComponent symbolId={callsEdgeSymbolId} edgeText='calls' fromTop={40} fromLeft={200}/>
-            <EdgeLegendComponent symbolId={returnsEdgeSymbolId} edgeText='returns' fromTop={60} fromLeft={200}/>
-            <EdgeLegendComponent symbolId={definesOnCallEdgeSymbolId} edgeText='defines-on-call' fromTop={80} fromLeft={200}/>
-            <EdgeLegendComponent symbolId={definedByOnCallEdgeSymbolId} edgeText='defined-by-on-call' fromTop={100} fromLeft={200}/>
-            <EdgeLegendComponent symbolId={argumentEdgeSymbolId} edgeText='argument' fromTop={120} fromLeft={200}/>
-            <EdgeLegendComponent symbolId={sideEffectOnCallEdge} edgeText='side-effect-on-call' fromTop={140} fromLeft={200}/>
-            <EdgeLegendComponent symbolId={nonStandardEvaluationEdge} edgeText='non-standard-evaluation' fromTop={160} fromLeft={200}/>
+            <EdgeLegendComponent symbolId={readsEdgeSymbolId} edgeType = 'reads' edgeText='reads' fromTop={0} fromLeft={200}/>
+            <EdgeLegendComponent symbolId={definedByEdgeSymbolId} edgeType='defined-by' edgeText='defined-by' fromTop={20} fromLeft={200}/>
+            <EdgeLegendComponent symbolId={callsEdgeSymbolId} edgeType='calls' edgeText='calls' fromTop={40} fromLeft={200}/>
+            <EdgeLegendComponent symbolId={returnsEdgeSymbolId} edgeType='returns' edgeText='returns' fromTop={60} fromLeft={200}/>
+            <EdgeLegendComponent symbolId={definesOnCallEdgeSymbolId} edgeType='defines-on-call' edgeText='defines-on-call' fromTop={80} fromLeft={200}/>
+            <EdgeLegendComponent symbolId={definedByOnCallEdgeSymbolId} edgeType='defined-by-on-call' edgeText='defined-by-on-call' fromTop={100} fromLeft={200}/>
+            <EdgeLegendComponent symbolId={argumentEdgeSymbolId} edgeType='argument' edgeText='argument' fromTop={120} fromLeft={200}/>
+            <EdgeLegendComponent symbolId={sideEffectOnCallEdge} edgeType='side-effect-on-call' edgeText='side-effect-on-call' fromTop={140} fromLeft={200}/>
+            <EdgeLegendComponent symbolId={nonStandardEvaluationEdge} edgeType='non-standard-evaluation' edgeText='non-standard-evaluation' fromTop={160} fromLeft={200}/>
             <div id = 'legend-close-button-div'>
                 <button className = {'button-close-legend'} onClick = {slideOutLegend} >X</button>
             </div>
@@ -93,18 +95,20 @@ export const LegendComponent: React.FC<LegendComponentProps> = (props) => {
 
 interface SymbolComponentProps {
     symbolId: string
+    edgeType:string
 }
 
 const SymbolComponent: React.FC<SymbolComponentProps> = (props) => {
     return(<>
-        <use key = {'legend-symbol-1' + props.symbolId} href = {`#${props.symbolId}`} x = {20} y = {10}></use>
-        <use key = {'legend-symbol-2' + props.symbolId} href = {`#${props.symbolId}`} x = {40} y = {10}></use>
-        <use key = {'legend-symbol-3' + props.symbolId} href = {`#${props.symbolId}`} x = {60} y = {10}></use>
+        <use className = {props.edgeType + '-edge-symbol'} key = {'legend-symbol-1' + props.symbolId} href = {`#${props.symbolId}`} x = {20} y = {10}></use>
+        <use className = {props.edgeType + '-edge-symbol'} key = {'legend-symbol-2' + props.symbolId} href = {`#${props.symbolId}`} x = {40} y = {10}></use>
+        <use className = {props.edgeType + '-edge-symbol'} key = {'legend-symbol-3' + props.symbolId} href = {`#${props.symbolId}`} x = {60} y = {10}></use>
     </>    
     )
 }
 
 interface EdgeLegendComponentProps {
+    edgeType:string
     symbolId: string
     edgeText:string
     fromTop: number
@@ -112,10 +116,13 @@ interface EdgeLegendComponentProps {
 }
 
 const EdgeLegendComponent: React.FC<EdgeLegendComponentProps> = (props) => {
+    const classNameEdge = props.edgeType + '-edge'
+    const classNameInteractiveEdge = props.edgeType + '-legend-edge-interactive' 
+    
     return(<svg style={{position: 'absolute',top: props.fromTop,  left:props.fromLeft}}>
-        <path className={props.edgeText + '-legend-edge'} d='m0 10 l80 0' markerEnd='url(#triangle)' style={{stroke:'black', strokeWidth: 1}}></path>
-        <path className = {props.edgeText + '-legend-edge-interactive'} d='m0 10 l80 0' style={{pointerEvents:'all', strokeWidth: 10}}></path>
-        <SymbolComponent symbolId= {props.symbolId}/>
-        <text x = {92} y = {15}>{props.edgeText}</text>
+        <path className={props.edgeType + '-legend-edge' + ' ' + classNameEdge} d='m0 10 l80 0' markerEnd='url(#triangle)' style={{stroke:'black', strokeWidth: 1}}></path>
+        <path className = {classNameInteractiveEdge} d='m0 10 l80 0' style={{pointerEvents:'all', strokeWidth: 20}}></path>
+        <SymbolComponent edgeType = {props.edgeType} symbolId= {props.symbolId}/>
+        <text style = {{pointerEvents: 'all'}} className = {classNameInteractiveEdge + ' ' + classNameEdge} x = {92} y = {15}>{props.edgeText}</text>
     </svg>)
 }

From 1131253ac0eb3ef4e179993d1eeba8495df94e00 Mon Sep 17 00:00:00 2001
From: EagleoutIce <florian.sihler@uni-ulm.de>
Date: Wed, 31 Jul 2024 11:27:15 +0200
Subject: [PATCH 62/75] refactor: in meeting updates

---
 css/main.css                         | 41 +++++++++++++++++++++++
 source/components/legendComonent.tsx | 49 ++++++++++++++++++----------
 2 files changed, 72 insertions(+), 18 deletions(-)

diff --git a/css/main.css b/css/main.css
index 494c08e..e23fed9 100644
--- a/css/main.css
+++ b/css/main.css
@@ -72,6 +72,11 @@ svg {
 	
 	transform: translateX(-100%);
 	transition: 300ms ease-in-out;
+	
+	display: flex;
+	flex-direction: row;
+   padding: 12px;
+	gap: 4em;
 }
 
 .slide-in-legend.visible {
@@ -215,3 +220,39 @@ svg {
 	top: 15px; 
 	left: 15px;
 }
+
+
+
+.legend-element {
+	width: 80%;
+	height: 1em;
+}
+
+.legend-nodes {
+	min-width: 15em;
+	width: 40%;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	justify-content: flex-start;
+	align-items: center;
+}
+
+.legend-edges {
+	min-width: 15em;
+	width: 40%;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: center;
+}
+
+.legend-active {
+	opacity: 0;
+	font-weight: bold;
+}
+
+.legend-passive {
+	opacity: 0.15;
+	font-weight: normal;
+}	
\ No newline at end of file
diff --git a/source/components/legendComonent.tsx b/source/components/legendComonent.tsx
index bcd8d4a..9dbfa99 100644
--- a/source/components/legendComonent.tsx
+++ b/source/components/legendComonent.tsx
@@ -1,3 +1,4 @@
+import { useRef } from "react";
 import { edgeTypeToSymbolIdMapper } from "./model/edges/multiEdge";
 import { SideEffectOnCallEdge } from "./model/edges/sideEffectOnCallEdge";
 
@@ -67,22 +68,26 @@ export const LegendComponent: React.FC<LegendComponentProps> = (props) => {
 
     return (
         <div className = 'slide-in-legend' id = 'slide-in-legend' >
-            <div className='variable-definition-node variable-definition-node-legend' style={{position: 'absolute',top: 0,  left: 10, display: 'inline-block'}}>variable-definition</div>
-            <div className='function-definition-node function-definition-node-legend' style={{position: 'absolute',top: 38,  left: 4, display: 'inline-block'}}>function-definition</div>
-            <div className='value-node value-node-legend' style={{position: 'absolute',top: 90,  left: 10, display: 'inline-block'}}>value-node</div>
-            <div className='function-call-node function-call-node-legend' style={{position: 'absolute',top: 130,  left: 10, display: 'inline-block'}}>function-call</div>
-            <div className='use-node use-node-legend' style={{position: 'absolute',top: 170,  left: 10, display: 'inline-block'}}>use</div>
-            <div className='exit-point-node exit-point-node-legend' style={{position: 'absolute',top: 210,  left: 10, display: 'inline-block'}}>exit-point</div>
+            <div className='legend-nodes'>
+                <div className='legend-element variable-definition-node variable-definition-node-legend'>variable-definition</div>
+                <div className='legend-element function-definition-node function-definition-node-legend'>function-definition</div>
+                <div className='legend-element value-node value-node-legend'>value-node</div>
+                <div className='legend-element function-call-node function-call-node-legend'>function-call</div>
+                <div className='legend-element use-node use-node-legend'>use</div>
+                <div className='legend-element exit-point-node exit-point-node-legend'>exit-point</div>
+            </div>
+            <div className='legend-edges'>
+                <EdgeLegendComponent symbolId={readsEdgeSymbolId} edgeType = 'reads' edgeText='reads' />
+                <EdgeLegendComponent symbolId={definedByEdgeSymbolId} edgeType='defined-by' edgeText='defined-by' />
+                <EdgeLegendComponent symbolId={callsEdgeSymbolId} edgeType='calls' edgeText='calls' />
+                <EdgeLegendComponent symbolId={returnsEdgeSymbolId} edgeType='returns' edgeText='returns' />
+                <EdgeLegendComponent symbolId={definesOnCallEdgeSymbolId} edgeType='defines-on-call' edgeText='defines-on-call' />
+                <EdgeLegendComponent symbolId={definedByOnCallEdgeSymbolId} edgeType='defined-by-on-call' edgeText='defined-by-on-call' />
+                <EdgeLegendComponent symbolId={argumentEdgeSymbolId} edgeType='argument' edgeText='argument' />
+                <EdgeLegendComponent symbolId={sideEffectOnCallEdge} edgeType='side-effect-on-call' edgeText='side-effect-on-call' />
+                <EdgeLegendComponent symbolId={nonStandardEvaluationEdge} edgeType='non-standard-evaluation' edgeText='non-standard-evaluation' />
+            </div>
             
-            <EdgeLegendComponent symbolId={readsEdgeSymbolId} edgeType = 'reads' edgeText='reads' fromTop={0} fromLeft={200}/>
-            <EdgeLegendComponent symbolId={definedByEdgeSymbolId} edgeType='defined-by' edgeText='defined-by' fromTop={20} fromLeft={200}/>
-            <EdgeLegendComponent symbolId={callsEdgeSymbolId} edgeType='calls' edgeText='calls' fromTop={40} fromLeft={200}/>
-            <EdgeLegendComponent symbolId={returnsEdgeSymbolId} edgeType='returns' edgeText='returns' fromTop={60} fromLeft={200}/>
-            <EdgeLegendComponent symbolId={definesOnCallEdgeSymbolId} edgeType='defines-on-call' edgeText='defines-on-call' fromTop={80} fromLeft={200}/>
-            <EdgeLegendComponent symbolId={definedByOnCallEdgeSymbolId} edgeType='defined-by-on-call' edgeText='defined-by-on-call' fromTop={100} fromLeft={200}/>
-            <EdgeLegendComponent symbolId={argumentEdgeSymbolId} edgeType='argument' edgeText='argument' fromTop={120} fromLeft={200}/>
-            <EdgeLegendComponent symbolId={sideEffectOnCallEdge} edgeType='side-effect-on-call' edgeText='side-effect-on-call' fromTop={140} fromLeft={200}/>
-            <EdgeLegendComponent symbolId={nonStandardEvaluationEdge} edgeType='non-standard-evaluation' edgeText='non-standard-evaluation' fromTop={160} fromLeft={200}/>
             <div id = 'legend-close-button-div'>
                 <button className = {'button-close-legend'} onClick = {slideOutLegend} >X</button>
             </div>
@@ -111,15 +116,23 @@ interface EdgeLegendComponentProps {
     edgeType:string
     symbolId: string
     edgeText:string
-    fromTop: number
-    fromLeft: number
 }
 
+
 const EdgeLegendComponent: React.FC<EdgeLegendComponentProps> = (props) => {
     const classNameEdge = props.edgeType + '-edge'
     const classNameInteractiveEdge = props.edgeType + '-legend-edge-interactive' 
     
-    return(<svg style={{position: 'absolute',top: props.fromTop,  left:props.fromLeft}}>
+    
+    return(<svg
+        id={props.edgeType + '-legend'}
+        onClick={() => {
+            const l = document.getElementById(props.edgeType + '-legend');
+            if(l !== null){
+                l.classList.toggle('legend-passive')
+            }
+        }}
+    >
         <path className={props.edgeType + '-legend-edge' + ' ' + classNameEdge} d='m0 10 l80 0' markerEnd='url(#triangle)' style={{stroke:'black', strokeWidth: 1}}></path>
         <path className = {classNameInteractiveEdge} d='m0 10 l80 0' style={{pointerEvents:'all', strokeWidth: 20}}></path>
         <SymbolComponent edgeType = {props.edgeType} symbolId= {props.symbolId}/>

From 0cb5479966f2bc69ad09a4d3f9390640e0a7d74e Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Thu, 1 Aug 2024 11:08:42 +0200
Subject: [PATCH 63/75] feat: start reworking legend interactivity

---
 css/main.css                                |  18 +-
 source/components/graphComponent.tsx        | 112 +++++++-
 source/components/legendComonent.tsx        | 119 +++++----
 source/components/model/edges/multiEdge.tsx | 282 ++++++++++++--------
 4 files changed, 349 insertions(+), 182 deletions(-)

diff --git a/css/main.css b/css/main.css
index e23fed9..4993f1b 100644
--- a/css/main.css
+++ b/css/main.css
@@ -5,11 +5,6 @@ body {
 	margin: 0px;
 }
 
-svg {
-	pointer-events: none;
-}
-
-
 #legend-close-button-div {
 	position: absolute;
 	top: 0px;
@@ -105,15 +100,9 @@ svg {
 	-webkit-user-select: none;
 }
 
-
-.react-flow__edge-path {
-	pointer-events: none;
-	cursor: none;
-}
-
-.react-flow__edge-interaction {
-	pointer-events: none;
-	cursor: none;
+.dot-marker{
+	fill:black;
+	overflow:visible;
 }
 
 .variable-definition-node {
@@ -236,6 +225,7 @@ svg {
 	gap: 12px;
 	justify-content: flex-start;
 	align-items: center;
+	text-align: center;
 }
 
 .legend-edges {
diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 5a301d6..960fb4f 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -169,7 +169,7 @@ export interface LayoutFlowProps {
           <marker
             id="triangle"
             viewBox="0 0 10 10"
-            refX="1"
+            refX="6"
             refY="5"
             markerUnits="strokeWidth"
             markerWidth="10"
@@ -177,6 +177,114 @@ export interface LayoutFlowProps {
             orient="auto">
             <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
           </marker>
+          
+          <marker
+            id="dotMarker"
+            viewBox="-5 -5 10 10"
+            markerUnits="strokeWidth"
+            markerWidth="10"
+            markerHeight="10"
+            orient="auto">
+              <circle className = 'dotMarker' r = '3'/>
+          </marker>
+
+          <marker
+            id="crossMarker"
+            viewBox="-5 -5 10 10"
+            markerUnits="strokeWidth"
+            markerWidth="10"
+            markerHeight="10"
+            orient="auto">
+              <line x1='0' y1='3' x2='0' y2='-3' style={{stroke:'black', strokeWidth: '1'}}></line>
+              <line x1='3' y1='0' x2='-3' y2='0' style={{stroke:'black', strokeWidth: '1'}}></line>
+          </marker>
+
+          <marker
+            id="hexagonHollowMarker"
+            viewBox="-10 -10 100 100"
+            markerUnits="strokeWidth"
+            markerWidth="50"
+            markerHeight="50"
+            orient="auto">
+            <g transform='translate(-12,-12)'>
+              <path d="m16.476 3c.369 0 .709.197.887.514.9 1.595 3.633 6.445 4.509 8.001.075.131.118.276.126.423.012.187-.029.377-.126.547-.876 1.556-3.609 6.406-4.509 8-.178.318-.518.515-.887.515h-8.951c-.369 0-.709-.197-.887-.515-.899-1.594-3.634-6.444-4.51-8-.085-.151-.128-.318-.128-.485s.043-.334.128-.485c.876-1.556 3.611-6.406 4.51-8.001.178-.317.518-.514.887-.514zm-8.672 1.5-4.228 7.5 4.228 7.5h8.393l4.227-7.5-4.227-7.5z"/>
+            </g> 
+          </marker>
+
+          <marker
+            id="rectangleHollowMarker"
+            viewBox="-500 -500 1000 1000"
+            markerUnits="strokeWidth"
+            markerWidth="70"
+            markerHeight="70"
+            orient="auto">
+              <g transform='translate(-150, -75)'>
+                <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path d="m3 17v3c0 .621.52 1 1 1h3v-1.5h-2.5v-2.5zm8.5 4h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5zm5-4h-1.5v2.5h-2.5v1.5h3c.478 0 1-.379 1-1zm-1.5-1v-3.363h1.5v3.363zm-15-3.363v3.363h-1.5v-3.363zm15-1v-3.637h1.5v3.637zm-15-3.637v3.637h-1.5v-3.637zm12.5-5v1.5h2.5v2.5h1.5v-3c0-.478-.379-1-1-1zm-10 0h-3c-.62 0-1 .519-1 1v3h1.5v-2.5h2.5zm4.5 1.5h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5z" fillRule="nonzero"/>
+                </svg>
+              </g>
+          </marker>
+
+          <marker
+            id="triangleHollowMarker"
+            viewBox="-500 -500 1000 1000"
+            markerUnits="strokeWidth"
+            markerWidth="70"
+            markerHeight="70"
+            orient="auto">
+              <g transform='translate(-150, -85)'>
+              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.882 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm1.935-.384h15.939l-7.97-14.22z" fillRule="nonzero"/></svg>
+              </g>
+          </marker>
+
+          <marker
+            id="rhombusHollowMarker"
+            viewBox="-500 -500 1000 1000"
+            markerUnits="strokeWidth"
+            markerWidth="70"
+            markerHeight="70"
+            orient="auto">
+              <g transform='translate(-150, -75)'>
+                <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.262 2.306c.196-.196.461-.306.738-.306s.542.11.738.306c1.917 1.917 7.039 7.039 8.956 8.956.196.196.306.461.306.738s-.11.542-.306.738c-1.917 1.917-7.039 7.039-8.956 8.956-.196.196-.461.306-.738.306s-.542-.11-.738-.306c-1.917-1.917-7.039-7.039-8.956-8.956-.196-.196-.306-.461-.306-.738s.11-.542.306-.738c1.917-1.917 7.039-7.039 8.956-8.956zm-7.573 9.694 8.311 8.311 8.311-8.311-8.311-8.311z" fillRule="nonzero"/></svg>
+              </g>
+          </marker>
+
+
+          <marker
+            id="starFilledMarker"
+            viewBox="-500 -500 1000 1000"
+            markerUnits="strokeWidth"
+            markerWidth="70"
+            markerHeight="70"
+            orient="auto">
+              <g transform='translate(-150, -75)'>
+              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.322 2.923c.126-.259.39-.423.678-.423.289 0 .552.164.678.423.974 1.998 2.65 5.44 2.65 5.44s3.811.524 6.022.829c.403.055.65.396.65.747 0 .19-.072.383-.231.536-1.61 1.538-4.382 4.191-4.382 4.191s.677 3.767 1.069 5.952c.083.462-.275.882-.742.882-.122 0-.244-.029-.355-.089-1.968-1.048-5.359-2.851-5.359-2.851s-3.391 1.803-5.359 2.851c-.111.06-.234.089-.356.089-.465 0-.825-.421-.741-.882.393-2.185 1.07-5.952 1.07-5.952s-2.773-2.653-4.382-4.191c-.16-.153-.232-.346-.232-.535 0-.352.249-.694.651-.748 2.211-.305 6.021-.829 6.021-.829s1.677-3.442 2.65-5.44z" fillRule="nonzero"/></svg>
+              </g>
+          </marker>
+
+          <marker
+            id="circleHollowMarker"
+            viewBox="-500 -500 1000 1000"
+            markerUnits="strokeWidth"
+            markerWidth="70"
+            markerHeight="70"
+            orient="auto">
+              <g transform='translate(-150, -75)'>
+              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.998 2c5.517 0 9.997 4.48 9.997 9.998 0 5.517-4.48 9.997-9.997 9.997-5.518 0-9.998-4.48-9.998-9.997 0-5.518 4.48-9.998 9.998-9.998zm0 1.5c-4.69 0-8.498 3.808-8.498 8.498s3.808 8.497 8.498 8.497 8.497-3.807 8.497-8.497-3.807-8.498-8.497-8.498z" fillRule="nonzero"/></svg>
+            </g>
+          </marker>
+
+          <marker
+            id="cubeFilledMarker"
+            viewBox="-500 -500 1000 1000"
+            markerUnits="strokeWidth"
+            markerWidth="70"
+            markerHeight="70"
+            orient="auto">
+              <g transform='translate(-150, -75)'>
+              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.514 6.61c-.317.179-.514.519-.514.887v8.95c0 .37.197.708.514.887 1.597.901 6.456 3.639 8.005 4.512.152.085.319.128.487.128.164 0 .328-.041.477-.123 1.549-.855 6.39-3.523 7.994-4.408.323-.177.523-.519.523-.891v-9.055c0-.368-.197-.708-.515-.887-1.595-.899-6.444-3.632-7.999-4.508-.151-.085-.319-.128-.486-.128-.168 0-.335.043-.486.128-1.555.876-6.405 3.609-8 4.508m15.986 2.115v7.525l-6.75 3.722v-7.578zm-15 7.425v-7.458l6.75 3.75v7.511zm.736-8.769 6.764-3.813 6.801 3.834-6.801 3.716z" fillRule="nonzero"/></svg>
+            </g>
+          </marker>
 
           <symbol id="dotSymbol" width="10" height="10" overflow={'visible'}>
             <g>
@@ -186,7 +294,7 @@ export interface LayoutFlowProps {
 
           <symbol id="crossSymbol" width="10" height="10" overflow={'visible'}>  
             <g>
-              <line x1='0' y1='3' x2='0' y2='-3' style={{stroke:'black', strokeWidth: '1'}}></line>
+            <line x1='0' y1='3' x2='0' y2='-3' style={{stroke:'black', strokeWidth: '1'}}></line>
             <line x1='3' y1='0' x2='-3' y2='0' style={{stroke:'black', strokeWidth: '1'}}></line>
           </g>
             </symbol>
diff --git a/source/components/legendComonent.tsx b/source/components/legendComonent.tsx
index 9dbfa99..4a0c562 100644
--- a/source/components/legendComonent.tsx
+++ b/source/components/legendComonent.tsx
@@ -17,14 +17,17 @@ export function slideOutLegend(){
     element.classList.toggle('visible');
 }
 
-export const LegendComponent: React.FC<LegendComponentProps> = (props) => {
-    //make cssRules
-    const nodeTypes = ['variable-definition-node', 'function-definition-node','value-node', 'function-call-node', 'use-node','exit-point-node']
+export const LegendComponent: React.FC<LegendComponentProps> = ({}) => {
+    
     const edgeTypes = ['reads', 'defined-by','calls','returns','defines-on-call','defined-by-on-call', 'argument', 'side-effect-on-call', 'non-standard-evaluation']
+    
+    /*
     const tempRule = 'body:has(.reads-legend-edge-interactive:hover) .function-call-node {opacity:20%}body:has(.reads-legend-edge-interactive:hover) .use-node{opacity:20%}'
     let cssRule = ''
     const greyOutStyle = '{opacity: 20%}'
     const keepNormalStyle = '{opacity: 100%}'
+    
+    const nodeTypes = ['variable-definition-node', 'function-definition-node','value-node', 'function-call-node', 'use-node','exit-point-node']
     nodeTypes.forEach((hoveredNodeType) => {
         nodeTypes.forEach((toHideNodeType) => {
             if(hoveredNodeType === toHideNodeType){
@@ -55,45 +58,34 @@ export const LegendComponent: React.FC<LegendComponentProps> = (props) => {
         })
         cssRule += `body:has(.${hoveredEdgeType}-legend-edge-interactive:hover) .${hoveredEdgeType}-edge ${keepNormalStyle}`
     })
+    */
+    const isGreyedOutMap = new Map<string,boolean>()
     
-    const readsEdgeSymbolId = edgeTypeToSymbolIdMapper('reads')
-    const definedByEdgeSymbolId = edgeTypeToSymbolIdMapper('defined-by')
-    const callsEdgeSymbolId = edgeTypeToSymbolIdMapper('calls')
-    const returnsEdgeSymbolId = edgeTypeToSymbolIdMapper('returns')
-    const definesOnCallEdgeSymbolId = edgeTypeToSymbolIdMapper('defines-on-call')
-    const definedByOnCallEdgeSymbolId = edgeTypeToSymbolIdMapper('defined-by-on-call')
-    const argumentEdgeSymbolId = edgeTypeToSymbolIdMapper('argument')
-    const sideEffectOnCallEdge = edgeTypeToSymbolIdMapper('side-effect-on-call')
-    const nonStandardEvaluationEdge = edgeTypeToSymbolIdMapper('non-standard-evaluation')
-
     return (
         <div className = 'slide-in-legend' id = 'slide-in-legend' >
             <div className='legend-nodes'>
-                <div className='legend-element variable-definition-node variable-definition-node-legend'>variable-definition</div>
-                <div className='legend-element function-definition-node function-definition-node-legend'>function-definition</div>
-                <div className='legend-element value-node value-node-legend'>value-node</div>
-                <div className='legend-element function-call-node function-call-node-legend'>function-call</div>
-                <div className='legend-element use-node use-node-legend'>use</div>
-                <div className='legend-element exit-point-node exit-point-node-legend'>exit-point</div>
+                <NodeLegendComponent isGreyedOutMap = {isGreyedOutMap} nodeType = 'variable-definition'/>
+                <NodeLegendComponent isGreyedOutMap = {isGreyedOutMap} nodeType = 'function-definition'/>
+                <NodeLegendComponent isGreyedOutMap = {isGreyedOutMap} nodeType = 'value'/>
+                <NodeLegendComponent isGreyedOutMap = {isGreyedOutMap} nodeType = 'function-call'/>
+                <NodeLegendComponent isGreyedOutMap = {isGreyedOutMap} nodeType = 'use'/>
+                <NodeLegendComponent isGreyedOutMap = {isGreyedOutMap} nodeType = 'exit-point'/>
             </div>
             <div className='legend-edges'>
-                <EdgeLegendComponent symbolId={readsEdgeSymbolId} edgeType = 'reads' edgeText='reads' />
-                <EdgeLegendComponent symbolId={definedByEdgeSymbolId} edgeType='defined-by' edgeText='defined-by' />
-                <EdgeLegendComponent symbolId={callsEdgeSymbolId} edgeType='calls' edgeText='calls' />
-                <EdgeLegendComponent symbolId={returnsEdgeSymbolId} edgeType='returns' edgeText='returns' />
-                <EdgeLegendComponent symbolId={definesOnCallEdgeSymbolId} edgeType='defines-on-call' edgeText='defines-on-call' />
-                <EdgeLegendComponent symbolId={definedByOnCallEdgeSymbolId} edgeType='defined-by-on-call' edgeText='defined-by-on-call' />
-                <EdgeLegendComponent symbolId={argumentEdgeSymbolId} edgeType='argument' edgeText='argument' />
-                <EdgeLegendComponent symbolId={sideEffectOnCallEdge} edgeType='side-effect-on-call' edgeText='side-effect-on-call' />
-                <EdgeLegendComponent symbolId={nonStandardEvaluationEdge} edgeType='non-standard-evaluation' edgeText='non-standard-evaluation' />
+                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'reads' edgeText='reads' />
+                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType='defined-by' edgeText='defined-by' />
+                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType='calls' edgeText='calls' />
+                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType='returns' edgeText='returns' />
+                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType='defines-on-call' edgeText='defines-on-call' />
+                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType='defined-by-on-call' edgeText='defined-by-on-call' />
+                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType='argument' edgeText='argument' />
+                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType='side-effect-on-call' edgeText='side-effect-on-call' />
+                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType='non-standard-evaluation' edgeText='non-standard-evaluation' />
             </div>
             
             <div id = 'legend-close-button-div'>
                 <button className = {'button-close-legend'} onClick = {slideOutLegend} >X</button>
             </div>
-            <style>
-                {cssRule}
-            </style>
         </div>
     )
 }
@@ -103,39 +95,70 @@ interface SymbolComponentProps {
     edgeType:string
 }
 
-const SymbolComponent: React.FC<SymbolComponentProps> = (props) => {
+const SymbolComponent: React.FC<SymbolComponentProps> = ({symbolId,edgeType}) => {
     return(<>
-        <use className = {props.edgeType + '-edge-symbol'} key = {'legend-symbol-1' + props.symbolId} href = {`#${props.symbolId}`} x = {20} y = {10}></use>
-        <use className = {props.edgeType + '-edge-symbol'} key = {'legend-symbol-2' + props.symbolId} href = {`#${props.symbolId}`} x = {40} y = {10}></use>
-        <use className = {props.edgeType + '-edge-symbol'} key = {'legend-symbol-3' + props.symbolId} href = {`#${props.symbolId}`} x = {60} y = {10}></use>
+        <use className = {edgeType + '-edge-symbol'} key = {'legend-symbol-1' + symbolId} href = {`#${symbolId}`} x = {20} y = {10}></use>
+        <use className = {edgeType + '-edge-symbol'} key = {'legend-symbol-2' + symbolId} href = {`#${symbolId}`} x = {40} y = {10}></use>
+        <use className = {edgeType + '-edge-symbol'} key = {'legend-symbol-3' + symbolId} href = {`#${symbolId}`} x = {60} y = {10}></use>
     </>    
     )
 }
 
 interface EdgeLegendComponentProps {
     edgeType:string
-    symbolId: string
     edgeText:string
+    isGreyedOutMap:Map<string,boolean>
 }
 
 
-const EdgeLegendComponent: React.FC<EdgeLegendComponentProps> = (props) => {
-    const classNameEdge = props.edgeType + '-edge'
-    const classNameInteractiveEdge = props.edgeType + '-legend-edge-interactive' 
-    
+const EdgeLegendComponent: React.FC<EdgeLegendComponentProps> = ({edgeText, edgeType, isGreyedOutMap}) => {
+    const classNameEdge = edgeType + '-edge'
+    const classNameInteractiveEdge = edgeType + '-legend-edge-interactive' 
+    const symbolId = edgeTypeToSymbolIdMapper(edgeType)
     
     return(<svg
-        id={props.edgeType + '-legend'}
+        id={edgeType + '-legend'}
         onClick={() => {
-            const l = document.getElementById(props.edgeType + '-legend');
-            if(l !== null){
-                l.classList.toggle('legend-passive')
+            const pathElements = document.getElementsByClassName(`${edgeType}-edge`) as HTMLCollectionOf<SVGPathElement>
+            const symbolElements = document.getElementsByClassName(`${edgeType}-edge-symbol`) as HTMLCollectionOf<SVGUseElement>
+
+            //get the greyed out state and set it correctly
+            const isEdgeTypeGreyedOut:boolean = isGreyedOutMap.get(edgeType) ?? false
+            isGreyedOutMap.set(edgeType,!isEdgeTypeGreyedOut)
+
+            //for all elements set the node state
+            for(const element of pathElements){
+                element.classList.toggle('legend-passive', !isEdgeTypeGreyedOut)
+            }
+            
+            for(const element of symbolElements){
+                element.classList.toggle('legend-passive', !isEdgeTypeGreyedOut)
             }
         }}
     >
-        <path className={props.edgeType + '-legend-edge' + ' ' + classNameEdge} d='m0 10 l80 0' markerEnd='url(#triangle)' style={{stroke:'black', strokeWidth: 1}}></path>
-        <path className = {classNameInteractiveEdge} d='m0 10 l80 0' style={{pointerEvents:'all', strokeWidth: 20}}></path>
-        <SymbolComponent edgeType = {props.edgeType} symbolId= {props.symbolId}/>
-        <text style = {{pointerEvents: 'all'}} className = {classNameInteractiveEdge + ' ' + classNameEdge} x = {92} y = {15}>{props.edgeText}</text>
+        <path className={edgeType + '-legend-edge' + ' ' + classNameEdge} d='m0 10 l80 0' markerEnd='url(#triangle)' style={{stroke:'black', strokeWidth: 1}}></path>
+        <path className = {classNameInteractiveEdge} d='m0 10 l80 0' style={{pointerEvents:'all', strokeWidth: 200}}></path>
+        <SymbolComponent edgeType = {edgeType} symbolId= {symbolId}/>
+        <text style = {{pointerEvents: 'all'}} className = {classNameInteractiveEdge + ' ' + classNameEdge} x = {92} y = {15}>{edgeText}</text>
     </svg>)
+}  
+
+interface NodeLegendComponentProps{
+    nodeType:string
+    isGreyedOutMap: Map<string,boolean>    
+}
+
+const NodeLegendComponent: React.FC<NodeLegendComponentProps> = ({nodeType, isGreyedOutMap}) => {
+    return (
+        <div onClick = {() => {
+            const elements = document.getElementsByClassName(`${nodeType}-node`) as HTMLCollectionOf<HTMLDivElement>
+            //get the greyed out state and set it correctly
+            const isNodeTypeGreyedOut:boolean =  isGreyedOutMap.get(nodeType) ?? false
+            isGreyedOutMap.set(nodeType,!isNodeTypeGreyedOut)
+            //for all elements set the node state
+            for(const element of elements){
+                element.classList.toggle('legend-passive', !isNodeTypeGreyedOut)
+            }
+        }}className={`legend-element ${nodeType}-node ${nodeType}-node-legend`}>{nodeType}</div>
+    )
 }
diff --git a/source/components/model/edges/multiEdge.tsx b/source/components/model/edges/multiEdge.tsx
index 6adb48d..0e7f47d 100644
--- a/source/components/model/edges/multiEdge.tsx
+++ b/source/components/model/edges/multiEdge.tsx
@@ -50,7 +50,7 @@ export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = (pr
     targetPosition: targetPos,
     targetX: targetX,
     targetY: targetY,
-  });
+  })
 
   //const labelPositionX = targetX - sourceX > 0 ? labelX + offsetX / 2 : labelX - offsetX / 2 
   //const labelPositionY = targetY - sourceY > 0 ? labelY + offsetY / 2 : labelY - offsetY / 2
@@ -84,21 +84,23 @@ export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = (pr
   let classNameString = ''
   givenEdgeTypes.forEach((edgeTypeName) => {classNameString += ' ' + edgeTypeName + '-edge'})
   classNameString = classNameString.slice(1)
+  
   return (
     <>
-    <BaseEdge
+    <path
       id={hoverOverEdgeId} //Interaction Edge
-      path={edgePath} 
+      d={edgePath} 
       style= {{strokeWidth: 10, visibility: 'hidden', pointerEvents: 'all', cursor: 'pointer'}} 
     />
-    <BaseEdge
+    <path
       id={props.standardEdgeInformation.id} //Shown Edge
-      className={classNameString}
-      path={edgePath} 
-      style= {defaultEdgeStyle}
+      className={classNameString + ' react-flow__edge-path'}
+      d={edgePath} 
+      style = {defaultEdgeStyle}
       markerEnd={arrowEnd ? 'url(#triangle)' : undefined} markerStart={arrowStart ? 'url(#triangle)' : undefined} 
     />
-    <EdgeSymbolComponent id={props.standardEdgeInformation.id} edgeTypes={givenEdgeTypes} edgePath={edgePath}/>
+    
+    <EdgeMarkerComponent id={props.standardEdgeInformation.id} edgeTypes={givenEdgeTypes} edgePath={edgePath}/>
     <style>
       {cssRule}
     </style>
@@ -190,7 +192,7 @@ interface BezierCurve {
   readonly endPoint: XYPosition,
 }
 
-interface EdgeSymbolComponentProps {
+interface EdgeMarkerComponentProps {
   edgePath: string,
   edgeTypes: Set<EdgeTypeName>
   id: string
@@ -212,12 +214,132 @@ export function edgeTypeToSymbolIdMapper(edgeTag: string): string {
   return edgeTypeNameMap[edgeTag] ?? '';
 }
 
+const edgeTypeNameMarkerMap:{[index: string]:string} = {
+  'reads':                   'dotMarker',
+  'defined-by':              'hexagonHollowMarker',
+  'calls':                   'starFilledMarker',
+  'returns':                 'circleHollowMarker',
+  'defines-on-call':         'rectangleHollowMarker',
+  'defined-by-on-call':      'rhombusHollowMarker',
+  'argument':                'triangleHollowMarker',
+  'side-effect-on-call':     'crossMarker',
+  'non-standard-evaluation': 'cubeFilledMarker',
+};
+
+export function edgeTypeToMarkerIdMapper(edgeTag: string): string {
+  return edgeTypeNameMarkerMap[edgeTag] ?? '';
+}
+
+/**
+ * split a cubic bezier curve into two parts using de Casteljaus Algorithm
+ * @param t point to split at 0 < t < 1
+ * @param startingPoint 
+ * @param startControlPoint 
+ * @param endControlPoint 
+ * @param endingPoint 
+ * @returns Array of two elements where the first is the first part of the split curve and second is last part of the split curve
+ */
+function splitSingleBezierCurve(t:number, startingPoint:XYPosition, startControlPoint:XYPosition, endControlPoint: XYPosition, endingPoint:XYPosition):BezierCurve[] {
+  const pointArray: XYPosition[][] = [[],[],[],[]]
+  pointArray[0].push(startingPoint)
+  pointArray[0].push(startControlPoint)
+  pointArray[0].push(endControlPoint)
+  pointArray[0].push(endingPoint)
+
+  for(let algorithmIndex = 1; algorithmIndex <= 3; algorithmIndex++){
+    for(let pointIndex = 0; pointIndex <= 3 - algorithmIndex; pointIndex++){
+      const calcX = pointArray[algorithmIndex - 1][pointIndex].x * (1 - t) + pointArray[algorithmIndex - 1][pointIndex + 1].x * t
+      const calcY = pointArray[algorithmIndex - 1][pointIndex].y * (1 - t) + pointArray[algorithmIndex - 1][pointIndex + 1].y * t 
+      pointArray[algorithmIndex].push({x: calcX, y:calcY}) 
+    }
+  }
+  return ([
+    {startPoint:pointArray[0][0],controlPointStart:pointArray[1][0], controlPointEnd:pointArray[2][0], endPoint:pointArray[3][0]},
+    {startPoint:pointArray[3][0],controlPointStart:pointArray[2][1], controlPointEnd:pointArray[1][2], endPoint:pointArray[0][3]}
+  ])
+
+}
+
+/**
+ * calculate the splitted parts of a cubic bezierCurve
+ * @param t All values must follow the format 0 < t[i] < 1 && t[i] < t[i + 1]
+ * @param startingPoint 
+ * @param startControlPoint 
+ * @param endControlPoint 
+ * @param endingPoint 
+ * @returns Array of BezierCurves
+ */
+function splitBezierCurve(t:number[], startingPoint:XYPosition, startControlPoint:XYPosition, endControlPoint: XYPosition, endingPoint:XYPosition):BezierCurve[]{
+  
+  let A = startingPoint
+  let B = startControlPoint
+  let C = endControlPoint
+  let D = endingPoint
+
+  const returnArray:BezierCurve[] = []
+
+  
+  //Calculate linear percentages of curves.
+  const linearPercentagePoints: number[] = []
+  const curveLengthTotal = calculateLengthOfBezierCurve(startingPoint, startControlPoint, endControlPoint, endingPoint)
+  const rangeForSamplePoints = range(0,1, amountOfSamplePointsForLength, true)
+  let approximatedLength = 0
+  let indexOfTArray = 0
+  for(let indexOfPercentageArray = 1; indexOfPercentageArray < rangeForSamplePoints.length; indexOfPercentageArray++){
+    const lastPoint = bezierCurve(rangeForSamplePoints[indexOfPercentageArray - 1],startingPoint, startControlPoint, endControlPoint, endingPoint)
+    const currentPoint = bezierCurve(rangeForSamplePoints[indexOfPercentageArray],startingPoint, startControlPoint, endControlPoint, endingPoint)
+    approximatedLength += Math.sqrt(Math.pow(currentPoint.x - lastPoint.x, 2) + Math.pow(currentPoint.y - lastPoint.y, 2))
+    if(approximatedLength / curveLengthTotal >= t[indexOfTArray]){
+      linearPercentagePoints.push(rangeForSamplePoints[indexOfPercentageArray])
+      indexOfTArray++
+      if(indexOfTArray >= t.length){
+        break
+      }
+    }
+  }
+
+  let E: XYPosition = {x: 0, y: 0}
+  let F: XYPosition = {x: 0, y: 0}
+  let G: XYPosition = {x: 0, y: 0}
+  let H: XYPosition = {x: 0, y: 0}
+  let J: XYPosition = {x: 0, y: 0}
+  let K: XYPosition = {x: 0, y: 0}
+
+  let lastBezierCurve:BezierCurve = {startPoint:{x: 0, y: 0}, controlPointStart:{x: 0, y: 0}, controlPointEnd:{x: 0, y: 0}, endPoint:{x: 0, y: 0}}
+  let startPercentage: number = 0
+  for(let percentIndex = 0; percentIndex < linearPercentagePoints.length; percentIndex++){
+    let currentT = (linearPercentagePoints[percentIndex] - startPercentage) / (1 - startPercentage)
+    
+    const newCurves = splitSingleBezierCurve(currentT, A, B, C, D)
+    lastBezierCurve = newCurves[1]
+    
+    returnArray.push({
+      startPoint:newCurves[0].startPoint, 
+      controlPointStart: newCurves[0].controlPointStart, 
+      controlPointEnd: newCurves[0].controlPointEnd, 
+      endPoint: newCurves[0].endPoint})
+
+    startPercentage = linearPercentagePoints[percentIndex]
+    A = newCurves[1].startPoint
+    B = newCurves[1].controlPointStart
+    C = newCurves[1].controlPointEnd
+    D = newCurves[1].endPoint
+  }
+
+  returnArray.push({
+    startPoint:lastBezierCurve.startPoint, 
+    controlPointStart: lastBezierCurve.controlPointStart, 
+    controlPointEnd: lastBezierCurve.controlPointEnd, 
+    endPoint: lastBezierCurve.endPoint})
+  return returnArray
+}
+
 /**
  * Creates Evenly spaced Symbols to the corresponding MarkerTypes
  * @param props 
  * @returns list of <use> tags which point to the corresponding symbol
  */
-const EdgeSymbolComponent : React.FC<EdgeSymbolComponentProps> = (props) => {
+const EdgeMarkerComponent : React.FC<EdgeMarkerComponentProps> = (props) => {
   //Parse 4 Points from the calculated bezier curve
   const pointArray = props.edgePath.replace('M','').replace('C','').split(' ').map((stringPoint)=> stringPoint.split(',').map((stringNumber) => +stringNumber))
   const startPointBez = {x: pointArray[0][0], y:pointArray[0][1]}
@@ -240,8 +362,14 @@ const EdgeSymbolComponent : React.FC<EdgeSymbolComponentProps> = (props) => {
                                           Math.floor(amountOfMarkerPointsInBetween / props.edgeTypes.size) 
 
   //calculate which symbols need to be on which points
+  //index -> edgeType
   const markerMap = new Map<number, string>()
+  //index -> positionArray
   const pointsMap = new Map<number, XYPosition[]>()
+  //index -> bezierCurveArray
+  const curveMap = new Map<number, BezierCurve[]>()
+
+
   let indexOfMarkerType = 0
   for(let value of props.edgeTypes){
     markerMap.set(indexOfMarkerType, value)
@@ -266,125 +394,43 @@ const EdgeSymbolComponent : React.FC<EdgeSymbolComponentProps> = (props) => {
     //get points on BezierCurve
     const pointsOnCurve = percentageArray.map((percentage) => linearPercentageBezierCurve(percentage, startPointBez, startControlPointBez, endControlPointBez, endPointBez))
     pointsMap.set(indexOfMarkerType, pointsOnCurve)
+    curveMap.set(indexOfMarkerType, splitBezierCurve(percentageArray, startPointBez, startControlPointBez, endControlPointBez, endPointBez))
     indexOfMarkerType += 1
   }
-  
+   
   //create use elements
   let useArray:JSX.Element[] = []
   markerMap.forEach((edgeType,offsetIndex) => {
     const pointsOfMarker = pointsMap.get(offsetIndex)
     const useBlockArray = pointsOfMarker?.map((point) =>{return (<use className = {`${edgeType}-edge-symbol`}key = {props.id + '-' + point.x + '-' + point.y} id = {props.id + '-' + point.x + '-' + point.y} href={`#${edgeTypeToSymbolIdMapper(edgeType)}`} x={point.x} y={point.y} />)}) ?? []
     useArray = useArray.concat(useBlockArray)
+  }) 
+  
+  //create curve
+  const markerEdgeMap: JSX.Element[] = []
+  
+  curveMap.forEach((array, index) =>{
+    const firstBezierCurve = array[0]
+    let dOfPath = `M${firstBezierCurve.startPoint.x},${firstBezierCurve.startPoint.y} `
+    array.forEach((curve) => {
+      dOfPath += `C${curve.controlPointStart.x},${curve.controlPointStart.y} ${curve.controlPointEnd.x},${curve.controlPointEnd.y} ${curve.endPoint.x},${curve.endPoint.y} `
+    })
+    dOfPath = dOfPath.trimEnd()
+    const pathId = props.id + `-${markerMap.get(index)}-marker-edge`
+    const markerEdge = (<path
+      key = {pathId} 
+      id = {pathId}
+      className={'react-flow__edge-path'}
+      d={dOfPath}
+      markerMid = {`url(#${edgeTypeToMarkerIdMapper(markerMap.get(index) ?? '')})`}
+      style= {{stroke: 'black', strokeWidth: 1, color: 'transparent'}} 
+    />
+    )
+    markerEdgeMap.push(markerEdge)
   })
   
   return (
   <>
-    <svg width = {'100%'} height = {'100%'} style = {{overflow: 'visible'}}>
-      {useArray.map((self) => self)}
-    </svg>
+      {markerEdgeMap.map((self) => self)}
   </>)
 }
-
-
-/**
- * calculate the splitted parts of a cubic bezierCurve
- * @param t All values must follow the format 0 < t[i] < 1 && t[i] < t[i + 1]
- * @param startingPoint 
- * @param startControlPoint 
- * @param endControlPoint 
- * @param endingPoint 
- * @returns Array of BezierCurves
- */
-function splitBezierCurve(t:number[], startingPoint:XYPosition, startControlPoint:XYPosition, endControlPoint: XYPosition, endingPoint:XYPosition):BezierCurve[]{
-  
-  let currentStartPoint = startingPoint
-  let currentStartControlPoint = startControlPoint
-  let currentEndControlPoint = endControlPoint
-  let currentEndPoint = endingPoint
-  
-  const returnArray:BezierCurve[] = []
-  const percentageDifferenceForDerivative = 0.01 
-
-  for(let percentIndex = 0; percentIndex < t.length; percentIndex++){
-    const currentSplitPercent = t[percentIndex]
-    const splitBezierCurvePoint = bezierCurve(currentSplitPercent, startingPoint, startControlPoint, endControlPoint, endingPoint)  
-    const closeToSplitPoint = bezierCurve(currentSplitPercent + percentageDifferenceForDerivative, startingPoint, startControlPoint, endControlPoint,endingPoint)
-
-
-    const crossPoint1 = calculateIntersectionPoint(currentStartPoint, currentStartControlPoint, splitBezierCurvePoint, closeToSplitPoint) ?? 
-                        {x: currentStartPoint.x + (splitBezierCurvePoint.x - currentStartPoint.x) * 0.5,
-                        y: currentStartPoint.y + (splitBezierCurvePoint.y - currentStartPoint.y) * 0.5}
-    const newStartControlPointFirstBezierCurve: XYPosition = {x: currentStartPoint.x + (crossPoint1.x - currentStartPoint.x) * bezierSplitConst, y: currentStartPoint.y + (crossPoint1.y - currentStartPoint.y)}
-    const newEndControlPointFirstBezierCurve: XYPosition = {x: splitBezierCurvePoint.x - (splitBezierCurvePoint.x - crossPoint1.x) * bezierSplitConst, y: splitBezierCurvePoint.y - (splitBezierCurvePoint.y - crossPoint1.y) * bezierSplitConst}
-    const crossPoint2 = calculateIntersectionPoint(splitBezierCurvePoint, closeToSplitPoint, currentEndControlPoint, currentEndPoint)??
-                        {x: splitBezierCurvePoint.x + (currentEndPoint.x - splitBezierCurvePoint.x) * 0.5, 
-                        y: splitBezierCurvePoint.y + (currentEndPoint.y - splitBezierCurvePoint.y) * 0.5}
-    const newStartControlPointSecondBezierCurve: XYPosition = {x: splitBezierCurvePoint.x + (crossPoint2.x - splitBezierCurvePoint.x ) * bezierSplitConst, y: splitBezierCurvePoint.y + (crossPoint2.y - splitBezierCurvePoint.y ) * bezierSplitConst}
-    const newEndControlPointSecondBezierCurve: XYPosition = {x: currentEndPoint.x - (currentEndPoint.x - crossPoint2.x) * bezierSplitConst, y: currentEndPoint.y - (currentEndPoint.y - crossPoint2.y) * bezierSplitConst}
-    
-
-
-
-    const toPush: BezierCurve = {
-      startPoint: currentStartPoint,
-      controlPointStart: newStartControlPointFirstBezierCurve,
-      controlPointEnd: newEndControlPointFirstBezierCurve,
-      endPoint: splitBezierCurvePoint
-    }
-    returnArray.push(toPush)
-
-    currentStartPoint = splitBezierCurvePoint
-    currentStartControlPoint = newStartControlPointSecondBezierCurve
-    currentEndControlPoint = newEndControlPointSecondBezierCurve
-    currentEndPoint = endingPoint
-    
-  }
-  returnArray.push({
-    startPoint: currentStartPoint,
-    controlPointStart: currentStartControlPoint,
-    controlPointEnd: currentEndControlPoint,
-    endPoint: currentEndPoint
-  })
-  return returnArray
-}
-
-// from https://paulbourke.net/geometry/pointlineplane/javascript.txt
-// line intercept math by Paul Bourke http://paulbourke.net/geometry/pointlineplane/
-// Determine the intersection point of two line segments
-// Return FALSE if the lines don't intersect
-function calculateIntersectionPoint(point1Line1:XYPosition, point2line1:XYPosition, point1line2:XYPosition, point2line2:XYPosition):XYPosition | undefined{
-
-  const {x:x1, y:y1} = point1Line1
-  const {x:x2, y:y2} = point2line1
-  const {x:x3, y:y3} = point1line2
-  const {x:x4, y:y4} = point2line2
-
-  // Check if none of the lines are of length 0
-	if ((x1 === x2 && y1 === y2) || (x3 === x4 && y3 === y4)) {
-    throw Error('lines are of length 0')
-
-	}
-
-	const denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1))
-
-  // Lines are parallel
-	if (denominator === 0) {
-		//throw Error('lines are parallel')
-    return undefined
-	}
-
-	let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator
-	let ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator
-
-  // is the intersection along the segments
-	/*
-  if (ua < 0 || ua > 1 || ub < 0 || ub > 1) {
-		throw Error('intersection not along segments')
-	}
-  */
-  // Return a object with the x and y coordinates of the intersection
-	let x = x1 + ua * (x2 - x1)
-	let y = y1 + ua * (y2 - y1)
-
-	return {x, y}
-}
\ No newline at end of file

From 3f3eac8399fe0921bc3f1258cdb23909db2a9f3a Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Thu, 1 Aug 2024 12:06:40 +0200
Subject: [PATCH 64/75] refactor: lengend edge components

---
 css/main.css                                | 27 +++++++++++
 source/components/legendComonent.tsx        | 24 +++++-----
 source/components/model/edges/multiEdge.tsx | 53 +++++++++------------
 3 files changed, 62 insertions(+), 42 deletions(-)

diff --git a/css/main.css b/css/main.css
index 4993f1b..2d87ac6 100644
--- a/css/main.css
+++ b/css/main.css
@@ -150,6 +150,19 @@ body {
 	background: none;
 	border: none;
 }
+.react-flow__edge-path.multi-edge {
+	stroke: black;
+	stroke-width: 1px;
+	pointer-events: none;
+	cursor: none;
+}
+
+.interactive-edge {
+	stroke-width: 10px;
+	visibility: hidden;
+	pointer-events: all;
+	cursor: pointer;
+}
 
 .edge-label { 
 	visibility: hidden;
@@ -237,6 +250,20 @@ body {
 	align-items: center;
 }
 
+.legend-edge{
+	stroke:black;
+	stroke-width: 1px;
+}
+
+.legend-interactive-edge {
+	pointer-events:all;
+	stroke-width: 20px;
+}
+
+.legend-text{
+	pointer-events: all;
+}
+
 .legend-active {
 	opacity: 0;
 	font-weight: bold;
diff --git a/source/components/legendComonent.tsx b/source/components/legendComonent.tsx
index 4a0c562..ad1f731 100644
--- a/source/components/legendComonent.tsx
+++ b/source/components/legendComonent.tsx
@@ -1,5 +1,5 @@
 import { useRef } from "react";
-import { edgeTypeToSymbolIdMapper } from "./model/edges/multiEdge";
+import { edgeTypeToMarkerIdMapper, edgeTypeToSymbolIdMapper } from "./model/edges/multiEdge";
 import { SideEffectOnCallEdge } from "./model/edges/sideEffectOnCallEdge";
 
 
@@ -112,16 +112,17 @@ interface EdgeLegendComponentProps {
 
 
 const EdgeLegendComponent: React.FC<EdgeLegendComponentProps> = ({edgeText, edgeType, isGreyedOutMap}) => {
-    const classNameEdge = edgeType + '-edge'
-    const classNameInteractiveEdge = edgeType + '-legend-edge-interactive' 
+    const classNameEdge = edgeType + '-edge' + ' legend-edge' + ' ' + edgeType + '-legend-edge'
+    const classNameInteractiveEdge = edgeType + '-legend-interactive-edge' + ' legend-interactive-edge' 
     const symbolId = edgeTypeToSymbolIdMapper(edgeType)
-    
+    const markerId = edgeTypeToMarkerIdMapper(edgeType)
+    const legendId = edgeType + '-legend'
     return(<svg
-        id={edgeType + '-legend'}
+        id={legendId}
         onClick={() => {
             const pathElements = document.getElementsByClassName(`${edgeType}-edge`) as HTMLCollectionOf<SVGPathElement>
             const symbolElements = document.getElementsByClassName(`${edgeType}-edge-symbol`) as HTMLCollectionOf<SVGUseElement>
-
+            const legendSVGElement = document.getElementById(legendId) as HTMLElement
             //get the greyed out state and set it correctly
             const isEdgeTypeGreyedOut:boolean = isGreyedOutMap.get(edgeType) ?? false
             isGreyedOutMap.set(edgeType,!isEdgeTypeGreyedOut)
@@ -134,15 +135,16 @@ const EdgeLegendComponent: React.FC<EdgeLegendComponentProps> = ({edgeText, edge
             for(const element of symbolElements){
                 element.classList.toggle('legend-passive', !isEdgeTypeGreyedOut)
             }
+            legendSVGElement.classList.toggle
         }}
     >
-        <path className={edgeType + '-legend-edge' + ' ' + classNameEdge} d='m0 10 l80 0' markerEnd='url(#triangle)' style={{stroke:'black', strokeWidth: 1}}></path>
-        <path className = {classNameInteractiveEdge} d='m0 10 l80 0' style={{pointerEvents:'all', strokeWidth: 200}}></path>
-        <SymbolComponent edgeType = {edgeType} symbolId= {symbolId}/>
-        <text style = {{pointerEvents: 'all'}} className = {classNameInteractiveEdge + ' ' + classNameEdge} x = {92} y = {15}>{edgeText}</text>
+        <path className={classNameEdge} d='m0 10 l20 0 l20 0 l20 0 l20 0' markerEnd='url(#triangle)' markerMid={`url(#${markerId})`} ></path>
+        <path className = {classNameInteractiveEdge} d='m0 10 l80 0' ></path>
+        
+        <text x = {92} y = {15}>{edgeText}</text>
     </svg>)
 }  
-
+//<SymbolComponent edgeType = {edgeType} symbolId= {symbolId}/>
 interface NodeLegendComponentProps{
     nodeType:string
     isGreyedOutMap: Map<string,boolean>    
diff --git a/source/components/model/edges/multiEdge.tsx b/source/components/model/edges/multiEdge.tsx
index 0e7f47d..1f7ca3a 100644
--- a/source/components/model/edges/multiEdge.tsx
+++ b/source/components/model/edges/multiEdge.tsx
@@ -62,19 +62,7 @@ export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = (pr
   for(const singleLabel of (props.standardEdgeInformation.data?.edgeTypes as string[] ?? [])){
       label += singleLabel + ' '
   }
-  /*
-    <BaseEdge
-      id={hoverOverEdgeId} //Interaction Edge
-      path={edgePath} 
-      style= {{strokeWidth: 10, visibility: 'hidden', pointerEvents: 'all', cursor: 'pointer'}} 
-    />
-    <BaseEdge
-      id={props.standardEdgeInformation.id} //Shown Edge
-      path={edgePath} 
-      style= {defaultEdgeStyle}
-      markerEnd={arrowEnd ? 'url(#triangle)' : undefined} markerStart={arrowStart ? 'url(#triangle)' : undefined} 
-    />
-  */ 
+
   const edgeLabelId = props.standardEdgeInformation.id + '-edgeLabel'
   const hoverOverEdgeId = props.standardEdgeInformation.id + '-hoverover-interactive'
   var cssRule = `body:has(#${hoverOverEdgeId}:hover) #${edgeLabelId} {visibility: visible;}`
@@ -84,14 +72,7 @@ export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = (pr
   let classNameString = ''
   givenEdgeTypes.forEach((edgeTypeName) => {classNameString += ' ' + edgeTypeName + '-edge'})
   classNameString = classNameString.slice(1)
-  
-  return (
-    <>
-    <path
-      id={hoverOverEdgeId} //Interaction Edge
-      d={edgePath} 
-      style= {{strokeWidth: 10, visibility: 'hidden', pointerEvents: 'all', cursor: 'pointer'}} 
-    />
+  /*
     <path
       id={props.standardEdgeInformation.id} //Shown Edge
       className={classNameString + ' react-flow__edge-path'}
@@ -99,8 +80,10 @@ export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = (pr
       style = {defaultEdgeStyle}
       markerEnd={arrowEnd ? 'url(#triangle)' : undefined} markerStart={arrowStart ? 'url(#triangle)' : undefined} 
     />
-    
-    <EdgeMarkerComponent id={props.standardEdgeInformation.id} edgeTypes={givenEdgeTypes} edgePath={edgePath}/>
+  */
+  return (
+    <>
+    <PathWithMarkerComponent id={props.standardEdgeInformation.id} edgeTypes={givenEdgeTypes} edgePath={edgePath}/>
     <style>
       {cssRule}
     </style>
@@ -192,7 +175,7 @@ interface BezierCurve {
   readonly endPoint: XYPosition,
 }
 
-interface EdgeMarkerComponentProps {
+interface PathWithMarkerComponentProps {
   edgePath: string,
   edgeTypes: Set<EdgeTypeName>
   id: string
@@ -339,7 +322,7 @@ function splitBezierCurve(t:number[], startingPoint:XYPosition, startControlPoin
  * @param props 
  * @returns list of <use> tags which point to the corresponding symbol
  */
-const EdgeMarkerComponent : React.FC<EdgeMarkerComponentProps> = (props) => {
+const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = (props) => {
   //Parse 4 Points from the calculated bezier curve
   const pointArray = props.edgePath.replace('M','').replace('C','').split(' ').map((stringPoint)=> stringPoint.split(',').map((stringNumber) => +stringNumber))
   const startPointBez = {x: pointArray[0][0], y:pointArray[0][1]}
@@ -415,22 +398,30 @@ const EdgeMarkerComponent : React.FC<EdgeMarkerComponentProps> = (props) => {
     array.forEach((curve) => {
       dOfPath += `C${curve.controlPointStart.x},${curve.controlPointStart.y} ${curve.controlPointEnd.x},${curve.controlPointEnd.y} ${curve.endPoint.x},${curve.endPoint.y} `
     })
+
+    const edgeType = markerMap.get(index) ?? '' 
     dOfPath = dOfPath.trimEnd()
-    const pathId = props.id + `-${markerMap.get(index)}-marker-edge`
-    const markerEdge = (<path
+    const pathId = props.id + `-${edgeType}-marker-edge`
+    const markerEdge = (
+    <path
       key = {pathId} 
       id = {pathId}
-      className={'react-flow__edge-path'}
+      className={'react-flow__edge-path multi-edge' + ` ${edgeType}-edge`}
       d={dOfPath}
-      markerMid = {`url(#${edgeTypeToMarkerIdMapper(markerMap.get(index) ?? '')})`}
-      style= {{stroke: 'black', strokeWidth: 1, color: 'transparent'}} 
+      markerMid = {`url(#${edgeTypeToMarkerIdMapper(edgeType)})`} 
+      markerEnd = {'url(#triangle)'}
     />
     )
     markerEdgeMap.push(markerEdge)
   })
-  
+  const hoverOverEdgeId = props.id + '-hoverover-interactive'
   return (
   <>
+      <path
+      id={hoverOverEdgeId} //Interaction Edge
+      d={props.edgePath} 
+      className = 'interactive-edge' 
+    />
       {markerEdgeMap.map((self) => self)}
   </>)
 }

From e950e7cc527fc2ab4d53b751feef7f8f7f3c027f Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Thu, 1 Aug 2024 12:34:43 +0200
Subject: [PATCH 65/75] refactor: delete unused code

---
 css/main.css                         |  1 -
 source/components/legendComonent.tsx | 59 ++--------------------------
 2 files changed, 3 insertions(+), 57 deletions(-)

diff --git a/css/main.css b/css/main.css
index 2d87ac6..440c3d2 100644
--- a/css/main.css
+++ b/css/main.css
@@ -89,7 +89,6 @@ body {
 	background:
 	  conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
 	  var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
-	transition: .3s linear, color 0s, background-color 0s;
 	outline: var(--b) solid #0000;
 	outline-offset: .6em;
 	font-size: 16px;
diff --git a/source/components/legendComonent.tsx b/source/components/legendComonent.tsx
index ad1f731..53ff722 100644
--- a/source/components/legendComonent.tsx
+++ b/source/components/legendComonent.tsx
@@ -19,46 +19,7 @@ export function slideOutLegend(){
 
 export const LegendComponent: React.FC<LegendComponentProps> = ({}) => {
     
-    const edgeTypes = ['reads', 'defined-by','calls','returns','defines-on-call','defined-by-on-call', 'argument', 'side-effect-on-call', 'non-standard-evaluation']
-    
-    /*
-    const tempRule = 'body:has(.reads-legend-edge-interactive:hover) .function-call-node {opacity:20%}body:has(.reads-legend-edge-interactive:hover) .use-node{opacity:20%}'
-    let cssRule = ''
-    const greyOutStyle = '{opacity: 20%}'
-    const keepNormalStyle = '{opacity: 100%}'
-    
-    const nodeTypes = ['variable-definition-node', 'function-definition-node','value-node', 'function-call-node', 'use-node','exit-point-node']
-    nodeTypes.forEach((hoveredNodeType) => {
-        nodeTypes.forEach((toHideNodeType) => {
-            if(hoveredNodeType === toHideNodeType){
-                return
-            }
-            cssRule += `body:has(.${hoveredNodeType}-legend:hover) .${toHideNodeType} ${greyOutStyle}`
-        })
-        edgeTypes.forEach((toHideEdgeType) => {
-            //hide edge line
-            cssRule += `body:has(.${hoveredNodeType}-legend:hover) .${toHideEdgeType}-edge ${greyOutStyle}`
-            //hide edge symbol
-            cssRule += `body:has(.${hoveredNodeType}-legend:hover) .${toHideEdgeType}-edge-symbol ${greyOutStyle}`
-        })
-        //cssRule += `body:has(.${hoveredNodeType}-legend:hover) .${hoveredNodeType} {opacity: 100%}`
-    })
-    edgeTypes.forEach((hoveredEdgeType)=>{
-        nodeTypes.forEach((toHideNodeType)=> {
-            cssRule += `body:has(.${hoveredEdgeType}-legend-edge-interactive:hover) .${toHideNodeType} ${greyOutStyle}`
-        })
-        edgeTypes.forEach((toHideEdgeType) => {
-            if(hoveredEdgeType === toHideEdgeType){
-                return
-            }
-            //hide edge line
-            cssRule += `body:has(.${hoveredEdgeType}-legend-edge-interactive:hover) .${toHideEdgeType}-edge ${greyOutStyle}`
-            //hide edge symbol
-            cssRule += `body:has(.${hoveredEdgeType}-legend-edge-interactive:hover) .${toHideEdgeType}-edge-symbol ${greyOutStyle}`
-        })
-        cssRule += `body:has(.${hoveredEdgeType}-legend-edge-interactive:hover) .${hoveredEdgeType}-edge ${keepNormalStyle}`
-    })
-    */
+
     const isGreyedOutMap = new Map<string,boolean>()
     
     return (
@@ -90,20 +51,6 @@ export const LegendComponent: React.FC<LegendComponentProps> = ({}) => {
     )
 }
 
-interface SymbolComponentProps {
-    symbolId: string
-    edgeType:string
-}
-
-const SymbolComponent: React.FC<SymbolComponentProps> = ({symbolId,edgeType}) => {
-    return(<>
-        <use className = {edgeType + '-edge-symbol'} key = {'legend-symbol-1' + symbolId} href = {`#${symbolId}`} x = {20} y = {10}></use>
-        <use className = {edgeType + '-edge-symbol'} key = {'legend-symbol-2' + symbolId} href = {`#${symbolId}`} x = {40} y = {10}></use>
-        <use className = {edgeType + '-edge-symbol'} key = {'legend-symbol-3' + symbolId} href = {`#${symbolId}`} x = {60} y = {10}></use>
-    </>    
-    )
-}
-
 interface EdgeLegendComponentProps {
     edgeType:string
     edgeText:string
@@ -135,7 +82,7 @@ const EdgeLegendComponent: React.FC<EdgeLegendComponentProps> = ({edgeText, edge
             for(const element of symbolElements){
                 element.classList.toggle('legend-passive', !isEdgeTypeGreyedOut)
             }
-            legendSVGElement.classList.toggle
+            legendSVGElement.classList.toggle('legend-passive', !isEdgeTypeGreyedOut)
         }}
     >
         <path className={classNameEdge} d='m0 10 l20 0 l20 0 l20 0 l20 0' markerEnd='url(#triangle)' markerMid={`url(#${markerId})`} ></path>
@@ -144,7 +91,7 @@ const EdgeLegendComponent: React.FC<EdgeLegendComponentProps> = ({edgeText, edge
         <text x = {92} y = {15}>{edgeText}</text>
     </svg>)
 }  
-//<SymbolComponent edgeType = {edgeType} symbolId= {symbolId}/>
+
 interface NodeLegendComponentProps{
     nodeType:string
     isGreyedOutMap: Map<string,boolean>    

From c437b00c423aab02ecf79681d51bedab5ae5cb8d Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Mon, 5 Aug 2024 11:11:30 +0200
Subject: [PATCH 66/75] feat: legend grey-out persists with newly generated
 graph

---
 .vscode/settings.json                         |   6 +
 source/components/graphComponent.tsx          | 195 ++----------------
 source/components/legendComonent.tsx          |   9 +-
 source/components/model/edges/multiEdge.tsx   |  76 +++----
 source/components/model/graphTransition.ts    |  12 +-
 .../components/model/nodes/nodeDefinition.tsx |  24 ++-
 source/components/model/viewModel.tsx         |   4 +
 source/components/svgDefinitions.tsx          | 185 +++++++++++++++++
 source/index.tsx                              |   6 +-
 9 files changed, 271 insertions(+), 246 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 source/components/model/viewModel.tsx
 create mode 100644 source/components/svgDefinitions.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..83637c9
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+    "cSpell.words": [
+        "Layouted",
+        "Layouting"
+    ]
+}
\ No newline at end of file
diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 960fb4f..d0908eb 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -47,6 +47,8 @@ import { flattenToNodeArray, foldIntoElkHierarchy } from './graphHierarchy';
 import { ExtendedExtendedEdge, transformGraphForLayouting, transformGraphForShowing } from './model/graphTransition';
 import { MultiEdge } from './model/edges/multiEdge';
 import { slideInLegend } from './legendComonent';
+import { SvgDefinitionsComponent } from './svgDefinitions';
+import { ViewModel } from './model/viewModel';
 
 
 
@@ -64,7 +66,11 @@ const elkOptions: LayoutOptions = {
  };
 
 
- async function getLayoutedElements(nodes: Node[], nodeIdMap: Map<string,Node>, edges: ElkExtendedEdge[], options: LayoutOptions): Promise<{ nodes: Node[]; edges: Edge[] }> {
+ async function getLayoutedElements(nodes: Node[],
+                                    nodeIdMap: Map<string,Node>, 
+                                    edges: ElkExtendedEdge[], 
+                                    options: LayoutOptions,
+                                    viewModel: ViewModel): Promise<{ nodes: Node[]; edges: Edge[] }> {
    const isHorizontal = options?.['elk.direction'] === 'RIGHT';
 
    const graph: ElkNode = transformGraphForLayouting(nodes,nodeIdMap, edges, options, isHorizontal)
@@ -75,9 +81,9 @@ const elkOptions: LayoutOptions = {
 
    //console.log('after Layout:')
    //console.log(layoutedGraph)
-   const endGraph = transformGraphForShowing(layoutedGraph, isHorizontal)
+   const endGraph = transformGraphForShowing(layoutedGraph, isHorizontal, viewModel)
 
-   //console.log(endGraph)
+   console.log(endGraph)
 
 
    return endGraph
@@ -98,13 +104,14 @@ const elkOptions: LayoutOptions = {
 export interface LayoutFlowProps {
   readonly graph: VisualizationGraph;
   readonly assignGraphUpdater: (updater: (g: VisualizationGraph) => void) => void;
+  readonly viewModel: ViewModel
 }
 
- export function LayoutFlow({ graph, assignGraphUpdater } : LayoutFlowProps) {
+ export function LayoutFlow({ graph, assignGraphUpdater, viewModel } : LayoutFlowProps) {
    const [currentGraph, setCurrentGraph] = useState(graph);
    const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
    const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
-   const nodeMap = new Map<string,Node>() // correct Way to do it?????
+   const nodeMap = new Map<string,Node>()
    const { fitView } = useReactFlow();
    
    assignGraphUpdater(g =>  {
@@ -118,10 +125,9 @@ export interface LayoutFlowProps {
        const ns = g ? g.nodesInfo.nodes : nodes;
        const es = g ? g.edges : edges;
        const nm = g ? g.nodesInfo.nodeMap: nodeMap;
-       getLayoutedElements(ns, nm, convertToExtendedEdges(es), opts).then(({ nodes: layoutedNodes, edges: layoutedEdges }) => {
+       getLayoutedElements(ns, nm, convertToExtendedEdges(es), opts, viewModel).then(({ nodes: layoutedNodes, edges: layoutedEdges }) => {
          setNodes(layoutedNodes);
          setEdges(layoutedEdges);
-         //console.log(layoutedNodes)
 
          window.requestAnimationFrame(() => fitView());
        });
@@ -166,180 +172,7 @@ export interface LayoutFlowProps {
     <>
       <svg style={{ position: 'absolute', top: 0, left: 0 }}>
         <defs>
-          <marker
-            id="triangle"
-            viewBox="0 0 10 10"
-            refX="6"
-            refY="5"
-            markerUnits="strokeWidth"
-            markerWidth="10"
-            markerHeight="10"
-            orient="auto">
-            <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
-          </marker>
-          
-          <marker
-            id="dotMarker"
-            viewBox="-5 -5 10 10"
-            markerUnits="strokeWidth"
-            markerWidth="10"
-            markerHeight="10"
-            orient="auto">
-              <circle className = 'dotMarker' r = '3'/>
-          </marker>
-
-          <marker
-            id="crossMarker"
-            viewBox="-5 -5 10 10"
-            markerUnits="strokeWidth"
-            markerWidth="10"
-            markerHeight="10"
-            orient="auto">
-              <line x1='0' y1='3' x2='0' y2='-3' style={{stroke:'black', strokeWidth: '1'}}></line>
-              <line x1='3' y1='0' x2='-3' y2='0' style={{stroke:'black', strokeWidth: '1'}}></line>
-          </marker>
-
-          <marker
-            id="hexagonHollowMarker"
-            viewBox="-10 -10 100 100"
-            markerUnits="strokeWidth"
-            markerWidth="50"
-            markerHeight="50"
-            orient="auto">
-            <g transform='translate(-12,-12)'>
-              <path d="m16.476 3c.369 0 .709.197.887.514.9 1.595 3.633 6.445 4.509 8.001.075.131.118.276.126.423.012.187-.029.377-.126.547-.876 1.556-3.609 6.406-4.509 8-.178.318-.518.515-.887.515h-8.951c-.369 0-.709-.197-.887-.515-.899-1.594-3.634-6.444-4.51-8-.085-.151-.128-.318-.128-.485s.043-.334.128-.485c.876-1.556 3.611-6.406 4.51-8.001.178-.317.518-.514.887-.514zm-8.672 1.5-4.228 7.5 4.228 7.5h8.393l4.227-7.5-4.227-7.5z"/>
-            </g> 
-          </marker>
-
-          <marker
-            id="rectangleHollowMarker"
-            viewBox="-500 -500 1000 1000"
-            markerUnits="strokeWidth"
-            markerWidth="70"
-            markerHeight="70"
-            orient="auto">
-              <g transform='translate(-150, -75)'>
-                <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                  <path d="m3 17v3c0 .621.52 1 1 1h3v-1.5h-2.5v-2.5zm8.5 4h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5zm5-4h-1.5v2.5h-2.5v1.5h3c.478 0 1-.379 1-1zm-1.5-1v-3.363h1.5v3.363zm-15-3.363v3.363h-1.5v-3.363zm15-1v-3.637h1.5v3.637zm-15-3.637v3.637h-1.5v-3.637zm12.5-5v1.5h2.5v2.5h1.5v-3c0-.478-.379-1-1-1zm-10 0h-3c-.62 0-1 .519-1 1v3h1.5v-2.5h2.5zm4.5 1.5h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5z" fillRule="nonzero"/>
-                </svg>
-              </g>
-          </marker>
-
-          <marker
-            id="triangleHollowMarker"
-            viewBox="-500 -500 1000 1000"
-            markerUnits="strokeWidth"
-            markerWidth="70"
-            markerHeight="70"
-            orient="auto">
-              <g transform='translate(-150, -85)'>
-              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.882 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm1.935-.384h15.939l-7.97-14.22z" fillRule="nonzero"/></svg>
-              </g>
-          </marker>
-
-          <marker
-            id="rhombusHollowMarker"
-            viewBox="-500 -500 1000 1000"
-            markerUnits="strokeWidth"
-            markerWidth="70"
-            markerHeight="70"
-            orient="auto">
-              <g transform='translate(-150, -75)'>
-                <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.262 2.306c.196-.196.461-.306.738-.306s.542.11.738.306c1.917 1.917 7.039 7.039 8.956 8.956.196.196.306.461.306.738s-.11.542-.306.738c-1.917 1.917-7.039 7.039-8.956 8.956-.196.196-.461.306-.738.306s-.542-.11-.738-.306c-1.917-1.917-7.039-7.039-8.956-8.956-.196-.196-.306-.461-.306-.738s.11-.542.306-.738c1.917-1.917 7.039-7.039 8.956-8.956zm-7.573 9.694 8.311 8.311 8.311-8.311-8.311-8.311z" fillRule="nonzero"/></svg>
-              </g>
-          </marker>
-
-
-          <marker
-            id="starFilledMarker"
-            viewBox="-500 -500 1000 1000"
-            markerUnits="strokeWidth"
-            markerWidth="70"
-            markerHeight="70"
-            orient="auto">
-              <g transform='translate(-150, -75)'>
-              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.322 2.923c.126-.259.39-.423.678-.423.289 0 .552.164.678.423.974 1.998 2.65 5.44 2.65 5.44s3.811.524 6.022.829c.403.055.65.396.65.747 0 .19-.072.383-.231.536-1.61 1.538-4.382 4.191-4.382 4.191s.677 3.767 1.069 5.952c.083.462-.275.882-.742.882-.122 0-.244-.029-.355-.089-1.968-1.048-5.359-2.851-5.359-2.851s-3.391 1.803-5.359 2.851c-.111.06-.234.089-.356.089-.465 0-.825-.421-.741-.882.393-2.185 1.07-5.952 1.07-5.952s-2.773-2.653-4.382-4.191c-.16-.153-.232-.346-.232-.535 0-.352.249-.694.651-.748 2.211-.305 6.021-.829 6.021-.829s1.677-3.442 2.65-5.44z" fillRule="nonzero"/></svg>
-              </g>
-          </marker>
-
-          <marker
-            id="circleHollowMarker"
-            viewBox="-500 -500 1000 1000"
-            markerUnits="strokeWidth"
-            markerWidth="70"
-            markerHeight="70"
-            orient="auto">
-              <g transform='translate(-150, -75)'>
-              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.998 2c5.517 0 9.997 4.48 9.997 9.998 0 5.517-4.48 9.997-9.997 9.997-5.518 0-9.998-4.48-9.998-9.997 0-5.518 4.48-9.998 9.998-9.998zm0 1.5c-4.69 0-8.498 3.808-8.498 8.498s3.808 8.497 8.498 8.497 8.497-3.807 8.497-8.497-3.807-8.498-8.497-8.498z" fillRule="nonzero"/></svg>
-            </g>
-          </marker>
-
-          <marker
-            id="cubeFilledMarker"
-            viewBox="-500 -500 1000 1000"
-            markerUnits="strokeWidth"
-            markerWidth="70"
-            markerHeight="70"
-            orient="auto">
-              <g transform='translate(-150, -75)'>
-              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.514 6.61c-.317.179-.514.519-.514.887v8.95c0 .37.197.708.514.887 1.597.901 6.456 3.639 8.005 4.512.152.085.319.128.487.128.164 0 .328-.041.477-.123 1.549-.855 6.39-3.523 7.994-4.408.323-.177.523-.519.523-.891v-9.055c0-.368-.197-.708-.515-.887-1.595-.899-6.444-3.632-7.999-4.508-.151-.085-.319-.128-.486-.128-.168 0-.335.043-.486.128-1.555.876-6.405 3.609-8 4.508m15.986 2.115v7.525l-6.75 3.722v-7.578zm-15 7.425v-7.458l6.75 3.75v7.511zm.736-8.769 6.764-3.813 6.801 3.834-6.801 3.716z" fillRule="nonzero"/></svg>
-            </g>
-          </marker>
-
-          <symbol id="dotSymbol" width="10" height="10" overflow={'visible'}>
-            <g>
-              <circle r = '3' cx={0} cy = {0} overflow={'visible'} />
-            </g>
-          </symbol>
-
-          <symbol id="crossSymbol" width="10" height="10" overflow={'visible'}>  
-            <g>
-            <line x1='0' y1='3' x2='0' y2='-3' style={{stroke:'black', strokeWidth: '1'}}></line>
-            <line x1='3' y1='0' x2='-3' y2='0' style={{stroke:'black', strokeWidth: '1'}}></line>
-          </g>
-            </symbol>
-          
-          <symbol id = 'hexagonHollowSymbol' width="2.5" height="2.5" viewBox = '0 0 5 5' overflow={'visible'}>
-            <g transform='translate(-12,-12)'>
-              <path d="m16.476 3c.369 0 .709.197.887.514.9 1.595 3.633 6.445 4.509 8.001.075.131.118.276.126.423.012.187-.029.377-.126.547-.876 1.556-3.609 6.406-4.509 8-.178.318-.518.515-.887.515h-8.951c-.369 0-.709-.197-.887-.515-.899-1.594-3.634-6.444-4.51-8-.085-.151-.128-.318-.128-.485s.043-.334.128-.485c.876-1.556 3.611-6.406 4.51-8.001.178-.317.518-.514.887-.514zm-8.672 1.5-4.228 7.5 4.228 7.5h8.393l4.227-7.5-4.227-7.5z"/>
-            </g>
-          </symbol>
-          
-          <symbol id = 'rectangleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
-            <g transform='translate(-2.5,-2.5)'>
-              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3 17v3c0 .621.52 1 1 1h3v-1.5h-2.5v-2.5zm8.5 4h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5zm5-4h-1.5v2.5h-2.5v1.5h3c.478 0 1-.379 1-1zm-1.5-1v-3.363h1.5v3.363zm-15-3.363v3.363h-1.5v-3.363zm15-1v-3.637h1.5v3.637zm-15-3.637v3.637h-1.5v-3.637zm12.5-5v1.5h2.5v2.5h1.5v-3c0-.478-.379-1-1-1zm-10 0h-3c-.62 0-1 .519-1 1v3h1.5v-2.5h2.5zm4.5 1.5h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5z" fillRule="nonzero"/></svg>
-            </g>
-          </symbol>
-          
-          <symbol id = 'triangleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
-            <g transform='translate(-2.5,-2.5)'>
-              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.882 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm1.935-.384h15.939l-7.97-14.22z" fillRule="nonzero"/></svg>
-            </g>
-          </symbol>
-          
-          <symbol id='rhombusHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
-            <g transform='translate(-2.5,-2.5)'>
-              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.262 2.306c.196-.196.461-.306.738-.306s.542.11.738.306c1.917 1.917 7.039 7.039 8.956 8.956.196.196.306.461.306.738s-.11.542-.306.738c-1.917 1.917-7.039 7.039-8.956 8.956-.196.196-.461.306-.738.306s-.542-.11-.738-.306c-1.917-1.917-7.039-7.039-8.956-8.956-.196-.196-.306-.461-.306-.738s.11-.542.306-.738c1.917-1.917 7.039-7.039 8.956-8.956zm-7.573 9.694 8.311 8.311 8.311-8.311-8.311-8.311z" fillRule="nonzero"/></svg>
-            </g>
-          </symbol>
-
-          <symbol id='starFilledSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
-            <g transform='translate(-2.5,-2.5)'>
-            <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.322 2.923c.126-.259.39-.423.678-.423.289 0 .552.164.678.423.974 1.998 2.65 5.44 2.65 5.44s3.811.524 6.022.829c.403.055.65.396.65.747 0 .19-.072.383-.231.536-1.61 1.538-4.382 4.191-4.382 4.191s.677 3.767 1.069 5.952c.083.462-.275.882-.742.882-.122 0-.244-.029-.355-.089-1.968-1.048-5.359-2.851-5.359-2.851s-3.391 1.803-5.359 2.851c-.111.06-.234.089-.356.089-.465 0-.825-.421-.741-.882.393-2.185 1.07-5.952 1.07-5.952s-2.773-2.653-4.382-4.191c-.16-.153-.232-.346-.232-.535 0-.352.249-.694.651-.748 2.211-.305 6.021-.829 6.021-.829s1.677-3.442 2.65-5.44z" fillRule="nonzero"/></svg>
-            </g>
-          </symbol>
-
-          <symbol id='circleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
-            <g transform='translate(-2.5,-2.5)'>
-            <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.998 2c5.517 0 9.997 4.48 9.997 9.998 0 5.517-4.48 9.997-9.997 9.997-5.518 0-9.998-4.48-9.998-9.997 0-5.518 4.48-9.998 9.998-9.998zm0 1.5c-4.69 0-8.498 3.808-8.498 8.498s3.808 8.497 8.498 8.497 8.497-3.807 8.497-8.497-3.807-8.498-8.497-8.498z" fillRule="nonzero"/></svg>
-            </g>
-          </symbol>
-
-          <symbol id='cubeFilledSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
-            <g transform='translate(-2.5,-2.5)'>
-              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.514 6.61c-.317.179-.514.519-.514.887v8.95c0 .37.197.708.514.887 1.597.901 6.456 3.639 8.005 4.512.152.085.319.128.487.128.164 0 .328-.041.477-.123 1.549-.855 6.39-3.523 7.994-4.408.323-.177.523-.519.523-.891v-9.055c0-.368-.197-.708-.515-.887-1.595-.899-6.444-3.632-7.999-4.508-.151-.085-.319-.128-.486-.128-.168 0-.335.043-.486.128-1.555.876-6.405 3.609-8 4.508m15.986 2.115v7.525l-6.75 3.722v-7.578zm-15 7.425v-7.458l6.75 3.75v7.511zm.736-8.769 6.764-3.813 6.801 3.834-6.801 3.716z" fillRule="nonzero"/></svg>
-            </g>
-          </symbol>
+          <SvgDefinitionsComponent/>
         </defs>
       </svg>
      <ReactFlow
diff --git a/source/components/legendComonent.tsx b/source/components/legendComonent.tsx
index 53ff722..37c87b1 100644
--- a/source/components/legendComonent.tsx
+++ b/source/components/legendComonent.tsx
@@ -1,10 +1,11 @@
 import { useRef } from "react";
 import { edgeTypeToMarkerIdMapper, edgeTypeToSymbolIdMapper } from "./model/edges/multiEdge";
 import { SideEffectOnCallEdge } from "./model/edges/sideEffectOnCallEdge";
+import { ViewModel } from "./model/viewModel";
 
 
 interface LegendComponentProps {
-    
+    viewModel: ViewModel
 }
 
 export function slideInLegend() {
@@ -17,10 +18,10 @@ export function slideOutLegend(){
     element.classList.toggle('visible');
 }
 
-export const LegendComponent: React.FC<LegendComponentProps> = ({}) => {
+export const LegendComponent: React.FC<LegendComponentProps> = ({viewModel}) => {
     
 
-    const isGreyedOutMap = new Map<string,boolean>()
+    const isGreyedOutMap = viewModel.isGreyedOutMap
     
     return (
         <div className = 'slide-in-legend' id = 'slide-in-legend' >
@@ -61,7 +62,6 @@ interface EdgeLegendComponentProps {
 const EdgeLegendComponent: React.FC<EdgeLegendComponentProps> = ({edgeText, edgeType, isGreyedOutMap}) => {
     const classNameEdge = edgeType + '-edge' + ' legend-edge' + ' ' + edgeType + '-legend-edge'
     const classNameInteractiveEdge = edgeType + '-legend-interactive-edge' + ' legend-interactive-edge' 
-    const symbolId = edgeTypeToSymbolIdMapper(edgeType)
     const markerId = edgeTypeToMarkerIdMapper(edgeType)
     const legendId = edgeType + '-legend'
     return(<svg
@@ -70,6 +70,7 @@ const EdgeLegendComponent: React.FC<EdgeLegendComponentProps> = ({edgeText, edge
             const pathElements = document.getElementsByClassName(`${edgeType}-edge`) as HTMLCollectionOf<SVGPathElement>
             const symbolElements = document.getElementsByClassName(`${edgeType}-edge-symbol`) as HTMLCollectionOf<SVGUseElement>
             const legendSVGElement = document.getElementById(legendId) as HTMLElement
+            
             //get the greyed out state and set it correctly
             const isEdgeTypeGreyedOut:boolean = isGreyedOutMap.get(edgeType) ?? false
             isGreyedOutMap.set(edgeType,!isEdgeTypeGreyedOut)
diff --git a/source/components/model/edges/multiEdge.tsx b/source/components/model/edges/multiEdge.tsx
index 1f7ca3a..f9d1ae3 100644
--- a/source/components/model/edges/multiEdge.tsx
+++ b/source/components/model/edges/multiEdge.tsx
@@ -2,11 +2,12 @@ import { useCallback } from "react";
 import { BaseEdge, Edge, EdgeLabelRenderer, EdgeMouseHandler, EdgeProps, EdgeTypes, InternalNode, ReactFlowState, XYPosition, getBezierPath, useInternalNode, useStore } from '@xyflow/react';
 import { getEdgeParams } from "./edgeBase";
 import { EdgeType, EdgeTypeName } from "@eagleoutice/flowr/dataflow/graph/edge";
+import { ViewModel } from "../viewModel";
 
 const amountOfSamplePointsForLength = 100
 const lengthBetweenMarkerPoints = 10
 const startEndDistanceToMarkers = 10
-const bezierSplitConst = 1 // 0 <= bezierSplitConst <= 1
+
 export function MultiEdge(props:EdgeProps){
     
   return <BodyMultiEdgeComponent
@@ -23,9 +24,9 @@ interface BodyMultiEdgeComponentProps {
     readonly target: string;
 }
 
-export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = (props) => {
-  const sourceNode = useInternalNode(props.source)
-  const targetNode = useInternalNode(props.target)
+export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = ({standardEdgeInformation, arrowEnd, source, target}) => {
+  const sourceNode = useInternalNode(source)
+  const targetNode = useInternalNode(target)
 
   if (!sourceNode || !targetNode) {
     return null;
@@ -34,8 +35,8 @@ export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = (pr
   const isBiDirectionEdge = useStore((s: ReactFlowState) => {
     const edgeExists = s.edges.some(
       (e) =>
-        (e.source === props.standardEdgeInformation.target && e.target === props.standardEdgeInformation.source) ||
-        (e.target === props.standardEdgeInformation.source && e.source === props.standardEdgeInformation.target),
+        (e.source === standardEdgeInformation.target && e.target === standardEdgeInformation.source) ||
+        (e.target === standardEdgeInformation.source && e.source === standardEdgeInformation.target),
     );
 
     return edgeExists;
@@ -55,35 +56,27 @@ export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = (pr
   //const labelPositionX = targetX - sourceX > 0 ? labelX + offsetX / 2 : labelX - offsetX / 2 
   //const labelPositionY = targetY - sourceY > 0 ? labelY + offsetY / 2 : labelY - offsetY / 2
   const defaultEdgeStyle: React.CSSProperties = {stroke: 'black', pointerEvents: 'none', cursor: 'none'}
-  const arrowEnd = true
   const arrowStart = false
 
   let label = ''
-  for(const singleLabel of (props.standardEdgeInformation.data?.edgeTypes as string[] ?? [])){
+  for(const singleLabel of (standardEdgeInformation.data?.edgeTypes as string[] ?? [])){
       label += singleLabel + ' '
   }
 
-  const edgeLabelId = props.standardEdgeInformation.id + '-edgeLabel'
-  const hoverOverEdgeId = props.standardEdgeInformation.id + '-hoverover-interactive'
+  const edgeLabelId = standardEdgeInformation.id + '-edgeLabel'
+  const hoverOverEdgeId = standardEdgeInformation.id + '-hoverover-interactive'
   var cssRule = `body:has(#${hoverOverEdgeId}:hover) #${edgeLabelId} {visibility: visible;}`
   
-  const givenEdgeTypes = props.standardEdgeInformation.data?.edgeTypes as Set<EdgeTypeName> ?? new Set<EdgeTypeName>()
+  const givenEdgeTypes = standardEdgeInformation.data?.edgeTypes as Set<EdgeTypeName> ?? new Set<EdgeTypeName>()
+  
   //insert respective className
   let classNameString = ''
   givenEdgeTypes.forEach((edgeTypeName) => {classNameString += ' ' + edgeTypeName + '-edge'})
   classNameString = classNameString.slice(1)
-  /*
-    <path
-      id={props.standardEdgeInformation.id} //Shown Edge
-      className={classNameString + ' react-flow__edge-path'}
-      d={edgePath} 
-      style = {defaultEdgeStyle}
-      markerEnd={arrowEnd ? 'url(#triangle)' : undefined} markerStart={arrowStart ? 'url(#triangle)' : undefined} 
-    />
-  */
+  
   return (
     <>
-    <PathWithMarkerComponent id={props.standardEdgeInformation.id} edgeTypes={givenEdgeTypes} edgePath={edgePath}/>
+    <PathWithMarkerComponent id={standardEdgeInformation.id} edgeTypes={givenEdgeTypes} edgePath={edgePath} viewModel={standardEdgeInformation.data?.viewModel as ViewModel ?? new ViewModel()}/>
     <style>
       {cssRule}
     </style>
@@ -179,6 +172,7 @@ interface PathWithMarkerComponentProps {
   edgePath: string,
   edgeTypes: Set<EdgeTypeName>
   id: string
+  viewModel: ViewModel
 }
 
 const edgeTypeNameMap:{[index: string]:string} = {
@@ -317,14 +311,10 @@ function splitBezierCurve(t:number[], startingPoint:XYPosition, startControlPoin
   return returnArray
 }
 
-/**
- * Creates Evenly spaced Symbols to the corresponding MarkerTypes
- * @param props 
- * @returns list of <use> tags which point to the corresponding symbol
- */
-const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = (props) => {
+/** */
+const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = ({edgePath, edgeTypes, id, viewModel}) => {
   //Parse 4 Points from the calculated bezier curve
-  const pointArray = props.edgePath.replace('M','').replace('C','').split(' ').map((stringPoint)=> stringPoint.split(',').map((stringNumber) => +stringNumber))
+  const pointArray = edgePath.replace('M','').replace('C','').split(' ').map((stringPoint)=> stringPoint.split(',').map((stringNumber) => +stringNumber))
   const startPointBez = {x: pointArray[0][0], y:pointArray[0][1]}
   const startControlPointBez = {x: pointArray[1][0], y:pointArray[1][1]}
   const endControlPointBez = {x: pointArray[2][0], y:pointArray[2][1]}
@@ -333,16 +323,16 @@ const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = (props)
   const lengthOfCurve = calculateLengthOfBezierCurve(startPointBez,startControlPointBez,endControlPointBez,endPointBez)
 
   //check if curve is too small to fit many points
-  let amountOfMarkerPointsInBetween = Math.floor((lengthOfCurve - startEndDistanceToMarkers * 2 - 2 * lengthBetweenMarkerPoints * props.edgeTypes.size) / lengthBetweenMarkerPoints)
+  let amountOfMarkerPointsInBetween = Math.floor((lengthOfCurve - startEndDistanceToMarkers * 2 - 2 * lengthBetweenMarkerPoints * edgeTypes.size) / lengthBetweenMarkerPoints)
   if(amountOfMarkerPointsInBetween <= 0){
     amountOfMarkerPointsInBetween = 0
   }
 
   const maximumOfInBetweenPoints = 4
 
-  const individualMarkerPointsInBetween = Math.floor(amountOfMarkerPointsInBetween / props.edgeTypes.size) > maximumOfInBetweenPoints ? 
+  const individualMarkerPointsInBetween = Math.floor(amountOfMarkerPointsInBetween / edgeTypes.size) > maximumOfInBetweenPoints ? 
                                           maximumOfInBetweenPoints : 
-                                          Math.floor(amountOfMarkerPointsInBetween / props.edgeTypes.size) 
+                                          Math.floor(amountOfMarkerPointsInBetween / edgeTypes.size) 
 
   //calculate which symbols need to be on which points
   //index -> edgeType
@@ -354,23 +344,23 @@ const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = (props)
 
 
   let indexOfMarkerType = 0
-  for(let value of props.edgeTypes){
+  for(let value of edgeTypes){
     markerMap.set(indexOfMarkerType, value)
 
     //evenly space markerPoints
     let percentageArray: number[] = []
     if(individualMarkerPointsInBetween === 0){
-      percentageArray = [1 / (1 + props.edgeTypes.size) * (1 + indexOfMarkerType) ]
+      percentageArray = [1 / (1 + edgeTypes.size) * (1 + indexOfMarkerType) ]
     } else {
       let nextPoint = (startEndDistanceToMarkers + lengthBetweenMarkerPoints *  indexOfMarkerType)/ lengthOfCurve // first Marker
-      while (nextPoint < 1 - (startEndDistanceToMarkers + lengthBetweenMarkerPoints *  props.edgeTypes.size)/ lengthOfCurve){
+      while (nextPoint < 1 - (startEndDistanceToMarkers + lengthBetweenMarkerPoints *  edgeTypes.size)/ lengthOfCurve){
         percentageArray.push(nextPoint)
-        nextPoint += (props.edgeTypes.size) * //Correctly jump for each marker
-                      (1 - 2 * (startEndDistanceToMarkers + lengthBetweenMarkerPoints * props.edgeTypes.size) / lengthOfCurve) * // use in between distance as reference 
-                      1 / (individualMarkerPointsInBetween * props.edgeTypes.size + 1) //spacing between points
+        nextPoint += (edgeTypes.size) * //Correctly jump for each marker
+                      (1 - 2 * (startEndDistanceToMarkers + lengthBetweenMarkerPoints * edgeTypes.size) / lengthOfCurve) * // use in between distance as reference 
+                      1 / (individualMarkerPointsInBetween * edgeTypes.size + 1) //spacing between points
       }
       // last marker
-      nextPoint = 1 - (startEndDistanceToMarkers + lengthBetweenMarkerPoints *  (props.edgeTypes.size - (indexOfMarkerType + 1)))/ lengthOfCurve 
+      nextPoint = 1 - (startEndDistanceToMarkers + lengthBetweenMarkerPoints *  (edgeTypes.size - (indexOfMarkerType + 1)))/ lengthOfCurve 
       percentageArray.push(nextPoint)
     }
     
@@ -385,7 +375,7 @@ const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = (props)
   let useArray:JSX.Element[] = []
   markerMap.forEach((edgeType,offsetIndex) => {
     const pointsOfMarker = pointsMap.get(offsetIndex)
-    const useBlockArray = pointsOfMarker?.map((point) =>{return (<use className = {`${edgeType}-edge-symbol`}key = {props.id + '-' + point.x + '-' + point.y} id = {props.id + '-' + point.x + '-' + point.y} href={`#${edgeTypeToSymbolIdMapper(edgeType)}`} x={point.x} y={point.y} />)}) ?? []
+    const useBlockArray = pointsOfMarker?.map((point) =>{return (<use className = {`${edgeType}-edge-symbol`}key = {id + '-' + point.x + '-' + point.y} id = {id + '-' + point.x + '-' + point.y} href={`#${edgeTypeToSymbolIdMapper(edgeType)}`} x={point.x} y={point.y} />)}) ?? []
     useArray = useArray.concat(useBlockArray)
   }) 
   
@@ -401,12 +391,12 @@ const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = (props)
 
     const edgeType = markerMap.get(index) ?? '' 
     dOfPath = dOfPath.trimEnd()
-    const pathId = props.id + `-${edgeType}-marker-edge`
+    const pathId = id + `-${edgeType}-marker-edge`
     const markerEdge = (
     <path
       key = {pathId} 
       id = {pathId}
-      className={'react-flow__edge-path multi-edge' + ` ${edgeType}-edge`}
+      className={'react-flow__edge-path multi-edge' + ` ${edgeType}-edge` + ((viewModel.isGreyedOutMap.get(edgeType) ?? false) ? ' legend-passive': '')}
       d={dOfPath}
       markerMid = {`url(#${edgeTypeToMarkerIdMapper(edgeType)})`} 
       markerEnd = {'url(#triangle)'}
@@ -414,12 +404,12 @@ const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = (props)
     )
     markerEdgeMap.push(markerEdge)
   })
-  const hoverOverEdgeId = props.id + '-hoverover-interactive'
+  const hoverOverEdgeId = id + '-hoverover-interactive'
   return (
   <>
       <path
       id={hoverOverEdgeId} //Interaction Edge
-      d={props.edgePath} 
+      d={edgePath} 
       className = 'interactive-edge' 
     />
       {markerEdgeMap.map((self) => self)}
diff --git a/source/components/model/graphTransition.ts b/source/components/model/graphTransition.ts
index da7b13d..d520a5f 100644
--- a/source/components/model/graphTransition.ts
+++ b/source/components/model/graphTransition.ts
@@ -2,12 +2,13 @@ import { ElkExtendedEdge, ElkNode, LayoutOptions } from "elkjs";
 import { flattenToNodeArray, foldIntoElkHierarchy} from "../graphHierarchy";
 import { Edge, Node } from '@xyflow/react'
 import { edgeTagMapper } from "./edges/edgeBase";
+import { ViewModel } from "./viewModel";
 
 export function transformGraphForLayouting(nodes: Node[], nodeIdMap: Map<string,Node>, edges: ElkExtendedEdge[], options: LayoutOptions, isHorizontal: boolean):ElkNode{
   const toReturn: ElkNode = {
     id: 'root',
     layoutOptions: options,
-    children: foldIntoElkHierarchy(nodes,nodeIdMap,isHorizontal),
+    children: foldIntoElkHierarchy(nodes, nodeIdMap, isHorizontal),
     edges: edges
     };
 
@@ -19,9 +20,9 @@ export interface ExtendedExtendedEdge extends ElkExtendedEdge{
   data:any
   edgeType: string
   label:string
- }
+}
 
-export function transformGraphForShowing(layoutedGraph: ElkNode, isHorizontal: boolean): { nodes: Node[]; edges: Edge[] }{
+export function transformGraphForShowing(layoutedGraph: ElkNode, isHorizontal: boolean, viewModel: ViewModel): { nodes: Node[]; edges: Edge[] }{
   
   const newNodes = flattenToNodeArray(layoutedGraph.children ?? [])
 
@@ -30,8 +31,7 @@ export function transformGraphForShowing(layoutedGraph: ElkNode, isHorizontal: b
   newNodes.forEach((node) => {
     delete node['height']
     delete node['width']
-    //node.height = 0
-    //node.width = 0
+    node.data = {...node.data, viewModel: viewModel}
   })
   
   return {
@@ -47,7 +47,7 @@ export function transformGraphForShowing(layoutedGraph: ElkNode, isHorizontal: b
       //animated: true,
       //style: { stroke: '#000' },
       type: edgeTagMapper(e.edgeType),
-      data: { ...e.data, isHovered: false}
+      data: { ...e.data, isHovered: false, viewModel: viewModel}
       };
     })
   }
diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index 34509c6..3a1dc97 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -5,6 +5,7 @@ import { ProgressPlugin } from "webpack";
 
 import { getBezierPath } from '@xyflow/react';
 import { getEdgeParams } from "../edges/edgeBase";
+import { ViewModel } from '../viewModel';
 
 
 function FloatingConnectionLine(props:ConnectionLineComponentProps) {
@@ -67,13 +68,15 @@ interface NodeComponentProps {
   readonly data: NodeProps['data']
 }
 
-const BodyNodeComponent: React.FC<BodyNodeComponentProps> = (props) => {
- 
+const BodyNodeComponent: React.FC<BodyNodeComponentProps> = ({data, className}) => {
+  const viewModel = data.viewModel as ViewModel ?? new ViewModel()
+  const isGreyedOut = viewModel.isGreyedOutMap.get(data.nodeType as string ?? '') ?? false
+  const bodyClassName = className + (isGreyedOut ? ' legend-passive' : '')
   return (
-    <HandleNodeComponent targetHandleId={props.data.id as string + '-targetHandle'} sourceHandleId={props.data.id as string + '-sourceHandle'}>
-      <div className = {props.className}>
-        <HoverOverComponent name={props.data.label as string} id={props.data.id as string} nodeType= {props.data.nodeType as string}/>
-        <label htmlFor="text">{props.data.label as string}</label>
+    <HandleNodeComponent targetHandleId={data.id as string + '-targetHandle'} sourceHandleId={data.id as string + '-sourceHandle'}>
+      <div className = {bodyClassName}>
+        <HoverOverComponent name={data.label as string} id={data.id as string} nodeType= {data.nodeType as string}/>
+        <label htmlFor="text">{data.label as string}</label>
       </div>
     </HandleNodeComponent>
   )
@@ -84,12 +87,12 @@ interface HoverOverComponentProps{
   readonly id: string,
   readonly nodeType: string
 }
-export const HoverOverComponent: React.FC<HoverOverComponentProps> = (props) => {
+export const HoverOverComponent: React.FC<HoverOverComponentProps> = ({name, id , nodeType}) => {
   return (
     <span className='hover-over-text'>
-      <div className='one-line'>name:{props.name}</div><br/>
-      <div className='one-line'>id:{props.id}</div><br/>
-      <div className='one-line'>nodeType:{props.nodeType}</div><br/>
+      <div className='one-line'>name:{name}</div><br/>
+      <div className='one-line'>id:{id}</div><br/>
+      <div className='one-line'>nodeType:{nodeType}</div><br/>
     </span>
   )
 }
@@ -148,6 +151,7 @@ export const GroupNode: React.FC<NodeComponentProps> = ({ data }) => {
     estimatedMaxX: number,
     estimatedMaxY: number
   }
+
   const divStyle: React.CSSProperties = {}
   divStyle.width = estimatedMaxX - estimatedMinX
   divStyle.height = estimatedMaxY - estimatedMinY
diff --git a/source/components/model/viewModel.tsx b/source/components/model/viewModel.tsx
new file mode 100644
index 0000000..a912a7e
--- /dev/null
+++ b/source/components/model/viewModel.tsx
@@ -0,0 +1,4 @@
+export class ViewModel {
+  readonly isGreyedOutMap: Map<string, boolean> = new Map<string, boolean>()
+  
+}
\ No newline at end of file
diff --git a/source/components/svgDefinitions.tsx b/source/components/svgDefinitions.tsx
new file mode 100644
index 0000000..cb01f94
--- /dev/null
+++ b/source/components/svgDefinitions.tsx
@@ -0,0 +1,185 @@
+
+interface SvgDefinitionsComponentProps{}
+
+
+export const SvgDefinitionsComponent: React.FC<SvgDefinitionsComponentProps> = ({}) => {
+    return (
+        <>
+        <marker
+            id="triangle"
+            viewBox="0 0 10 10"
+            refX="6"
+            refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="10"
+            markerHeight="10"
+            orient="auto">
+            <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
+          </marker>
+          
+          <marker
+            id="dotMarker"
+            viewBox="-5 -5 10 10"
+            markerUnits="strokeWidth"
+            markerWidth="10"
+            markerHeight="10"
+            orient="auto">
+              <circle className = 'dotMarker' r = '3'/>
+          </marker>
+
+          <marker
+            id="crossMarker"
+            viewBox="-5 -5 10 10"
+            markerUnits="strokeWidth"
+            markerWidth="10"
+            markerHeight="10"
+            orient="auto">
+              <line x1='0' y1='3' x2='0' y2='-3' style={{stroke:'black', strokeWidth: '1'}}></line>
+              <line x1='3' y1='0' x2='-3' y2='0' style={{stroke:'black', strokeWidth: '1'}}></line>
+          </marker>
+
+          <marker
+            id="hexagonHollowMarker"
+            viewBox="-10 -10 100 100"
+            markerUnits="strokeWidth"
+            markerWidth="50"
+            markerHeight="50"
+            orient="auto">
+            <g transform='translate(-12,-12)'>
+              <path d="m16.476 3c.369 0 .709.197.887.514.9 1.595 3.633 6.445 4.509 8.001.075.131.118.276.126.423.012.187-.029.377-.126.547-.876 1.556-3.609 6.406-4.509 8-.178.318-.518.515-.887.515h-8.951c-.369 0-.709-.197-.887-.515-.899-1.594-3.634-6.444-4.51-8-.085-.151-.128-.318-.128-.485s.043-.334.128-.485c.876-1.556 3.611-6.406 4.51-8.001.178-.317.518-.514.887-.514zm-8.672 1.5-4.228 7.5 4.228 7.5h8.393l4.227-7.5-4.227-7.5z"/>
+            </g> 
+          </marker>
+
+          <marker
+            id="rectangleHollowMarker"
+            viewBox="-500 -500 1000 1000"
+            markerUnits="strokeWidth"
+            markerWidth="70"
+            markerHeight="70"
+            orient="auto">
+              <g transform='translate(-150, -75)'>
+                <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path d="m3 17v3c0 .621.52 1 1 1h3v-1.5h-2.5v-2.5zm8.5 4h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5zm5-4h-1.5v2.5h-2.5v1.5h3c.478 0 1-.379 1-1zm-1.5-1v-3.363h1.5v3.363zm-15-3.363v3.363h-1.5v-3.363zm15-1v-3.637h1.5v3.637zm-15-3.637v3.637h-1.5v-3.637zm12.5-5v1.5h2.5v2.5h1.5v-3c0-.478-.379-1-1-1zm-10 0h-3c-.62 0-1 .519-1 1v3h1.5v-2.5h2.5zm4.5 1.5h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5z" fillRule="nonzero"/>
+                </svg>
+              </g>
+          </marker>
+
+          <marker
+            id="triangleHollowMarker"
+            viewBox="-500 -500 1000 1000"
+            markerUnits="strokeWidth"
+            markerWidth="70"
+            markerHeight="70"
+            orient="auto">
+              <g transform='translate(-150, -85)'>
+              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.882 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm1.935-.384h15.939l-7.97-14.22z" fillRule="nonzero"/></svg>
+              </g>
+          </marker>
+
+          <marker
+            id="rhombusHollowMarker"
+            viewBox="-500 -500 1000 1000"
+            markerUnits="strokeWidth"
+            markerWidth="70"
+            markerHeight="70"
+            orient="auto">
+              <g transform='translate(-150, -75)'>
+                <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.262 2.306c.196-.196.461-.306.738-.306s.542.11.738.306c1.917 1.917 7.039 7.039 8.956 8.956.196.196.306.461.306.738s-.11.542-.306.738c-1.917 1.917-7.039 7.039-8.956 8.956-.196.196-.461.306-.738.306s-.542-.11-.738-.306c-1.917-1.917-7.039-7.039-8.956-8.956-.196-.196-.306-.461-.306-.738s.11-.542.306-.738c1.917-1.917 7.039-7.039 8.956-8.956zm-7.573 9.694 8.311 8.311 8.311-8.311-8.311-8.311z" fillRule="nonzero"/></svg>
+              </g>
+          </marker>
+
+
+          <marker
+            id="starFilledMarker"
+            viewBox="-500 -500 1000 1000"
+            markerUnits="strokeWidth"
+            markerWidth="70"
+            markerHeight="70"
+            orient="auto">
+              <g transform='translate(-150, -75)'>
+              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.322 2.923c.126-.259.39-.423.678-.423.289 0 .552.164.678.423.974 1.998 2.65 5.44 2.65 5.44s3.811.524 6.022.829c.403.055.65.396.65.747 0 .19-.072.383-.231.536-1.61 1.538-4.382 4.191-4.382 4.191s.677 3.767 1.069 5.952c.083.462-.275.882-.742.882-.122 0-.244-.029-.355-.089-1.968-1.048-5.359-2.851-5.359-2.851s-3.391 1.803-5.359 2.851c-.111.06-.234.089-.356.089-.465 0-.825-.421-.741-.882.393-2.185 1.07-5.952 1.07-5.952s-2.773-2.653-4.382-4.191c-.16-.153-.232-.346-.232-.535 0-.352.249-.694.651-.748 2.211-.305 6.021-.829 6.021-.829s1.677-3.442 2.65-5.44z" fillRule="nonzero"/></svg>
+              </g>
+          </marker>
+
+          <marker
+            id="circleHollowMarker"
+            viewBox="-500 -500 1000 1000"
+            markerUnits="strokeWidth"
+            markerWidth="70"
+            markerHeight="70"
+            orient="auto">
+              <g transform='translate(-150, -75)'>
+              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.998 2c5.517 0 9.997 4.48 9.997 9.998 0 5.517-4.48 9.997-9.997 9.997-5.518 0-9.998-4.48-9.998-9.997 0-5.518 4.48-9.998 9.998-9.998zm0 1.5c-4.69 0-8.498 3.808-8.498 8.498s3.808 8.497 8.498 8.497 8.497-3.807 8.497-8.497-3.807-8.498-8.497-8.498z" fillRule="nonzero"/></svg>
+            </g>
+          </marker>
+
+          <marker
+            id="cubeFilledMarker"
+            viewBox="-500 -500 1000 1000"
+            markerUnits="strokeWidth"
+            markerWidth="70"
+            markerHeight="70"
+            orient="auto">
+              <g transform='translate(-150, -75)'>
+              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.514 6.61c-.317.179-.514.519-.514.887v8.95c0 .37.197.708.514.887 1.597.901 6.456 3.639 8.005 4.512.152.085.319.128.487.128.164 0 .328-.041.477-.123 1.549-.855 6.39-3.523 7.994-4.408.323-.177.523-.519.523-.891v-9.055c0-.368-.197-.708-.515-.887-1.595-.899-6.444-3.632-7.999-4.508-.151-.085-.319-.128-.486-.128-.168 0-.335.043-.486.128-1.555.876-6.405 3.609-8 4.508m15.986 2.115v7.525l-6.75 3.722v-7.578zm-15 7.425v-7.458l6.75 3.75v7.511zm.736-8.769 6.764-3.813 6.801 3.834-6.801 3.716z" fillRule="nonzero"/></svg>
+            </g>
+          </marker>
+
+          <symbol id="dotSymbol" width="10" height="10" overflow={'visible'}>
+            <g>
+              <circle r = '3' cx={0} cy = {0} overflow={'visible'} />
+            </g>
+          </symbol>
+
+          <symbol id="crossSymbol" width="10" height="10" overflow={'visible'}>  
+            <g>
+            <line x1='0' y1='3' x2='0' y2='-3' style={{stroke:'black', strokeWidth: '1'}}></line>
+            <line x1='3' y1='0' x2='-3' y2='0' style={{stroke:'black', strokeWidth: '1'}}></line>
+          </g>
+            </symbol>
+          
+          <symbol id = 'hexagonHollowSymbol' width="2.5" height="2.5" viewBox = '0 0 5 5' overflow={'visible'}>
+            <g transform='translate(-12,-12)'>
+              <path d="m16.476 3c.369 0 .709.197.887.514.9 1.595 3.633 6.445 4.509 8.001.075.131.118.276.126.423.012.187-.029.377-.126.547-.876 1.556-3.609 6.406-4.509 8-.178.318-.518.515-.887.515h-8.951c-.369 0-.709-.197-.887-.515-.899-1.594-3.634-6.444-4.51-8-.085-.151-.128-.318-.128-.485s.043-.334.128-.485c.876-1.556 3.611-6.406 4.51-8.001.178-.317.518-.514.887-.514zm-8.672 1.5-4.228 7.5 4.228 7.5h8.393l4.227-7.5-4.227-7.5z"/>
+            </g>
+          </symbol>
+          
+          <symbol id = 'rectangleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
+            <g transform='translate(-2.5,-2.5)'>
+              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3 17v3c0 .621.52 1 1 1h3v-1.5h-2.5v-2.5zm8.5 4h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5zm5-4h-1.5v2.5h-2.5v1.5h3c.478 0 1-.379 1-1zm-1.5-1v-3.363h1.5v3.363zm-15-3.363v3.363h-1.5v-3.363zm15-1v-3.637h1.5v3.637zm-15-3.637v3.637h-1.5v-3.637zm12.5-5v1.5h2.5v2.5h1.5v-3c0-.478-.379-1-1-1zm-10 0h-3c-.62 0-1 .519-1 1v3h1.5v-2.5h2.5zm4.5 1.5h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5z" fillRule="nonzero"/></svg>
+            </g>
+          </symbol>
+          
+          <symbol id = 'triangleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
+            <g transform='translate(-2.5,-2.5)'>
+              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.882 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm1.935-.384h15.939l-7.97-14.22z" fillRule="nonzero"/></svg>
+            </g>
+          </symbol>
+          
+          <symbol id='rhombusHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
+            <g transform='translate(-2.5,-2.5)'>
+              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.262 2.306c.196-.196.461-.306.738-.306s.542.11.738.306c1.917 1.917 7.039 7.039 8.956 8.956.196.196.306.461.306.738s-.11.542-.306.738c-1.917 1.917-7.039 7.039-8.956 8.956-.196.196-.461.306-.738.306s-.542-.11-.738-.306c-1.917-1.917-7.039-7.039-8.956-8.956-.196-.196-.306-.461-.306-.738s.11-.542.306-.738c1.917-1.917 7.039-7.039 8.956-8.956zm-7.573 9.694 8.311 8.311 8.311-8.311-8.311-8.311z" fillRule="nonzero"/></svg>
+            </g>
+          </symbol>
+
+          <symbol id='starFilledSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
+            <g transform='translate(-2.5,-2.5)'>
+            <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.322 2.923c.126-.259.39-.423.678-.423.289 0 .552.164.678.423.974 1.998 2.65 5.44 2.65 5.44s3.811.524 6.022.829c.403.055.65.396.65.747 0 .19-.072.383-.231.536-1.61 1.538-4.382 4.191-4.382 4.191s.677 3.767 1.069 5.952c.083.462-.275.882-.742.882-.122 0-.244-.029-.355-.089-1.968-1.048-5.359-2.851-5.359-2.851s-3.391 1.803-5.359 2.851c-.111.06-.234.089-.356.089-.465 0-.825-.421-.741-.882.393-2.185 1.07-5.952 1.07-5.952s-2.773-2.653-4.382-4.191c-.16-.153-.232-.346-.232-.535 0-.352.249-.694.651-.748 2.211-.305 6.021-.829 6.021-.829s1.677-3.442 2.65-5.44z" fillRule="nonzero"/></svg>
+            </g>
+          </symbol>
+
+          <symbol id='circleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
+            <g transform='translate(-2.5,-2.5)'>
+            <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.998 2c5.517 0 9.997 4.48 9.997 9.998 0 5.517-4.48 9.997-9.997 9.997-5.518 0-9.998-4.48-9.998-9.997 0-5.518 4.48-9.998 9.998-9.998zm0 1.5c-4.69 0-8.498 3.808-8.498 8.498s3.808 8.497 8.498 8.497 8.497-3.807 8.497-8.497-3.807-8.498-8.497-8.498z" fillRule="nonzero"/></svg>
+            </g>
+          </symbol>
+
+          <symbol id='cubeFilledSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
+            <g transform='translate(-2.5,-2.5)'>
+              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.514 6.61c-.317.179-.514.519-.514.887v8.95c0 .37.197.708.514.887 1.597.901 6.456 3.639 8.005 4.512.152.085.319.128.487.128.164 0 .328-.041.477-.123 1.549-.855 6.39-3.523 7.994-4.408.323-.177.523-.519.523-.891v-9.055c0-.368-.197-.708-.515-.887-1.595-.899-6.444-3.632-7.999-4.508-.151-.085-.319-.128-.486-.128-.168 0-.335.043-.486.128-1.555.876-6.405 3.609-8 4.508m15.986 2.115v7.525l-6.75 3.722v-7.578zm-15 7.425v-7.458l6.75 3.75v7.511zm.736-8.769 6.764-3.813 6.801 3.834-6.801 3.716z" fillRule="nonzero"/></svg>
+            </g>
+          </symbol>
+          </>)
+
+    
+}
\ No newline at end of file
diff --git a/source/index.tsx b/source/index.tsx
index 5f46c7f..aab4671 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -12,6 +12,7 @@ import { VisualizationGraph } from './components/model/graph';
 import { RNode } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/model';
 import { ParentInformation } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/decorate';
 import { LegendComponent, slideInLegend } from './components/legendComonent';
+import { ViewModel } from './components/model/viewModel';
 /* old example
 const otherGraph:OtherGraph =  {
   "rootVertices":["0","2","5"],
@@ -102,17 +103,18 @@ const main = document.createElement('div');
 main.id = 'main';
 document.body.appendChild(main);
 const root = createRoot(main);
+const viewModel = new ViewModel()
 
 root.render(
   <MainContainerComponent initialize={() => { console.log('Hey') }}>
     <ReactFlowProvider>
-        <LayoutFlow graph={graphFromOtherGraph} assignGraphUpdater={setGraphUpdater} />
+      <LayoutFlow graph={graphFromOtherGraph} assignGraphUpdater={setGraphUpdater} viewModel={viewModel}/>
     </ReactFlowProvider>
     <div className='r-code-input'>
       <input onChange={onRCodeInputChange}></input>
       <button onClick={onRCodeRequest}>Send R code</button>
     </div>
-    <LegendComponent/>
+    <LegendComponent viewModel={viewModel}/>
   </MainContainerComponent>
 );
 

From 457d781d04dafa9bcaa00bf8d0ed301d5b630262 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Mon, 5 Aug 2024 12:45:59 +0200
Subject: [PATCH 67/75] feat: add resizer to function definition node

---
 css/main.css                                  | 30 ++++++++-----------
 source/components/legendComonent.tsx          | 19 ++++++------
 source/components/model/graphTransition.ts    |  6 ++++
 .../components/model/nodes/nodeDefinition.tsx | 16 ++++++----
 source/components/model/viewModel.tsx         |  1 +
 5 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/css/main.css b/css/main.css
index 440c3d2..c51989e 100644
--- a/css/main.css
+++ b/css/main.css
@@ -78,25 +78,19 @@ body {
 	transform: translateX(0);
 	filter: drop-shadow(0px 0px 8px gray);
 }
+
 .function-definition-node {
-	--b: 3px;   /* border thickness */
-	--s: .45em; /* size of the corner */
-	--color: #373B44;
-	
-	padding: calc(.5em + var(--s)) calc(.9em + var(--s));
-	color: var(--color);
-	--_p: var(--s);
-	background:
-	  conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
-	  var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
-	outline: var(--b) solid #0000;
-	outline-offset: .6em;
-	font-size: 16px;
-  
-	border: 0;
-  
-	user-select: none;
-	-webkit-user-select: none;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	height: 100%;
+	width: 100%;
+}
+
+.react-flow__resize-control.line.function-definition-node-resizer-line{
+	border-color: black;
+}
+
+.react-flow__resize-control.handle.function-definition-node-resizer-edge-dot{
+	background-color: black;
 }
 
 .dot-marker{
diff --git a/source/components/legendComonent.tsx b/source/components/legendComonent.tsx
index 37c87b1..324f369 100644
--- a/source/components/legendComonent.tsx
+++ b/source/components/legendComonent.tsx
@@ -20,7 +20,6 @@ export function slideOutLegend(){
 
 export const LegendComponent: React.FC<LegendComponentProps> = ({viewModel}) => {
     
-
     const isGreyedOutMap = viewModel.isGreyedOutMap
     
     return (
@@ -34,15 +33,15 @@ export const LegendComponent: React.FC<LegendComponentProps> = ({viewModel}) =>
                 <NodeLegendComponent isGreyedOutMap = {isGreyedOutMap} nodeType = 'exit-point'/>
             </div>
             <div className='legend-edges'>
-                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'reads' edgeText='reads' />
-                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType='defined-by' edgeText='defined-by' />
-                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType='calls' edgeText='calls' />
-                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType='returns' edgeText='returns' />
-                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType='defines-on-call' edgeText='defines-on-call' />
-                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType='defined-by-on-call' edgeText='defined-by-on-call' />
-                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType='argument' edgeText='argument' />
-                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType='side-effect-on-call' edgeText='side-effect-on-call' />
-                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType='non-standard-evaluation' edgeText='non-standard-evaluation' />
+                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'reads' edgeText ='reads' />
+                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'defined-by' edgeText ='defined-by' />
+                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'calls' edgeText = 'calls' />
+                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'returns' edgeText='returns' />
+                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'defines-on-call' edgeText='defines-on-call' />
+                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'defined-by-on-call' edgeText='defined-by-on-call' />
+                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'argument' edgeText='argument' />
+                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'side-effect-on-call' edgeText='side-effect-on-call' />
+                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'non-standard-evaluation' edgeText='non-standard-evaluation' />
             </div>
             
             <div id = 'legend-close-button-div'>
diff --git a/source/components/model/graphTransition.ts b/source/components/model/graphTransition.ts
index d520a5f..e0f0f95 100644
--- a/source/components/model/graphTransition.ts
+++ b/source/components/model/graphTransition.ts
@@ -32,6 +32,12 @@ export function transformGraphForShowing(layoutedGraph: ElkNode, isHorizontal: b
     delete node['height']
     delete node['width']
     node.data = {...node.data, viewModel: viewModel}
+    
+    //size needs to be defined for size of function definiton to make sense
+    if(node.data.nodeType === 'function-definition'){
+      node.width = node.data.estimatedMaxX - node.data.estimatedMinX
+      node.height = node.data.estimatedMaxY - node.data.estimatedMinY
+    }
   })
   
   return {
diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index 3a1dc97..4b1efde 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -71,12 +71,13 @@ interface NodeComponentProps {
 const BodyNodeComponent: React.FC<BodyNodeComponentProps> = ({data, className}) => {
   const viewModel = data.viewModel as ViewModel ?? new ViewModel()
   const isGreyedOut = viewModel.isGreyedOutMap.get(data.nodeType as string ?? '') ?? false
+  const isNodeIdShown = viewModel.isNodeIdShown
   const bodyClassName = className + (isGreyedOut ? ' legend-passive' : '')
   return (
     <HandleNodeComponent targetHandleId={data.id as string + '-targetHandle'} sourceHandleId={data.id as string + '-sourceHandle'}>
       <div className = {bodyClassName}>
         <HoverOverComponent name={data.label as string} id={data.id as string} nodeType= {data.nodeType as string}/>
-        <label htmlFor="text">{data.label as string}</label>
+        <label htmlFor="text">{data.label as string}{isNodeIdShown ? ' (' + data.id + ')': ''}</label>
       </div>
     </HandleNodeComponent>
   )
@@ -110,7 +111,7 @@ export const FunctionCallNode: React.FC<NodeComponentProps> = ({ data }) => {
 }
 
 
-export const FunctionDefinitionNode: React.FC<NodeComponentProps> = ({ data }) => {
+export const FunctionDefinitionNode: React.FC<NodeProps> = ({ data, selected }) => {
   const {estimatedMinX, estimatedMinY, estimatedMaxX, estimatedMaxY} = data as {
     estimatedMinX: number,
     estimatedMinY: number,
@@ -123,15 +124,18 @@ export const FunctionDefinitionNode: React.FC<NodeComponentProps> = ({ data }) =
   const minWidth = estimatedMaxX - estimatedMinX
   const minHeight = estimatedMaxY - estimatedMinY
   //<NodeResizer minWidth={minWidth} minHeight={minHeight}/>
-  //
-  return ( 
+  // style = {divStyle}
+  // style={{ height: '100%', width:'100%'}}
+  return (
+    <>
+    <NodeResizer lineClassName='function-definition-node function-definition-node-resizer-line' handleClassName='function-definition-node function-definition-node-resizer-edge-dot' />
     <HandleNodeComponent targetHandleId={data.id as string + '-targetHandle'} sourceHandleId={data.id as string + '-sourceHandle'}>
-      
-      <div className = 'function-definition-node base-node' style = {divStyle}>
+      <div className = 'function-definition-node base-node' >
         <HoverOverComponent name={data.label as string} id={data.id as string} nodeType= {data.nodeType as string}/>
         <label htmlFor="text">{data.label as string}</label>
       </div>
     </HandleNodeComponent>
+    </>
   )
 }
 
diff --git a/source/components/model/viewModel.tsx b/source/components/model/viewModel.tsx
index a912a7e..a0194ae 100644
--- a/source/components/model/viewModel.tsx
+++ b/source/components/model/viewModel.tsx
@@ -1,4 +1,5 @@
 export class ViewModel {
   readonly isGreyedOutMap: Map<string, boolean> = new Map<string, boolean>()
+  isNodeIdShown: boolean = false
   
 }
\ No newline at end of file

From b61da171540cb26f0449a23f75c04672b97feb83 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Mon, 5 Aug 2024 14:59:50 +0200
Subject: [PATCH 68/75] feat: add checkbox for nodeId toggling

---
 css/main.css                                  |  2 +-
 source/components/graphComponent.tsx          | 33 +++++++++++++++----
 source/components/legendComonent.tsx          | 21 +++++++++---
 source/components/model/edges/multiEdge.tsx   | 10 +++---
 source/components/model/graphTransition.ts    |  8 ++---
 .../components/model/nodes/nodeDefinition.tsx | 21 +++++++-----
 .../{viewModel.tsx => visualStateModel.tsx}   |  2 +-
 source/index.tsx                              |  8 ++---
 8 files changed, 71 insertions(+), 34 deletions(-)
 rename source/components/model/{viewModel.tsx => visualStateModel.tsx} (78%)

diff --git a/css/main.css b/css/main.css
index c51989e..22dfd27 100644
--- a/css/main.css
+++ b/css/main.css
@@ -57,7 +57,7 @@ body {
 	left: 0;
 	bottom: 0;
 
-	width: 30vw;
+	width: 50vw;
 	height: 30vh;
 	background: rgba(255, 255, 255, .9);
 	backdrop-filter: blur(5px);
diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index d0908eb..4b9c72b 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -1,5 +1,5 @@
 import ELK, { ElkExtendedEdge, ElkNode, LayoutOptions } from 'elkjs/lib/elk.bundled.js';
-import React, { ChangeEventHandler, useCallback, useLayoutEffect, useMemo, useState } from 'react';
+import React, { ChangeEventHandler, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import {
   ReactFlow,
   addEdge,
@@ -48,7 +48,7 @@ import { ExtendedExtendedEdge, transformGraphForLayouting, transformGraphForShow
 import { MultiEdge } from './model/edges/multiEdge';
 import { slideInLegend } from './legendComonent';
 import { SvgDefinitionsComponent } from './svgDefinitions';
-import { ViewModel } from './model/viewModel';
+import { VisualStateModel } from './model/visualStateModel';
 
 
 
@@ -70,7 +70,7 @@ const elkOptions: LayoutOptions = {
                                     nodeIdMap: Map<string,Node>, 
                                     edges: ElkExtendedEdge[], 
                                     options: LayoutOptions,
-                                    viewModel: ViewModel): Promise<{ nodes: Node[]; edges: Edge[] }> {
+                                    visualStateModel: VisualStateModel): Promise<{ nodes: Node[]; edges: Edge[] }> {
    const isHorizontal = options?.['elk.direction'] === 'RIGHT';
 
    const graph: ElkNode = transformGraphForLayouting(nodes,nodeIdMap, edges, options, isHorizontal)
@@ -81,7 +81,7 @@ const elkOptions: LayoutOptions = {
 
    //console.log('after Layout:')
    //console.log(layoutedGraph)
-   const endGraph = transformGraphForShowing(layoutedGraph, isHorizontal, viewModel)
+   const endGraph = transformGraphForShowing(layoutedGraph, isHorizontal, visualStateModel)
 
    console.log(endGraph)
 
@@ -104,16 +104,35 @@ const elkOptions: LayoutOptions = {
 export interface LayoutFlowProps {
   readonly graph: VisualizationGraph;
   readonly assignGraphUpdater: (updater: (g: VisualizationGraph) => void) => void;
-  readonly viewModel: ViewModel
+  readonly visualStateModel: VisualStateModel
 }
+export let setIsNodeIdShownReactFlow: React.Dispatch<React.SetStateAction<boolean>> = () => {}
 
- export function LayoutFlow({ graph, assignGraphUpdater, viewModel } : LayoutFlowProps) {
+ export function LayoutFlow({ graph, assignGraphUpdater, visualStateModel} : LayoutFlowProps) {
    const [currentGraph, setCurrentGraph] = useState(graph);
    const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
    const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
    const nodeMap = new Map<string,Node>()
    const { fitView } = useReactFlow();
+
+   const [isNodeIdShown, setIsNodeIdShown] = useState(false)
    
+   setIsNodeIdShownReactFlow = setIsNodeIdShown
+
+
+   useEffect(() => {
+    setNodes((currentNodes) =>
+      currentNodes.map((node) =>{ 
+        node.data.isNodeIdShown = isNodeIdShown
+        return ({
+        ...node
+      })}),
+    );
+   }, [isNodeIdShown,setNodes])
+
+
+
+
    assignGraphUpdater(g =>  {
     setCurrentGraph(g)
     onLayout({ direction: 'DOWN', g })
@@ -125,7 +144,7 @@ export interface LayoutFlowProps {
        const ns = g ? g.nodesInfo.nodes : nodes;
        const es = g ? g.edges : edges;
        const nm = g ? g.nodesInfo.nodeMap: nodeMap;
-       getLayoutedElements(ns, nm, convertToExtendedEdges(es), opts, viewModel).then(({ nodes: layoutedNodes, edges: layoutedEdges }) => {
+       getLayoutedElements(ns, nm, convertToExtendedEdges(es), opts, visualStateModel).then(({ nodes: layoutedNodes, edges: layoutedEdges }) => {
          setNodes(layoutedNodes);
          setEdges(layoutedEdges);
 
diff --git a/source/components/legendComonent.tsx b/source/components/legendComonent.tsx
index 324f369..548eab8 100644
--- a/source/components/legendComonent.tsx
+++ b/source/components/legendComonent.tsx
@@ -1,11 +1,12 @@
 import { useRef } from "react";
 import { edgeTypeToMarkerIdMapper, edgeTypeToSymbolIdMapper } from "./model/edges/multiEdge";
 import { SideEffectOnCallEdge } from "./model/edges/sideEffectOnCallEdge";
-import { ViewModel } from "./model/viewModel";
+import { VisualStateModel } from "./model/visualStateModel";
+import { setIsNodeIdShownReactFlow } from "./graphComponent";
 
 
 interface LegendComponentProps {
-    viewModel: ViewModel
+    visualStateModel: VisualStateModel
 }
 
 export function slideInLegend() {
@@ -18,9 +19,9 @@ export function slideOutLegend(){
     element.classList.toggle('visible');
 }
 
-export const LegendComponent: React.FC<LegendComponentProps> = ({viewModel}) => {
+export const LegendComponent: React.FC<LegendComponentProps> = ({visualStateModel}) => {
     
-    const isGreyedOutMap = viewModel.isGreyedOutMap
+    const isGreyedOutMap = visualStateModel.isGreyedOutMap
     
     return (
         <div className = 'slide-in-legend' id = 'slide-in-legend' >
@@ -44,6 +45,18 @@ export const LegendComponent: React.FC<LegendComponentProps> = ({viewModel}) =>
                 <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'non-standard-evaluation' edgeText='non-standard-evaluation' />
             </div>
             
+            <div>
+                <div style={{whiteSpace: 'nowrap'}}>
+                    <input type='checkbox' id='show-id-checkbox' onClick={() => {
+                        const checkbox = document.getElementById('show-id-checkbox') as HTMLInputElement ?? new HTMLInputElement()
+                        const isChecked = checkbox.checked
+                        visualStateModel.isNodeIdShown = isChecked
+                        setIsNodeIdShownReactFlow(isChecked)
+                    }}/>
+                    <label >Show Node Id (NodeId)</label>
+                </div>
+            </div>
+
             <div id = 'legend-close-button-div'>
                 <button className = {'button-close-legend'} onClick = {slideOutLegend} >X</button>
             </div>
diff --git a/source/components/model/edges/multiEdge.tsx b/source/components/model/edges/multiEdge.tsx
index f9d1ae3..8108695 100644
--- a/source/components/model/edges/multiEdge.tsx
+++ b/source/components/model/edges/multiEdge.tsx
@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { BaseEdge, Edge, EdgeLabelRenderer, EdgeMouseHandler, EdgeProps, EdgeTypes, InternalNode, ReactFlowState, XYPosition, getBezierPath, useInternalNode, useStore } from '@xyflow/react';
 import { getEdgeParams } from "./edgeBase";
 import { EdgeType, EdgeTypeName } from "@eagleoutice/flowr/dataflow/graph/edge";
-import { ViewModel } from "../viewModel";
+import { VisualStateModel } from "../visualStateModel";
 
 const amountOfSamplePointsForLength = 100
 const lengthBetweenMarkerPoints = 10
@@ -76,7 +76,7 @@ export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = ({s
   
   return (
     <>
-    <PathWithMarkerComponent id={standardEdgeInformation.id} edgeTypes={givenEdgeTypes} edgePath={edgePath} viewModel={standardEdgeInformation.data?.viewModel as ViewModel ?? new ViewModel()}/>
+    <PathWithMarkerComponent id={standardEdgeInformation.id} edgeTypes={givenEdgeTypes} edgePath={edgePath} visualStateModel={standardEdgeInformation.data?.visualStateModel as VisualStateModel ?? new VisualStateModel()}/>
     <style>
       {cssRule}
     </style>
@@ -172,7 +172,7 @@ interface PathWithMarkerComponentProps {
   edgePath: string,
   edgeTypes: Set<EdgeTypeName>
   id: string
-  viewModel: ViewModel
+  visualStateModel: VisualStateModel
 }
 
 const edgeTypeNameMap:{[index: string]:string} = {
@@ -312,7 +312,7 @@ function splitBezierCurve(t:number[], startingPoint:XYPosition, startControlPoin
 }
 
 /** */
-const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = ({edgePath, edgeTypes, id, viewModel}) => {
+const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = ({edgePath, edgeTypes, id, visualStateModel}) => {
   //Parse 4 Points from the calculated bezier curve
   const pointArray = edgePath.replace('M','').replace('C','').split(' ').map((stringPoint)=> stringPoint.split(',').map((stringNumber) => +stringNumber))
   const startPointBez = {x: pointArray[0][0], y:pointArray[0][1]}
@@ -396,7 +396,7 @@ const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = ({edgeP
     <path
       key = {pathId} 
       id = {pathId}
-      className={'react-flow__edge-path multi-edge' + ` ${edgeType}-edge` + ((viewModel.isGreyedOutMap.get(edgeType) ?? false) ? ' legend-passive': '')}
+      className={'react-flow__edge-path multi-edge' + ` ${edgeType}-edge` + ((visualStateModel.isGreyedOutMap.get(edgeType) ?? false) ? ' legend-passive': '')}
       d={dOfPath}
       markerMid = {`url(#${edgeTypeToMarkerIdMapper(edgeType)})`} 
       markerEnd = {'url(#triangle)'}
diff --git a/source/components/model/graphTransition.ts b/source/components/model/graphTransition.ts
index e0f0f95..00b582b 100644
--- a/source/components/model/graphTransition.ts
+++ b/source/components/model/graphTransition.ts
@@ -2,7 +2,7 @@ import { ElkExtendedEdge, ElkNode, LayoutOptions } from "elkjs";
 import { flattenToNodeArray, foldIntoElkHierarchy} from "../graphHierarchy";
 import { Edge, Node } from '@xyflow/react'
 import { edgeTagMapper } from "./edges/edgeBase";
-import { ViewModel } from "./viewModel";
+import { VisualStateModel } from "./visualStateModel";
 
 export function transformGraphForLayouting(nodes: Node[], nodeIdMap: Map<string,Node>, edges: ElkExtendedEdge[], options: LayoutOptions, isHorizontal: boolean):ElkNode{
   const toReturn: ElkNode = {
@@ -22,7 +22,7 @@ export interface ExtendedExtendedEdge extends ElkExtendedEdge{
   label:string
 }
 
-export function transformGraphForShowing(layoutedGraph: ElkNode, isHorizontal: boolean, viewModel: ViewModel): { nodes: Node[]; edges: Edge[] }{
+export function transformGraphForShowing(layoutedGraph: ElkNode, isHorizontal: boolean, visualStateModel: VisualStateModel): { nodes: Node[]; edges: Edge[] }{
   
   const newNodes = flattenToNodeArray(layoutedGraph.children ?? [])
 
@@ -31,7 +31,7 @@ export function transformGraphForShowing(layoutedGraph: ElkNode, isHorizontal: b
   newNodes.forEach((node) => {
     delete node['height']
     delete node['width']
-    node.data = {...node.data, viewModel: viewModel}
+    node.data = {...node.data, visualStateModel: visualStateModel}
     
     //size needs to be defined for size of function definiton to make sense
     if(node.data.nodeType === 'function-definition'){
@@ -53,7 +53,7 @@ export function transformGraphForShowing(layoutedGraph: ElkNode, isHorizontal: b
       //animated: true,
       //style: { stroke: '#000' },
       type: edgeTagMapper(e.edgeType),
-      data: { ...e.data, isHovered: false, viewModel: viewModel}
+      data: { ...e.data, isHovered: false, visualStateModel: visualStateModel}
       };
     })
   }
diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index 4b1efde..27375b0 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -5,7 +5,7 @@ import { ProgressPlugin } from "webpack";
 
 import { getBezierPath } from '@xyflow/react';
 import { getEdgeParams } from "../edges/edgeBase";
-import { ViewModel } from '../viewModel';
+import { VisualStateModel } from '../visualStateModel';
 
 
 function FloatingConnectionLine(props:ConnectionLineComponentProps) {
@@ -69,15 +69,16 @@ interface NodeComponentProps {
 }
 
 const BodyNodeComponent: React.FC<BodyNodeComponentProps> = ({data, className}) => {
-  const viewModel = data.viewModel as ViewModel ?? new ViewModel()
-  const isGreyedOut = viewModel.isGreyedOutMap.get(data.nodeType as string ?? '') ?? false
-  const isNodeIdShown = viewModel.isNodeIdShown
+  const visualStateModel = data.visualStateModel as VisualStateModel ?? new VisualStateModel()
+  const isGreyedOut = visualStateModel.isGreyedOutMap.get(data.nodeType as string ?? '') ?? false
+  const isNodeIdShown = visualStateModel.isNodeIdShown
   const bodyClassName = className + (isGreyedOut ? ' legend-passive' : '')
+  const shownLabel = data.label as string + (data.isNodeIdShown ? ' (' + data.id + ')': '')
   return (
     <HandleNodeComponent targetHandleId={data.id as string + '-targetHandle'} sourceHandleId={data.id as string + '-sourceHandle'}>
       <div className = {bodyClassName}>
         <HoverOverComponent name={data.label as string} id={data.id as string} nodeType= {data.nodeType as string}/>
-        <label htmlFor="text">{data.label as string}{isNodeIdShown ? ' (' + data.id + ')': ''}</label>
+        <label htmlFor="text">{shownLabel}</label>
       </div>
     </HandleNodeComponent>
   )
@@ -126,15 +127,19 @@ export const FunctionDefinitionNode: React.FC<NodeProps> = ({ data, selected })
   //<NodeResizer minWidth={minWidth} minHeight={minHeight}/>
   // style = {divStyle}
   // style={{ height: '100%', width:'100%'}}
-  return (
-    <>
-    <NodeResizer lineClassName='function-definition-node function-definition-node-resizer-line' handleClassName='function-definition-node function-definition-node-resizer-edge-dot' />
+  /* 
     <HandleNodeComponent targetHandleId={data.id as string + '-targetHandle'} sourceHandleId={data.id as string + '-sourceHandle'}>
       <div className = 'function-definition-node base-node' >
         <HoverOverComponent name={data.label as string} id={data.id as string} nodeType= {data.nodeType as string}/>
         <label htmlFor="text">{data.label as string}</label>
       </div>
     </HandleNodeComponent>
+  */
+
+  return (
+    <>
+    <NodeResizer lineClassName='function-definition-node function-definition-node-resizer-line' handleClassName='function-definition-node function-definition-node-resizer-edge-dot' />
+    <BodyNodeComponent data = {data} className='function-definition-node base-node'/>
     </>
   )
 }
diff --git a/source/components/model/viewModel.tsx b/source/components/model/visualStateModel.tsx
similarity index 78%
rename from source/components/model/viewModel.tsx
rename to source/components/model/visualStateModel.tsx
index a0194ae..923622d 100644
--- a/source/components/model/viewModel.tsx
+++ b/source/components/model/visualStateModel.tsx
@@ -1,4 +1,4 @@
-export class ViewModel {
+export class VisualStateModel {
   readonly isGreyedOutMap: Map<string, boolean> = new Map<string, boolean>()
   isNodeIdShown: boolean = false
   
diff --git a/source/index.tsx b/source/index.tsx
index aab4671..7e0f331 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -12,7 +12,7 @@ import { VisualizationGraph } from './components/model/graph';
 import { RNode } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/model';
 import { ParentInformation } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/decorate';
 import { LegendComponent, slideInLegend } from './components/legendComonent';
-import { ViewModel } from './components/model/viewModel';
+import { VisualStateModel } from './components/model/visualStateModel';
 /* old example
 const otherGraph:OtherGraph =  {
   "rootVertices":["0","2","5"],
@@ -103,18 +103,18 @@ const main = document.createElement('div');
 main.id = 'main';
 document.body.appendChild(main);
 const root = createRoot(main);
-const viewModel = new ViewModel()
+const visualStateModel = new VisualStateModel()
 
 root.render(
   <MainContainerComponent initialize={() => { console.log('Hey') }}>
     <ReactFlowProvider>
-      <LayoutFlow graph={graphFromOtherGraph} assignGraphUpdater={setGraphUpdater} viewModel={viewModel}/>
+      <LayoutFlow graph={graphFromOtherGraph} assignGraphUpdater={setGraphUpdater} visualStateModel={visualStateModel}/>
     </ReactFlowProvider>
     <div className='r-code-input'>
       <input onChange={onRCodeInputChange}></input>
       <button onClick={onRCodeRequest}>Send R code</button>
     </div>
-    <LegendComponent viewModel={viewModel}/>
+    <LegendComponent visualStateModel={visualStateModel}/>
   </MainContainerComponent>
 );
 

From da3daef6987b8f45c46597fd5b1d126023246f80 Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Mon, 5 Aug 2024 15:35:19 +0200
Subject: [PATCH 69/75] feat: style for legend control elements

---
 css/main.css                         | 7 ++++++-
 source/components/legendComonent.tsx | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/css/main.css b/css/main.css
index 22dfd27..80bb76d 100644
--- a/css/main.css
+++ b/css/main.css
@@ -51,13 +51,17 @@ body {
   background: #9b0f0b;
 }
 
+.legend-control-elements{
+	display: flex;
+	flex-direction: column;
+}
 
 .slide-in-legend {
 	position: absolute;
 	left: 0;
 	bottom: 0;
 
-	width: 50vw;
+	width: 40vw;
 	height: 30vh;
 	background: rgba(255, 255, 255, .9);
 	backdrop-filter: blur(5px);
@@ -71,6 +75,7 @@ body {
 	display: flex;
 	flex-direction: row;
    padding: 12px;
+   padding-right: 25px;
 	gap: 4em;
 }
 
diff --git a/source/components/legendComonent.tsx b/source/components/legendComonent.tsx
index 548eab8..aa69117 100644
--- a/source/components/legendComonent.tsx
+++ b/source/components/legendComonent.tsx
@@ -45,7 +45,7 @@ export const LegendComponent: React.FC<LegendComponentProps> = ({visualStateMode
                 <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'non-standard-evaluation' edgeText='non-standard-evaluation' />
             </div>
             
-            <div>
+            <div className = 'legend-control-elements'>
                 <div style={{whiteSpace: 'nowrap'}}>
                     <input type='checkbox' id='show-id-checkbox' onClick={() => {
                         const checkbox = document.getElementById('show-id-checkbox') as HTMLInputElement ?? new HTMLInputElement()
@@ -53,7 +53,7 @@ export const LegendComponent: React.FC<LegendComponentProps> = ({visualStateMode
                         visualStateModel.isNodeIdShown = isChecked
                         setIsNodeIdShownReactFlow(isChecked)
                     }}/>
-                    <label >Show Node Id (NodeId)</label>
+                    <label >(NodeId)</label>
                 </div>
             </div>
 

From f59771e77374e55ab19a30f8a3b4ef938b7ba7ef Mon Sep 17 00:00:00 2001
From: Andreas Barth <andreas.barth@uni-ulm.de>
Date: Tue, 6 Aug 2024 10:25:23 +0200
Subject: [PATCH 70/75] feat: first step to monaco editor

---
 .vscode/settings.json |  3 ++-
 css/main.css          | 12 +++++++++++-
 package-lock.json     | 11 +++++++++++
 package.json          |  1 +
 source/index.tsx      | 38 +++++++++++++++++++++++++++++++-------
 5 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 83637c9..9c84824 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,7 @@
 {
     "cSpell.words": [
         "Layouted",
-        "Layouting"
+        "Layouting",
+        "reactflow"
     ]
 }
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index 80bb76d..445233f 100644
--- a/css/main.css
+++ b/css/main.css
@@ -179,13 +179,23 @@ body {
 
 .main-container {
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
 	margin: 0px;
 	height: 100vh;
 	width: 100vw;
 	overflow-y: hidden;
 }
 
+.editor-div{
+	height: 100%;
+	width: 30%;
+}
+
+.reactflow-div{
+	height: 100%;
+	width: 70%;
+}
+
 /* from https://www.w3schools.com/css/css_tooltip.asp */
 
 .base-node .hover-over-text{
diff --git a/package-lock.json b/package-lock.json
index fdf7e7a..5eef3ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "css-loader": "^6.7.1",
         "elkjs": "^0.9.2",
         "highlight.js": "^11.6.0",
+        "monaco-editor": "^0.50.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.11.2",
@@ -3393,6 +3394,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.50.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.50.0.tgz",
+      "integrity": "sha512-8CclLCmrRRh+sul7C08BmPBP3P8wVWfBHomsTcndxg5NRCEPfu/mc2AGU8k37ajjDVXcXFc12ORAMUkmk+lkFA=="
+    },
     "node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -8470,6 +8476,11 @@
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
       "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg=="
     },
+    "monaco-editor": {
+      "version": "0.50.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.50.0.tgz",
+      "integrity": "sha512-8CclLCmrRRh+sul7C08BmPBP3P8wVWfBHomsTcndxg5NRCEPfu/mc2AGU8k37ajjDVXcXFc12ORAMUkmk+lkFA=="
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
diff --git a/package.json b/package.json
index 972a20e..b7cef5e 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "css-loader": "^6.7.1",
     "elkjs": "^0.9.2",
     "highlight.js": "^11.6.0",
+    "monaco-editor": "^0.50.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.2",
diff --git a/source/index.tsx b/source/index.tsx
index 7e0f331..687f6d0 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -13,6 +13,7 @@ import { RNode } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/model';
 import { ParentInformation } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/decorate';
 import { LegendComponent, slideInLegend } from './components/legendComonent';
 import { VisualStateModel } from './components/model/visualStateModel';
+import * as monaco from 'monaco-editor'
 /* old example
 const otherGraph:OtherGraph =  {
   "rootVertices":["0","2","5"],
@@ -105,16 +106,39 @@ document.body.appendChild(main);
 const root = createRoot(main);
 const visualStateModel = new VisualStateModel()
 
+const firstValue = 'x <- 42'
+
+
+
 root.render(
   <MainContainerComponent initialize={() => { console.log('Hey') }}>
-    <ReactFlowProvider>
-      <LayoutFlow graph={graphFromOtherGraph} assignGraphUpdater={setGraphUpdater} visualStateModel={visualStateModel}/>
-    </ReactFlowProvider>
-    <div className='r-code-input'>
-      <input onChange={onRCodeInputChange}></input>
-      <button onClick={onRCodeRequest}>Send R code</button>
+    <div id='editor-target' className = 'editor-div'> </div>
+    <div className = 'reactflow-div'>
+      <ReactFlowProvider>
+        <LayoutFlow graph={graphFromOtherGraph} assignGraphUpdater={setGraphUpdater} visualStateModel={visualStateModel}/>
+      </ReactFlowProvider>
+      <div className='r-code-input'>
+        <input onChange={onRCodeInputChange}></input>
+        <button onClick={onRCodeRequest}>Send R code</button>
+      </div>
+      <LegendComponent visualStateModel={visualStateModel}/>
     </div>
-    <LegendComponent visualStateModel={visualStateModel}/>
+    
   </MainContainerComponent>
 );
 
+window.MonacoEnvironment = {
+  getWorker: (workerId, label) => {
+    return new Worker('monaco-editor/vs/base/worker/workerMain.js')
+  }
+}
+
+window.onload = () => {
+  monaco.editor.create((document.getElementById('editor-target') as HTMLElement), {
+    value: firstValue,
+    language: 'r',
+    automaticLayout: true,
+  });
+}
+
+

From 051b5ae73b529626e64ea2fefc84f5b9af3e9bc9 Mon Sep 17 00:00:00 2001
From: EagleoutIce <florian.sihler@uni-ulm.de>
Date: Wed, 7 Aug 2024 11:22:43 +0200
Subject: [PATCH 71/75] refactor: many minor fixes

---
 css/main.css                                    | 17 ++++++++++++++++-
 source/components/legendComonent.tsx            | 11 ++++++-----
 .../components/model/nodes/nodeDefinition.tsx   |  3 +--
 source/index.tsx                                |  2 ++
 4 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/css/main.css b/css/main.css
index 445233f..7f5b2f7 100644
--- a/css/main.css
+++ b/css/main.css
@@ -77,6 +77,8 @@ body {
    padding: 12px;
    padding-right: 25px;
 	gap: 4em;
+	
+	z-index: 9999999;
 }
 
 .slide-in-legend.visible {
@@ -183,12 +185,14 @@ body {
 	margin: 0px;
 	height: 100vh;
 	width: 100vw;
-	overflow-y: hidden;
+	overflow: hidden;
 }
 
 .editor-div{
 	height: 100%;
 	width: 30%;
+	background: #fff;
+	z-index: 99;
 }
 
 .reactflow-div{
@@ -215,6 +219,7 @@ body {
 	border-color: transparent transparent transparent black;
 	
 	white-space: nowrap;
+	transition: all 500ms ease-in-out;
 }
 
 .hover-over-text .one-line {
@@ -229,6 +234,10 @@ body {
 	position: absolute;
 	top: 15px; 
 	left: 15px;
+	display: flex;
+	flex-direction: row;
+	height: 1.5em;
+	gap: 12px;
 }
 
 
@@ -258,6 +267,12 @@ body {
 	align-items: center;
 }
 
+.legend-edges > *, .legend-nodes > *, .legend-control-elements *  {
+	cursor: pointer;
+	user-select: none;
+}
+
+
 .legend-edge{
 	stroke:black;
 	stroke-width: 1px;
diff --git a/source/components/legendComonent.tsx b/source/components/legendComonent.tsx
index aa69117..4896a07 100644
--- a/source/components/legendComonent.tsx
+++ b/source/components/legendComonent.tsx
@@ -1,6 +1,4 @@
-import { useRef } from "react";
-import { edgeTypeToMarkerIdMapper, edgeTypeToSymbolIdMapper } from "./model/edges/multiEdge";
-import { SideEffectOnCallEdge } from "./model/edges/sideEffectOnCallEdge";
+import { edgeTypeToMarkerIdMapper } from "./model/edges/multiEdge";
 import { VisualStateModel } from "./model/visualStateModel";
 import { setIsNodeIdShownReactFlow } from "./graphComponent";
 
@@ -47,13 +45,16 @@ export const LegendComponent: React.FC<LegendComponentProps> = ({visualStateMode
             
             <div className = 'legend-control-elements'>
                 <div style={{whiteSpace: 'nowrap'}}>
-                    <input type='checkbox' id='show-id-checkbox' onClick={() => {
+                    <input 
+                        type='checkbox' 
+                        id='show-id-checkbox' 
+                        onClick={() => {
                         const checkbox = document.getElementById('show-id-checkbox') as HTMLInputElement ?? new HTMLInputElement()
                         const isChecked = checkbox.checked
                         visualStateModel.isNodeIdShown = isChecked
                         setIsNodeIdShownReactFlow(isChecked)
                     }}/>
-                    <label >(NodeId)</label>
+                    <label htmlFor='show-id-checkbox' >(NodeId)</label>
                 </div>
             </div>
 
diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index 27375b0..83ae8ed 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -71,12 +71,11 @@ interface NodeComponentProps {
 const BodyNodeComponent: React.FC<BodyNodeComponentProps> = ({data, className}) => {
   const visualStateModel = data.visualStateModel as VisualStateModel ?? new VisualStateModel()
   const isGreyedOut = visualStateModel.isGreyedOutMap.get(data.nodeType as string ?? '') ?? false
-  const isNodeIdShown = visualStateModel.isNodeIdShown
   const bodyClassName = className + (isGreyedOut ? ' legend-passive' : '')
   const shownLabel = data.label as string + (data.isNodeIdShown ? ' (' + data.id + ')': '')
   return (
     <HandleNodeComponent targetHandleId={data.id as string + '-targetHandle'} sourceHandleId={data.id as string + '-sourceHandle'}>
-      <div className = {bodyClassName}>
+      <div className = {bodyClassName} id={`in-graph-node-${data.id}`}>
         <HoverOverComponent name={data.label as string} id={data.id as string} nodeType= {data.nodeType as string}/>
         <label htmlFor="text">{shownLabel}</label>
       </div>
diff --git a/source/index.tsx b/source/index.tsx
index 687f6d0..0b0bc35 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -114,6 +114,7 @@ root.render(
   <MainContainerComponent initialize={() => { console.log('Hey') }}>
     <div id='editor-target' className = 'editor-div'> </div>
     <div className = 'reactflow-div'>
+      <div style={{ position: 'relative', top: 0, right: 0, width: '100%', height: '100%'}}>
       <ReactFlowProvider>
         <LayoutFlow graph={graphFromOtherGraph} assignGraphUpdater={setGraphUpdater} visualStateModel={visualStateModel}/>
       </ReactFlowProvider>
@@ -121,6 +122,7 @@ root.render(
         <input onChange={onRCodeInputChange}></input>
         <button onClick={onRCodeRequest}>Send R code</button>
       </div>
+      </div>
       <LegendComponent visualStateModel={visualStateModel}/>
     </div>
     

From 68e995e656304dc3f28b76b80de4c65006465c27 Mon Sep 17 00:00:00 2001
From: EagleoutIce <florian.sihler@uni-ulm.de>
Date: Wed, 7 Aug 2024 11:25:32 +0200
Subject: [PATCH 72/75] refactor: variant with button above

---
 css/main.css     | 17 ++++++++++++-----
 source/index.tsx | 12 +++++++-----
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/css/main.css b/css/main.css
index 7f5b2f7..e411693 100644
--- a/css/main.css
+++ b/css/main.css
@@ -190,7 +190,7 @@ body {
 
 .editor-div{
 	height: 100%;
-	width: 30%;
+	width: 100%;
 	background: #fff;
 	z-index: 99;
 }
@@ -231,13 +231,12 @@ body {
 }
 
 .r-code-input {
-	position: absolute;
-	top: 15px; 
-	left: 15px;
 	display: flex;
 	flex-direction: row;
 	height: 1.5em;
 	gap: 12px;
+	background-color: white;
+	padding: 15px;
 }
 
 
@@ -295,4 +294,12 @@ body {
 .legend-passive {
 	opacity: 0.15;
 	font-weight: normal;
-}	
\ No newline at end of file
+}	
+
+.left-side {
+	height: 100%;
+	width: 30%;
+	display: flex;
+	flex-direction: column;
+	gap: 0px;
+}
\ No newline at end of file
diff --git a/source/index.tsx b/source/index.tsx
index 0b0bc35..098396f 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -112,16 +112,18 @@ const firstValue = 'x <- 42'
 
 root.render(
   <MainContainerComponent initialize={() => { console.log('Hey') }}>
-    <div id='editor-target' className = 'editor-div'> </div>
+    <div className='left-side'>
+    <div className='r-code-input'>
+        <input onChange={onRCodeInputChange}></input>
+        <button onClick={onRCodeRequest}>Send R code</button>
+      </div>
+      <div id='editor-target' className = 'editor-div'> </div>
+    </div>
     <div className = 'reactflow-div'>
       <div style={{ position: 'relative', top: 0, right: 0, width: '100%', height: '100%'}}>
       <ReactFlowProvider>
         <LayoutFlow graph={graphFromOtherGraph} assignGraphUpdater={setGraphUpdater} visualStateModel={visualStateModel}/>
       </ReactFlowProvider>
-      <div className='r-code-input'>
-        <input onChange={onRCodeInputChange}></input>
-        <button onClick={onRCodeRequest}>Send R code</button>
-      </div>
       </div>
       <LegendComponent visualStateModel={visualStateModel}/>
     </div>

From 880aee98ce5c042bf98d68f54f9292a5340d7a85 Mon Sep 17 00:00:00 2001
From: EagleoutIce <florian.sihler@uni-ulm.de>
Date: Sun, 11 Aug 2024 11:34:10 +0200
Subject: [PATCH 73/75] lint: first automatic linter run

---
 package-lock.json                             | 7120 ++++++++++++++---
 package.json                                  |   29 +-
 source/components/graphComponent.tsx          |  373 +-
 source/components/graphHierarchy.ts           |  223 +-
 source/components/legendComonent.tsx          |  188 +-
 source/components/mainContainerComponent.tsx  |   19 +-
 .../components/model/edges/argumentEdge.tsx   |   20 +-
 source/components/model/edges/callsEdge.tsx   |   22 +-
 .../components/model/edges/definedByEdge.tsx  |   22 +-
 .../model/edges/definedByOnCallEdge.tsx       |   22 +-
 .../model/edges/definesOnCallEdge.tsx         |   22 +-
 source/components/model/edges/edgeBase.tsx    |  347 +-
 source/components/model/edges/multiEdge.tsx   |  610 +-
 .../model/edges/nonStandardEvaluationEdge.tsx |   20 +-
 source/components/model/edges/readsEdge.tsx   |   22 +-
 source/components/model/edges/relatesEdge.tsx |   20 +-
 source/components/model/edges/returnsEdge.tsx |   22 +-
 .../components/model/edges/sameDefDefEdge.tsx |   20 +-
 .../model/edges/sameReadReadEdge.tsx          |   20 +-
 .../model/edges/sideEffectOnCallEdge.tsx      |   20 +-
 source/components/model/graph.ts              |    6 +-
 source/components/model/graphBuilder.ts       |  269 +-
 source/components/model/graphTransition.ts    |   86 +-
 .../model/nodes/handleNodeComponent.tsx       |   16 +-
 .../components/model/nodes/nodeDefinition.tsx |  208 +-
 source/components/model/visualStateModel.tsx  |    4 +-
 .../network/visualizerWebsocketClient.ts      |   86 +-
 source/components/svgDefinitions.tsx          |  344 +-
 source/index.tsx                              |  186 +-
 29 files changed, 7536 insertions(+), 2830 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5eef3ce..5a240e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,8 +27,18 @@
         "webpack-manifest-plugin": "^5.0.0"
       },
       "devDependencies": {
+        "@eagleoutice/eslint-config-flowr": "^1.0.8",
+        "@stylistic/eslint-plugin": "^2.6.2",
+        "@stylistic/eslint-plugin-plus": "^2.6.2",
+        "@stylistic/eslint-plugin-ts": "^2.6.2",
         "@types/uuid": "^9.0.2",
         "copy-webpack-plugin": "^11.0.0",
+        "eslint": "^8.57.0",
+        "eslint-plugin-check-file": "^2.8.0",
+        "eslint-plugin-import": "^2.29.1",
+        "eslint-plugin-n": "^17.10.2",
+        "eslint-plugin-promise": "^6.6.0",
+        "eslint-plugin-tsdoc": "^0.2.17",
         "html-webpack-plugin": "^5.5.0",
         "ts-loader": "^9.3.1",
         "ts-node": "^10.9.1",
@@ -88,6 +98,24 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@eagleoutice/eslint-config-flowr": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@eagleoutice/eslint-config-flowr/-/eslint-config-flowr-1.0.8.tgz",
+      "integrity": "sha512-W1b13ZrDHOUmuR3m5aWRV+HSmAMVISXkBPh/NJdhXWi7H+fA3UOIF+Wq4neZWaJwmtfLSxrPVnm6BaPFPeCLOA==",
+      "dev": true,
+      "peerDependencies": {
+        "@stylistic/eslint-plugin": "^2.1.0",
+        "@stylistic/eslint-plugin-plus": "^2.1.0",
+        "@stylistic/eslint-plugin-ts": "^2.1.0",
+        "@typescript-eslint/eslint-plugin": "^7.8.0",
+        "eslint": "^8.57.0",
+        "eslint-plugin-check-file": "^2.8.0",
+        "eslint-plugin-import": "^2.29.1",
+        "eslint-plugin-n": "^17.6.0",
+        "eslint-plugin-promise": "^6.1.1",
+        "eslint-plugin-tsdoc": "^0.2.17"
+      }
+    },
     "node_modules/@eagleoutice/flowr": {
       "version": "2.0.9",
       "resolved": "https://registry.npmjs.org/@eagleoutice/flowr/-/flowr-2.0.9.tgz",
@@ -111,6 +139,126 @@
         "xpath-ts2": "^1.4.2"
       }
     },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
+      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+      "dev": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz",
+      "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==",
+      "dev": true,
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.6.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/debug": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "node_modules/@eslint/js": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
+      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -124,6 +272,64 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.11.14",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
+      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+      "deprecated": "Use @eslint/config-array instead",
+      "dev": true,
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^2.0.2",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array/node_modules/debug": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@humanwhocodes/config-array/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "deprecated": "Use @eslint/object-schema instead",
+      "dev": true
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -239,6 +445,37 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
+    "node_modules/@microsoft/tsdoc": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.14.2.tgz",
+      "integrity": "sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==",
+      "dev": true
+    },
+    "node_modules/@microsoft/tsdoc-config": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.16.2.tgz",
+      "integrity": "sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==",
+      "dev": true,
+      "dependencies": {
+        "@microsoft/tsdoc": "0.14.2",
+        "ajv": "~6.12.6",
+        "jju": "~1.4.0",
+        "resolve": "~1.19.0"
+      }
+    },
+    "node_modules/@microsoft/tsdoc-config/node_modules/resolve": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
+      "integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.1.0",
+        "path-parse": "^1.0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -309,6 +546,112 @@
       "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
       "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
     },
+    "node_modules/@stylistic/eslint-plugin": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin/-/eslint-plugin-2.6.2.tgz",
+      "integrity": "sha512-Ic5oFNM/25iuagob6LiIBkSI/A2y45TsyKtDtODXHRZDy52WfPfeexI6r+OH5+aWN9QGob2Bw+4JRM9/4areWw==",
+      "dev": true,
+      "dependencies": {
+        "@stylistic/eslint-plugin-js": "2.6.2",
+        "@stylistic/eslint-plugin-jsx": "2.6.2",
+        "@stylistic/eslint-plugin-plus": "2.6.2",
+        "@stylistic/eslint-plugin-ts": "2.6.2",
+        "@types/eslint": "^9.6.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=8.40.0"
+      }
+    },
+    "node_modules/@stylistic/eslint-plugin-js": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin-js/-/eslint-plugin-js-2.6.2.tgz",
+      "integrity": "sha512-wCr/kVctAPayMU3pcOI1MKR7MoKIh6VKZU89lPklAqtJoxT+Em6RueiiARbpznUYG5eg3LymiU+aMD+aIZXdqA==",
+      "dev": true,
+      "dependencies": {
+        "@types/eslint": "^9.6.0",
+        "acorn": "^8.12.1",
+        "eslint-visitor-keys": "^4.0.0",
+        "espree": "^10.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=8.40.0"
+      }
+    },
+    "node_modules/@stylistic/eslint-plugin-jsx": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin-jsx/-/eslint-plugin-jsx-2.6.2.tgz",
+      "integrity": "sha512-dSXK/fSPA938J1fBi10QmhzLKtZ/2TuyVNHQMk8jUhWfKJDleAogaSqcWNAbN8fwcoe9UWmt/3StiIf2oYC1aQ==",
+      "dev": true,
+      "dependencies": {
+        "@stylistic/eslint-plugin-js": "^2.6.2",
+        "@types/eslint": "^9.6.0",
+        "estraverse": "^5.3.0",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=8.40.0"
+      }
+    },
+    "node_modules/@stylistic/eslint-plugin-jsx/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/@stylistic/eslint-plugin-jsx/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/@stylistic/eslint-plugin-plus": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin-plus/-/eslint-plugin-plus-2.6.2.tgz",
+      "integrity": "sha512-cANcPASfRvq3VTbbQCrSIXq+2AI0IW68PNYaZoXXS0ENlp7HDB8dmrsJnOgWCcoEvdCB8z/eWcG/eq/v5Qcl+Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/eslint": "^9.6.0",
+        "@typescript-eslint/utils": "^8.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "*"
+      }
+    },
+    "node_modules/@stylistic/eslint-plugin-ts": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin-ts/-/eslint-plugin-ts-2.6.2.tgz",
+      "integrity": "sha512-6OEN3VtUNxjgOvWPavnC10MByr1H4zsgwNND3rQXr5lDFv93MLUnTsH+/SH15OkuqdyJgrQILI6b9lYecb1vIg==",
+      "dev": true,
+      "dependencies": {
+        "@stylistic/eslint-plugin-js": "2.6.2",
+        "@types/eslint": "^9.6.0",
+        "@typescript-eslint/utils": "^8.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=8.40.0"
+      }
+    },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
@@ -415,9 +758,9 @@
       }
     },
     "node_modules/@types/eslint": {
-      "version": "8.4.6",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.6.tgz",
-      "integrity": "sha512-/fqTbjxyFUaYNO7VcW5g+4npmqVACz1bB7RTHYuLj+PRjw9hrCwrUXVQFpChUS0JsyEFvMZ7U/PfmvWgxJhI9g==",
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.0.tgz",
+      "integrity": "sha512-gi6WQJ7cHRgZxtkQEoyHMppPjq9Kxo5Tjn2prSKDSmZrCz8TZ3jSRCeTJm+WoM+oB0WG37bRqLzaaU3q7JypGg==",
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -480,6 +823,12 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
     },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true
+    },
     "node_modules/@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -580,1473 +929,2919 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@webassemblyjs/ast": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
-      "integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==",
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.18.0.tgz",
+      "integrity": "sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==",
+      "dev": true,
+      "peer": true,
       "dependencies": {
-        "@webassemblyjs/helper-numbers": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/type-utils": "7.18.0",
+        "@typescript-eslint/utils": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.3.1",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^7.0.0",
+        "eslint": "^8.56.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
-      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw=="
-    },
-    "node_modules/@webassemblyjs/helper-api-error": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
-      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q=="
-    },
-    "node_modules/@webassemblyjs/helper-buffer": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz",
-      "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA=="
-    },
-    "node_modules/@webassemblyjs/helper-numbers": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
-      "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/utils": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.18.0.tgz",
+      "integrity": "sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==",
+      "dev": true,
+      "peer": true,
       "dependencies": {
-        "@webassemblyjs/floating-point-hex-parser": "1.11.6",
-        "@webassemblyjs/helper-api-error": "1.11.6",
-        "@xtuc/long": "4.2.2"
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/typescript-estree": "7.18.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.56.0"
       }
     },
-    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
-      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA=="
-    },
-    "node_modules/@webassemblyjs/helper-wasm-section": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz",
-      "integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==",
+    "node_modules/@typescript-eslint/parser": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.18.0.tgz",
+      "integrity": "sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==",
+      "dev": true,
+      "peer": true,
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-buffer": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/wasm-gen": "1.11.6"
-      }
-    },
-    "node_modules/@webassemblyjs/ieee754": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
-      "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
-      "dependencies": {
-        "@xtuc/ieee754": "^1.2.0"
-      }
-    },
-    "node_modules/@webassemblyjs/leb128": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
-      "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
-      "dependencies": {
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "node_modules/@webassemblyjs/utf8": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
-      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA=="
-    },
-    "node_modules/@webassemblyjs/wasm-edit": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz",
-      "integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-buffer": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/helper-wasm-section": "1.11.6",
-        "@webassemblyjs/wasm-gen": "1.11.6",
-        "@webassemblyjs/wasm-opt": "1.11.6",
-        "@webassemblyjs/wasm-parser": "1.11.6",
-        "@webassemblyjs/wast-printer": "1.11.6"
-      }
-    },
-    "node_modules/@webassemblyjs/wasm-gen": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz",
-      "integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/ieee754": "1.11.6",
-        "@webassemblyjs/leb128": "1.11.6",
-        "@webassemblyjs/utf8": "1.11.6"
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/typescript-estree": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.56.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@webassemblyjs/wasm-opt": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz",
-      "integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==",
+    "node_modules/@typescript-eslint/parser/node_modules/debug": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+      "dev": true,
+      "peer": true,
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-buffer": "1.11.6",
-        "@webassemblyjs/wasm-gen": "1.11.6",
-        "@webassemblyjs/wasm-parser": "1.11.6"
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@webassemblyjs/wasm-parser": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz",
-      "integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-api-error": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/ieee754": "1.11.6",
-        "@webassemblyjs/leb128": "1.11.6",
-        "@webassemblyjs/utf8": "1.11.6"
-      }
+    "node_modules/@typescript-eslint/parser/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true,
+      "peer": true
     },
-    "node_modules/@webassemblyjs/wast-printer": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz",
-      "integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==",
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.18.0.tgz",
+      "integrity": "sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==",
+      "dev": true,
+      "peer": true,
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.6",
-        "@xtuc/long": "4.2.2"
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@webpack-cli/configtest": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
-      "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==",
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.18.0.tgz",
+      "integrity": "sha512-XL0FJXuCLaDuX2sYqZUUSOJ2sG5/i1AAze+axqmLnSkNEVMVYLF+cbwlB2w8D1tinFuSikHmFta+P+HOofrLeA==",
       "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "7.18.0",
+        "@typescript-eslint/utils": "7.18.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
       "peerDependencies": {
-        "webpack": "4.x.x || 5.x.x",
-        "webpack-cli": "4.x.x"
+        "eslint": "^8.56.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@webpack-cli/info": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz",
-      "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==",
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/utils": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.18.0.tgz",
+      "integrity": "sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
-        "envinfo": "^7.7.3"
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/typescript-estree": "7.18.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "webpack-cli": "4.x.x"
+        "eslint": "^8.56.0"
       }
     },
-    "node_modules/@webpack-cli/serve": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz",
-      "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==",
+    "node_modules/@typescript-eslint/type-utils/node_modules/debug": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
       "dev": true,
-      "peerDependencies": {
-        "webpack-cli": "4.x.x"
+      "peer": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
       },
       "peerDependenciesMeta": {
-        "webpack-dev-server": {
+        "supports-color": {
           "optional": true
         }
       }
     },
-    "node_modules/@xmldom/xmldom": {
-      "version": "0.8.10",
-      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
-      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+    "node_modules/@typescript-eslint/type-utils/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.18.0.tgz",
+      "integrity": "sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==",
+      "dev": true,
+      "peer": true,
       "engines": {
-        "node": ">=10.0.0"
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@xtuc/ieee754": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
-    },
-    "node_modules/@xtuc/long": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
-    },
-    "node_modules/@xyflow/react": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.0.0.tgz",
-      "integrity": "sha512-f0cboW5ZbKR+xGUr2QtYiIZwGvxDHzCjdtp2KBSNcQCmyc9xgaJ2PMCKBpwAUF0u+RoA7mEW2jE3mPI9WCBy0A==",
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.18.0.tgz",
+      "integrity": "sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==",
+      "dev": true,
+      "peer": true,
       "dependencies": {
-        "@xyflow/system": "0.0.34",
-        "classcat": "^5.0.3",
-        "zustand": "^4.4.0"
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
       },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@xyflow/system": {
-      "version": "0.0.34",
-      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.34.tgz",
-      "integrity": "sha512-Gcc2aSPZX5YMn+Rv6a2lxRes005YLc6LRaMtzRsobCcIEMpBUWzEx8/OrvpAYOCM3UCxlqfUOK2ekglxbjzYEQ==",
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "peer": true,
       "dependencies": {
-        "@types/d3-drag": "^3.0.7",
-        "@types/d3-selection": "^3.0.10",
-        "@types/d3-transition": "^3.0.8",
-        "@types/d3-zoom": "^3.0.8",
-        "d3-drag": "^3.0.0",
-        "d3-selection": "^3.0.0",
-        "d3-zoom": "^3.0.0"
+        "balanced-match": "^1.0.0"
       }
     },
-    "node_modules/abort-controller": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
-      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/debug": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+      "dev": true,
+      "peer": true,
       "dependencies": {
-        "event-target-shim": "^5.0.0"
+        "ms": "2.1.2"
       },
       "engines": {
-        "node": ">=6.5"
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
       }
     },
-    "node_modules/accepts": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
-      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
       "dev": true,
+      "peer": true,
       "dependencies": {
-        "mime-types": "~2.1.34",
-        "negotiator": "0.6.3"
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
       },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/acorn": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
-      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
-      "bin": {
-        "acorn": "bin/acorn"
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
       },
       "engines": {
-        "node": ">=0.4.0"
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
-      "peerDependencies": {
-        "acorn": "^8"
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/acorn-walk": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
-      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.0.1.tgz",
+      "integrity": "sha512-CBFR0G0sCt0+fzfnKaciu9IBsKvEKYwN9UZ+eeogK1fYHg4Qxk1yf/wLQkLXlq8wbU2dFlgAesxt8Gi76E8RTA==",
       "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "8.0.1",
+        "@typescript-eslint/types": "8.0.1",
+        "@typescript-eslint/typescript-estree": "8.0.1"
+      },
       "engines": {
-        "node": ">=0.4.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
       }
     },
-    "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.0.1.tgz",
+      "integrity": "sha512-NpixInP5dm7uukMiRyiHjRKkom5RIFA4dfiHvalanD2cF0CLUuQqxfg8PtEUo9yqJI2bBhF+pcSafqnG3UBnRQ==",
+      "dev": true,
       "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
+        "@typescript-eslint/types": "8.0.1",
+        "@typescript-eslint/visitor-keys": "8.0.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/ajv-formats": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
-      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/types": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.0.1.tgz",
+      "integrity": "sha512-PpqTVT3yCA/bIgJ12czBuE3iBlM3g4inRSC5J0QOdQFAn07TYrYEQBBKgXH1lQpglup+Zy6c1fxuwTk4MTNKIw==",
+      "dev": true,
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.0.1.tgz",
+      "integrity": "sha512-8V9hriRvZQXPWU3bbiUV4Epo7EvgM6RTs+sUmxp5G//dBGy402S7Fx0W0QkB2fb4obCF8SInoUzvTYtc3bkb5w==",
       "dev": true,
       "dependencies": {
-        "ajv": "^8.0.0"
+        "@typescript-eslint/types": "8.0.1",
+        "@typescript-eslint/visitor-keys": "8.0.1",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
       },
-      "peerDependencies": {
-        "ajv": "^8.0.0"
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependenciesMeta": {
-        "ajv": {
+        "typescript": {
           "optional": true
         }
       }
     },
-    "node_modules/ajv-formats/node_modules/ajv": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.0.1.tgz",
+      "integrity": "sha512-W5E+o0UfUcK5EgchLZsyVWqARmsM7v54/qEq6PY3YI5arkgmCzHiuk0zKSJJbm71V0xdRna4BGomkCTXz2/LkQ==",
       "dev": true,
       "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
+        "@typescript-eslint/types": "8.0.1",
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true
-    },
-    "node_modules/ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "peerDependencies": {
-        "ajv": "^6.9.1"
+    "node_modules/@typescript-eslint/utils/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
       }
     },
-    "node_modules/allotment": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/allotment/-/allotment-1.17.0.tgz",
-      "integrity": "sha512-Iab4GCVLb9/2R5D2PFlbhR2OWZrGLpYqF6YgmonLmwc9BrA+PEMt2BkltdYaySh7vfG73tuMdBB5R7AdTuMJEA==",
+    "node_modules/@typescript-eslint/utils/node_modules/debug": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+      "dev": true,
       "dependencies": {
-        "classnames": "^2.3.0",
-        "eventemitter3": "^4.0.0",
-        "lodash.clamp": "^4.0.0",
-        "lodash.debounce": "^4.0.0",
-        "lodash.isequal": "^4.5.0",
-        "use-resize-observer": "^9.0.0"
+        "ms": "2.1.2"
       },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
       }
     },
-    "node_modules/ansi-html-community": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
-      "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
+    "node_modules/@typescript-eslint/utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "dev": true,
-      "engines": [
-        "node >= 0.8.0"
-      ],
-      "bin": {
-        "ansi-html": "bin/ansi-html"
-      }
-    },
-    "node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "engines": {
-        "node": ">=8"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+    "node_modules/@typescript-eslint/utils/node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
       },
       "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/anymatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+    "node_modules/@typescript-eslint/utils/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
       "dev": true,
       "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
+        "brace-expansion": "^2.0.1"
       },
       "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/arg": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
-      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "dev": true
-    },
-    "node_modules/array-back": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/array-back/-/array-back-3.1.0.tgz",
-      "integrity": "sha512-TkuxA4UCOvxuDK6NZYXCalszEzj+TLszyASooky+i742l9TqsOdYCMJJupxRic61hwquNtppB3hgcuq9SVSH1Q==",
-      "engines": {
-        "node": ">=6"
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/array-flatten": {
+    "node_modules/@typescript-eslint/utils/node_modules/ms": {
       "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
-      "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
-      "dev": true
-    },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
-    },
-    "node_modules/base64-js": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/batch": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
-      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
-    "node_modules/binary-extensions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+    "node_modules/@typescript-eslint/utils/node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
       "dev": true,
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/body-parser": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
-      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.18.0.tgz",
+      "integrity": "sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
-        "bytes": "3.1.2",
-        "content-type": "~1.0.5",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "on-finished": "2.4.1",
-        "qs": "6.11.0",
-        "raw-body": "2.5.2",
-        "type-is": "~1.6.18",
-        "unpipe": "1.0.0"
+        "@typescript-eslint/types": "7.18.0",
+        "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/body-parser/node_modules/bytes": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "dev": true,
+      "peer": true,
       "engines": {
-        "node": ">= 0.8"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/bonjour-service": {
-      "version": "1.0.14",
-      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.0.14.tgz",
-      "integrity": "sha512-HIMbgLnk1Vqvs6B4Wq5ep7mxvj9sGz5d1JJyDNSGNIdA/w2MCz6GTjWTdjqOJV1bEPj+6IkxDvWNFKEBxNt4kQ==",
-      "dev": true,
-      "dependencies": {
-        "array-flatten": "^2.1.2",
-        "dns-equal": "^1.0.0",
-        "fast-deep-equal": "^3.1.3",
-        "multicast-dns": "^7.2.5"
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+      "dev": true
+    },
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
+      "integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==",
+      "dependencies": {
+        "@webassemblyjs/helper-numbers": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
+      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw=="
+    },
+    "node_modules/@webassemblyjs/helper-api-error": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
+      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q=="
+    },
+    "node_modules/@webassemblyjs/helper-buffer": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz",
+      "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA=="
+    },
+    "node_modules/@webassemblyjs/helper-numbers": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
+      "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
+      "dependencies": {
+        "@webassemblyjs/floating-point-hex-parser": "1.11.6",
+        "@webassemblyjs/helper-api-error": "1.11.6",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
+      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA=="
+    },
+    "node_modules/@webassemblyjs/helper-wasm-section": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz",
+      "integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
+      "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
+      "dependencies": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
+      "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
+      "dependencies": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
+      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA=="
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz",
+      "integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/helper-wasm-section": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6",
+        "@webassemblyjs/wasm-opt": "1.11.6",
+        "@webassemblyjs/wasm-parser": "1.11.6",
+        "@webassemblyjs/wast-printer": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz",
+      "integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz",
+      "integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6",
+        "@webassemblyjs/wasm-parser": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz",
+      "integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-api-error": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz",
+      "integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webpack-cli/configtest": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
+      "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==",
+      "dev": true,
+      "peerDependencies": {
+        "webpack": "4.x.x || 5.x.x",
+        "webpack-cli": "4.x.x"
+      }
+    },
+    "node_modules/@webpack-cli/info": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz",
+      "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==",
+      "dev": true,
+      "dependencies": {
+        "envinfo": "^7.7.3"
+      },
+      "peerDependencies": {
+        "webpack-cli": "4.x.x"
+      }
+    },
+    "node_modules/@webpack-cli/serve": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz",
+      "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==",
+      "dev": true,
+      "peerDependencies": {
+        "webpack-cli": "4.x.x"
+      },
+      "peerDependenciesMeta": {
+        "webpack-dev-server": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
+    },
+    "node_modules/@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
+    },
+    "node_modules/@xyflow/react": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.0.0.tgz",
+      "integrity": "sha512-f0cboW5ZbKR+xGUr2QtYiIZwGvxDHzCjdtp2KBSNcQCmyc9xgaJ2PMCKBpwAUF0u+RoA7mEW2jE3mPI9WCBy0A==",
+      "dependencies": {
+        "@xyflow/system": "0.0.34",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.34",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.34.tgz",
+      "integrity": "sha512-Gcc2aSPZX5YMn+Rv6a2lxRes005YLc6LRaMtzRsobCcIEMpBUWzEx8/OrvpAYOCM3UCxlqfUOK2ekglxbjzYEQ==",
+      "dependencies": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
+    "node_modules/abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "dependencies": {
+        "event-target-shim": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dev": true,
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.12.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
+      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-import-assertions": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
+      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+      "peerDependencies": {
+        "acorn": "^8"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/acorn-walk": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
+      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ajv-formats/node_modules/ajv": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/allotment": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/allotment/-/allotment-1.17.0.tgz",
+      "integrity": "sha512-Iab4GCVLb9/2R5D2PFlbhR2OWZrGLpYqF6YgmonLmwc9BrA+PEMt2BkltdYaySh7vfG73tuMdBB5R7AdTuMJEA==",
+      "dependencies": {
+        "classnames": "^2.3.0",
+        "eventemitter3": "^4.0.0",
+        "lodash.clamp": "^4.0.0",
+        "lodash.debounce": "^4.0.0",
+        "lodash.isequal": "^4.5.0",
+        "use-resize-observer": "^9.0.0"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/ansi-html-community": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
+      "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
+      "dev": true,
+      "engines": [
+        "node >= 0.8.0"
+      ],
+      "bin": {
+        "ansi-html": "bin/ansi-html"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+      "dev": true
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "node_modules/array-back": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/array-back/-/array-back-3.1.0.tgz",
+      "integrity": "sha512-TkuxA4UCOvxuDK6NZYXCalszEzj+TLszyASooky+i742l9TqsOdYCMJJupxRic61hwquNtppB3hgcuq9SVSH1Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
+      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-flatten": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
+      "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
+      "dev": true
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
+      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "is-string": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz",
+      "integrity": "sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
+      "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz",
+      "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz",
+      "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==",
+      "dev": true,
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.22.3",
+        "es-errors": "^1.2.1",
+        "get-intrinsic": "^1.2.3",
+        "is-array-buffer": "^3.0.4",
+        "is-shared-array-buffer": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/batch": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
+      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
+      "dev": true
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
+      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
+      "dev": true,
+      "dependencies": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.5",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.11.0",
+        "raw-body": "2.5.2",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/body-parser/node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/bonjour-service": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.0.14.tgz",
+      "integrity": "sha512-HIMbgLnk1Vqvs6B4Wq5ep7mxvj9sGz5d1JJyDNSGNIdA/w2MCz6GTjWTdjqOJV1bEPj+6IkxDvWNFKEBxNt4kQ==",
+      "dev": true,
+      "dependencies": {
+        "array-flatten": "^2.1.2",
+        "dns-equal": "^1.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "multicast-dns": "^7.2.5"
+      }
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz",
+      "integrity": "sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        }
+      ],
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001370",
+        "electron-to-chromium": "^1.4.202",
+        "node-releases": "^2.0.6",
+        "update-browserslist-db": "^1.0.5"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+    },
+    "node_modules/bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "dev": true,
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camel-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+      "dev": true,
+      "dependencies": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001393",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001393.tgz",
+      "integrity": "sha512-N/od11RX+Gsk+1qY/jbPa0R6zJupEa0lxeBG598EbrtblxVCTJsQwbRBm6+V+rxpc5lHKdsXb9RY83cZIPLseA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        }
+      ]
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk-template": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/chalk-template/-/chalk-template-0.4.0.tgz",
+      "integrity": "sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==",
+      "dependencies": {
+        "chalk": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk-template?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/chrome-trace-event": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
+      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/classcat": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w=="
+    },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
+    "node_modules/clean-css": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
+      "integrity": "sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==",
+      "dev": true,
+      "dependencies": {
+        "source-map": "~0.6.0"
+      },
+      "engines": {
+        "node": ">= 10.0"
       }
     },
-    "node_modules/boolbase": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+    "node_modules/clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "dependencies": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/colorette": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz",
+      "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
       "dev": true
     },
-    "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+    "node_modules/command-line-args": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/command-line-args/-/command-line-args-5.2.1.tgz",
+      "integrity": "sha512-H4UfQhZyakIjC74I9d34fGYDwk3XpSr17QhEd0Q3I9Xq1CETHo4Hcuo87WyWHpAF1aSLjLRf5lD9ZGX2qStUvg==",
+      "dependencies": {
+        "array-back": "^3.1.0",
+        "find-replace": "^3.0.0",
+        "lodash.camelcase": "^4.3.0",
+        "typical": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/command-line-usage": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/command-line-usage/-/command-line-usage-7.0.1.tgz",
+      "integrity": "sha512-NCyznE//MuTjwi3y84QVUGEOT+P5oto1e1Pk/jFPVdPPfsG03qpTIl3yw6etR+v73d0lXsoojRpvbru2sqePxQ==",
+      "dependencies": {
+        "array-back": "^6.2.2",
+        "chalk-template": "^0.4.0",
+        "table-layout": "^3.0.0",
+        "typical": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/command-line-usage/node_modules/array-back": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/array-back/-/array-back-6.2.2.tgz",
+      "integrity": "sha512-gUAZ7HPyb4SJczXAMUXMGAvI976JoK3qEx9v1FTmeYuJj0IBiaKttG1ydtGKdkfqWkIkouke7nG8ufGy77+Cvw==",
+      "engines": {
+        "node": ">=12.17"
+      }
+    },
+    "node_modules/command-line-usage/node_modules/typical": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/typical/-/typical-7.1.1.tgz",
+      "integrity": "sha512-T+tKVNs6Wu7IWiAce5BgMd7OZfNYUndHwc5MknN+UHOudi7sGZzuHdCadllRuqJ3fPtgFtIH9+lt9qRv6lmpfA==",
+      "engines": {
+        "node": ">=12.17"
+      }
+    },
+    "node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
+    "node_modules/compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
       "dev": true,
       "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+        "mime-db": ">= 1.43.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
       }
     },
-    "node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+    "node_modules/compression": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
       "dev": true,
       "dependencies": {
-        "fill-range": "^7.1.1"
+        "accepts": "~1.3.5",
+        "bytes": "3.0.0",
+        "compressible": "~2.0.16",
+        "debug": "2.6.9",
+        "on-headers": "~1.0.2",
+        "safe-buffer": "5.1.2",
+        "vary": "~1.1.2"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.8.0"
       }
     },
-    "node_modules/browserslist": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz",
-      "integrity": "sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        }
-      ],
+    "node_modules/compression/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
+    },
+    "node_modules/connect-history-api-fallback": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
+      "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "dev": true,
       "dependencies": {
-        "caniuse-lite": "^1.0.30001370",
-        "electron-to-chromium": "^1.4.202",
-        "node-releases": "^2.0.6",
-        "update-browserslist-db": "^1.0.5"
+        "safe-buffer": "5.2.1"
       },
-      "bin": {
-        "browserslist": "cli.js"
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
+      "dev": true
+    },
+    "node_modules/copy-webpack-plugin": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz",
+      "integrity": "sha512-fX2MWpamkW0hZxMEg0+mYnA40LTosOSa5TqZ9GYIBzyJa9C3QUaMPSE2xAi/buNr8u89SfD9wHSQVBzrRa/SOQ==",
+      "dev": true,
+      "dependencies": {
+        "fast-glob": "^3.2.11",
+        "glob-parent": "^6.0.1",
+        "globby": "^13.1.1",
+        "normalize-path": "^3.0.0",
+        "schema-utils": "^4.0.0",
+        "serialize-javascript": "^6.0.0"
       },
       "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/ajv": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
       }
     },
-    "node_modules/buffer-from": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
-    },
-    "node_modules/bytes": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+    "node_modules/copy-webpack-plugin/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
       "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
       "engines": {
-        "node": ">= 0.8"
+        "node": ">=10.13.0"
       }
     },
-    "node_modules/call-bind": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
-      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+    "node_modules/copy-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "node_modules/copy-webpack-plugin/node_modules/schema-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+      "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
       "dev": true,
       "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.1"
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.8.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.0.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">= 12.13.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/camel-case": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
-      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
-      "dev": true,
-      "dependencies": {
-        "pascal-case": "^3.1.2",
-        "tslib": "^2.0.3"
-      }
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "dev": true
     },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001393",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001393.tgz",
-      "integrity": "sha512-N/od11RX+Gsk+1qY/jbPa0R6zJupEa0lxeBG598EbrtblxVCTJsQwbRBm6+V+rxpc5lHKdsXb9RY83cZIPLseA==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-        }
-      ]
+    "node_modules/create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+      "dev": true
     },
-    "node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
       },
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
+        "node": ">= 8"
       }
     },
-    "node_modules/chalk-template": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/chalk-template/-/chalk-template-0.4.0.tgz",
-      "integrity": "sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==",
+    "node_modules/css-loader": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",
+      "integrity": "sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==",
       "dependencies": {
-        "chalk": "^4.1.2"
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.4.7",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.3.5"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">= 12.13.0"
       },
       "funding": {
-        "url": "https://github.com/chalk/chalk-template?sponsor=1"
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
       }
     },
-    "node_modules/chalk/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+    "node_modules/css-select": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+      "dev": true,
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "boolbase": "^1.0.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
       },
-      "engines": {
-        "node": ">=8"
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
       }
     },
-    "node_modules/chokidar": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
-      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
       "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://paulmillr.com/funding/"
-        }
-      ],
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
       "engines": {
-        "node": ">= 8.10.0"
+        "node": ">= 6"
       },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
       }
     },
-    "node_modules/chownr": {
+    "node_modules/cssesc": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
-      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=4"
       }
     },
-    "node_modules/chrome-trace-event": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
-      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
+    "node_modules/csstype": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
       "engines": {
-        "node": ">=6.0"
+        "node": ">=12"
       }
     },
-    "node_modules/classcat": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
-      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w=="
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
     },
-    "node_modules/classnames": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
     },
-    "node_modules/clean-css": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
-      "integrity": "sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==",
-      "dev": true,
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
       "dependencies": {
-        "source-map": "~0.6.0"
+        "d3-color": "1 - 3"
       },
       "engines": {
-        "node": ">= 10.0"
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/clone-deep": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
-      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
-      "dev": true,
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
       "dependencies": {
-        "is-plain-object": "^2.0.4",
-        "kind-of": "^6.0.2",
-        "shallow-clone": "^3.0.0"
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
       }
     },
-    "node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">=12"
       }
     },
-    "node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-    },
-    "node_modules/colorette": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz",
-      "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
-      "dev": true
-    },
-    "node_modules/command-line-args": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/command-line-args/-/command-line-args-5.2.1.tgz",
-      "integrity": "sha512-H4UfQhZyakIjC74I9d34fGYDwk3XpSr17QhEd0Q3I9Xq1CETHo4Hcuo87WyWHpAF1aSLjLRf5lD9ZGX2qStUvg==",
+    "node_modules/data-view-buffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
+      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
+      "dev": true,
       "dependencies": {
-        "array-back": "^3.1.0",
-        "find-replace": "^3.0.0",
-        "lodash.camelcase": "^4.3.0",
-        "typical": "^4.0.0"
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
       },
       "engines": {
-        "node": ">=4.0.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/command-line-usage": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/command-line-usage/-/command-line-usage-7.0.1.tgz",
-      "integrity": "sha512-NCyznE//MuTjwi3y84QVUGEOT+P5oto1e1Pk/jFPVdPPfsG03qpTIl3yw6etR+v73d0lXsoojRpvbru2sqePxQ==",
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
+      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
+      "dev": true,
       "dependencies": {
-        "array-back": "^6.2.2",
-        "chalk-template": "^0.4.0",
-        "table-layout": "^3.0.0",
-        "typical": "^7.1.1"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
       },
       "engines": {
-        "node": ">=12.20.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/command-line-usage/node_modules/array-back": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/array-back/-/array-back-6.2.2.tgz",
-      "integrity": "sha512-gUAZ7HPyb4SJczXAMUXMGAvI976JoK3qEx9v1FTmeYuJj0IBiaKttG1ydtGKdkfqWkIkouke7nG8ufGy77+Cvw==",
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
       "engines": {
-        "node": ">=12.17"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/command-line-usage/node_modules/typical": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/typical/-/typical-7.1.1.tgz",
-      "integrity": "sha512-T+tKVNs6Wu7IWiAce5BgMd7OZfNYUndHwc5MknN+UHOudi7sGZzuHdCadllRuqJ3fPtgFtIH9+lt9qRv6lmpfA==",
-      "engines": {
-        "node": ">=12.17"
+    "node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
       }
     },
-    "node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true
     },
-    "node_modules/compressible": {
-      "version": "2.0.18",
-      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
-      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+    "node_modules/default-gateway": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
+      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
       "dev": true,
       "dependencies": {
-        "mime-db": ">= 1.43.0 < 2"
+        "execa": "^5.0.0"
       },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 10"
       }
     },
-    "node_modules/compression": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
-      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
       "dev": true,
       "dependencies": {
-        "accepts": "~1.3.5",
-        "bytes": "3.0.0",
-        "compressible": "~2.0.16",
-        "debug": "2.6.9",
-        "on-headers": "~1.0.2",
-        "safe-buffer": "5.1.2",
-        "vary": "~1.1.2"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
       },
       "engines": {
-        "node": ">= 0.8.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/compression/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
-    },
-    "node_modules/concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
-    },
-    "node_modules/connect-history-api-fallback": {
+    "node_modules/define-lazy-prop": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
-      "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
       "dev": true,
       "engines": {
-        "node": ">=0.8"
+        "node": ">=8"
       }
     },
-    "node_modules/content-disposition": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
-      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
       "dev": true,
       "dependencies": {
-        "safe-buffer": "5.2.1"
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
       },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/content-type": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
-      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
       "dev": true,
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
       "dev": true,
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
       }
     },
-    "node_modules/cookie-signature": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
+    "node_modules/detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "dev": true
     },
-    "node_modules/copy-webpack-plugin": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz",
-      "integrity": "sha512-fX2MWpamkW0hZxMEg0+mYnA40LTosOSa5TqZ9GYIBzyJa9C3QUaMPSE2xAi/buNr8u89SfD9wHSQVBzrRa/SOQ==",
+    "node_modules/diff": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
       "dev": true,
       "dependencies": {
-        "fast-glob": "^3.2.11",
-        "glob-parent": "^6.0.1",
-        "globby": "^13.1.1",
-        "normalize-path": "^3.0.0",
-        "schema-utils": "^4.0.0",
-        "serialize-javascript": "^6.0.0"
+        "path-type": "^4.0.0"
       },
       "engines": {
-        "node": ">= 14.15.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
+        "node": ">=8"
+      }
+    },
+    "node_modules/dns-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
+      "integrity": "sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg==",
+      "dev": true
+    },
+    "node_modules/dns-packet": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.4.0.tgz",
+      "integrity": "sha512-EgqGeaBB8hLiHLZtp/IbaDQTL8pZ0+IvwzSHA6d7VyMDM+B9hgddEMa9xjK5oYnw0ci0JQ6g2XCD7/f6cafU6g==",
+      "dev": true,
+      "dependencies": {
+        "@leichtgewicht/ip-codec": "^2.0.1"
       },
-      "peerDependencies": {
-        "webpack": "^5.1.0"
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/copy-webpack-plugin/node_modules/ajv": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
       "dev": true,
       "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
+        "esutils": "^2.0.2"
       },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/copy-webpack-plugin/node_modules/ajv-keywords": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+    "node_modules/dom-converter": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
+      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
       "dev": true,
       "dependencies": {
-        "fast-deep-equal": "^3.1.3"
-      },
-      "peerDependencies": {
-        "ajv": "^8.8.2"
+        "utila": "~0.4"
       }
     },
-    "node_modules/copy-webpack-plugin/node_modules/glob-parent": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+    "node_modules/dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
       "dev": true,
       "dependencies": {
-        "is-glob": "^4.0.3"
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
       },
-      "engines": {
-        "node": ">=10.13.0"
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
     },
-    "node_modules/copy-webpack-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
     },
-    "node_modules/copy-webpack-plugin/node_modules/schema-utils": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
-      "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+    "node_modules/domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
       "dev": true,
       "dependencies": {
-        "@types/json-schema": "^7.0.9",
-        "ajv": "^8.8.0",
-        "ajv-formats": "^2.1.1",
-        "ajv-keywords": "^5.0.0"
+        "domelementtype": "^2.2.0"
       },
       "engines": {
-        "node": ">= 12.13.0"
+        "node": ">= 4"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
-    "node_modules/core-util-is": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
-      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
-      "dev": true
+    "node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
     },
-    "node_modules/create-require": {
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
+    },
+    "node_modules/ee-first": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
-      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
       "dev": true
     },
-    "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
+    "node_modules/electron-to-chromium": {
+      "version": "1.4.244",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.244.tgz",
+      "integrity": "sha512-E21saXLt2eTDaTxgUtiJtBUqanF9A32wZasAwDZ8gvrqXoxrBrbwtDCx7c/PQTLp81wj4X0OLDeoGQg7eMo3+w=="
+    },
+    "node_modules/elkjs": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.9.2.tgz",
+      "integrity": "sha512-2Y/RaA1pdgSHpY0YG4TYuYCD2wh97CRvu22eLG3Kz0pgQ/6KbIFTxsTnDc4MH/6hFlg2L/9qXrDMG0nMjP63iw=="
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    },
+    "node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "dev": true,
       "engines": {
-        "node": ">= 8"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/css-loader": {
-      "version": "6.7.1",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",
-      "integrity": "sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==",
+    "node_modules/enhanced-resolve": {
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
       "dependencies": {
-        "icss-utils": "^5.1.0",
-        "postcss": "^8.4.7",
-        "postcss-modules-extract-imports": "^3.0.0",
-        "postcss-modules-local-by-default": "^4.0.0",
-        "postcss-modules-scope": "^3.0.0",
-        "postcss-modules-values": "^4.0.0",
-        "postcss-value-parser": "^4.2.0",
-        "semver": "^7.3.5"
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
       },
       "engines": {
-        "node": ">= 12.13.0"
-      },
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "dev": true,
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.0.0"
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/css-select": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
-      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+    "node_modules/envinfo": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
+      "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
       "dev": true,
-      "dependencies": {
-        "boolbase": "^1.0.0",
-        "css-what": "^6.0.1",
-        "domhandler": "^4.3.1",
-        "domutils": "^2.8.0",
-        "nth-check": "^2.0.1"
+      "bin": {
+        "envinfo": "dist/cli.js"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
+      "engines": {
+        "node": ">=4"
       }
     },
-    "node_modules/css-what": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
-      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+    "node_modules/es-abstract": {
+      "version": "1.23.3",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
+      "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==",
       "dev": true,
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "arraybuffer.prototype.slice": "^1.0.3",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "data-view-buffer": "^1.0.1",
+        "data-view-byte-length": "^1.0.1",
+        "data-view-byte-offset": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-set-tostringtag": "^2.0.3",
+        "es-to-primitive": "^1.2.1",
+        "function.prototype.name": "^1.1.6",
+        "get-intrinsic": "^1.2.4",
+        "get-symbol-description": "^1.0.2",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.0.3",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.0.7",
+        "is-array-buffer": "^3.0.4",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.1",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.3",
+        "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.13",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.13.1",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.5",
+        "regexp.prototype.flags": "^1.5.2",
+        "safe-array-concat": "^1.1.2",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.trim": "^1.2.9",
+        "string.prototype.trimend": "^1.0.8",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.2",
+        "typed-array-byte-length": "^1.0.1",
+        "typed-array-byte-offset": "^1.0.2",
+        "typed-array-length": "^1.0.6",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.15"
+      },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/sponsors/fb55"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "bin": {
-        "cssesc": "bin/cssesc"
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/csstype": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
-      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
-    },
-    "node_modules/d3-color": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
-      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
       "engines": {
-        "node": ">=12"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/d3-dispatch": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
-      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+    "node_modules/es-module-lexer": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.0.tgz",
+      "integrity": "sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA=="
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
+      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/d3-drag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
-      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+    "node_modules/es-set-tostringtag": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
+      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
+      "dev": true,
       "dependencies": {
-        "d3-dispatch": "1 - 3",
-        "d3-selection": "3"
+        "get-intrinsic": "^1.2.4",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.1"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/d3-ease": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
-      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
-      "engines": {
-        "node": ">=12"
+    "node_modules/es-shim-unscopables": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz",
+      "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==",
+      "dev": true,
+      "dependencies": {
+        "hasown": "^2.0.0"
       }
     },
-    "node_modules/d3-interpolate": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
-      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+    "node_modules/es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
       "dependencies": {
-        "d3-color": "1 - 3"
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/d3-selection": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
-      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+    "node_modules/escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
       "engines": {
-        "node": ">=12"
+        "node": ">=6"
       }
     },
-    "node_modules/d3-timer": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
-      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "dev": true
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
       "engines": {
-        "node": ">=12"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/d3-transition": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
-      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
-      "dependencies": {
-        "d3-color": "1 - 3",
-        "d3-dispatch": "1 - 3",
-        "d3-ease": "1 - 3",
-        "d3-interpolate": "1 - 3",
-        "d3-timer": "1 - 3"
+    "node_modules/eslint": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
+      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.57.0",
+        "@humanwhocodes/config-array": "^0.11.14",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
       },
       "engines": {
-        "node": ">=12"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
-      "peerDependencies": {
-        "d3-selection": "2 - 3"
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/d3-zoom": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
-      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+    "node_modules/eslint-compat-utils": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.5.1.tgz",
+      "integrity": "sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==",
+      "dev": true,
       "dependencies": {
-        "d3-dispatch": "1 - 3",
-        "d3-drag": "2 - 3",
-        "d3-interpolate": "1 - 3",
-        "d3-selection": "2 - 3",
-        "d3-transition": "2 - 3"
+        "semver": "^7.5.4"
       },
       "engines": {
         "node": ">=12"
+      },
+      "peerDependencies": {
+        "eslint": ">=6.0.0"
       }
     },
-    "node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
       "dev": true,
       "dependencies": {
-        "ms": "2.0.0"
+        "debug": "^3.2.7",
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
       }
     },
-    "node_modules/default-gateway": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
-      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dev": true,
       "dependencies": {
-        "execa": "^5.0.0"
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
+    "node_modules/eslint-module-utils": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz",
+      "integrity": "sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^3.2.7"
       },
       "engines": {
-        "node": ">= 10"
+        "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
       }
     },
-    "node_modules/define-data-property": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
-      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dev": true,
       "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.0.1"
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
+    "node_modules/eslint-plugin-check-file": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-check-file/-/eslint-plugin-check-file-2.8.0.tgz",
+      "integrity": "sha512-FvvafMTam2WJYH9uj+FuMxQ1y+7jY3Z6P9T4j2214cH0FBxNzTcmeCiGTj1Lxp3mI6kbbgsXvmgewvf+llKYyw==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=18"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "type": "ko_fi",
+        "url": "https://ko-fi.com/huanluo"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.28.0"
       }
     },
-    "node_modules/define-lazy-prop": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
-      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+    "node_modules/eslint-plugin-es-x": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-es-x/-/eslint-plugin-es-x-7.8.0.tgz",
+      "integrity": "sha512-7Ds8+wAAoV3T+LAKeu39Y5BzXCrGKrcISfgKEqTS4BDN8SFEDQd0S43jiQ8vIa3wUKD07qitZdfzlenSi8/0qQ==",
       "dev": true,
+      "funding": [
+        "https://github.com/sponsors/ota-meshi",
+        "https://opencollective.com/eslint"
+      ],
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.1.2",
+        "@eslint-community/regexpp": "^4.11.0",
+        "eslint-compat-utils": "^0.5.1"
+      },
       "engines": {
-        "node": ">=8"
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=8"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz",
+      "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==",
+      "dev": true,
+      "dependencies": {
+        "array-includes": "^3.1.7",
+        "array.prototype.findlastindex": "^1.2.3",
+        "array.prototype.flat": "^1.3.2",
+        "array.prototype.flatmap": "^1.3.2",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.8.0",
+        "hasown": "^2.0.0",
+        "is-core-module": "^2.13.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.7",
+        "object.groupby": "^1.0.1",
+        "object.values": "^1.1.7",
+        "semver": "^6.3.1",
+        "tsconfig-paths": "^3.15.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
       }
     },
-    "node_modules/depd": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dev": true,
-      "engines": {
-        "node": ">= 0.8"
+      "dependencies": {
+        "ms": "^2.1.1"
       }
     },
-    "node_modules/destroy": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
-      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+    "node_modules/eslint-plugin-import/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
       "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
       "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/detect-node": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
-      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
+    "node_modules/eslint-plugin-import/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true
     },
-    "node_modules/diff": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
-      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+    "node_modules/eslint-plugin-import/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true,
-      "engines": {
-        "node": ">=0.3.1"
+      "bin": {
+        "semver": "bin/semver.js"
       }
     },
-    "node_modules/dir-glob": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+    "node_modules/eslint-plugin-n": {
+      "version": "17.10.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-17.10.2.tgz",
+      "integrity": "sha512-e+s4eAf5NtJaxPhTNu3qMO0Iz40WANS93w9LQgYcvuljgvDmWi/a3rh+OrNyMHeng6aOWGJO0rCg5lH4zi8yTw==",
       "dev": true,
       "dependencies": {
-        "path-type": "^4.0.0"
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "enhanced-resolve": "^5.17.0",
+        "eslint-plugin-es-x": "^7.5.0",
+        "get-tsconfig": "^4.7.0",
+        "globals": "^15.8.0",
+        "ignore": "^5.2.4",
+        "minimatch": "^9.0.5",
+        "semver": "^7.5.3"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": ">=8.23.0"
       }
     },
-    "node_modules/dns-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
-      "integrity": "sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg==",
-      "dev": true
+    "node_modules/eslint-plugin-n/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
     },
-    "node_modules/dns-packet": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.4.0.tgz",
-      "integrity": "sha512-EgqGeaBB8hLiHLZtp/IbaDQTL8pZ0+IvwzSHA6d7VyMDM+B9hgddEMa9xjK5oYnw0ci0JQ6g2XCD7/f6cafU6g==",
+    "node_modules/eslint-plugin-n/node_modules/globals": {
+      "version": "15.9.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.9.0.tgz",
+      "integrity": "sha512-SmSKyLLKFbSr6rptvP8izbyxJL4ILwqO9Jg23UA0sDlGlu58V59D1//I3vlc0KJphVdUR7vMjHIplYnzBxorQA==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint-plugin-n/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
       "dev": true,
       "dependencies": {
-        "@leichtgewicht/ip-codec": "^2.0.1"
+        "brace-expansion": "^2.0.1"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/dom-converter": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
-      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
+    "node_modules/eslint-plugin-promise": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-6.6.0.tgz",
+      "integrity": "sha512-57Zzfw8G6+Gq7axm2Pdo3gW/Rx3h9Yywgn61uE/3elTCOePEHVrn2i5CdfBwA1BLK0Q0WqctICIUSqXZW/VprQ==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-tsdoc": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-tsdoc/-/eslint-plugin-tsdoc-0.2.17.tgz",
+      "integrity": "sha512-xRmVi7Zx44lOBuYqG8vzTXuL6IdGOeF9nHX17bjJ8+VE6fsxpdGem0/SBTmAwgYMKYB1WBkqRJVQ+n8GK041pA==",
       "dev": true,
       "dependencies": {
-        "utila": "~0.4"
+        "@microsoft/tsdoc": "0.14.2",
+        "@microsoft/tsdoc-config": "0.16.2"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
       }
     },
-    "node_modules/dom-serializer": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
-      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz",
+      "integrity": "sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==",
       "dev": true,
-      "dependencies": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.2.0",
-        "entities": "^2.0.0"
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
-        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/domelementtype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+    "node_modules/eslint/node_modules/debug": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
       "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
         }
-      ]
+      }
     },
-    "node_modules/domhandler": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
-      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+    "node_modules/eslint/node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
       "dev": true,
       "dependencies": {
-        "domelementtype": "^2.2.0"
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
       },
       "engines": {
-        "node": ">= 4"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
       "funding": {
-        "url": "https://github.com/fb55/domhandler?sponsor=1"
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/domutils": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
-      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+    "node_modules/eslint/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "dev": true,
-      "dependencies": {
-        "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.2.0",
-        "domhandler": "^4.2.0"
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
       "funding": {
-        "url": "https://github.com/fb55/domutils?sponsor=1"
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/dot-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
-      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+    "node_modules/eslint/node_modules/espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
       "dev": true,
       "dependencies": {
-        "no-case": "^3.0.4",
-        "tslib": "^2.0.3"
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
-    },
-    "node_modules/ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
-      "dev": true
-    },
-    "node_modules/electron-to-chromium": {
-      "version": "1.4.244",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.244.tgz",
-      "integrity": "sha512-E21saXLt2eTDaTxgUtiJtBUqanF9A32wZasAwDZ8gvrqXoxrBrbwtDCx7c/PQTLp81wj4X0OLDeoGQg7eMo3+w=="
-    },
-    "node_modules/elkjs": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.9.2.tgz",
-      "integrity": "sha512-2Y/RaA1pdgSHpY0YG4TYuYCD2wh97CRvu22eLG3Kz0pgQ/6KbIFTxsTnDc4MH/6hFlg2L/9qXrDMG0nMjP63iw=="
-    },
-    "node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    "node_modules/eslint/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
     },
-    "node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+    "node_modules/eslint/node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
       "dev": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
       "engines": {
-        "node": ">= 0.8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/enhanced-resolve": {
-      "version": "5.15.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
-      "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==",
+    "node_modules/eslint/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
       "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
+        "is-glob": "^4.0.3"
       },
       "engines": {
         "node": ">=10.13.0"
       }
     },
-    "node_modules/entities": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+    "node_modules/eslint/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
       "dev": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
       "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/envinfo": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
-      "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
+    "node_modules/eslint/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "node_modules/eslint/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
       "dev": true,
-      "bin": {
-        "envinfo": "dist/cli.js"
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/es-define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+    "node_modules/eslint/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.2.4"
+        "p-limit": "^3.0.2"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+    "node_modules/espree": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.1.0.tgz",
+      "integrity": "sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==",
       "dev": true,
+      "dependencies": {
+        "acorn": "^8.12.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.0.0"
+      },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/es-module-lexer": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.0.tgz",
-      "integrity": "sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA=="
-    },
-    "node_modules/escalade": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
       "engines": {
-        "node": ">=6"
+        "node": ">=0.10"
       }
     },
-    "node_modules/escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-      "dev": true
-    },
-    "node_modules/eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
-      },
+    "node_modules/esquery/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=4.0"
       }
     },
     "node_modules/esrecurse": {
@@ -2076,6 +3871,15 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
@@ -2203,6 +4007,12 @@
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true
+    },
     "node_modules/fastest-levenshtein": {
       "version": "1.0.16",
       "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
@@ -2233,6 +4043,18 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -2287,6 +4109,26 @@
         "node": ">=8"
       }
     },
+    "node_modules/flat-cache": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "dev": true,
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
+      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
+      "dev": true
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.6",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
@@ -2307,6 +4149,15 @@
         }
       }
     },
+    "node_modules/for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
+      "dependencies": {
+        "is-callable": "^1.1.3"
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
@@ -2377,10 +4228,37 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz",
+      "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "functions-have-names": "^1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
       "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2417,6 +4295,35 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/get-symbol-description": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
+      "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.7.6",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.6.tgz",
+      "integrity": "sha512-ZAqrLlu18NbDdRaHq+AKXzAmqIUPswPWKUchfytdAjiRFnCe5ojG2bstg6mRiZabkKfCoL/e98pbBELIV/YCeA==",
+      "dev": true,
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -2454,6 +4361,37 @@
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
     },
+    "node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/globby": {
       "version": "13.1.2",
       "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.2.tgz",
@@ -2490,22 +4428,25 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
       "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
     },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true
+    },
     "node_modules/handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
       "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
       "dev": true
     },
-    "node_modules/has": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+    "node_modules/has-bigints": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
       "dev": true,
-      "dependencies": {
-        "function-bind": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4.0"
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/has-flag": {
@@ -2552,6 +4493,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -2819,14 +4775,39 @@
       ]
     },
     "node_modules/ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
+      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
       "dev": true,
       "engines": {
         "node": ">= 4"
       }
     },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-fresh/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/import-local": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
@@ -2846,6 +4827,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -2862,6 +4852,20 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "node_modules/internal-slot": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
+      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.0",
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/interpret": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
@@ -2880,6 +4884,34 @@
         "node": ">= 10"
       }
     },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
+      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
+      "dependencies": {
+        "has-bigints": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2892,13 +4924,74 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-core-module": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz",
-      "integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==",
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.0.tgz",
+      "integrity": "sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==",
+      "dev": true,
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz",
+      "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==",
+      "dev": true,
+      "dependencies": {
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
       "dev": true,
       "dependencies": {
-        "has": "^1.0.3"
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2948,49 +5041,173 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true,
       "engines": {
-        "node": ">=0.12.0"
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-plain-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-plain-obj": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
-      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+    "node_modules/is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
       "dev": true,
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
       "engines": {
-        "node": ">=10"
+        "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+    "node_modules/is-typed-array": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
+      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
       "dev": true,
       "dependencies": {
-        "isobject": "^3.0.1"
+        "which-typed-array": "^1.1.14"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+    "node_modules/is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
       "dev": true,
-      "engines": {
-        "node": ">=8"
+      "dependencies": {
+        "call-bind": "^1.0.2"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/is-wsl": {
@@ -3055,6 +5272,12 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/jju": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
+      "integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==",
+      "dev": true
+    },
     "node_modules/joi": {
       "version": "17.13.1",
       "resolved": "https://registry.npmjs.org/joi/-/joi-17.13.1.tgz",
@@ -3072,6 +5295,24 @@
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true
+    },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -3082,6 +5323,33 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true
+    },
+    "node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -3091,6 +5359,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -3142,6 +5423,12 @@
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
       "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
     },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -3162,17 +5449,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/make-error": {
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
@@ -3300,6 +5576,15 @@
         "node": "*"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/minipass": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
@@ -3493,6 +5778,12 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true
+    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -3592,6 +5883,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/object-sizeof": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/object-sizeof/-/object-sizeof-2.6.4.tgz",
@@ -3623,6 +5923,73 @@
         "ieee754": "^1.2.1"
       }
     },
+    "node_modules/object.assign": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
+      "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "has-symbols": "^1.0.3",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.groupby": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
+      "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -3691,6 +6058,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/p-limit": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
@@ -3750,6 +6134,18 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -3868,6 +6264,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
+      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.33",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
@@ -3967,6 +6372,15 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/pretty-error": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
@@ -4229,6 +6643,24 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
+      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "set-function-name": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/relateurl": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
@@ -4267,12 +6699,12 @@
       "dev": true
     },
     "node_modules/resolve": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
-      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
       "dev": true,
       "dependencies": {
-        "is-core-module": "^2.9.0",
+        "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
@@ -4304,6 +6736,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
     "node_modules/retry": {
       "version": "0.13.1",
       "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
@@ -4372,6 +6813,30 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
+      "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4",
+        "has-symbols": "^1.0.3",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-array-concat/node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -4391,6 +6856,23 @@
         }
       ]
     },
+    "node_modules/safe-regex-test": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
+      "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.1.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -4441,12 +6923,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -4587,6 +7066,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -4871,6 +7365,55 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
+      "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz",
+      "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -4894,6 +7437,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/strip-final-newline": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
@@ -4903,6 +7455,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
@@ -5062,6 +7626,12 @@
         }
       }
     },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true
+    },
     "node_modules/thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
@@ -5097,6 +7667,18 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
+      "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.2.0"
+      }
+    },
     "node_modules/ts-essentials": {
       "version": "9.4.1",
       "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-9.4.1.tgz",
@@ -5172,6 +7754,18 @@
         }
       }
     },
+    "node_modules/tsconfig-paths": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
@@ -5189,6 +7783,30 @@
         "url": "https://github.com/fullstack-build/tslog?sponsor=1"
       }
     },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -5202,6 +7820,79 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz",
+      "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz",
+      "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==",
+      "dev": true,
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz",
+      "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/typescript": {
       "version": "4.8.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
@@ -5224,6 +7915,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/unbox-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -5721,12 +8427,56 @@
         "node": ">= 8"
       }
     },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "dependencies": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
+      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
+      "dev": true,
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/wildcard": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
       "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
       "dev": true
     },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/wordwrapjs": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/wordwrapjs/-/wordwrapjs-5.1.0.tgz",
@@ -5853,11 +8603,6 @@
       "resolved": "https://registry.npmjs.org/xpath-ts2/-/xpath-ts2-1.4.2.tgz",
       "integrity": "sha512-8o56hhPRZaSkR/BM8JXIeMc16FPnLEtlXhYhf85uYLopETOKp1nH0cJg+meBO7BgLeZDTLRj0pFi2UhBUAUh4A=="
     },
-    "node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-    },
     "node_modules/yn": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
@@ -5867,6 +8612,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/zustand": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.4.tgz",
@@ -5939,6 +8696,13 @@
       "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
       "dev": true
     },
+    "@eagleoutice/eslint-config-flowr": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@eagleoutice/eslint-config-flowr/-/eslint-config-flowr-1.0.8.tgz",
+      "integrity": "sha512-W1b13ZrDHOUmuR3m5aWRV+HSmAMVISXkBPh/NJdhXWi7H+fA3UOIF+Wq4neZWaJwmtfLSxrPVnm6BaPFPeCLOA==",
+      "dev": true,
+      "requires": {}
+    },
     "@eagleoutice/flowr": {
       "version": "2.0.9",
       "resolved": "https://registry.npmjs.org/@eagleoutice/flowr/-/flowr-2.0.9.tgz",
@@ -5962,6 +8726,86 @@
         "xpath-ts2": "^1.4.2"
       }
     },
+    "@eslint-community/eslint-utils": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
+      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "3.4.3",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+          "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+          "dev": true
+        }
+      }
+    },
+    "@eslint-community/regexpp": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz",
+      "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==",
+      "dev": true
+    },
+    "@eslint/eslintrc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.6.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+          "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "3.4.3",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+          "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+          "dev": true
+        },
+        "espree": {
+          "version": "9.6.1",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+          "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+          "dev": true,
+          "requires": {
+            "acorn": "^8.9.0",
+            "acorn-jsx": "^5.3.2",
+            "eslint-visitor-keys": "^3.4.1"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        }
+      }
+    },
+    "@eslint/js": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
+      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
+      "dev": true
+    },
     "@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -5975,6 +8819,46 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "@humanwhocodes/config-array": {
+      "version": "0.11.14",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
+      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+      "dev": true,
+      "requires": {
+        "@humanwhocodes/object-schema": "^2.0.2",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+          "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        }
+      }
+    },
+    "@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true
+    },
+    "@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "dev": true
+    },
     "@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -6065,6 +8949,36 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
+    "@microsoft/tsdoc": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.14.2.tgz",
+      "integrity": "sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==",
+      "dev": true
+    },
+    "@microsoft/tsdoc-config": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.16.2.tgz",
+      "integrity": "sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==",
+      "dev": true,
+      "requires": {
+        "@microsoft/tsdoc": "0.14.2",
+        "ajv": "~6.12.6",
+        "jju": "~1.4.0",
+        "resolve": "~1.19.0"
+      },
+      "dependencies": {
+        "resolve": {
+          "version": "1.19.0",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
+          "integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==",
+          "dev": true,
+          "requires": {
+            "is-core-module": "^2.1.0",
+            "path-parse": "^1.0.6"
+          }
+        }
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -6107,18 +9021,90 @@
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
       "integrity": "sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==",
       "requires": {
-        "@hapi/hoek": "^9.0.0"
+        "@hapi/hoek": "^9.0.0"
+      }
+    },
+    "@sideway/formula": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz",
+      "integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg=="
+    },
+    "@sideway/pinpoint": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
+      "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
+    },
+    "@stylistic/eslint-plugin": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin/-/eslint-plugin-2.6.2.tgz",
+      "integrity": "sha512-Ic5oFNM/25iuagob6LiIBkSI/A2y45TsyKtDtODXHRZDy52WfPfeexI6r+OH5+aWN9QGob2Bw+4JRM9/4areWw==",
+      "dev": true,
+      "requires": {
+        "@stylistic/eslint-plugin-js": "2.6.2",
+        "@stylistic/eslint-plugin-jsx": "2.6.2",
+        "@stylistic/eslint-plugin-plus": "2.6.2",
+        "@stylistic/eslint-plugin-ts": "2.6.2",
+        "@types/eslint": "^9.6.0"
+      }
+    },
+    "@stylistic/eslint-plugin-js": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin-js/-/eslint-plugin-js-2.6.2.tgz",
+      "integrity": "sha512-wCr/kVctAPayMU3pcOI1MKR7MoKIh6VKZU89lPklAqtJoxT+Em6RueiiARbpznUYG5eg3LymiU+aMD+aIZXdqA==",
+      "dev": true,
+      "requires": {
+        "@types/eslint": "^9.6.0",
+        "acorn": "^8.12.1",
+        "eslint-visitor-keys": "^4.0.0",
+        "espree": "^10.1.0"
+      }
+    },
+    "@stylistic/eslint-plugin-jsx": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin-jsx/-/eslint-plugin-jsx-2.6.2.tgz",
+      "integrity": "sha512-dSXK/fSPA938J1fBi10QmhzLKtZ/2TuyVNHQMk8jUhWfKJDleAogaSqcWNAbN8fwcoe9UWmt/3StiIf2oYC1aQ==",
+      "dev": true,
+      "requires": {
+        "@stylistic/eslint-plugin-js": "^2.6.2",
+        "@types/eslint": "^9.6.0",
+        "estraverse": "^5.3.0",
+        "picomatch": "^4.0.2"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+          "dev": true
+        },
+        "picomatch": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+          "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+          "dev": true
+        }
+      }
+    },
+    "@stylistic/eslint-plugin-plus": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin-plus/-/eslint-plugin-plus-2.6.2.tgz",
+      "integrity": "sha512-cANcPASfRvq3VTbbQCrSIXq+2AI0IW68PNYaZoXXS0ENlp7HDB8dmrsJnOgWCcoEvdCB8z/eWcG/eq/v5Qcl+Q==",
+      "dev": true,
+      "requires": {
+        "@types/eslint": "^9.6.0",
+        "@typescript-eslint/utils": "^8.0.0"
       }
     },
-    "@sideway/formula": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz",
-      "integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg=="
-    },
-    "@sideway/pinpoint": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
-      "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
+    "@stylistic/eslint-plugin-ts": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin-ts/-/eslint-plugin-ts-2.6.2.tgz",
+      "integrity": "sha512-6OEN3VtUNxjgOvWPavnC10MByr1H4zsgwNND3rQXr5lDFv93MLUnTsH+/SH15OkuqdyJgrQILI6b9lYecb1vIg==",
+      "dev": true,
+      "requires": {
+        "@stylistic/eslint-plugin-js": "2.6.2",
+        "@types/eslint": "^9.6.0",
+        "@typescript-eslint/utils": "^8.0.0"
+      }
     },
     "@tsconfig/node10": {
       "version": "1.0.9",
@@ -6226,9 +9212,9 @@
       }
     },
     "@types/eslint": {
-      "version": "8.4.6",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.6.tgz",
-      "integrity": "sha512-/fqTbjxyFUaYNO7VcW5g+4npmqVACz1bB7RTHYuLj+PRjw9hrCwrUXVQFpChUS0JsyEFvMZ7U/PfmvWgxJhI9g==",
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.0.tgz",
+      "integrity": "sha512-gi6WQJ7cHRgZxtkQEoyHMppPjq9Kxo5Tjn2prSKDSmZrCz8TZ3jSRCeTJm+WoM+oB0WG37bRqLzaaU3q7JypGg==",
       "requires": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -6291,6 +9277,12 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
     },
+    "@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true
+    },
     "@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -6391,6 +9383,354 @@
         "@types/node": "*"
       }
     },
+    "@typescript-eslint/eslint-plugin": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.18.0.tgz",
+      "integrity": "sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/type-utils": "7.18.0",
+        "@typescript-eslint/utils": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.3.1",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "dependencies": {
+        "@typescript-eslint/utils": {
+          "version": "7.18.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.18.0.tgz",
+          "integrity": "sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "@eslint-community/eslint-utils": "^4.4.0",
+            "@typescript-eslint/scope-manager": "7.18.0",
+            "@typescript-eslint/types": "7.18.0",
+            "@typescript-eslint/typescript-estree": "7.18.0"
+          }
+        }
+      }
+    },
+    "@typescript-eslint/parser": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.18.0.tgz",
+      "integrity": "sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/typescript-estree": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
+        "debug": "^4.3.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+          "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true,
+          "peer": true
+        }
+      }
+    },
+    "@typescript-eslint/scope-manager": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.18.0.tgz",
+      "integrity": "sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0"
+      }
+    },
+    "@typescript-eslint/type-utils": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.18.0.tgz",
+      "integrity": "sha512-XL0FJXuCLaDuX2sYqZUUSOJ2sG5/i1AAze+axqmLnSkNEVMVYLF+cbwlB2w8D1tinFuSikHmFta+P+HOofrLeA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@typescript-eslint/typescript-estree": "7.18.0",
+        "@typescript-eslint/utils": "7.18.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^1.3.0"
+      },
+      "dependencies": {
+        "@typescript-eslint/utils": {
+          "version": "7.18.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.18.0.tgz",
+          "integrity": "sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "@eslint-community/eslint-utils": "^4.4.0",
+            "@typescript-eslint/scope-manager": "7.18.0",
+            "@typescript-eslint/types": "7.18.0",
+            "@typescript-eslint/typescript-estree": "7.18.0"
+          }
+        },
+        "debug": {
+          "version": "4.3.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+          "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true,
+          "peer": true
+        }
+      }
+    },
+    "@typescript-eslint/types": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.18.0.tgz",
+      "integrity": "sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==",
+      "dev": true,
+      "peer": true
+    },
+    "@typescript-eslint/typescript-estree": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.18.0.tgz",
+      "integrity": "sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "debug": {
+          "version": "4.3.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+          "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "globby": {
+          "version": "11.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+          "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "array-union": "^2.1.0",
+            "dir-glob": "^3.0.1",
+            "fast-glob": "^3.2.9",
+            "ignore": "^5.2.0",
+            "merge2": "^1.4.1",
+            "slash": "^3.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "9.0.5",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+          "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true,
+          "peer": true
+        },
+        "slash": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+          "dev": true,
+          "peer": true
+        }
+      }
+    },
+    "@typescript-eslint/utils": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.0.1.tgz",
+      "integrity": "sha512-CBFR0G0sCt0+fzfnKaciu9IBsKvEKYwN9UZ+eeogK1fYHg4Qxk1yf/wLQkLXlq8wbU2dFlgAesxt8Gi76E8RTA==",
+      "dev": true,
+      "requires": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "8.0.1",
+        "@typescript-eslint/types": "8.0.1",
+        "@typescript-eslint/typescript-estree": "8.0.1"
+      },
+      "dependencies": {
+        "@typescript-eslint/scope-manager": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.0.1.tgz",
+          "integrity": "sha512-NpixInP5dm7uukMiRyiHjRKkom5RIFA4dfiHvalanD2cF0CLUuQqxfg8PtEUo9yqJI2bBhF+pcSafqnG3UBnRQ==",
+          "dev": true,
+          "requires": {
+            "@typescript-eslint/types": "8.0.1",
+            "@typescript-eslint/visitor-keys": "8.0.1"
+          }
+        },
+        "@typescript-eslint/types": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.0.1.tgz",
+          "integrity": "sha512-PpqTVT3yCA/bIgJ12czBuE3iBlM3g4inRSC5J0QOdQFAn07TYrYEQBBKgXH1lQpglup+Zy6c1fxuwTk4MTNKIw==",
+          "dev": true
+        },
+        "@typescript-eslint/typescript-estree": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.0.1.tgz",
+          "integrity": "sha512-8V9hriRvZQXPWU3bbiUV4Epo7EvgM6RTs+sUmxp5G//dBGy402S7Fx0W0QkB2fb4obCF8SInoUzvTYtc3bkb5w==",
+          "dev": true,
+          "requires": {
+            "@typescript-eslint/types": "8.0.1",
+            "@typescript-eslint/visitor-keys": "8.0.1",
+            "debug": "^4.3.4",
+            "globby": "^11.1.0",
+            "is-glob": "^4.0.3",
+            "minimatch": "^9.0.4",
+            "semver": "^7.6.0",
+            "ts-api-utils": "^1.3.0"
+          }
+        },
+        "@typescript-eslint/visitor-keys": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.0.1.tgz",
+          "integrity": "sha512-W5E+o0UfUcK5EgchLZsyVWqARmsM7v54/qEq6PY3YI5arkgmCzHiuk0zKSJJbm71V0xdRna4BGomkCTXz2/LkQ==",
+          "dev": true,
+          "requires": {
+            "@typescript-eslint/types": "8.0.1",
+            "eslint-visitor-keys": "^3.4.3"
+          }
+        },
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "debug": {
+          "version": "4.3.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+          "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "3.4.3",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+          "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+          "dev": true
+        },
+        "globby": {
+          "version": "11.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+          "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+          "dev": true,
+          "requires": {
+            "array-union": "^2.1.0",
+            "dir-glob": "^3.0.1",
+            "fast-glob": "^3.2.9",
+            "ignore": "^5.2.0",
+            "merge2": "^1.4.1",
+            "slash": "^3.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "9.0.5",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+          "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        },
+        "slash": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+          "dev": true
+        }
+      }
+    },
+    "@typescript-eslint/visitor-keys": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.18.0.tgz",
+      "integrity": "sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@typescript-eslint/types": "7.18.0",
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "3.4.3",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+          "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+          "dev": true,
+          "peer": true
+        }
+      }
+    },
+    "@ungap/structured-clone": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+      "dev": true
+    },
     "@webassemblyjs/ast": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -6603,9 +9943,9 @@
       }
     },
     "acorn": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
-      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw=="
+      "version": "8.12.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
+      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg=="
     },
     "acorn-import-assertions": {
       "version": "1.9.0",
@@ -6613,6 +9953,13 @@
       "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
       "requires": {}
     },
+    "acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "requires": {}
+    },
     "acorn-walk": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
@@ -6713,17 +10060,116 @@
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
       "dev": true
     },
+    "argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
     "array-back": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/array-back/-/array-back-3.1.0.tgz",
       "integrity": "sha512-TkuxA4UCOvxuDK6NZYXCalszEzj+TLszyASooky+i742l9TqsOdYCMJJupxRic61hwquNtppB3hgcuq9SVSH1Q=="
     },
+    "array-buffer-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
+      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.5",
+        "is-array-buffer": "^3.0.4"
+      }
+    },
     "array-flatten": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
       "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
       "dev": true
     },
+    "array-includes": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
+      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "is-string": "^1.0.7"
+      }
+    },
+    "array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true
+    },
+    "array.prototype.findlastindex": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz",
+      "integrity": "sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      }
+    },
+    "array.prototype.flat": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
+      "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      }
+    },
+    "array.prototype.flatmap": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz",
+      "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      }
+    },
+    "arraybuffer.prototype.slice": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz",
+      "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==",
+      "dev": true,
+      "requires": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.22.3",
+        "es-errors": "^1.2.1",
+        "get-intrinsic": "^1.2.3",
+        "is-array-buffer": "^3.0.4",
+        "is-shared-array-buffer": "^1.0.2"
+      }
+    },
+    "available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "requires": {
+        "possible-typed-array-names": "^1.0.0"
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -6846,6 +10292,12 @@
         "set-function-length": "^1.2.1"
       }
     },
+    "callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true
+    },
     "camel-case": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
@@ -7257,16 +10709,49 @@
         "d3-timer": "1 - 3"
       }
     },
-    "d3-zoom": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
-      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+    "d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      }
+    },
+    "data-view-buffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
+      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      }
+    },
+    "data-view-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
+      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      }
+    },
+    "data-view-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
+      "dev": true,
       "requires": {
-        "d3-dispatch": "1 - 3",
-        "d3-drag": "2 - 3",
-        "d3-interpolate": "1 - 3",
-        "d3-selection": "2 - 3",
-        "d3-transition": "2 - 3"
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
       }
     },
     "debug": {
@@ -7278,6 +10763,12 @@
         "ms": "2.0.0"
       }
     },
+    "deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true
+    },
     "default-gateway": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
@@ -7304,6 +10795,17 @@
       "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
       "dev": true
     },
+    "define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "requires": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      }
+    },
     "depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -7352,6 +10854,15 @@
         "@leichtgewicht/ip-codec": "^2.0.1"
       }
     },
+    "doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "requires": {
+        "esutils": "^2.0.2"
+      }
+    },
     "dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -7393,104 +10904,546 @@
       "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
       "dev": true,
       "requires": {
-        "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.2.0",
-        "domhandler": "^4.2.0"
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      }
+    },
+    "dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "dev": true
+    },
+    "electron-to-chromium": {
+      "version": "1.4.244",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.244.tgz",
+      "integrity": "sha512-E21saXLt2eTDaTxgUtiJtBUqanF9A32wZasAwDZ8gvrqXoxrBrbwtDCx7c/PQTLp81wj4X0OLDeoGQg7eMo3+w=="
+    },
+    "elkjs": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.9.2.tgz",
+      "integrity": "sha512-2Y/RaA1pdgSHpY0YG4TYuYCD2wh97CRvu22eLG3Kz0pgQ/6KbIFTxsTnDc4MH/6hFlg2L/9qXrDMG0nMjP63iw=="
+    },
+    "emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "dev": true
+    },
+    "enhanced-resolve": {
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
+      "requires": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      }
+    },
+    "entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "dev": true
+    },
+    "envinfo": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
+      "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
+      "dev": true
+    },
+    "es-abstract": {
+      "version": "1.23.3",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
+      "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==",
+      "dev": true,
+      "requires": {
+        "array-buffer-byte-length": "^1.0.1",
+        "arraybuffer.prototype.slice": "^1.0.3",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "data-view-buffer": "^1.0.1",
+        "data-view-byte-length": "^1.0.1",
+        "data-view-byte-offset": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-set-tostringtag": "^2.0.3",
+        "es-to-primitive": "^1.2.1",
+        "function.prototype.name": "^1.1.6",
+        "get-intrinsic": "^1.2.4",
+        "get-symbol-description": "^1.0.2",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.0.3",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.0.7",
+        "is-array-buffer": "^3.0.4",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.1",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.3",
+        "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.13",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.13.1",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.5",
+        "regexp.prototype.flags": "^1.5.2",
+        "safe-array-concat": "^1.1.2",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.trim": "^1.2.9",
+        "string.prototype.trimend": "^1.0.8",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.2",
+        "typed-array-byte-length": "^1.0.1",
+        "typed-array-byte-offset": "^1.0.2",
+        "typed-array-length": "^1.0.6",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.15"
+      }
+    },
+    "es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.2.4"
+      }
+    },
+    "es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true
+    },
+    "es-module-lexer": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.0.tgz",
+      "integrity": "sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA=="
+    },
+    "es-object-atoms": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
+      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
+      "dev": true,
+      "requires": {
+        "es-errors": "^1.3.0"
+      }
+    },
+    "es-set-tostringtag": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
+      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.2.4",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.1"
+      }
+    },
+    "es-shim-unscopables": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz",
+      "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==",
+      "dev": true,
+      "requires": {
+        "hasown": "^2.0.0"
+      }
+    },
+    "es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      }
+    },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "dev": true
+    },
+    "escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true
+    },
+    "eslint": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
+      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
+      "dev": true,
+      "requires": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.57.0",
+        "@humanwhocodes/config-array": "^0.11.14",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+          "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "eslint-scope": {
+          "version": "7.2.2",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+          "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^5.2.0"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "3.4.3",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+          "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+          "dev": true
+        },
+        "espree": {
+          "version": "9.6.1",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+          "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+          "dev": true,
+          "requires": {
+            "acorn": "^8.9.0",
+            "acorn-jsx": "^5.3.2",
+            "eslint-visitor-keys": "^3.4.1"
+          }
+        },
+        "estraverse": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+          "dev": true
+        },
+        "find-up": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+          "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^6.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "glob-parent": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+          "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.3"
+          }
+        },
+        "locate-path": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^5.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        },
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^3.0.2"
+          }
+        }
+      }
+    },
+    "eslint-compat-utils": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.5.1.tgz",
+      "integrity": "sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==",
+      "dev": true,
+      "requires": {
+        "semver": "^7.5.4"
+      }
+    },
+    "eslint-import-resolver-node": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
+      "dev": true,
+      "requires": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+          "dev": true
+        }
+      }
+    },
+    "eslint-module-utils": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz",
+      "integrity": "sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==",
+      "dev": true,
+      "requires": {
+        "debug": "^3.2.7"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+          "dev": true
+        }
+      }
+    },
+    "eslint-plugin-check-file": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-check-file/-/eslint-plugin-check-file-2.8.0.tgz",
+      "integrity": "sha512-FvvafMTam2WJYH9uj+FuMxQ1y+7jY3Z6P9T4j2214cH0FBxNzTcmeCiGTj1Lxp3mI6kbbgsXvmgewvf+llKYyw==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5"
       }
     },
-    "dot-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
-      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+    "eslint-plugin-es-x": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-es-x/-/eslint-plugin-es-x-7.8.0.tgz",
+      "integrity": "sha512-7Ds8+wAAoV3T+LAKeu39Y5BzXCrGKrcISfgKEqTS4BDN8SFEDQd0S43jiQ8vIa3wUKD07qitZdfzlenSi8/0qQ==",
       "dev": true,
       "requires": {
-        "no-case": "^3.0.4",
-        "tslib": "^2.0.3"
+        "@eslint-community/eslint-utils": "^4.1.2",
+        "@eslint-community/regexpp": "^4.11.0",
+        "eslint-compat-utils": "^0.5.1"
       }
     },
-    "eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
-    },
-    "ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
-      "dev": true
-    },
-    "electron-to-chromium": {
-      "version": "1.4.244",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.244.tgz",
-      "integrity": "sha512-E21saXLt2eTDaTxgUtiJtBUqanF9A32wZasAwDZ8gvrqXoxrBrbwtDCx7c/PQTLp81wj4X0OLDeoGQg7eMo3+w=="
-    },
-    "elkjs": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.9.2.tgz",
-      "integrity": "sha512-2Y/RaA1pdgSHpY0YG4TYuYCD2wh97CRvu22eLG3Kz0pgQ/6KbIFTxsTnDc4MH/6hFlg2L/9qXrDMG0nMjP63iw=="
-    },
-    "emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
-    },
-    "encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
-      "dev": true
-    },
-    "enhanced-resolve": {
-      "version": "5.15.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
-      "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==",
+    "eslint-plugin-import": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz",
+      "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==",
+      "dev": true,
       "requires": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
+        "array-includes": "^3.1.7",
+        "array.prototype.findlastindex": "^1.2.3",
+        "array.prototype.flat": "^1.3.2",
+        "array.prototype.flatmap": "^1.3.2",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.8.0",
+        "hasown": "^2.0.0",
+        "is-core-module": "^2.13.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.7",
+        "object.groupby": "^1.0.1",
+        "object.values": "^1.1.7",
+        "semver": "^6.3.1",
+        "tsconfig-paths": "^3.15.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "doctrine": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+          "dev": true
+        },
+        "semver": {
+          "version": "6.3.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+          "dev": true
+        }
       }
     },
-    "entities": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-      "dev": true
-    },
-    "envinfo": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
-      "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
-      "dev": true
-    },
-    "es-define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+    "eslint-plugin-n": {
+      "version": "17.10.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-17.10.2.tgz",
+      "integrity": "sha512-e+s4eAf5NtJaxPhTNu3qMO0Iz40WANS93w9LQgYcvuljgvDmWi/a3rh+OrNyMHeng6aOWGJO0rCg5lH4zi8yTw==",
       "dev": true,
       "requires": {
-        "get-intrinsic": "^1.2.4"
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "enhanced-resolve": "^5.17.0",
+        "eslint-plugin-es-x": "^7.5.0",
+        "get-tsconfig": "^4.7.0",
+        "globals": "^15.8.0",
+        "ignore": "^5.2.4",
+        "minimatch": "^9.0.5",
+        "semver": "^7.5.3"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "globals": {
+          "version": "15.9.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-15.9.0.tgz",
+          "integrity": "sha512-SmSKyLLKFbSr6rptvP8izbyxJL4ILwqO9Jg23UA0sDlGlu58V59D1//I3vlc0KJphVdUR7vMjHIplYnzBxorQA==",
+          "dev": true
+        },
+        "minimatch": {
+          "version": "9.0.5",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+          "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
       }
     },
-    "es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true
-    },
-    "es-module-lexer": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.0.tgz",
-      "integrity": "sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA=="
-    },
-    "escalade": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
+    "eslint-plugin-promise": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-6.6.0.tgz",
+      "integrity": "sha512-57Zzfw8G6+Gq7axm2Pdo3gW/Rx3h9Yywgn61uE/3elTCOePEHVrn2i5CdfBwA1BLK0Q0WqctICIUSqXZW/VprQ==",
+      "dev": true,
+      "requires": {}
     },
-    "escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-      "dev": true
+    "eslint-plugin-tsdoc": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-tsdoc/-/eslint-plugin-tsdoc-0.2.17.tgz",
+      "integrity": "sha512-xRmVi7Zx44lOBuYqG8vzTXuL6IdGOeF9nHX17bjJ8+VE6fsxpdGem0/SBTmAwgYMKYB1WBkqRJVQ+n8GK041pA==",
+      "dev": true,
+      "requires": {
+        "@microsoft/tsdoc": "0.14.2",
+        "@microsoft/tsdoc-config": "0.16.2"
+      }
     },
     "eslint-scope": {
       "version": "5.1.1",
@@ -7501,6 +11454,40 @@
         "estraverse": "^4.1.1"
       }
     },
+    "eslint-visitor-keys": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz",
+      "integrity": "sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==",
+      "dev": true
+    },
+    "espree": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.1.0.tgz",
+      "integrity": "sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.12.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.0.0"
+      }
+    },
+    "esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.1.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+          "dev": true
+        }
+      }
+    },
     "esrecurse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
@@ -7521,6 +11508,12 @@
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
     },
+    "esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true
+    },
     "etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
@@ -7629,6 +11622,12 @@
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
+    "fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true
+    },
     "fastest-levenshtein": {
       "version": "1.0.16",
       "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
@@ -7653,6 +11652,15 @@
         "websocket-driver": ">=0.5.1"
       }
     },
+    "file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "requires": {
+        "flat-cache": "^3.0.4"
+      }
+    },
     "fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -7695,12 +11703,38 @@
         "path-exists": "^4.0.0"
       }
     },
+    "flat-cache": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "dev": true,
+      "requires": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
+        "rimraf": "^3.0.2"
+      }
+    },
+    "flatted": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
+      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
+      "dev": true
+    },
     "follow-redirects": {
       "version": "1.15.6",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
       "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "dev": true
     },
+    "for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.1.3"
+      }
+    },
     "foreground-child": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
@@ -7754,6 +11788,24 @@
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
       "dev": true
     },
+    "function.prototype.name": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz",
+      "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "functions-have-names": "^1.2.3"
+      }
+    },
+    "functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true
+    },
     "get-intrinsic": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@@ -7773,6 +11825,26 @@
       "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
       "dev": true
     },
+    "get-symbol-description": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
+      "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4"
+      }
+    },
+    "get-tsconfig": {
+      "version": "4.7.6",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.6.tgz",
+      "integrity": "sha512-ZAqrLlu18NbDdRaHq+AKXzAmqIUPswPWKUchfytdAjiRFnCe5ojG2bstg6mRiZabkKfCoL/e98pbBELIV/YCeA==",
+      "dev": true,
+      "requires": {
+        "resolve-pkg-maps": "^1.0.0"
+      }
+    },
     "glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -7801,6 +11873,25 @@
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
     },
+    "globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "requires": {
+        "type-fest": "^0.20.2"
+      }
+    },
+    "globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      }
+    },
     "globby": {
       "version": "13.1.2",
       "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.2.tgz",
@@ -7828,20 +11919,23 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
       "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
     },
+    "graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true
+    },
     "handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
       "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
       "dev": true
     },
-    "has": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
-      "requires": {
-        "function-bind": "^1.1.1"
-      }
+    "has-bigints": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true
     },
     "has-flag": {
       "version": "4.0.0",
@@ -7869,6 +11963,15 @@
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
       "dev": true
     },
+    "has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.3"
+      }
+    },
     "hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -8063,11 +12166,29 @@
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
     },
     "ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
+      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
       "dev": true
     },
+    "import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+          "dev": true
+        }
+      }
+    },
     "import-local": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
@@ -8078,6 +12199,12 @@
         "resolve-cwd": "^3.0.0"
       }
     },
+    "imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -8094,6 +12221,17 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "internal-slot": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
+      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
+      "dev": true,
+      "requires": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.0",
+        "side-channel": "^1.0.4"
+      }
+    },
     "interpret": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
@@ -8106,22 +12244,75 @@
       "integrity": "sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==",
       "dev": true
     },
+    "is-array-buffer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
+      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1"
+      }
+    },
+    "is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
+      "requires": {
+        "has-bigints": "^1.0.1"
+      }
+    },
     "is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
       "dev": true,
       "requires": {
-        "binary-extensions": "^2.0.0"
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true
+    },
+    "is-core-module": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.0.tgz",
+      "integrity": "sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==",
+      "dev": true,
+      "requires": {
+        "hasown": "^2.0.2"
+      }
+    },
+    "is-data-view": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz",
+      "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==",
+      "dev": true,
+      "requires": {
+        "is-typed-array": "^1.1.13"
       }
     },
-    "is-core-module": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz",
-      "integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==",
+    "is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
       "dev": true,
       "requires": {
-        "has": "^1.0.3"
+        "has-tostringtag": "^1.0.0"
       }
     },
     "is-docker": {
@@ -8150,12 +12341,33 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true
+    },
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true
     },
+    "is-number-object": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true
+    },
     "is-plain-obj": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
@@ -8171,12 +12383,67 @@
         "isobject": "^3.0.1"
       }
     },
+    "is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-shared-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7"
+      }
+    },
     "is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
       "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
       "dev": true
     },
+    "is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
+    "is-typed-array": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
+      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
+      "dev": true,
+      "requires": {
+        "which-typed-array": "^1.1.14"
+      }
+    },
+    "is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2"
+      }
+    },
     "is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -8222,6 +12489,12 @@
         "supports-color": "^8.0.0"
       }
     },
+    "jju": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
+      "integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==",
+      "dev": true
+    },
     "joi": {
       "version": "17.13.1",
       "resolved": "https://registry.npmjs.org/joi/-/joi-17.13.1.tgz",
@@ -8239,6 +12512,21 @@
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
+    "js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "requires": {
+        "argparse": "^2.0.1"
+      }
+    },
+    "json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true
+    },
     "json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -8249,12 +12537,46 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
+    "json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true
+    },
+    "json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.0"
+      }
+    },
+    "keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "requires": {
+        "json-buffer": "3.0.1"
+      }
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
       "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
       "dev": true
     },
+    "levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      }
+    },
     "loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -8300,6 +12622,12 @@
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
       "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
     },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -8317,14 +12645,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "requires": {
-        "yallist": "^4.0.0"
-      }
-    },
     "make-error": {
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
@@ -8419,6 +12739,12 @@
         "brace-expansion": "^1.1.7"
       }
     },
+    "minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true
+    },
     "minipass": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
@@ -8539,6 +12865,12 @@
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
     },
+    "natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true
+    },
     "negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -8611,6 +12943,12 @@
       "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
       "dev": true
     },
+    "object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true
+    },
     "object-sizeof": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/object-sizeof/-/object-sizeof-2.6.4.tgz",
@@ -8630,6 +12968,52 @@
         }
       }
     },
+    "object.assign": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
+      "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "has-symbols": "^1.0.3",
+        "object-keys": "^1.1.1"
+      }
+    },
+    "object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      }
+    },
+    "object.groupby": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      }
+    },
+    "object.values": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
+      "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      }
+    },
     "obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -8680,6 +13064,20 @@
         "is-wsl": "^2.2.0"
       }
     },
+    "optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "requires": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      }
+    },
     "p-limit": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
@@ -8724,6 +13122,15 @@
         "tslib": "^2.0.3"
       }
     },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -8811,6 +13218,12 @@
         "find-up": "^4.0.0"
       }
     },
+    "possible-typed-array-names": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
+      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
+      "dev": true
+    },
     "postcss": {
       "version": "8.4.33",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
@@ -8867,6 +13280,12 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true
+    },
     "pretty-error": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
@@ -9060,6 +13479,18 @@
         "resolve": "^1.9.0"
       }
     },
+    "regexp.prototype.flags": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
+      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.6",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "set-function-name": "^2.0.1"
+      }
+    },
     "relateurl": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
@@ -9092,12 +13523,12 @@
       "dev": true
     },
     "resolve": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
-      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
       "dev": true,
       "requires": {
-        "is-core-module": "^2.9.0",
+        "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       }
@@ -9117,6 +13548,12 @@
       "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
       "dev": true
     },
+    "resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true
+    },
     "retry": {
       "version": "0.13.1",
       "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
@@ -9152,11 +13589,42 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "safe-array-concat": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
+      "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4",
+        "has-symbols": "^1.0.3",
+        "isarray": "^2.0.5"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+          "dev": true
+        }
+      }
+    },
     "safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
     },
+    "safe-regex-test": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
+      "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.1.4"
+      }
+    },
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -9197,12 +13665,9 @@
       }
     },
     "semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-      "requires": {
-        "lru-cache": "^6.0.0"
-      }
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A=="
     },
     "send": {
       "version": "0.18.0",
@@ -9320,6 +13785,18 @@
         "has-property-descriptors": "^1.0.2"
       }
     },
+    "set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "requires": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      }
+    },
     "setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -9537,6 +14014,40 @@
         }
       }
     },
+    "string.prototype.trim": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
+      "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.0",
+        "es-object-atoms": "^1.0.0"
+      }
+    },
+    "string.prototype.trimend": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz",
+      "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      }
+    },
+    "string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      }
+    },
     "strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -9553,12 +14064,24 @@
         "ansi-regex": "^5.0.1"
       }
     },
+    "strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true
+    },
     "strip-final-newline": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
       "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
       "dev": true
     },
+    "strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true
+    },
     "style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
@@ -9653,6 +14176,12 @@
         "terser": "^5.16.8"
       }
     },
+    "text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true
+    },
     "thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
@@ -9679,6 +14208,13 @@
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
       "dev": true
     },
+    "ts-api-utils": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
+      "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
+      "dev": true,
+      "requires": {}
+    },
     "ts-essentials": {
       "version": "9.4.1",
       "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-9.4.1.tgz",
@@ -9718,6 +14254,18 @@
         "yn": "3.1.1"
       }
     },
+    "tsconfig-paths": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
+      "dev": true,
+      "requires": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
     "tslib": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
@@ -9729,6 +14277,21 @@
       "resolved": "https://registry.npmjs.org/tslog/-/tslog-4.9.2.tgz",
       "integrity": "sha512-wBM+LRJoNl34Bdu8mYEFxpvmOUedpNUwMNQB/NcuPIZKwdDde6xLHUev3bBjXQU7gdurX++X/YE7gLH8eXYsiQ=="
     },
+    "type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "^1.2.1"
+      }
+    },
+    "type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true
+    },
     "type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -9739,6 +14302,58 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typed-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.13"
+      }
+    },
+    "typed-array-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz",
+      "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
+      }
+    },
+    "typed-array-byte-offset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz",
+      "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==",
+      "dev": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
+      }
+    },
+    "typed-array-length": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz",
+      "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0"
+      }
+    },
     "typescript": {
       "version": "4.8.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
@@ -9751,6 +14366,18 @@
       "resolved": "https://registry.npmjs.org/typical/-/typical-4.0.0.tgz",
       "integrity": "sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw=="
     },
+    "unbox-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
+      }
+    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -10091,12 +14718,44 @@
         "isexe": "^2.0.0"
       }
     },
+    "which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "requires": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      }
+    },
+    "which-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
+      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
+      "dev": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.2"
+      }
+    },
     "wildcard": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
       "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
       "dev": true
     },
+    "word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true
+    },
     "wordwrapjs": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/wordwrapjs/-/wordwrapjs-5.1.0.tgz",
@@ -10176,17 +14835,18 @@
       "resolved": "https://registry.npmjs.org/xpath-ts2/-/xpath-ts2-1.4.2.tgz",
       "integrity": "sha512-8o56hhPRZaSkR/BM8JXIeMc16FPnLEtlXhYhf85uYLopETOKp1nH0cJg+meBO7BgLeZDTLRj0pFi2UhBUAUh4A=="
     },
-    "yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-    },
     "yn": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
       "dev": true
     },
+    "yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true
+    },
     "zustand": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.4.tgz",
diff --git a/package.json b/package.json
index b7cef5e..a0b6170 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,24 @@
   "main": "index.js",
   "scripts": {
     "start": "webpack-dev-server --mode=development",
-    "build": "webpack --mode production"
+    "build": "webpack --mode production",
+    "lint-local": "npx eslint --version && npx eslint source/ --rule \"no-warning-comments: off\"",
+    "lint": "npx eslint --version && npx eslint source/"
+  },
+  "eslintConfig": {
+    "settings": {
+      "import/resolver": {
+        "node": {
+          "extensions": [
+            ".ts"
+          ]
+        }
+      }
+    },
+    "extends": [
+      "@eagleoutice/eslint-config-flowr"
+    ],
+    "rules": {}
   },
   "repository": {
     "type": "git",
@@ -14,8 +31,18 @@
   "author": "Florian Sihler",
   "license": "ISC",
   "devDependencies": {
+    "@eagleoutice/eslint-config-flowr": "^1.0.8",
+    "@stylistic/eslint-plugin": "^2.6.2",
+    "@stylistic/eslint-plugin-plus": "^2.6.2",
+    "@stylistic/eslint-plugin-ts": "^2.6.2",
     "@types/uuid": "^9.0.2",
     "copy-webpack-plugin": "^11.0.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-check-file": "^2.8.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^17.10.2",
+    "eslint-plugin-promise": "^6.6.0",
+    "eslint-plugin-tsdoc": "^0.2.17",
     "html-webpack-plugin": "^5.5.0",
     "ts-loader": "^9.3.1",
     "ts-node": "^10.9.1",
diff --git a/source/components/graphComponent.tsx b/source/components/graphComponent.tsx
index 4b9c72b..4a2f27f 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graphComponent.tsx
@@ -1,58 +1,60 @@
-import ELK, { ElkExtendedEdge, ElkNode, LayoutOptions } from 'elkjs/lib/elk.bundled.js';
-import React, { ChangeEventHandler, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import type { ElkExtendedEdge, ElkNode, LayoutOptions } from 'elkjs/lib/elk.bundled.js'
+import ELK from 'elkjs/lib/elk.bundled.js'
+import React, { ChangeEventHandler, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import type {
+	Edge,
+	Node } from '@xyflow/react'
 import {
-  ReactFlow,
-  addEdge,
-  Panel,
-  useNodesState,
-  useEdgesState,
-  useReactFlow,
-  Edge,
-  Node,
-  Connection,
-  MiniMap,
-  NodeToolbar,
-  Controls,
-  Background,
-  Position,
-  Handle,
-  NodeProps,
-  getStraightPath,
-  BaseEdge,
-  EdgeLabelRenderer,
-  MarkerType,
-  EdgeProps,
-  applyEdgeChanges,
-  ControlButton,
-} from '@xyflow/react';
-
-import '@xyflow/react/dist/style.css';
-
-import { VisualizationGraph } from './model/graph';
-import FloatingConnectionLine, { ExitPointNode, FunctionCallNode, FunctionDefinitionNode, GroupNode, UseNode, ValueNode, VariableDefinitionNode } from './model/nodes/nodeDefinition';
-import ReadsEdge from './model/edges/readsEdge';
-import { edgeTagMapper } from './model/edges/edgeBase';
-import { ArgumentEdge } from './model/edges/argumentEdge';
-import { CallsEdge } from './model/edges/callsEdge';
-import { DefinedByEdge } from './model/edges/definedByEdge';
-import { DefinedByOnCallEdge } from './model/edges/definedByOnCallEdge';
-import { DefinesOnCallEdge } from './model/edges/definesOnCallEdge';
-import { RelatesEdge } from './model/edges/relatesEdge';
-import { ReturnsEdge } from './model/edges/returnsEdge';
-import { SameDefDefEdge } from './model/edges/sameDefDefEdge';
-import { SameReadReadEdge } from './model/edges/sameReadReadEdge';
-import { SideEffectOnCallEdge } from './model/edges/sideEffectOnCallEdge';
-import { NonStandardEvaluationEdge } from './model/edges/nonStandardEvaluationEdge';
-import { flattenToNodeArray, foldIntoElkHierarchy } from './graphHierarchy';
-import { ExtendedExtendedEdge, transformGraphForLayouting, transformGraphForShowing } from './model/graphTransition';
-import { MultiEdge } from './model/edges/multiEdge';
-import { slideInLegend } from './legendComonent';
-import { SvgDefinitionsComponent } from './svgDefinitions';
-import { VisualStateModel } from './model/visualStateModel';
-
-
-
-const elk = new ELK();
+	ReactFlow,
+	addEdge,
+	Panel,
+	useNodesState,
+	useEdgesState,
+	useReactFlow,
+	Connection,
+	MiniMap,
+	NodeToolbar,
+	Controls,
+	Background,
+	Position,
+	Handle,
+	NodeProps,
+	getStraightPath,
+	BaseEdge,
+	EdgeLabelRenderer,
+	MarkerType,
+	EdgeProps,
+	applyEdgeChanges,
+	ControlButton,
+} from '@xyflow/react'
+
+import '@xyflow/react/dist/style.css'
+
+import type { VisualizationGraph } from './model/graph'
+import FloatingConnectionLine, { ExitPointNode, FunctionCallNode, FunctionDefinitionNode, GroupNode, UseNode, ValueNode, VariableDefinitionNode } from './model/nodes/nodeDefinition'
+import ReadsEdge from './model/edges/readsEdge'
+import { edgeTagMapper } from './model/edges/edgeBase'
+import { ArgumentEdge } from './model/edges/argumentEdge'
+import { CallsEdge } from './model/edges/callsEdge'
+import { DefinedByEdge } from './model/edges/definedByEdge'
+import { DefinedByOnCallEdge } from './model/edges/definedByOnCallEdge'
+import { DefinesOnCallEdge } from './model/edges/definesOnCallEdge'
+import { RelatesEdge } from './model/edges/relatesEdge'
+import { ReturnsEdge } from './model/edges/returnsEdge'
+import { SameDefDefEdge } from './model/edges/sameDefDefEdge'
+import { SameReadReadEdge } from './model/edges/sameReadReadEdge'
+import { SideEffectOnCallEdge } from './model/edges/sideEffectOnCallEdge'
+import { NonStandardEvaluationEdge } from './model/edges/nonStandardEvaluationEdge'
+import { flattenToNodeArray, foldIntoElkHierarchy } from './graphHierarchy'
+import { ExtendedExtendedEdge, transformGraphForLayouting, transformGraphForShowing } from './model/graphTransition'
+import { MultiEdge } from './model/edges/multiEdge'
+import { slideInLegend } from './legendComonent'
+import { SvgDefinitionsComponent } from './svgDefinitions'
+import type { VisualStateModel } from './model/visualStateModel'
+
+
+
+const elk = new ELK()
 
 // Elk has a *huge* amount of options to configure. To see everything you can
 // tweak check out:
@@ -60,160 +62,161 @@ const elk = new ELK();
 // - https://www.eclipse.org/elk/reference/algorithms.html
 // - https://www.eclipse.org/elk/reference/options.html
 const elkOptions: LayoutOptions = {
-   'elk.algorithm': 'layered', // 'stress',
-   'elk.layered.spacing.nodeNodeBetweenLayers': '50',
-   'elk.spacing.nodeNode': '80'
- };
+	'elk.algorithm':                             'layered', // 'stress',
+	'elk.layered.spacing.nodeNodeBetweenLayers': '50',
+	'elk.spacing.nodeNode':                      '80'
+}
 
 
- async function getLayoutedElements(nodes: Node[],
-                                    nodeIdMap: Map<string,Node>, 
-                                    edges: ElkExtendedEdge[], 
-                                    options: LayoutOptions,
-                                    visualStateModel: VisualStateModel): Promise<{ nodes: Node[]; edges: Edge[] }> {
-   const isHorizontal = options?.['elk.direction'] === 'RIGHT';
+async function getLayoutedElements(nodes: Node[],
+																																			nodeIdMap: Map<string,Node>, 
+																																			edges: ElkExtendedEdge[], 
+																																			options: LayoutOptions,
+																																			visualStateModel: VisualStateModel): Promise<{ nodes: Node[]; edges: Edge[] }> {
+	const isHorizontal = options?.['elk.direction'] === 'RIGHT'
 
-   const graph: ElkNode = transformGraphForLayouting(nodes,nodeIdMap, edges, options, isHorizontal)
-  //console.log('before Layout:')
-  //console.log(graph)
+	const graph: ElkNode = transformGraphForLayouting(nodes,nodeIdMap, edges, options, isHorizontal)
+	//console.log('before Layout:')
+	//console.log(graph)
 
-   const layoutedGraph = await elk.layout(graph)
+	const layoutedGraph = await elk.layout(graph)
 
-   //console.log('after Layout:')
-   //console.log(layoutedGraph)
-   const endGraph = transformGraphForShowing(layoutedGraph, isHorizontal, visualStateModel)
+	//console.log('after Layout:')
+	//console.log(layoutedGraph)
+	const endGraph = transformGraphForShowing(layoutedGraph, isHorizontal, visualStateModel)
 
-   console.log(endGraph)
+	console.log(endGraph)
 
 
-   return endGraph
- }
+	return endGraph
+}
 
- function convertToExtendedEdges(edges: Edge[]): ElkExtendedEdge[] {
-   return edges.map(edge => ({
-     id: edge.id,
-     sources: [edge.source],
-     targets: [edge.target],
-     label: edge.label as string,
-     edgeType: edge.data?.edgeType ?? '',
-     data:{...edge.data}
-   }));
- }
+function convertToExtendedEdges(edges: Edge[]): ElkExtendedEdge[] {
+	return edges.map(edge => ({
+		id:       edge.id,
+		sources:  [edge.source],
+		targets:  [edge.target],
+		label:    edge.label as string,
+		edgeType: edge.data?.edgeType ?? '',
+		data:     { ...edge.data }
+	}))
+}
 
 
 export interface LayoutFlowProps {
-  readonly graph: VisualizationGraph;
+  readonly graph:              VisualizationGraph;
   readonly assignGraphUpdater: (updater: (g: VisualizationGraph) => void) => void;
-  readonly visualStateModel: VisualStateModel
+  readonly visualStateModel:   VisualStateModel
 }
 export let setIsNodeIdShownReactFlow: React.Dispatch<React.SetStateAction<boolean>> = () => {}
 
- export function LayoutFlow({ graph, assignGraphUpdater, visualStateModel} : LayoutFlowProps) {
-   const [currentGraph, setCurrentGraph] = useState(graph);
-   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
-   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
-   const nodeMap = new Map<string,Node>()
-   const { fitView } = useReactFlow();
+export function LayoutFlow({ graph, assignGraphUpdater, visualStateModel } : LayoutFlowProps) {
+	const [currentGraph, setCurrentGraph] = useState(graph)
+	const [nodes, setNodes, onNodesChange] = useNodesState<Node>([])
+	const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([])
+	const nodeMap = new Map<string,Node>()
+	const { fitView } = useReactFlow()
 
-   const [isNodeIdShown, setIsNodeIdShown] = useState(false)
+	const [isNodeIdShown, setIsNodeIdShown] = useState(false)
    
-   setIsNodeIdShownReactFlow = setIsNodeIdShown
+	setIsNodeIdShownReactFlow = setIsNodeIdShown
 
 
-   useEffect(() => {
-    setNodes((currentNodes) =>
-      currentNodes.map((node) =>{ 
-        node.data.isNodeIdShown = isNodeIdShown
-        return ({
-        ...node
-      })}),
-    );
-   }, [isNodeIdShown,setNodes])
+	useEffect(() => {
+		setNodes((currentNodes) =>
+			currentNodes.map((node) =>{ 
+				node.data.isNodeIdShown = isNodeIdShown
+				return ({
+					...node
+				})
+			}),
+		)
+	}, [isNodeIdShown,setNodes])
 
 
 
 
-   assignGraphUpdater(g =>  {
-    setCurrentGraph(g)
-    onLayout({ direction: 'DOWN', g })
-  })
+	assignGraphUpdater(g =>  {
+		setCurrentGraph(g)
+		onLayout({ direction: 'DOWN', g })
+	})
   
-   const onLayout = useCallback(
-     ({ direction , g = undefined } : { direction: string, g?: VisualizationGraph }) => {
-       const opts = { 'elk.direction': direction, ...elkOptions };
-       const ns = g ? g.nodesInfo.nodes : nodes;
-       const es = g ? g.edges : edges;
-       const nm = g ? g.nodesInfo.nodeMap: nodeMap;
-       getLayoutedElements(ns, nm, convertToExtendedEdges(es), opts, visualStateModel).then(({ nodes: layoutedNodes, edges: layoutedEdges }) => {
-         setNodes(layoutedNodes);
-         setEdges(layoutedEdges);
-
-         window.requestAnimationFrame(() => fitView());
-       });
-     },
-     [nodes, edges, currentGraph]
-   );
-
-   // Calculate the initial layout on mount.
-   useLayoutEffect(() => {
-     onLayout({ direction: 'DOWN', g: currentGraph });
-   }, []);
-
-   /* allows to map custom node types */
-   const nodeTypes = useMemo(() => ({
-    variableDefinitionNode: VariableDefinitionNode,
-    useNode: UseNode,
-    functionCallNode: FunctionCallNode,
-    exitPointNode: ExitPointNode,
-    valueNode: ValueNode,
-    functionDefinitionNode: FunctionDefinitionNode,
-    groupNode:GroupNode
-   }), []);
-
-   /* allows to map custom edge types */
-   const edgeTypes = useMemo(() => ({
-    readsEdge: ReadsEdge,
-    definedByEdge: DefinedByEdge,
-    sameReadReadEdge: SameReadReadEdge,
-    sameDefDefEdge: SameDefDefEdge,
-    callsEdge: CallsEdge,
-    returnsEdge: ReturnsEdge,
-    definesOnCallEdge: DefinesOnCallEdge,
-    definedByOnCallEdge: DefinedByOnCallEdge,
-    argumentEdge: ArgumentEdge,
-    sideEffectOnCallEdge: SideEffectOnCallEdge,
-    relatesEdge: RelatesEdge,
-    nonStandardEvaluationEdge: NonStandardEvaluationEdge,
-    multiEdge: MultiEdge
-  }),[])
-
-   return (
-    <>
-      <svg style={{ position: 'absolute', top: 0, left: 0 }}>
-        <defs>
-          <SvgDefinitionsComponent/>
-        </defs>
-      </svg>
-     <ReactFlow
-       nodes={nodes}
-       edges={edges}
-       nodeTypes={nodeTypes}
-       edgeTypes={edgeTypes}
-       onNodesChange={onNodesChange}
-       onEdgesChange={onEdgesChange}
-       proOptions={{hideAttribution: true}}
-       connectionLineComponent={FloatingConnectionLine}
-       fitView
-     >
-      <Background />
-      <MiniMap />
-      <Controls>
-        <ControlButton onClick={slideInLegend}>
-        ☰
-        </ControlButton>
-      </Controls>
-     </ReactFlow>
-     </>
-   );
- }
+	const onLayout = useCallback(
+		({ direction , g = undefined } : { direction: string, g?: VisualizationGraph }) => {
+			const opts = { 'elk.direction': direction, ...elkOptions }
+			const ns = g ? g.nodesInfo.nodes : nodes
+			const es = g ? g.edges : edges
+			const nm = g ? g.nodesInfo.nodeMap: nodeMap
+			getLayoutedElements(ns, nm, convertToExtendedEdges(es), opts, visualStateModel).then(({ nodes: layoutedNodes, edges: layoutedEdges }) => {
+				setNodes(layoutedNodes)
+				setEdges(layoutedEdges)
+
+				window.requestAnimationFrame(() => fitView())
+			})
+		},
+		[nodes, edges, currentGraph]
+	)
+
+	// Calculate the initial layout on mount.
+	useLayoutEffect(() => {
+		onLayout({ direction: 'DOWN', g: currentGraph })
+	}, [])
+
+	/* allows to map custom node types */
+	const nodeTypes = useMemo(() => ({
+		variableDefinitionNode: VariableDefinitionNode,
+		useNode:                UseNode,
+		functionCallNode:       FunctionCallNode,
+		exitPointNode:          ExitPointNode,
+		valueNode:              ValueNode,
+		functionDefinitionNode: FunctionDefinitionNode,
+		groupNode:              GroupNode
+	}), [])
+
+	/* allows to map custom edge types */
+	const edgeTypes = useMemo(() => ({
+		readsEdge:                 ReadsEdge,
+		definedByEdge:             DefinedByEdge,
+		sameReadReadEdge:          SameReadReadEdge,
+		sameDefDefEdge:            SameDefDefEdge,
+		callsEdge:                 CallsEdge,
+		returnsEdge:               ReturnsEdge,
+		definesOnCallEdge:         DefinesOnCallEdge,
+		definedByOnCallEdge:       DefinedByOnCallEdge,
+		argumentEdge:              ArgumentEdge,
+		sideEffectOnCallEdge:      SideEffectOnCallEdge,
+		relatesEdge:               RelatesEdge,
+		nonStandardEvaluationEdge: NonStandardEvaluationEdge,
+		multiEdge:                 MultiEdge
+	}),[])
+
+	return (
+		<>
+			<svg style={{ position: 'absolute', top: 0, left: 0 }}>
+				<defs>
+					<SvgDefinitionsComponent/>
+				</defs>
+			</svg>
+			<ReactFlow
+				nodes={nodes}
+				edges={edges}
+				nodeTypes={nodeTypes}
+				edgeTypes={edgeTypes}
+				onNodesChange={onNodesChange}
+				onEdgesChange={onEdgesChange}
+				proOptions={{ hideAttribution: true }}
+				connectionLineComponent={FloatingConnectionLine}
+				fitView
+			>
+				<Background />
+				<MiniMap />
+				<Controls>
+					<ControlButton onClick={slideInLegend}>
+						☰
+					</ControlButton>
+				</Controls>
+			</ReactFlow>
+		</>
+	)
+}
 
diff --git a/source/components/graphHierarchy.ts b/source/components/graphHierarchy.ts
index 7d84e12..5193279 100644
--- a/source/components/graphHierarchy.ts
+++ b/source/components/graphHierarchy.ts
@@ -1,6 +1,7 @@
-import { ElkNode } from 'elkjs';
-import {CoordinateExtent, Node, XYPosition} from '@xyflow/react'
-import { VisualizationNodeProps } from './model/graphBuilder';
+import type { ElkNode } from 'elkjs'
+import type { Node, XYPosition } from '@xyflow/react'
+import { CoordinateExtent } from '@xyflow/react'
+import type { VisualizationNodeProps } from './model/graphBuilder'
 
 const standardHeight = 50
 const standardWidth  = 150
@@ -10,18 +11,18 @@ const standardWidth  = 150
  * @param nodes nodes given from the VisualizationGraph
  */
 export function foldIntoElkHierarchy(nodes:Node[], nodesIdMap: Map<string,Node>, isHorizontal: boolean):ElkNode[]{
-    const usedMap  = new Map<string, boolean>()
-    nodesIdMap.forEach((node, id) => usedMap.set(id,false))
+	const usedMap  = new Map<string, boolean>()
+	nodesIdMap.forEach((node, id) => usedMap.set(id,false))
 
-    const toReturn =  (nodes.map((node) => foldOnVisualizationGraphNodes(node as Node<VisualizationNodeProps>, nodesIdMap as Map<string, Node<VisualizationNodeProps>>, usedMap, isHorizontal))).filter(nonEmpty)
+	const toReturn =  (nodes.map((node) => foldOnVisualizationGraphNodes(node as Node<VisualizationNodeProps>, nodesIdMap as Map<string, Node<VisualizationNodeProps>>, usedMap, isHorizontal))).filter(nonEmpty)
     
-    return toReturn
+	return toReturn
 }
 
 interface ExtendedElkNode extends ElkNode{
   data:{
-    label: string, 
-    nodeType: string,
+    label:     string, 
+    nodeType:  string,
     parentId?: string,
     children?: string[]
   }
@@ -29,72 +30,74 @@ interface ExtendedElkNode extends ElkNode{
 
 export interface HierarchyElkNode extends ElkNode {
     targetPosition: string,
-    sourcePosition:string,
-    parentId?: string,
+    sourcePosition: string,
+    parentId?:      string,
     //extent?: "parent" | CoordinateExtent 
-    children?: HierarchyElkNode[]
+    children?:      HierarchyElkNode[]
 }
 
 function nonEmpty<TValue>(value:TValue| null| undefined): value is TValue{
-    return value !== null && value !== undefined
+	return value !== null && value !== undefined
 }
 
 
 function foldOnVisualizationGraphNodes(currentNode: Node<VisualizationNodeProps>, 
-                                       nodeIdMap: Map<string, Node<VisualizationNodeProps>>, 
-                                       usedIdsMap: Map<string,boolean>,
-                                       isHorizontal: boolean):HierarchyElkNode | undefined{
-    if(currentNode.data.children !== undefined){
-        //calculate Children of the currentNode
-        const childrenOfNode : HierarchyElkNode[]= 
+																																							nodeIdMap: Map<string, Node<VisualizationNodeProps>>, 
+																																							usedIdsMap: Map<string,boolean>,
+																																							isHorizontal: boolean):HierarchyElkNode | undefined{
+	if(currentNode.data.children !== undefined){
+		//calculate Children of the currentNode
+		const childrenOfNode : HierarchyElkNode[]= 
           currentNode.data.children
-          .map((nodeId) => nodeIdMap.get(nodeId))
-          .filter((node => node !== undefined))
-          .map((node) => foldOnVisualizationGraphNodes(node!,nodeIdMap,usedIdsMap, isHorizontal))
-          .filter(nonEmpty)
-        const newHeight = childrenOfNode.reduce((accumulatedHeight, node) => accumulatedHeight + (node.height ?? 0), 0) + standardHeight
-        const newWidth = standardWidth + 10
-        const toReturn = {
-            ...currentNode,
-            // Adjust the target and source handle positions based on the layout
-            // direction.
-            targetPosition: isHorizontal ? 'left' : 'top',
-            sourcePosition: isHorizontal ? 'right' : 'bottom',
-            labels: [{ text: currentNode.data.label }],
-            // Hardcode a width and height for elk to use when layouting.
-            width: newWidth,
-            height: newHeight,
-            children: childrenOfNode,
-            ...(currentNode.data.parentId !== undefined) && { parentId: currentNode.data.parentId },
-            ...(currentNode.data.parentId !== undefined) && { extent: 'parent' }
-          }
-
-        return toReturn
-    } 
-
-    if(usedIdsMap.get(currentNode.id)){return undefined}
-
-    usedIdsMap.set(currentNode.id, true)
-    return ({
-        ...currentNode,
-        // Adjust the target and source handle positions based on the layout
-        // direction.
-        targetPosition: isHorizontal ? 'left' : 'top',
-        sourcePosition: isHorizontal ? 'right' : 'bottom',
-        labels: [{ text: currentNode.data.label }],
-        // Hardcode a width and height for elk to use when layouting.
-        width: standardWidth,
-        height: standardHeight,
-        ...(currentNode.data.parentId !== undefined) && { parentId: currentNode.data.parentId },
-        ...(currentNode.data.parentId !== undefined) && { extent: 'parent' }
-      })
+          	.map((nodeId) => nodeIdMap.get(nodeId))
+          	.filter((node => node !== undefined))
+          	.map((node) => foldOnVisualizationGraphNodes(node!,nodeIdMap,usedIdsMap, isHorizontal))
+          	.filter(nonEmpty)
+		const newHeight = childrenOfNode.reduce((accumulatedHeight, node) => accumulatedHeight + (node.height ?? 0), 0) + standardHeight
+		const newWidth = standardWidth + 10
+		const toReturn = {
+			...currentNode,
+			// Adjust the target and source handle positions based on the layout
+			// direction.
+			targetPosition: isHorizontal ? 'left' : 'top',
+			sourcePosition: isHorizontal ? 'right' : 'bottom',
+			labels:         [{ text: currentNode.data.label }],
+			// Hardcode a width and height for elk to use when layouting.
+			width:          newWidth,
+			height:         newHeight,
+			children:       childrenOfNode,
+			...(currentNode.data.parentId !== undefined) && { parentId: currentNode.data.parentId },
+			...(currentNode.data.parentId !== undefined) && { extent: 'parent' }
+		}
+
+		return toReturn
+	} 
+
+	if(usedIdsMap.get(currentNode.id)){
+		return undefined
+	}
+
+	usedIdsMap.set(currentNode.id, true)
+	return ({
+		...currentNode,
+		// Adjust the target and source handle positions based on the layout
+		// direction.
+		targetPosition: isHorizontal ? 'left' : 'top',
+		sourcePosition: isHorizontal ? 'right' : 'bottom',
+		labels:         [{ text: currentNode.data.label }],
+		// Hardcode a width and height for elk to use when layouting.
+		width:          standardWidth,
+		height:         standardHeight,
+		...(currentNode.data.parentId !== undefined) && { parentId: currentNode.data.parentId },
+		...(currentNode.data.parentId !== undefined) && { extent: 'parent' }
+	})
 
 }
 
 interface FinalNodeProps extends Record<string, unknown> {
-  label: string
-  nodeType: string
-  id: string
+  label:         string
+  nodeType:      string
+  id:            string
   estimatedMaxX: number
   estimatedMaxY: number
   estimatedMinX: number
@@ -111,56 +114,56 @@ interface FlattenReturnProperties{
 
 
 export function flattenToNodeArray(nodeArray:ElkNode[]):Node<FinalNodeProps>[] {
-    return nodeArray.map((node) => flattenHierarchyNode(node,{x: 0, y: 0})).flat().map((returnProperty) => returnProperty.node)
+	return nodeArray.map((node) => flattenHierarchyNode(node,{ x: 0, y: 0 })).flat().map((returnProperty) => returnProperty.node)
 }
 
 function flattenHierarchyNode(currentNode: ElkNode, positionParentNode: XYPosition):FlattenReturnProperties[]{
-    let toReturnNodeArray: FlattenReturnProperties[] = []
-
-    const absolutePositionX = (currentNode.x ?? 0) + (positionParentNode.x ?? 0) 
-    const absolutePositionY = (currentNode.y ?? 0) + (positionParentNode.y ?? 0)
-    const newNode: Node<FinalNodeProps> = {
-        ...currentNode,
-        data: { 
-          label: currentNode.labels?.[0]?.text ?? '', 
-          id: currentNode.id, 
-          nodeType:(currentNode as ExtendedElkNode).data.nodeType,
-          estimatedMinX: absolutePositionX,
-          estimatedMinY: absolutePositionY,
-          estimatedMaxX: absolutePositionX + (currentNode.width ?? 0),
-          estimatedMaxY: absolutePositionY + (currentNode.height ?? 0),
-          ...((currentNode as ExtendedElkNode).data.parentId !== undefined)&&{parentId:(currentNode as ExtendedElkNode).data.parentId},
-          ...((currentNode as ExtendedElkNode).data.parentId !== undefined)&&{extent: 'parent'},
-          ...((currentNode as ExtendedElkNode).data.children !== undefined)&&{children:(currentNode as ExtendedElkNode).data.children},
-        },
-        // React Flow expects a position property on the node instead of `x`
-        // and `y` fields.
-        //position is adapted since the position the layout generates is relative to the parent
-        position: { x: currentNode.x ?? 0, y: currentNode.y ?? 0 },
-    }
-
-    const newFlattenedProperty: FlattenReturnProperties = {
-      node: newNode,
-      minX: newNode.data.estimatedMinX,
-      minY: newNode.data.estimatedMinY,
-      maxX: newNode.data.estimatedMaxX,
-      maxY: newNode.data.estimatedMaxY
-    }
-
-    toReturnNodeArray.push(newFlattenedProperty)
-    if(currentNode.children !== undefined){
-        const flattenedChildNodes = currentNode.children.map((node) => flattenHierarchyNode(node, newNode.position)).flat()
+	let toReturnNodeArray: FlattenReturnProperties[] = []
+
+	const absolutePositionX = (currentNode.x ?? 0) + (positionParentNode.x ?? 0) 
+	const absolutePositionY = (currentNode.y ?? 0) + (positionParentNode.y ?? 0)
+	const newNode: Node<FinalNodeProps> = {
+		...currentNode,
+		data: { 
+			label:         currentNode.labels?.[0]?.text ?? '', 
+			id:            currentNode.id, 
+			nodeType:      (currentNode as ExtendedElkNode).data.nodeType,
+			estimatedMinX: absolutePositionX,
+			estimatedMinY: absolutePositionY,
+			estimatedMaxX: absolutePositionX + (currentNode.width ?? 0),
+			estimatedMaxY: absolutePositionY + (currentNode.height ?? 0),
+			...((currentNode as ExtendedElkNode).data.parentId !== undefined)&&{ parentId: (currentNode as ExtendedElkNode).data.parentId },
+			...((currentNode as ExtendedElkNode).data.parentId !== undefined)&&{ extent: 'parent' },
+			...((currentNode as ExtendedElkNode).data.children !== undefined)&&{ children: (currentNode as ExtendedElkNode).data.children },
+		},
+		// React Flow expects a position property on the node instead of `x`
+		// and `y` fields.
+		//position is adapted since the position the layout generates is relative to the parent
+		position: { x: currentNode.x ?? 0, y: currentNode.y ?? 0 },
+	}
+
+	const newFlattenedProperty: FlattenReturnProperties = {
+		node: newNode,
+		minX: newNode.data.estimatedMinX,
+		minY: newNode.data.estimatedMinY,
+		maxX: newNode.data.estimatedMaxX,
+		maxY: newNode.data.estimatedMaxY
+	}
+
+	toReturnNodeArray.push(newFlattenedProperty)
+	if(currentNode.children !== undefined){
+		const flattenedChildNodes = currentNode.children.map((node) => flattenHierarchyNode(node, newNode.position)).flat()
         
-        //calculate dimensions for function definition node
-        newNode.data.estimatedMaxX = flattenedChildNodes.map((flattenedProperty) => flattenedProperty.maxX).reduce((previousMax, currentMax) => {
-          return previousMax < currentMax ? currentMax : previousMax
-        }, 0)
-        newNode.data.estimatedMaxY = flattenedChildNodes.map((flattenedProperty) => flattenedProperty.maxY).reduce((previousMax, currentMax) => {
-          return previousMax < currentMax ? currentMax : previousMax
-        }, 0)
-
-        toReturnNodeArray = toReturnNodeArray.concat(flattenedChildNodes)
-    }
-
-    return toReturnNodeArray
+		//calculate dimensions for function definition node
+		newNode.data.estimatedMaxX = flattenedChildNodes.map((flattenedProperty) => flattenedProperty.maxX).reduce((previousMax, currentMax) => {
+			return previousMax < currentMax ? currentMax : previousMax
+		}, 0)
+		newNode.data.estimatedMaxY = flattenedChildNodes.map((flattenedProperty) => flattenedProperty.maxY).reduce((previousMax, currentMax) => {
+			return previousMax < currentMax ? currentMax : previousMax
+		}, 0)
+
+		toReturnNodeArray = toReturnNodeArray.concat(flattenedChildNodes)
+	}
+
+	return toReturnNodeArray
 }
\ No newline at end of file
diff --git a/source/components/legendComonent.tsx b/source/components/legendComonent.tsx
index 4896a07..e72f465 100644
--- a/source/components/legendComonent.tsx
+++ b/source/components/legendComonent.tsx
@@ -1,6 +1,6 @@
-import { edgeTypeToMarkerIdMapper } from "./model/edges/multiEdge";
-import { VisualStateModel } from "./model/visualStateModel";
-import { setIsNodeIdShownReactFlow } from "./graphComponent";
+import { edgeTypeToMarkerIdMapper } from './model/edges/multiEdge'
+import type { VisualStateModel } from './model/visualStateModel'
+import { setIsNodeIdShownReactFlow } from './graphComponent'
 
 
 interface LegendComponentProps {
@@ -8,120 +8,120 @@ interface LegendComponentProps {
 }
 
 export function slideInLegend() {
-    const element: HTMLDivElement = document.getElementById('slide-in-legend') as HTMLDivElement ?? new HTMLDivElement()
-    element.classList.toggle('visible');
+	const element: HTMLDivElement = document.getElementById('slide-in-legend') as HTMLDivElement ?? new HTMLDivElement()
+	element.classList.toggle('visible')
 }
 
 export function slideOutLegend(){
-    const element: HTMLDivElement = document.getElementById('slide-in-legend') as HTMLDivElement ?? new HTMLDivElement()
-    element.classList.toggle('visible');
+	const element: HTMLDivElement = document.getElementById('slide-in-legend') as HTMLDivElement ?? new HTMLDivElement()
+	element.classList.toggle('visible')
 }
 
-export const LegendComponent: React.FC<LegendComponentProps> = ({visualStateModel}) => {
+export const LegendComponent: React.FC<LegendComponentProps> = ({ visualStateModel }) => {
     
-    const isGreyedOutMap = visualStateModel.isGreyedOutMap
+	const isGreyedOutMap = visualStateModel.isGreyedOutMap
     
-    return (
-        <div className = 'slide-in-legend' id = 'slide-in-legend' >
-            <div className='legend-nodes'>
-                <NodeLegendComponent isGreyedOutMap = {isGreyedOutMap} nodeType = 'variable-definition'/>
-                <NodeLegendComponent isGreyedOutMap = {isGreyedOutMap} nodeType = 'function-definition'/>
-                <NodeLegendComponent isGreyedOutMap = {isGreyedOutMap} nodeType = 'value'/>
-                <NodeLegendComponent isGreyedOutMap = {isGreyedOutMap} nodeType = 'function-call'/>
-                <NodeLegendComponent isGreyedOutMap = {isGreyedOutMap} nodeType = 'use'/>
-                <NodeLegendComponent isGreyedOutMap = {isGreyedOutMap} nodeType = 'exit-point'/>
-            </div>
-            <div className='legend-edges'>
-                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'reads' edgeText ='reads' />
-                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'defined-by' edgeText ='defined-by' />
-                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'calls' edgeText = 'calls' />
-                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'returns' edgeText='returns' />
-                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'defines-on-call' edgeText='defines-on-call' />
-                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'defined-by-on-call' edgeText='defined-by-on-call' />
-                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'argument' edgeText='argument' />
-                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'side-effect-on-call' edgeText='side-effect-on-call' />
-                <EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'non-standard-evaluation' edgeText='non-standard-evaluation' />
-            </div>
+	return (
+		<div className = 'slide-in-legend' id = 'slide-in-legend' >
+			<div className='legend-nodes'>
+				<NodeLegendComponent isGreyedOutMap = {isGreyedOutMap} nodeType = 'variable-definition'/>
+				<NodeLegendComponent isGreyedOutMap = {isGreyedOutMap} nodeType = 'function-definition'/>
+				<NodeLegendComponent isGreyedOutMap = {isGreyedOutMap} nodeType = 'value'/>
+				<NodeLegendComponent isGreyedOutMap = {isGreyedOutMap} nodeType = 'function-call'/>
+				<NodeLegendComponent isGreyedOutMap = {isGreyedOutMap} nodeType = 'use'/>
+				<NodeLegendComponent isGreyedOutMap = {isGreyedOutMap} nodeType = 'exit-point'/>
+			</div>
+			<div className='legend-edges'>
+				<EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'reads' edgeText ='reads' />
+				<EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'defined-by' edgeText ='defined-by' />
+				<EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'calls' edgeText = 'calls' />
+				<EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'returns' edgeText='returns' />
+				<EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'defines-on-call' edgeText='defines-on-call' />
+				<EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'defined-by-on-call' edgeText='defined-by-on-call' />
+				<EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'argument' edgeText='argument' />
+				<EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'side-effect-on-call' edgeText='side-effect-on-call' />
+				<EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'non-standard-evaluation' edgeText='non-standard-evaluation' />
+			</div>
             
-            <div className = 'legend-control-elements'>
-                <div style={{whiteSpace: 'nowrap'}}>
-                    <input 
-                        type='checkbox' 
-                        id='show-id-checkbox' 
-                        onClick={() => {
-                        const checkbox = document.getElementById('show-id-checkbox') as HTMLInputElement ?? new HTMLInputElement()
-                        const isChecked = checkbox.checked
-                        visualStateModel.isNodeIdShown = isChecked
-                        setIsNodeIdShownReactFlow(isChecked)
-                    }}/>
-                    <label htmlFor='show-id-checkbox' >(NodeId)</label>
-                </div>
-            </div>
+			<div className = 'legend-control-elements'>
+				<div style={{ whiteSpace: 'nowrap' }}>
+					<input 
+						type='checkbox' 
+						id='show-id-checkbox' 
+						onClick={() => {
+							const checkbox = document.getElementById('show-id-checkbox') as HTMLInputElement ?? new HTMLInputElement()
+							const isChecked = checkbox.checked
+							visualStateModel.isNodeIdShown = isChecked
+							setIsNodeIdShownReactFlow(isChecked)
+						}}/>
+					<label htmlFor='show-id-checkbox' >(NodeId)</label>
+				</div>
+			</div>
 
-            <div id = 'legend-close-button-div'>
-                <button className = {'button-close-legend'} onClick = {slideOutLegend} >X</button>
-            </div>
-        </div>
-    )
+			<div id = 'legend-close-button-div'>
+				<button className = {'button-close-legend'} onClick = {slideOutLegend} >X</button>
+			</div>
+		</div>
+	)
 }
 
 interface EdgeLegendComponentProps {
-    edgeType:string
-    edgeText:string
-    isGreyedOutMap:Map<string,boolean>
+    edgeType:       string
+    edgeText:       string
+    isGreyedOutMap: Map<string,boolean>
 }
 
 
-const EdgeLegendComponent: React.FC<EdgeLegendComponentProps> = ({edgeText, edgeType, isGreyedOutMap}) => {
-    const classNameEdge = edgeType + '-edge' + ' legend-edge' + ' ' + edgeType + '-legend-edge'
-    const classNameInteractiveEdge = edgeType + '-legend-interactive-edge' + ' legend-interactive-edge' 
-    const markerId = edgeTypeToMarkerIdMapper(edgeType)
-    const legendId = edgeType + '-legend'
-    return(<svg
-        id={legendId}
-        onClick={() => {
-            const pathElements = document.getElementsByClassName(`${edgeType}-edge`) as HTMLCollectionOf<SVGPathElement>
-            const symbolElements = document.getElementsByClassName(`${edgeType}-edge-symbol`) as HTMLCollectionOf<SVGUseElement>
-            const legendSVGElement = document.getElementById(legendId) as HTMLElement
+const EdgeLegendComponent: React.FC<EdgeLegendComponentProps> = ({ edgeText, edgeType, isGreyedOutMap }) => {
+	const classNameEdge = edgeType + '-edge' + ' legend-edge' + ' ' + edgeType + '-legend-edge'
+	const classNameInteractiveEdge = edgeType + '-legend-interactive-edge' + ' legend-interactive-edge' 
+	const markerId = edgeTypeToMarkerIdMapper(edgeType)
+	const legendId = edgeType + '-legend'
+	return (<svg
+		id={legendId}
+		onClick={() => {
+			const pathElements = document.getElementsByClassName(`${edgeType}-edge`) as HTMLCollectionOf<SVGPathElement>
+			const symbolElements = document.getElementsByClassName(`${edgeType}-edge-symbol`) as HTMLCollectionOf<SVGUseElement>
+			const legendSVGElement = document.getElementById(legendId) as HTMLElement
             
-            //get the greyed out state and set it correctly
-            const isEdgeTypeGreyedOut:boolean = isGreyedOutMap.get(edgeType) ?? false
-            isGreyedOutMap.set(edgeType,!isEdgeTypeGreyedOut)
+			//get the greyed out state and set it correctly
+			const isEdgeTypeGreyedOut:boolean = isGreyedOutMap.get(edgeType) ?? false
+			isGreyedOutMap.set(edgeType,!isEdgeTypeGreyedOut)
 
-            //for all elements set the node state
-            for(const element of pathElements){
-                element.classList.toggle('legend-passive', !isEdgeTypeGreyedOut)
-            }
+			//for all elements set the node state
+			for(const element of pathElements){
+				element.classList.toggle('legend-passive', !isEdgeTypeGreyedOut)
+			}
             
-            for(const element of symbolElements){
-                element.classList.toggle('legend-passive', !isEdgeTypeGreyedOut)
-            }
-            legendSVGElement.classList.toggle('legend-passive', !isEdgeTypeGreyedOut)
-        }}
-    >
-        <path className={classNameEdge} d='m0 10 l20 0 l20 0 l20 0 l20 0' markerEnd='url(#triangle)' markerMid={`url(#${markerId})`} ></path>
-        <path className = {classNameInteractiveEdge} d='m0 10 l80 0' ></path>
+			for(const element of symbolElements){
+				element.classList.toggle('legend-passive', !isEdgeTypeGreyedOut)
+			}
+			legendSVGElement.classList.toggle('legend-passive', !isEdgeTypeGreyedOut)
+		}}
+	>
+		<path className={classNameEdge} d='m0 10 l20 0 l20 0 l20 0 l20 0' markerEnd='url(#triangle)' markerMid={`url(#${markerId})`} ></path>
+		<path className = {classNameInteractiveEdge} d='m0 10 l80 0' ></path>
         
-        <text x = {92} y = {15}>{edgeText}</text>
-    </svg>)
+		<text x = {92} y = {15}>{edgeText}</text>
+	</svg>)
 }  
 
 interface NodeLegendComponentProps{
-    nodeType:string
+    nodeType:       string
     isGreyedOutMap: Map<string,boolean>    
 }
 
-const NodeLegendComponent: React.FC<NodeLegendComponentProps> = ({nodeType, isGreyedOutMap}) => {
-    return (
-        <div onClick = {() => {
-            const elements = document.getElementsByClassName(`${nodeType}-node`) as HTMLCollectionOf<HTMLDivElement>
-            //get the greyed out state and set it correctly
-            const isNodeTypeGreyedOut:boolean =  isGreyedOutMap.get(nodeType) ?? false
-            isGreyedOutMap.set(nodeType,!isNodeTypeGreyedOut)
-            //for all elements set the node state
-            for(const element of elements){
-                element.classList.toggle('legend-passive', !isNodeTypeGreyedOut)
-            }
-        }}className={`legend-element ${nodeType}-node ${nodeType}-node-legend`}>{nodeType}</div>
-    )
+const NodeLegendComponent: React.FC<NodeLegendComponentProps> = ({ nodeType, isGreyedOutMap }) => {
+	return (
+		<div onClick = {() => {
+			const elements = document.getElementsByClassName(`${nodeType}-node`) as HTMLCollectionOf<HTMLDivElement>
+			//get the greyed out state and set it correctly
+			const isNodeTypeGreyedOut:boolean =  isGreyedOutMap.get(nodeType) ?? false
+			isGreyedOutMap.set(nodeType,!isNodeTypeGreyedOut)
+			//for all elements set the node state
+			for(const element of elements){
+				element.classList.toggle('legend-passive', !isNodeTypeGreyedOut)
+			}
+		}}className={`legend-element ${nodeType}-node ${nodeType}-node-legend`}>{nodeType}</div>
+	)
 }
diff --git a/source/components/mainContainerComponent.tsx b/source/components/mainContainerComponent.tsx
index 011723c..894a8e3 100644
--- a/source/components/mainContainerComponent.tsx
+++ b/source/components/mainContainerComponent.tsx
@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from "react";
+import type { PropsWithChildren } from 'react'
+import React from 'react'
 
 interface MainContainerComponentProps {
   initialize: () => void;
@@ -6,13 +7,13 @@ interface MainContainerComponentProps {
 
 export class MainContainerComponent extends React.Component<PropsWithChildren<MainContainerComponentProps>> {
 
-  componentDidMount(): void {
-    this.props.initialize();
-  }
+	componentDidMount(): void {
+		this.props.initialize()
+	}
 
-  render(): React.ReactNode {
-    return <div className="main-container">
-      {this.props.children}
-    </div>;
-  }
+	render(): React.ReactNode {
+		return <div className="main-container">
+			{this.props.children}
+		</div>
+	}
 }
\ No newline at end of file
diff --git a/source/components/model/edges/argumentEdge.tsx b/source/components/model/edges/argumentEdge.tsx
index ad00d60..559ed7f 100644
--- a/source/components/model/edges/argumentEdge.tsx
+++ b/source/components/model/edges/argumentEdge.tsx
@@ -1,12 +1,12 @@
-import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from "./edgeBase"
+import type { EdgeProps } from '@xyflow/react'
+import { BodyEdgeComponent } from './edgeBase'
 
 export function ArgumentEdge(props:EdgeProps) {
-    return <BodyEdgeComponent
-      standardEdgeInformation={props}
-      edgeStyle = {{stroke: 'blue', strokeDasharray: '7,7'}}
-      label = 'argument'
-      source={props.source}
-      target={props.target}
-    />
-  }
\ No newline at end of file
+	return <BodyEdgeComponent
+		standardEdgeInformation={props}
+		edgeStyle = {{ stroke: 'blue', strokeDasharray: '7,7' }}
+		label = 'argument'
+		source={props.source}
+		target={props.target}
+	/>
+}
\ No newline at end of file
diff --git a/source/components/model/edges/callsEdge.tsx b/source/components/model/edges/callsEdge.tsx
index 4d06095..332ffee 100644
--- a/source/components/model/edges/callsEdge.tsx
+++ b/source/components/model/edges/callsEdge.tsx
@@ -1,13 +1,13 @@
-import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from "./edgeBase"
+import type { EdgeProps } from '@xyflow/react'
+import { BodyEdgeComponent } from './edgeBase'
 
 export function CallsEdge(props:EdgeProps){
-    return <BodyEdgeComponent
-      standardEdgeInformation={props}
-      edgeStyle = {{stroke: 'blue', strokeDasharray: '3,7'}}
-      label = 'calls'
-      arrowEnd = {true}
-      source={props.source}
-      target={props.target}
-    />
-  }
\ No newline at end of file
+	return <BodyEdgeComponent
+		standardEdgeInformation={props}
+		edgeStyle = {{ stroke: 'blue', strokeDasharray: '3,7' }}
+		label = 'calls'
+		arrowEnd = {true}
+		source={props.source}
+		target={props.target}
+	/>
+}
\ No newline at end of file
diff --git a/source/components/model/edges/definedByEdge.tsx b/source/components/model/edges/definedByEdge.tsx
index df8f64b..052bc21 100644
--- a/source/components/model/edges/definedByEdge.tsx
+++ b/source/components/model/edges/definedByEdge.tsx
@@ -1,13 +1,13 @@
-import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from "./edgeBase"
+import type { EdgeProps } from '@xyflow/react'
+import { BodyEdgeComponent } from './edgeBase'
 
 export function DefinedByEdge(props:EdgeProps) {
-    return <BodyEdgeComponent
-      standardEdgeInformation={props}
-      edgeStyle = {{stroke: 'black'}}
-      label = 'defined-by'
-      arrowEnd = {true}
-      source={props.source}
-      target={props.target}
-    />
-  }
\ No newline at end of file
+	return <BodyEdgeComponent
+		standardEdgeInformation={props}
+		edgeStyle = {{ stroke: 'black' }}
+		label = 'defined-by'
+		arrowEnd = {true}
+		source={props.source}
+		target={props.target}
+	/>
+}
\ No newline at end of file
diff --git a/source/components/model/edges/definedByOnCallEdge.tsx b/source/components/model/edges/definedByOnCallEdge.tsx
index f9e0c2d..06fae4e 100644
--- a/source/components/model/edges/definedByOnCallEdge.tsx
+++ b/source/components/model/edges/definedByOnCallEdge.tsx
@@ -1,13 +1,13 @@
-import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from "./edgeBase"
+import type { EdgeProps } from '@xyflow/react'
+import { BodyEdgeComponent } from './edgeBase'
 
 export function DefinedByOnCallEdge(props: EdgeProps) {
-    return <BodyEdgeComponent
-      standardEdgeInformation={props}
-      edgeStyle = {{stroke: 'blue', strokeDasharray: '6,7'}}
-      label = 'defined-by-on-call'
-      arrowEnd = {true}
-      source={props.source}
-      target={props.target}
-    />
-  }
\ No newline at end of file
+	return <BodyEdgeComponent
+		standardEdgeInformation={props}
+		edgeStyle = {{ stroke: 'blue', strokeDasharray: '6,7' }}
+		label = 'defined-by-on-call'
+		arrowEnd = {true}
+		source={props.source}
+		target={props.target}
+	/>
+}
\ No newline at end of file
diff --git a/source/components/model/edges/definesOnCallEdge.tsx b/source/components/model/edges/definesOnCallEdge.tsx
index 0b12c12..d121115 100644
--- a/source/components/model/edges/definesOnCallEdge.tsx
+++ b/source/components/model/edges/definesOnCallEdge.tsx
@@ -1,13 +1,13 @@
-import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from "./edgeBase"
+import type { EdgeProps } from '@xyflow/react'
+import { BodyEdgeComponent } from './edgeBase'
 
 export function DefinesOnCallEdge(props:EdgeProps) {
-    return <BodyEdgeComponent
-      standardEdgeInformation={props}
-      edgeStyle = {{stroke: 'blue', strokeDasharray: '5,7'}}
-      label = 'defines-on-call'
-      arrowEnd = {true}
-      source={props.source}
-      target={props.target}
-    />
-  }
\ No newline at end of file
+	return <BodyEdgeComponent
+		standardEdgeInformation={props}
+		edgeStyle = {{ stroke: 'blue', strokeDasharray: '5,7' }}
+		label = 'defines-on-call'
+		arrowEnd = {true}
+		source={props.source}
+		target={props.target}
+	/>
+}
\ No newline at end of file
diff --git a/source/components/model/edges/edgeBase.tsx b/source/components/model/edges/edgeBase.tsx
index b003f72..5e47854 100644
--- a/source/components/model/edges/edgeBase.tsx
+++ b/source/components/model/edges/edgeBase.tsx
@@ -1,163 +1,164 @@
-import { useCallback } from "react";
-import { getStraightPath, BaseEdge, EdgeLabelRenderer, EdgeProps, getBezierPath, Node, Position, useStore, XYPosition, useInternalNode, InternalNode} from '@xyflow/react';
-
-const edgeTagMap:{[index: string]:string} = {
-  'reads':                   'readsEdge',
-  'defined-by':              'definedByEdge',
-  'calls':                   'callsEdge',
-  'returns':                 'returnsEdge',
-  'defines-on-call':         'definesOnCallEdge',
-  'defined-by-on-call':      'definedByOnCallEdge',
-  'argument':                'argumentEdge',
-  'side-effect-on-call':     'sideEffectOnCallEdge',
-  'non-standard-evaluation': 'nonStandardEvaluationEdge',
-  'multiEdge':               'multiEdge'
-};
+import { useCallback } from 'react'
+import type { EdgeProps, Node, XYPosition } from '@xyflow/react'
+import { getStraightPath, BaseEdge, EdgeLabelRenderer, getBezierPath, Position, useStore, useInternalNode, InternalNode } from '@xyflow/react'
+
+const edgeTagMap:{[index: string]: string} = {
+	'reads':                   'readsEdge',
+	'defined-by':              'definedByEdge',
+	'calls':                   'callsEdge',
+	'returns':                 'returnsEdge',
+	'defines-on-call':         'definesOnCallEdge',
+	'defined-by-on-call':      'definedByOnCallEdge',
+	'argument':                'argumentEdge',
+	'side-effect-on-call':     'sideEffectOnCallEdge',
+	'non-standard-evaluation': 'nonStandardEvaluationEdge',
+	'multiEdge':               'multiEdge'
+}
 
 export function edgeTagMapper(edgeTag: string): string {
-  return edgeTagMap[edgeTag] ?? '';
+	return edgeTagMap[edgeTag] ?? ''
 }
 
 interface BodyEdgeComponentProps {
   readonly standardEdgeInformation: EdgeProps,
-  readonly edgeStyle: React.CSSProperties,
-  readonly label: string,
-  readonly arrowStart?: boolean;
-  readonly arrowEnd?: boolean;
-  readonly source: string;
-  readonly target: string;
+  readonly edgeStyle:               React.CSSProperties,
+  readonly label:                   string,
+  readonly arrowStart?:             boolean;
+  readonly arrowEnd?:               boolean;
+  readonly source:                  string;
+  readonly target:                  string;
 }
 
 export const BodyEdgeComponent: React.FC<BodyEdgeComponentProps> = (props) => {
 
 
-  const sourceNode = useInternalNode(props.source)
-  const targetNode = useInternalNode(props.target)
+	const sourceNode = useInternalNode(props.source)
+	const targetNode = useInternalNode(props.target)
     
-  if (!sourceNode || !targetNode) {
-    return null;
-  }
+	if(!sourceNode || !targetNode) {
+		return null
+	}
   
-  const {  sourceX, sourceY, targetX, targetY, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode,false);
+	const {  sourceX, sourceY, targetX, targetY, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode,false)
 
 
-  const [edgePath, labelX, labelY, offsetX, offsetY] = getBezierPath({
-    sourceX: sourceX,
-    sourceY: sourceY,
-    sourcePosition: sourcePos,
-    targetPosition: targetPos,
-    targetX: targetX,
-    targetY: targetY,
-  });
+	const [edgePath, labelX, labelY, offsetX, offsetY] = getBezierPath({
+		sourceX:        sourceX,
+		sourceY:        sourceY,
+		sourcePosition: sourcePos,
+		targetPosition: targetPos,
+		targetX:        targetX,
+		targetY:        targetY,
+	})
   
-  //const labelPositionX = targetX - sourceX > 0 ? labelX + offsetX / 2 : labelX - offsetX / 2 
-  //const labelPositionY = targetY - sourceY > 0 ? labelY + offsetY / 2 : labelY - offsetY / 2
-  return (
-    <>
-    <BaseEdge
-      id={props.standardEdgeInformation.id} 
-      path={edgePath} 
-      style={props.edgeStyle} 
-      markerEnd={props.arrowEnd ? 'url(#triangle)' : undefined} markerStart={props.arrowStart ? 'url(#triangle)' : undefined} 
-    />
-    <EdgeLabelRenderer>
-      <div
-        style={{
-          position: 'absolute',
-          transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-          fontSize: 12,
-          pointerEvents: 'all',
-        }}
-        className="nodrag nopan"
-      >
-        {props.standardEdgeInformation.label}
-      </div>
-    </EdgeLabelRenderer>
-    </>
-  );
+	//const labelPositionX = targetX - sourceX > 0 ? labelX + offsetX / 2 : labelX - offsetX / 2 
+	//const labelPositionY = targetY - sourceY > 0 ? labelY + offsetY / 2 : labelY - offsetY / 2
+	return (
+		<>
+			<BaseEdge
+				id={props.standardEdgeInformation.id} 
+				path={edgePath} 
+				style={props.edgeStyle} 
+				markerEnd={props.arrowEnd ? 'url(#triangle)' : undefined} markerStart={props.arrowStart ? 'url(#triangle)' : undefined} 
+			/>
+			<EdgeLabelRenderer>
+				<div
+					style={{
+						position:      'absolute',
+						transform:     `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+						fontSize:      12,
+						pointerEvents: 'all',
+					}}
+					className="nodrag nopan"
+				>
+					{props.standardEdgeInformation.label}
+				</div>
+			</EdgeLabelRenderer>
+		</>
+	)
 }
 
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
 function getNodeIntersection(intersectionNode:Node, targetNode:Node):XYPosition {
-  // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
+	// https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
   
 
 
-  const intersectionNodeWidth = intersectionNode.measured?.width
-  const intersectionNodeHeight = intersectionNode.measured?.height
+	const intersectionNodeWidth = intersectionNode.measured?.width
+	const intersectionNodeHeight = intersectionNode.measured?.height
 
-  const targetNodeWidth = targetNode.measured?.width
-  const targetNodeHeight = targetNode.measured?.height
+	const targetNodeWidth = targetNode.measured?.width
+	const targetNodeHeight = targetNode.measured?.height
   
-  if(intersectionNodeHeight === undefined || intersectionNodeWidth === undefined || targetNodeWidth === undefined || targetNodeHeight === undefined){
-    throw Error('width or height not measured')
-  }
-  /*
+	if(intersectionNodeHeight === undefined || intersectionNodeWidth === undefined || targetNodeWidth === undefined || targetNodeHeight === undefined){
+		throw Error('width or height not measured')
+	}
+	/*
   const {
     width: intersectionNodeWidth,
     height: intersectionNodeHeight,
     position: intersectionNodePosition,
   } = intersectionNode;
   */
-  const targetPosition = getAbsolutePosition(targetNode);
-  const intersectionNodePosition = getAbsolutePosition(intersectionNode)
+	const targetPosition = getAbsolutePosition(targetNode)
+	const intersectionNodePosition = getAbsolutePosition(intersectionNode)
 
-  //Set position correctly because subnode position is relative to parent
+	//Set position correctly because subnode position is relative to parent
   
-  const w = intersectionNodeWidth / 2;
-  const h = intersectionNodeHeight / 2;
-
-  const x2 = intersectionNodePosition.x + w;
-  const y2 = intersectionNodePosition.y + h;
-  const x1 = targetPosition.x + targetNodeWidth / 2;
-  const y1 = targetPosition.y + targetNodeHeight / 2;
-
-  const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
-  const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
-  const a = 1 / (Math.abs(xx1) + Math.abs(yy1));
-  const xx3 = a * xx1;
-  const yy3 = a * yy1;
-  const x = w * (xx3 + yy3) + x2;
-  const y = h * (-xx3 + yy3) + y2;
-
-  return { x, y };
+	const w = intersectionNodeWidth / 2
+	const h = intersectionNodeHeight / 2
+
+	const x2 = intersectionNodePosition.x + w
+	const y2 = intersectionNodePosition.y + h
+	const x1 = targetPosition.x + targetNodeWidth / 2
+	const y1 = targetPosition.y + targetNodeHeight / 2
+
+	const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h)
+	const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h)
+	const a = 1 / (Math.abs(xx1) + Math.abs(yy1))
+	const xx3 = a * xx1
+	const yy3 = a * yy1
+	const x = w * (xx3 + yy3) + x2
+	const y = h * (-xx3 + yy3) + y2
+
+	return { x, y }
 }
 
 function getNodeIntersectionForTargetPosition(intersectionNode:Node, targetPosition:XYPosition):XYPosition {
 
 
 
-  const intersectionNodeWidth = intersectionNode.measured?.width
-  const intersectionNodeHeight = intersectionNode.measured?.height
+	const intersectionNodeWidth = intersectionNode.measured?.width
+	const intersectionNodeHeight = intersectionNode.measured?.height
 
   
-  if(intersectionNodeHeight === undefined || intersectionNodeWidth === undefined){
-    throw Error('width or height not measured')
-  }
+	if(intersectionNodeHeight === undefined || intersectionNodeWidth === undefined){
+		throw Error('width or height not measured')
+	}
   
-  const intersectionNodePosition = getAbsolutePosition(intersectionNode)
+	const intersectionNodePosition = getAbsolutePosition(intersectionNode)
 
-  //Set position correctly because subnode position is relative to parent
+	//Set position correctly because subnode position is relative to parent
   
-  const w = intersectionNodeWidth / 2;
-  const h = intersectionNodeHeight / 2;
-
-  const x2 = intersectionNodePosition.x + w;
-  const y2 = intersectionNodePosition.y + h;
-  const x1 = targetPosition.x 
-  const y1 = targetPosition.y 
-
-  const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
-  const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
-  const a = 1 / (Math.abs(xx1) + Math.abs(yy1));
-  const xx3 = a * xx1;
-  const yy3 = a * yy1;
-  const x = w * (xx3 + yy3) + x2;
-  const y = h * (-xx3 + yy3) + y2;
-
-  return { x, y };
+	const w = intersectionNodeWidth / 2
+	const h = intersectionNodeHeight / 2
+
+	const x2 = intersectionNodePosition.x + w
+	const y2 = intersectionNodePosition.y + h
+	const x1 = targetPosition.x 
+	const y1 = targetPosition.y 
+
+	const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h)
+	const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h)
+	const a = 1 / (Math.abs(xx1) + Math.abs(yy1))
+	const xx3 = a * xx1
+	const yy3 = a * yy1
+	const x = w * (xx3 + yy3) + x2
+	const y = h * (-xx3 + yy3) + y2
+
+	return { x, y }
 }
 
 
@@ -165,83 +166,83 @@ function getNodeIntersectionForTargetPosition(intersectionNode:Node, targetPosit
 function getEdgePosition(node: Node, intersectionPoint:XYPosition): Position {
   
 
-  if(node.position.x === undefined || node.position.y === undefined || node.measured?.height === undefined || node.measured.width === undefined){
-    throw Error('position or measured dimension undefined')
-  }
+	if(node.position.x === undefined || node.position.y === undefined || node.measured?.height === undefined || node.measured.width === undefined){
+		throw Error('position or measured dimension undefined')
+	}
 
-  const absolutePositionNode = getAbsolutePosition(node)
+	const absolutePositionNode = getAbsolutePosition(node)
 
-  const leftPosition = absolutePositionNode.x 
-  const rightPosition = absolutePositionNode.x + node.measured.width
-  const topPosition = absolutePositionNode.y
-  const bottomPosition = absolutePositionNode.y + node.measured.height
+	const leftPosition = absolutePositionNode.x 
+	const rightPosition = absolutePositionNode.x + node.measured.width
+	const topPosition = absolutePositionNode.y
+	const bottomPosition = absolutePositionNode.y + node.measured.height
   
-  if(Math.abs(leftPosition - intersectionPoint.x) <= 0.1){
-    return Position.Left
-  }
+	if(Math.abs(leftPosition - intersectionPoint.x) <= 0.1){
+		return Position.Left
+	}
 
-  if(Math.abs(rightPosition - intersectionPoint.x) <= 0.1){
-    return Position.Right
-  }
+	if(Math.abs(rightPosition - intersectionPoint.x) <= 0.1){
+		return Position.Right
+	}
 
-  if(Math.abs(topPosition - intersectionPoint.y) <= 0.1){
-    return Position.Top
-  }
+	if(Math.abs(topPosition - intersectionPoint.y) <= 0.1){
+		return Position.Top
+	}
 
-  if(Math.abs(bottomPosition - intersectionPoint.y) <= 0.1){
-    return Position.Bottom
-  }
+	if(Math.abs(bottomPosition - intersectionPoint.y) <= 0.1){
+		return Position.Bottom
+	}
 
-  return Position.Top
+	return Position.Top
 }
 
 // returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
 export function getEdgeParams(source:Node, target: Node, isBidirectionalEdge:boolean) {
-  let sourceIntersectionPoint = getNodeIntersection(source, target);
-  let targetIntersectionPoint = getNodeIntersection(target, source);
-
-
-  const degreeOfRotation = 20
-  if(isBidirectionalEdge){
-    sourceIntersectionPoint = rotatePositionOnNodeDegrees(source, sourceIntersectionPoint, degreeOfRotation)
-    targetIntersectionPoint = rotatePositionOnNodeDegrees(target, targetIntersectionPoint, -degreeOfRotation)
-  }
-
-  const sourcePos = getEdgePosition(source, sourceIntersectionPoint);
-  const targetPos = getEdgePosition(target, targetIntersectionPoint);
-
-  return {
-    sourceX: sourceIntersectionPoint.x,
-    sourceY: sourceIntersectionPoint.y,
-    targetX: targetIntersectionPoint.x,
-    targetY: targetIntersectionPoint.y,
-    sourcePos,
-    targetPos,
-  };
+	let sourceIntersectionPoint = getNodeIntersection(source, target)
+	let targetIntersectionPoint = getNodeIntersection(target, source)
+
+
+	const degreeOfRotation = 20
+	if(isBidirectionalEdge){
+		sourceIntersectionPoint = rotatePositionOnNodeDegrees(source, sourceIntersectionPoint, degreeOfRotation)
+		targetIntersectionPoint = rotatePositionOnNodeDegrees(target, targetIntersectionPoint, -degreeOfRotation)
+	}
+
+	const sourcePos = getEdgePosition(source, sourceIntersectionPoint)
+	const targetPos = getEdgePosition(target, targetIntersectionPoint)
+
+	return {
+		sourceX: sourceIntersectionPoint.x,
+		sourceY: sourceIntersectionPoint.y,
+		targetX: targetIntersectionPoint.x,
+		targetY: targetIntersectionPoint.y,
+		sourcePos,
+		targetPos,
+	}
 }
 
 
 function getAbsolutePosition(currentNode:Node):XYPosition{
-  const internalNode= useInternalNode(currentNode.id)
-  return internalNode?.internals.positionAbsolute ?? currentNode.position
+	const internalNode= useInternalNode(currentNode.id)
+	return internalNode?.internals.positionAbsolute ?? currentNode.position
 }
 
 function rotatePositionOnNodeDegrees(node:Node, intersectionPoint:XYPosition, angleInDegrees: number):XYPosition{
-  if(node.position.x === undefined || node.position.y === undefined || node.measured?.height === undefined || node.measured.width === undefined){
-    throw Error('position or measured dimension undefined')
-  }
-  const nodeMiddle:XYPosition = {x: node.position.x + 1/2 * node.measured.width, y:node.position.y + 1/2 * node.measured.height}
+	if(node.position.x === undefined || node.position.y === undefined || node.measured?.height === undefined || node.measured.width === undefined){
+		throw Error('position or measured dimension undefined')
+	}
+	const nodeMiddle:XYPosition = { x: node.position.x + 1/2 * node.measured.width, y: node.position.y + 1/2 * node.measured.height }
   
-  const distanceToMiddle:XYPosition = {x: intersectionPoint.x - nodeMiddle.x, y: intersectionPoint.y - nodeMiddle.y}
-  let degreeFromMiddle  = 0
-  if(distanceToMiddle.x === 0){
-    degreeFromMiddle = distanceToMiddle.y >= 0 ?  Math.PI / 2 : Math.PI * 3/2 
-  } else {
-    degreeFromMiddle = Math.atan2(distanceToMiddle.y , distanceToMiddle.x)
-  }
+	const distanceToMiddle:XYPosition = { x: intersectionPoint.x - nodeMiddle.x, y: intersectionPoint.y - nodeMiddle.y }
+	let degreeFromMiddle  = 0
+	if(distanceToMiddle.x === 0){
+		degreeFromMiddle = distanceToMiddle.y >= 0 ?  Math.PI / 2 : Math.PI * 3/2 
+	} else {
+		degreeFromMiddle = Math.atan2(distanceToMiddle.y , distanceToMiddle.x)
+	}
   
-  const newAngle = degreeFromMiddle + angleInDegrees / 360 * 2 * Math.PI
-  const lengthLongerFromMiddleOfNode = node.measured.height + node.measured.width
-  const newReferencePoint:XYPosition = {x: Math.cos(newAngle) * lengthLongerFromMiddleOfNode + nodeMiddle.x, y: Math.sin(newAngle) * lengthLongerFromMiddleOfNode + nodeMiddle.y} 
-  return getNodeIntersectionForTargetPosition(node, newReferencePoint)
+	const newAngle = degreeFromMiddle + angleInDegrees / 360 * 2 * Math.PI
+	const lengthLongerFromMiddleOfNode = node.measured.height + node.measured.width
+	const newReferencePoint:XYPosition = { x: Math.cos(newAngle) * lengthLongerFromMiddleOfNode + nodeMiddle.x, y: Math.sin(newAngle) * lengthLongerFromMiddleOfNode + nodeMiddle.y } 
+	return getNodeIntersectionForTargetPosition(node, newReferencePoint)
 }
\ No newline at end of file
diff --git a/source/components/model/edges/multiEdge.tsx b/source/components/model/edges/multiEdge.tsx
index 8108695..64b549d 100644
--- a/source/components/model/edges/multiEdge.tsx
+++ b/source/components/model/edges/multiEdge.tsx
@@ -1,8 +1,10 @@
-import { useCallback } from "react";
-import { BaseEdge, Edge, EdgeLabelRenderer, EdgeMouseHandler, EdgeProps, EdgeTypes, InternalNode, ReactFlowState, XYPosition, getBezierPath, useInternalNode, useStore } from '@xyflow/react';
-import { getEdgeParams } from "./edgeBase";
-import { EdgeType, EdgeTypeName } from "@eagleoutice/flowr/dataflow/graph/edge";
-import { VisualStateModel } from "../visualStateModel";
+import { useCallback } from 'react'
+import type { EdgeProps, ReactFlowState, XYPosition } from '@xyflow/react'
+import { BaseEdge, Edge, EdgeLabelRenderer, EdgeMouseHandler, EdgeTypes, InternalNode, getBezierPath, useInternalNode, useStore } from '@xyflow/react'
+import { getEdgeParams } from './edgeBase'
+import type { EdgeTypeName } from '@eagleoutice/flowr/dataflow/graph/edge'
+import { EdgeType } from '@eagleoutice/flowr/dataflow/graph/edge'
+import { VisualStateModel } from '../visualStateModel'
 
 const amountOfSamplePointsForLength = 100
 const lengthBetweenMarkerPoints = 10
@@ -10,92 +12,94 @@ const startEndDistanceToMarkers = 10
 
 export function MultiEdge(props:EdgeProps){
     
-  return <BodyMultiEdgeComponent
-      standardEdgeInformation={props}
-      source={props.source}
-      target={props.target}
-    />
+	return <BodyMultiEdgeComponent
+		standardEdgeInformation={props}
+		source={props.source}
+		target={props.target}
+	/>
 }
 
 interface BodyMultiEdgeComponentProps {
     readonly standardEdgeInformation: EdgeProps;
-    readonly arrowEnd?: boolean;
-    readonly source: string;
-    readonly target: string;
+    readonly arrowEnd?:               boolean;
+    readonly source:                  string;
+    readonly target:                  string;
 }
 
-export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = ({standardEdgeInformation, arrowEnd, source, target}) => {
-  const sourceNode = useInternalNode(source)
-  const targetNode = useInternalNode(target)
+export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = ({ standardEdgeInformation, arrowEnd, source, target }) => {
+	const sourceNode = useInternalNode(source)
+	const targetNode = useInternalNode(target)
 
-  if (!sourceNode || !targetNode) {
-    return null;
-  }
+	if(!sourceNode || !targetNode) {
+		return null
+	}
 
-  const isBiDirectionEdge = useStore((s: ReactFlowState) => {
-    const edgeExists = s.edges.some(
-      (e) =>
-        (e.source === standardEdgeInformation.target && e.target === standardEdgeInformation.source) ||
+	const isBiDirectionEdge = useStore((s: ReactFlowState) => {
+		const edgeExists = s.edges.some(
+			(e) =>
+				(e.source === standardEdgeInformation.target && e.target === standardEdgeInformation.source) ||
         (e.target === standardEdgeInformation.source && e.source === standardEdgeInformation.target),
-    );
-
-    return edgeExists;
-  });
-
-  const {  sourceX, sourceY, targetX, targetY, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode, isBiDirectionEdge);
-
-  const [edgePath, labelX, labelY, offsetX, offsetY] = getBezierPath({
-    sourceX: sourceX,
-    sourceY: sourceY,
-    sourcePosition: sourcePos,
-    targetPosition: targetPos,
-    targetX: targetX,
-    targetY: targetY,
-  })
-
-  //const labelPositionX = targetX - sourceX > 0 ? labelX + offsetX / 2 : labelX - offsetX / 2 
-  //const labelPositionY = targetY - sourceY > 0 ? labelY + offsetY / 2 : labelY - offsetY / 2
-  const defaultEdgeStyle: React.CSSProperties = {stroke: 'black', pointerEvents: 'none', cursor: 'none'}
-  const arrowStart = false
-
-  let label = ''
-  for(const singleLabel of (standardEdgeInformation.data?.edgeTypes as string[] ?? [])){
-      label += singleLabel + ' '
-  }
-
-  const edgeLabelId = standardEdgeInformation.id + '-edgeLabel'
-  const hoverOverEdgeId = standardEdgeInformation.id + '-hoverover-interactive'
-  var cssRule = `body:has(#${hoverOverEdgeId}:hover) #${edgeLabelId} {visibility: visible;}`
+		)
+
+		return edgeExists
+	})
+
+	const {  sourceX, sourceY, targetX, targetY, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode, isBiDirectionEdge)
+
+	const [edgePath, labelX, labelY, offsetX, offsetY] = getBezierPath({
+		sourceX:        sourceX,
+		sourceY:        sourceY,
+		sourcePosition: sourcePos,
+		targetPosition: targetPos,
+		targetX:        targetX,
+		targetY:        targetY,
+	})
+
+	//const labelPositionX = targetX - sourceX > 0 ? labelX + offsetX / 2 : labelX - offsetX / 2 
+	//const labelPositionY = targetY - sourceY > 0 ? labelY + offsetY / 2 : labelY - offsetY / 2
+	const defaultEdgeStyle: React.CSSProperties = { stroke: 'black', pointerEvents: 'none', cursor: 'none' }
+	const arrowStart = false
+
+	let label = ''
+	for(const singleLabel of (standardEdgeInformation.data?.edgeTypes as string[] ?? [])){
+		label += singleLabel + ' '
+	}
+
+	const edgeLabelId = standardEdgeInformation.id + '-edgeLabel'
+	const hoverOverEdgeId = standardEdgeInformation.id + '-hoverover-interactive'
+	const cssRule = `body:has(#${hoverOverEdgeId}:hover) #${edgeLabelId} {visibility: visible;}`
   
-  const givenEdgeTypes = standardEdgeInformation.data?.edgeTypes as Set<EdgeTypeName> ?? new Set<EdgeTypeName>()
+	const givenEdgeTypes = standardEdgeInformation.data?.edgeTypes as Set<EdgeTypeName> ?? new Set<EdgeTypeName>()
   
-  //insert respective className
-  let classNameString = ''
-  givenEdgeTypes.forEach((edgeTypeName) => {classNameString += ' ' + edgeTypeName + '-edge'})
-  classNameString = classNameString.slice(1)
+	//insert respective className
+	let classNameString = ''
+	givenEdgeTypes.forEach((edgeTypeName) => {
+		classNameString += ' ' + edgeTypeName + '-edge'
+	})
+	classNameString = classNameString.slice(1)
   
-  return (
-    <>
-    <PathWithMarkerComponent id={standardEdgeInformation.id} edgeTypes={givenEdgeTypes} edgePath={edgePath} visualStateModel={standardEdgeInformation.data?.visualStateModel as VisualStateModel ?? new VisualStateModel()}/>
-    <style>
-      {cssRule}
-    </style>
-    <EdgeLabelRenderer>
-      <div
-      id = {edgeLabelId}
-      style={{
-        position: 'absolute',
-        transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-        fontSize: 12,
-      }}
-      className="nodrag nopan edge-label"
-      >
-          {label}
-      </div>
+	return (
+		<>
+			<PathWithMarkerComponent id={standardEdgeInformation.id} edgeTypes={givenEdgeTypes} edgePath={edgePath} visualStateModel={standardEdgeInformation.data?.visualStateModel as VisualStateModel ?? new VisualStateModel()}/>
+			<style>
+				{cssRule}
+			</style>
+			<EdgeLabelRenderer>
+				<div
+					id = {edgeLabelId}
+					style={{
+						position:  'absolute',
+						transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+						fontSize:  12,
+					}}
+					className="nodrag nopan edge-label"
+				>
+					{label}
+				</div>
       
-    </EdgeLabelRenderer>
-    </>
-  );
+			</EdgeLabelRenderer>
+		</>
+	)
 }
 
 //see also https://en.wikipedia.org/wiki/B%C3%A9zier_curve
@@ -109,27 +113,27 @@ export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = ({s
  * @returns Point on BezierCurve 
  */
 function bezierCurve(t:number, startingPoint:XYPosition, startControlPoint:XYPosition, endControlPoint: XYPosition, endingPoint:XYPosition):XYPosition {
-  return ({
-    x:
+	return ({
+		x:
     ((1 - t) * (1 - t) * (1 - t) * startingPoint.x +
     3 * (1 - t) * (1 - t) * t * startControlPoint.x +
     3 * (1 - t) * t * t * endControlPoint.x +
     t * t * t * endingPoint.x),
-    y:
+		y:
     ((1 - t) * (1 - t) * (1 - t) * startingPoint.y +
     3 * (1 - t) * (1 - t) * t * startControlPoint.y +
     3 * (1 - t) * t * t * endControlPoint.y +
     t * t * t * endingPoint.y)
-  }
-  );
+	}
+	)
 }
 
 function calculateLengthOfBezierCurve(startingPoint:XYPosition, startControlPoint:XYPosition, endControlPoint: XYPosition, endingPoint:XYPosition): number{
-  const rangeForSamplePoints = range(0,1, amountOfSamplePointsForLength, true)
-  const samplePoints = rangeForSamplePoints.map((percentage) => bezierCurve(percentage, startingPoint, startControlPoint, endControlPoint,endingPoint))
-  // approximate length with linear interpolation
-  const intermediateResult = samplePoints.reduce((prev, curr) => ({point: curr, sum: prev.sum + Math.sqrt(Math.pow(curr.x - prev.point.x, 2) + Math.pow(curr.y - prev.point.y, 2))}),{point: startingPoint, sum:0})
-  return intermediateResult.sum
+	const rangeForSamplePoints = range(0,1, amountOfSamplePointsForLength, true)
+	const samplePoints = rangeForSamplePoints.map((percentage) => bezierCurve(percentage, startingPoint, startControlPoint, endControlPoint,endingPoint))
+	// approximate length with linear interpolation
+	const intermediateResult = samplePoints.reduce((prev, curr) => ({ point: curr, sum: prev.sum + Math.sqrt(Math.pow(curr.x - prev.point.x, 2) + Math.pow(curr.y - prev.point.y, 2)) }),{ point: startingPoint, sum: 0 })
+	return intermediateResult.sum
 }
 
 /**
@@ -142,69 +146,69 @@ function calculateLengthOfBezierCurve(startingPoint:XYPosition, startControlPoin
  * @returns point which is approximately t percent through the bezier curve
  */
 function linearPercentageBezierCurve(t:number, startingPoint:XYPosition, startControlPoint:XYPosition, endControlPoint: XYPosition, endingPoint:XYPosition):XYPosition{
-  const curveLengthTotal = calculateLengthOfBezierCurve(startingPoint, startControlPoint, endControlPoint, endingPoint)
-  const rangeForSamplePoints = range(0,1, amountOfSamplePointsForLength, true)
-  let approximatedLength = 0
-  for(let indexOfPercentageArray = 1; indexOfPercentageArray < rangeForSamplePoints.length; indexOfPercentageArray++){
-    const lastPoint = bezierCurve(rangeForSamplePoints[indexOfPercentageArray - 1],startingPoint, startControlPoint, endControlPoint, endingPoint)
-    const currentPoint = bezierCurve(rangeForSamplePoints[indexOfPercentageArray],startingPoint, startControlPoint, endControlPoint, endingPoint)
-    approximatedLength += Math.sqrt(Math.pow(currentPoint.x - lastPoint.x, 2) + Math.pow(currentPoint.y - lastPoint.y, 2))
-    if(approximatedLength / curveLengthTotal >= t){
-      return currentPoint
-    }
-  }
-  return endingPoint
+	const curveLengthTotal = calculateLengthOfBezierCurve(startingPoint, startControlPoint, endControlPoint, endingPoint)
+	const rangeForSamplePoints = range(0,1, amountOfSamplePointsForLength, true)
+	let approximatedLength = 0
+	for(let indexOfPercentageArray = 1; indexOfPercentageArray < rangeForSamplePoints.length; indexOfPercentageArray++){
+		const lastPoint = bezierCurve(rangeForSamplePoints[indexOfPercentageArray - 1],startingPoint, startControlPoint, endControlPoint, endingPoint)
+		const currentPoint = bezierCurve(rangeForSamplePoints[indexOfPercentageArray],startingPoint, startControlPoint, endControlPoint, endingPoint)
+		approximatedLength += Math.sqrt(Math.pow(currentPoint.x - lastPoint.x, 2) + Math.pow(currentPoint.y - lastPoint.y, 2))
+		if(approximatedLength / curveLengthTotal >= t){
+			return currentPoint
+		}
+	}
+	return endingPoint
 }
 
 function range(start: number, end: number, amountOfNumbers:number, includeEnd: boolean): number[]{
-  const divideBy = includeEnd ? (amountOfNumbers - 1) : amountOfNumbers
-  return Array.from(Array(amountOfNumbers).keys()).map((key) => start + (end - start) / divideBy * key)
+	const divideBy = includeEnd ? (amountOfNumbers - 1) : amountOfNumbers
+	return Array.from(Array(amountOfNumbers).keys()).map((key) => start + (end - start) / divideBy * key)
 }
 
 interface BezierCurve {
-  readonly startPoint: XYPosition,
-  readonly controlPointStart:XYPosition,
-  readonly controlPointEnd:XYPosition,
-  readonly endPoint: XYPosition,
+  readonly startPoint:        XYPosition,
+  readonly controlPointStart: XYPosition,
+  readonly controlPointEnd:   XYPosition,
+  readonly endPoint:          XYPosition,
 }
 
 interface PathWithMarkerComponentProps {
-  edgePath: string,
-  edgeTypes: Set<EdgeTypeName>
-  id: string
+  edgePath:         string,
+  edgeTypes:        Set<EdgeTypeName>
+  id:               string
   visualStateModel: VisualStateModel
 }
 
-const edgeTypeNameMap:{[index: string]:string} = {
-  'reads':                   'dotSymbol',
-  'defined-by':              'hexagonHollowSymbol',
-  'calls':                   'starFilledSymbol',
-  'returns':                 'circleHollowSymbol',
-  'defines-on-call':         'rectangleHollowSymbol',
-  'defined-by-on-call':      'rhombusHollowSymbol',
-  'argument':                'triangleHollowSymbol',
-  'side-effect-on-call':     'crossSymbol',
-  'non-standard-evaluation': 'cubeFilledSymbol',
-};
+const edgeTypeNameMap:{[index: string]: string} = {
+	'reads':                   'dotSymbol',
+	'defined-by':              'hexagonHollowSymbol',
+	'calls':                   'starFilledSymbol',
+	'returns':                 'circleHollowSymbol',
+	'defines-on-call':         'rectangleHollowSymbol',
+	'defined-by-on-call':      'rhombusHollowSymbol',
+	'argument':                'triangleHollowSymbol',
+	'side-effect-on-call':     'crossSymbol',
+	'non-standard-evaluation': 'cubeFilledSymbol',
+}
 
 export function edgeTypeToSymbolIdMapper(edgeTag: string): string {
-  return edgeTypeNameMap[edgeTag] ?? '';
+	return edgeTypeNameMap[edgeTag] ?? ''
 }
 
-const edgeTypeNameMarkerMap:{[index: string]:string} = {
-  'reads':                   'dotMarker',
-  'defined-by':              'hexagonHollowMarker',
-  'calls':                   'starFilledMarker',
-  'returns':                 'circleHollowMarker',
-  'defines-on-call':         'rectangleHollowMarker',
-  'defined-by-on-call':      'rhombusHollowMarker',
-  'argument':                'triangleHollowMarker',
-  'side-effect-on-call':     'crossMarker',
-  'non-standard-evaluation': 'cubeFilledMarker',
-};
+const edgeTypeNameMarkerMap:{[index: string]: string} = {
+	'reads':                   'dotMarker',
+	'defined-by':              'hexagonHollowMarker',
+	'calls':                   'starFilledMarker',
+	'returns':                 'circleHollowMarker',
+	'defines-on-call':         'rectangleHollowMarker',
+	'defined-by-on-call':      'rhombusHollowMarker',
+	'argument':                'triangleHollowMarker',
+	'side-effect-on-call':     'crossMarker',
+	'non-standard-evaluation': 'cubeFilledMarker',
+}
 
 export function edgeTypeToMarkerIdMapper(edgeTag: string): string {
-  return edgeTypeNameMarkerMap[edgeTag] ?? '';
+	return edgeTypeNameMarkerMap[edgeTag] ?? ''
 }
 
 /**
@@ -217,23 +221,23 @@ export function edgeTypeToMarkerIdMapper(edgeTag: string): string {
  * @returns Array of two elements where the first is the first part of the split curve and second is last part of the split curve
  */
 function splitSingleBezierCurve(t:number, startingPoint:XYPosition, startControlPoint:XYPosition, endControlPoint: XYPosition, endingPoint:XYPosition):BezierCurve[] {
-  const pointArray: XYPosition[][] = [[],[],[],[]]
-  pointArray[0].push(startingPoint)
-  pointArray[0].push(startControlPoint)
-  pointArray[0].push(endControlPoint)
-  pointArray[0].push(endingPoint)
-
-  for(let algorithmIndex = 1; algorithmIndex <= 3; algorithmIndex++){
-    for(let pointIndex = 0; pointIndex <= 3 - algorithmIndex; pointIndex++){
-      const calcX = pointArray[algorithmIndex - 1][pointIndex].x * (1 - t) + pointArray[algorithmIndex - 1][pointIndex + 1].x * t
-      const calcY = pointArray[algorithmIndex - 1][pointIndex].y * (1 - t) + pointArray[algorithmIndex - 1][pointIndex + 1].y * t 
-      pointArray[algorithmIndex].push({x: calcX, y:calcY}) 
-    }
-  }
-  return ([
-    {startPoint:pointArray[0][0],controlPointStart:pointArray[1][0], controlPointEnd:pointArray[2][0], endPoint:pointArray[3][0]},
-    {startPoint:pointArray[3][0],controlPointStart:pointArray[2][1], controlPointEnd:pointArray[1][2], endPoint:pointArray[0][3]}
-  ])
+	const pointArray: XYPosition[][] = [[],[],[],[]]
+	pointArray[0].push(startingPoint)
+	pointArray[0].push(startControlPoint)
+	pointArray[0].push(endControlPoint)
+	pointArray[0].push(endingPoint)
+
+	for(let algorithmIndex = 1; algorithmIndex <= 3; algorithmIndex++){
+		for(let pointIndex = 0; pointIndex <= 3 - algorithmIndex; pointIndex++){
+			const calcX = pointArray[algorithmIndex - 1][pointIndex].x * (1 - t) + pointArray[algorithmIndex - 1][pointIndex + 1].x * t
+			const calcY = pointArray[algorithmIndex - 1][pointIndex].y * (1 - t) + pointArray[algorithmIndex - 1][pointIndex + 1].y * t 
+			pointArray[algorithmIndex].push({ x: calcX, y: calcY }) 
+		}
+	}
+	return ([
+		{ startPoint: pointArray[0][0],controlPointStart: pointArray[1][0], controlPointEnd: pointArray[2][0], endPoint: pointArray[3][0] },
+		{ startPoint: pointArray[3][0],controlPointStart: pointArray[2][1], controlPointEnd: pointArray[1][2], endPoint: pointArray[0][3] }
+	])
 
 }
 
@@ -248,170 +252,172 @@ function splitSingleBezierCurve(t:number, startingPoint:XYPosition, startControl
  */
 function splitBezierCurve(t:number[], startingPoint:XYPosition, startControlPoint:XYPosition, endControlPoint: XYPosition, endingPoint:XYPosition):BezierCurve[]{
   
-  let A = startingPoint
-  let B = startControlPoint
-  let C = endControlPoint
-  let D = endingPoint
+	let A = startingPoint
+	let B = startControlPoint
+	let C = endControlPoint
+	let D = endingPoint
 
-  const returnArray:BezierCurve[] = []
+	const returnArray:BezierCurve[] = []
 
   
-  //Calculate linear percentages of curves.
-  const linearPercentagePoints: number[] = []
-  const curveLengthTotal = calculateLengthOfBezierCurve(startingPoint, startControlPoint, endControlPoint, endingPoint)
-  const rangeForSamplePoints = range(0,1, amountOfSamplePointsForLength, true)
-  let approximatedLength = 0
-  let indexOfTArray = 0
-  for(let indexOfPercentageArray = 1; indexOfPercentageArray < rangeForSamplePoints.length; indexOfPercentageArray++){
-    const lastPoint = bezierCurve(rangeForSamplePoints[indexOfPercentageArray - 1],startingPoint, startControlPoint, endControlPoint, endingPoint)
-    const currentPoint = bezierCurve(rangeForSamplePoints[indexOfPercentageArray],startingPoint, startControlPoint, endControlPoint, endingPoint)
-    approximatedLength += Math.sqrt(Math.pow(currentPoint.x - lastPoint.x, 2) + Math.pow(currentPoint.y - lastPoint.y, 2))
-    if(approximatedLength / curveLengthTotal >= t[indexOfTArray]){
-      linearPercentagePoints.push(rangeForSamplePoints[indexOfPercentageArray])
-      indexOfTArray++
-      if(indexOfTArray >= t.length){
-        break
-      }
-    }
-  }
-
-  let E: XYPosition = {x: 0, y: 0}
-  let F: XYPosition = {x: 0, y: 0}
-  let G: XYPosition = {x: 0, y: 0}
-  let H: XYPosition = {x: 0, y: 0}
-  let J: XYPosition = {x: 0, y: 0}
-  let K: XYPosition = {x: 0, y: 0}
-
-  let lastBezierCurve:BezierCurve = {startPoint:{x: 0, y: 0}, controlPointStart:{x: 0, y: 0}, controlPointEnd:{x: 0, y: 0}, endPoint:{x: 0, y: 0}}
-  let startPercentage: number = 0
-  for(let percentIndex = 0; percentIndex < linearPercentagePoints.length; percentIndex++){
-    let currentT = (linearPercentagePoints[percentIndex] - startPercentage) / (1 - startPercentage)
+	//Calculate linear percentages of curves.
+	const linearPercentagePoints: number[] = []
+	const curveLengthTotal = calculateLengthOfBezierCurve(startingPoint, startControlPoint, endControlPoint, endingPoint)
+	const rangeForSamplePoints = range(0,1, amountOfSamplePointsForLength, true)
+	let approximatedLength = 0
+	let indexOfTArray = 0
+	for(let indexOfPercentageArray = 1; indexOfPercentageArray < rangeForSamplePoints.length; indexOfPercentageArray++){
+		const lastPoint = bezierCurve(rangeForSamplePoints[indexOfPercentageArray - 1],startingPoint, startControlPoint, endControlPoint, endingPoint)
+		const currentPoint = bezierCurve(rangeForSamplePoints[indexOfPercentageArray],startingPoint, startControlPoint, endControlPoint, endingPoint)
+		approximatedLength += Math.sqrt(Math.pow(currentPoint.x - lastPoint.x, 2) + Math.pow(currentPoint.y - lastPoint.y, 2))
+		if(approximatedLength / curveLengthTotal >= t[indexOfTArray]){
+			linearPercentagePoints.push(rangeForSamplePoints[indexOfPercentageArray])
+			indexOfTArray++
+			if(indexOfTArray >= t.length){
+				break
+			}
+		}
+	}
+
+	const E: XYPosition = { x: 0, y: 0 }
+	const F: XYPosition = { x: 0, y: 0 }
+	const G: XYPosition = { x: 0, y: 0 }
+	const H: XYPosition = { x: 0, y: 0 }
+	const J: XYPosition = { x: 0, y: 0 }
+	const K: XYPosition = { x: 0, y: 0 }
+
+	let lastBezierCurve:BezierCurve = { startPoint: { x: 0, y: 0 }, controlPointStart: { x: 0, y: 0 }, controlPointEnd: { x: 0, y: 0 }, endPoint: { x: 0, y: 0 } }
+	let startPercentage: number = 0
+	for(let percentIndex = 0; percentIndex < linearPercentagePoints.length; percentIndex++){
+		const currentT = (linearPercentagePoints[percentIndex] - startPercentage) / (1 - startPercentage)
     
-    const newCurves = splitSingleBezierCurve(currentT, A, B, C, D)
-    lastBezierCurve = newCurves[1]
+		const newCurves = splitSingleBezierCurve(currentT, A, B, C, D)
+		lastBezierCurve = newCurves[1]
     
-    returnArray.push({
-      startPoint:newCurves[0].startPoint, 
-      controlPointStart: newCurves[0].controlPointStart, 
-      controlPointEnd: newCurves[0].controlPointEnd, 
-      endPoint: newCurves[0].endPoint})
-
-    startPercentage = linearPercentagePoints[percentIndex]
-    A = newCurves[1].startPoint
-    B = newCurves[1].controlPointStart
-    C = newCurves[1].controlPointEnd
-    D = newCurves[1].endPoint
-  }
-
-  returnArray.push({
-    startPoint:lastBezierCurve.startPoint, 
-    controlPointStart: lastBezierCurve.controlPointStart, 
-    controlPointEnd: lastBezierCurve.controlPointEnd, 
-    endPoint: lastBezierCurve.endPoint})
-  return returnArray
+		returnArray.push({
+			startPoint:        newCurves[0].startPoint, 
+			controlPointStart: newCurves[0].controlPointStart, 
+			controlPointEnd:   newCurves[0].controlPointEnd, 
+			endPoint:          newCurves[0].endPoint })
+
+		startPercentage = linearPercentagePoints[percentIndex]
+		A = newCurves[1].startPoint
+		B = newCurves[1].controlPointStart
+		C = newCurves[1].controlPointEnd
+		D = newCurves[1].endPoint
+	}
+
+	returnArray.push({
+		startPoint:        lastBezierCurve.startPoint, 
+		controlPointStart: lastBezierCurve.controlPointStart, 
+		controlPointEnd:   lastBezierCurve.controlPointEnd, 
+		endPoint:          lastBezierCurve.endPoint })
+	return returnArray
 }
 
 /** */
-const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = ({edgePath, edgeTypes, id, visualStateModel}) => {
-  //Parse 4 Points from the calculated bezier curve
-  const pointArray = edgePath.replace('M','').replace('C','').split(' ').map((stringPoint)=> stringPoint.split(',').map((stringNumber) => +stringNumber))
-  const startPointBez = {x: pointArray[0][0], y:pointArray[0][1]}
-  const startControlPointBez = {x: pointArray[1][0], y:pointArray[1][1]}
-  const endControlPointBez = {x: pointArray[2][0], y:pointArray[2][1]}
-  const endPointBez = {x: pointArray[3][0], y:pointArray[3][1]}
-
-  const lengthOfCurve = calculateLengthOfBezierCurve(startPointBez,startControlPointBez,endControlPointBez,endPointBez)
-
-  //check if curve is too small to fit many points
-  let amountOfMarkerPointsInBetween = Math.floor((lengthOfCurve - startEndDistanceToMarkers * 2 - 2 * lengthBetweenMarkerPoints * edgeTypes.size) / lengthBetweenMarkerPoints)
-  if(amountOfMarkerPointsInBetween <= 0){
-    amountOfMarkerPointsInBetween = 0
-  }
-
-  const maximumOfInBetweenPoints = 4
-
-  const individualMarkerPointsInBetween = Math.floor(amountOfMarkerPointsInBetween / edgeTypes.size) > maximumOfInBetweenPoints ? 
-                                          maximumOfInBetweenPoints : 
-                                          Math.floor(amountOfMarkerPointsInBetween / edgeTypes.size) 
-
-  //calculate which symbols need to be on which points
-  //index -> edgeType
-  const markerMap = new Map<number, string>()
-  //index -> positionArray
-  const pointsMap = new Map<number, XYPosition[]>()
-  //index -> bezierCurveArray
-  const curveMap = new Map<number, BezierCurve[]>()
-
-
-  let indexOfMarkerType = 0
-  for(let value of edgeTypes){
-    markerMap.set(indexOfMarkerType, value)
-
-    //evenly space markerPoints
-    let percentageArray: number[] = []
-    if(individualMarkerPointsInBetween === 0){
-      percentageArray = [1 / (1 + edgeTypes.size) * (1 + indexOfMarkerType) ]
-    } else {
-      let nextPoint = (startEndDistanceToMarkers + lengthBetweenMarkerPoints *  indexOfMarkerType)/ lengthOfCurve // first Marker
-      while (nextPoint < 1 - (startEndDistanceToMarkers + lengthBetweenMarkerPoints *  edgeTypes.size)/ lengthOfCurve){
-        percentageArray.push(nextPoint)
-        nextPoint += (edgeTypes.size) * //Correctly jump for each marker
+const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = ({ edgePath, edgeTypes, id, visualStateModel }) => {
+	//Parse 4 Points from the calculated bezier curve
+	const pointArray = edgePath.replace('M','').replace('C','').split(' ').map((stringPoint)=> stringPoint.split(',').map((stringNumber) => +stringNumber))
+	const startPointBez = { x: pointArray[0][0], y: pointArray[0][1] }
+	const startControlPointBez = { x: pointArray[1][0], y: pointArray[1][1] }
+	const endControlPointBez = { x: pointArray[2][0], y: pointArray[2][1] }
+	const endPointBez = { x: pointArray[3][0], y: pointArray[3][1] }
+
+	const lengthOfCurve = calculateLengthOfBezierCurve(startPointBez,startControlPointBez,endControlPointBez,endPointBez)
+
+	//check if curve is too small to fit many points
+	let amountOfMarkerPointsInBetween = Math.floor((lengthOfCurve - startEndDistanceToMarkers * 2 - 2 * lengthBetweenMarkerPoints * edgeTypes.size) / lengthBetweenMarkerPoints)
+	if(amountOfMarkerPointsInBetween <= 0){
+		amountOfMarkerPointsInBetween = 0
+	}
+
+	const maximumOfInBetweenPoints = 4
+
+	const individualMarkerPointsInBetween = Math.floor(amountOfMarkerPointsInBetween / edgeTypes.size) > maximumOfInBetweenPoints ? 
+		maximumOfInBetweenPoints : 
+		Math.floor(amountOfMarkerPointsInBetween / edgeTypes.size) 
+
+	//calculate which symbols need to be on which points
+	//index -> edgeType
+	const markerMap = new Map<number, string>()
+	//index -> positionArray
+	const pointsMap = new Map<number, XYPosition[]>()
+	//index -> bezierCurveArray
+	const curveMap = new Map<number, BezierCurve[]>()
+
+
+	let indexOfMarkerType = 0
+	for(const value of edgeTypes){
+		markerMap.set(indexOfMarkerType, value)
+
+		//evenly space markerPoints
+		let percentageArray: number[] = []
+		if(individualMarkerPointsInBetween === 0){
+			percentageArray = [1 / (1 + edgeTypes.size) * (1 + indexOfMarkerType) ]
+		} else {
+			let nextPoint = (startEndDistanceToMarkers + lengthBetweenMarkerPoints *  indexOfMarkerType)/ lengthOfCurve // first Marker
+			while(nextPoint < 1 - (startEndDistanceToMarkers + lengthBetweenMarkerPoints *  edgeTypes.size)/ lengthOfCurve){
+				percentageArray.push(nextPoint)
+				nextPoint += (edgeTypes.size) * //Correctly jump for each marker
                       (1 - 2 * (startEndDistanceToMarkers + lengthBetweenMarkerPoints * edgeTypes.size) / lengthOfCurve) * // use in between distance as reference 
                       1 / (individualMarkerPointsInBetween * edgeTypes.size + 1) //spacing between points
-      }
-      // last marker
-      nextPoint = 1 - (startEndDistanceToMarkers + lengthBetweenMarkerPoints *  (edgeTypes.size - (indexOfMarkerType + 1)))/ lengthOfCurve 
-      percentageArray.push(nextPoint)
-    }
+			}
+			// last marker
+			nextPoint = 1 - (startEndDistanceToMarkers + lengthBetweenMarkerPoints *  (edgeTypes.size - (indexOfMarkerType + 1)))/ lengthOfCurve 
+			percentageArray.push(nextPoint)
+		}
     
-    //get points on BezierCurve
-    const pointsOnCurve = percentageArray.map((percentage) => linearPercentageBezierCurve(percentage, startPointBez, startControlPointBez, endControlPointBez, endPointBez))
-    pointsMap.set(indexOfMarkerType, pointsOnCurve)
-    curveMap.set(indexOfMarkerType, splitBezierCurve(percentageArray, startPointBez, startControlPointBez, endControlPointBez, endPointBez))
-    indexOfMarkerType += 1
-  }
+		//get points on BezierCurve
+		const pointsOnCurve = percentageArray.map((percentage) => linearPercentageBezierCurve(percentage, startPointBez, startControlPointBez, endControlPointBez, endPointBez))
+		pointsMap.set(indexOfMarkerType, pointsOnCurve)
+		curveMap.set(indexOfMarkerType, splitBezierCurve(percentageArray, startPointBez, startControlPointBez, endControlPointBez, endPointBez))
+		indexOfMarkerType += 1
+	}
    
-  //create use elements
-  let useArray:JSX.Element[] = []
-  markerMap.forEach((edgeType,offsetIndex) => {
-    const pointsOfMarker = pointsMap.get(offsetIndex)
-    const useBlockArray = pointsOfMarker?.map((point) =>{return (<use className = {`${edgeType}-edge-symbol`}key = {id + '-' + point.x + '-' + point.y} id = {id + '-' + point.x + '-' + point.y} href={`#${edgeTypeToSymbolIdMapper(edgeType)}`} x={point.x} y={point.y} />)}) ?? []
-    useArray = useArray.concat(useBlockArray)
-  }) 
+	//create use elements
+	let useArray:JSX.Element[] = []
+	markerMap.forEach((edgeType,offsetIndex) => {
+		const pointsOfMarker = pointsMap.get(offsetIndex)
+		const useBlockArray = pointsOfMarker?.map((point) =>{
+			return (<use className = {`${edgeType}-edge-symbol`}key = {id + '-' + point.x + '-' + point.y} id = {id + '-' + point.x + '-' + point.y} href={`#${edgeTypeToSymbolIdMapper(edgeType)}`} x={point.x} y={point.y} />)
+		}) ?? []
+		useArray = useArray.concat(useBlockArray)
+	}) 
   
-  //create curve
-  const markerEdgeMap: JSX.Element[] = []
+	//create curve
+	const markerEdgeMap: JSX.Element[] = []
   
-  curveMap.forEach((array, index) =>{
-    const firstBezierCurve = array[0]
-    let dOfPath = `M${firstBezierCurve.startPoint.x},${firstBezierCurve.startPoint.y} `
-    array.forEach((curve) => {
-      dOfPath += `C${curve.controlPointStart.x},${curve.controlPointStart.y} ${curve.controlPointEnd.x},${curve.controlPointEnd.y} ${curve.endPoint.x},${curve.endPoint.y} `
-    })
-
-    const edgeType = markerMap.get(index) ?? '' 
-    dOfPath = dOfPath.trimEnd()
-    const pathId = id + `-${edgeType}-marker-edge`
-    const markerEdge = (
-    <path
-      key = {pathId} 
-      id = {pathId}
-      className={'react-flow__edge-path multi-edge' + ` ${edgeType}-edge` + ((visualStateModel.isGreyedOutMap.get(edgeType) ?? false) ? ' legend-passive': '')}
-      d={dOfPath}
-      markerMid = {`url(#${edgeTypeToMarkerIdMapper(edgeType)})`} 
-      markerEnd = {'url(#triangle)'}
-    />
-    )
-    markerEdgeMap.push(markerEdge)
-  })
-  const hoverOverEdgeId = id + '-hoverover-interactive'
-  return (
-  <>
-      <path
-      id={hoverOverEdgeId} //Interaction Edge
-      d={edgePath} 
-      className = 'interactive-edge' 
-    />
-      {markerEdgeMap.map((self) => self)}
-  </>)
+	curveMap.forEach((array, index) =>{
+		const firstBezierCurve = array[0]
+		let dOfPath = `M${firstBezierCurve.startPoint.x},${firstBezierCurve.startPoint.y} `
+		array.forEach((curve) => {
+			dOfPath += `C${curve.controlPointStart.x},${curve.controlPointStart.y} ${curve.controlPointEnd.x},${curve.controlPointEnd.y} ${curve.endPoint.x},${curve.endPoint.y} `
+		})
+
+		const edgeType = markerMap.get(index) ?? '' 
+		dOfPath = dOfPath.trimEnd()
+		const pathId = id + `-${edgeType}-marker-edge`
+		const markerEdge = (
+			<path
+				key = {pathId} 
+				id = {pathId}
+				className={'react-flow__edge-path multi-edge' + ` ${edgeType}-edge` + ((visualStateModel.isGreyedOutMap.get(edgeType) ?? false) ? ' legend-passive': '')}
+				d={dOfPath}
+				markerMid = {`url(#${edgeTypeToMarkerIdMapper(edgeType)})`} 
+				markerEnd = {'url(#triangle)'}
+			/>
+		)
+		markerEdgeMap.push(markerEdge)
+	})
+	const hoverOverEdgeId = id + '-hoverover-interactive'
+	return (
+		<>
+			<path
+				id={hoverOverEdgeId} //Interaction Edge
+				d={edgePath} 
+				className = 'interactive-edge' 
+			/>
+			{markerEdgeMap.map((self) => self)}
+		</>)
 }
diff --git a/source/components/model/edges/nonStandardEvaluationEdge.tsx b/source/components/model/edges/nonStandardEvaluationEdge.tsx
index ae01dc6..4e698b6 100644
--- a/source/components/model/edges/nonStandardEvaluationEdge.tsx
+++ b/source/components/model/edges/nonStandardEvaluationEdge.tsx
@@ -1,12 +1,12 @@
-import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from "./edgeBase"
+import type { EdgeProps } from '@xyflow/react'
+import { BodyEdgeComponent } from './edgeBase'
 
 export function NonStandardEvaluationEdge(props:EdgeProps) {
-    return <BodyEdgeComponent
-      standardEdgeInformation={props}
-      edgeStyle = {{stroke: 'blue', strokeDasharray: '2,3'}}
-      label = 'Non Standard Evaluation'
-      source={props.source}
-      target={props.target}
-    />
-  }
\ No newline at end of file
+	return <BodyEdgeComponent
+		standardEdgeInformation={props}
+		edgeStyle = {{ stroke: 'blue', strokeDasharray: '2,3' }}
+		label = 'Non Standard Evaluation'
+		source={props.source}
+		target={props.target}
+	/>
+}
\ No newline at end of file
diff --git a/source/components/model/edges/readsEdge.tsx b/source/components/model/edges/readsEdge.tsx
index 7812d78..fa322bf 100644
--- a/source/components/model/edges/readsEdge.tsx
+++ b/source/components/model/edges/readsEdge.tsx
@@ -1,16 +1,16 @@
-import { EdgeProps} from '@xyflow/react'
-import { BodyEdgeComponent } from "./edgeBase"
+import type { EdgeProps } from '@xyflow/react'
+import { BodyEdgeComponent } from './edgeBase'
 
 
 export default function ReadsEdge(props: EdgeProps) {
-    return <BodyEdgeComponent
-      standardEdgeInformation={props}
-      edgeStyle = {{stroke: 'black', strokeDasharray: '5,5'}}
-      label = 'reads'
-      arrowEnd = {true}
-      source={props.source}
-      target={props.target}
-    />
-  }
+	return <BodyEdgeComponent
+		standardEdgeInformation={props}
+		edgeStyle = {{ stroke: 'black', strokeDasharray: '5,5' }}
+		label = 'reads'
+		arrowEnd = {true}
+		source={props.source}
+		target={props.target}
+	/>
+}
 
  
\ No newline at end of file
diff --git a/source/components/model/edges/relatesEdge.tsx b/source/components/model/edges/relatesEdge.tsx
index 92bfbe3..b0b7ab8 100644
--- a/source/components/model/edges/relatesEdge.tsx
+++ b/source/components/model/edges/relatesEdge.tsx
@@ -1,12 +1,12 @@
-import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from "./edgeBase"
+import type { EdgeProps } from '@xyflow/react'
+import { BodyEdgeComponent } from './edgeBase'
 
 export function RelatesEdge(props:EdgeProps) {
-    return <BodyEdgeComponent
-      standardEdgeInformation={props}
-      edgeStyle = {{stroke: 'blue', strokeDasharray: '2,3'}}
-      label = 'relates'
-      source={props.source}
-      target={props.target}
-    />
-  }
\ No newline at end of file
+	return <BodyEdgeComponent
+		standardEdgeInformation={props}
+		edgeStyle = {{ stroke: 'blue', strokeDasharray: '2,3' }}
+		label = 'relates'
+		source={props.source}
+		target={props.target}
+	/>
+}
\ No newline at end of file
diff --git a/source/components/model/edges/returnsEdge.tsx b/source/components/model/edges/returnsEdge.tsx
index f5a1fd8..5a39e10 100644
--- a/source/components/model/edges/returnsEdge.tsx
+++ b/source/components/model/edges/returnsEdge.tsx
@@ -1,13 +1,13 @@
-import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from "./edgeBase"
+import type { EdgeProps } from '@xyflow/react'
+import { BodyEdgeComponent } from './edgeBase'
 
 export function ReturnsEdge(props:EdgeProps) {
-    return <BodyEdgeComponent
-      standardEdgeInformation={props}
-      edgeStyle = {{stroke: 'blue', strokeDasharray: '4,7'}}
-      label = 'returns'
-      arrowEnd = {true}
-      source={props.source}
-      target={props.target}
-    />
-  }
\ No newline at end of file
+	return <BodyEdgeComponent
+		standardEdgeInformation={props}
+		edgeStyle = {{ stroke: 'blue', strokeDasharray: '4,7' }}
+		label = 'returns'
+		arrowEnd = {true}
+		source={props.source}
+		target={props.target}
+	/>
+}
\ No newline at end of file
diff --git a/source/components/model/edges/sameDefDefEdge.tsx b/source/components/model/edges/sameDefDefEdge.tsx
index 6a91597..7aa8a4d 100644
--- a/source/components/model/edges/sameDefDefEdge.tsx
+++ b/source/components/model/edges/sameDefDefEdge.tsx
@@ -1,12 +1,12 @@
-import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from "./edgeBase"
+import type { EdgeProps } from '@xyflow/react'
+import { BodyEdgeComponent } from './edgeBase'
 
 export function SameDefDefEdge(props:EdgeProps) {
-    return <BodyEdgeComponent
-      standardEdgeInformation={props}
-      edgeStyle = {{stroke: 'blue', strokeDasharray: '2,7'}}
-      label = 'same-def-def'
-      source={props.source}
-      target={props.target}
-    />
-  }
\ No newline at end of file
+	return <BodyEdgeComponent
+		standardEdgeInformation={props}
+		edgeStyle = {{ stroke: 'blue', strokeDasharray: '2,7' }}
+		label = 'same-def-def'
+		source={props.source}
+		target={props.target}
+	/>
+}
\ No newline at end of file
diff --git a/source/components/model/edges/sameReadReadEdge.tsx b/source/components/model/edges/sameReadReadEdge.tsx
index f0ea8ad..91c8570 100644
--- a/source/components/model/edges/sameReadReadEdge.tsx
+++ b/source/components/model/edges/sameReadReadEdge.tsx
@@ -1,12 +1,12 @@
-import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from "./edgeBase"
+import type { EdgeProps } from '@xyflow/react'
+import { BodyEdgeComponent } from './edgeBase'
 
 export function SameReadReadEdge(props:EdgeProps) {
-    return <BodyEdgeComponent
-      standardEdgeInformation={props}
-      edgeStyle = {{stroke: 'grey', strokeDasharray: '2,5'}}
-      label = 'same-read-read'
-      source={props.source}
-      target={props.target}
-    />
-  }
\ No newline at end of file
+	return <BodyEdgeComponent
+		standardEdgeInformation={props}
+		edgeStyle = {{ stroke: 'grey', strokeDasharray: '2,5' }}
+		label = 'same-read-read'
+		source={props.source}
+		target={props.target}
+	/>
+}
\ No newline at end of file
diff --git a/source/components/model/edges/sideEffectOnCallEdge.tsx b/source/components/model/edges/sideEffectOnCallEdge.tsx
index 267940d..d5317ec 100644
--- a/source/components/model/edges/sideEffectOnCallEdge.tsx
+++ b/source/components/model/edges/sideEffectOnCallEdge.tsx
@@ -1,12 +1,12 @@
-import { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from "./edgeBase"
+import type { EdgeProps } from '@xyflow/react'
+import { BodyEdgeComponent } from './edgeBase'
 
 export function SideEffectOnCallEdge(props:EdgeProps) {
-    return <BodyEdgeComponent
-      standardEdgeInformation={props}
-      edgeStyle = {{stroke: 'blue'}}
-      label = 'side-effect-on-call'
-      source={props.source}
-      target={props.target}
-    />
-  }
\ No newline at end of file
+	return <BodyEdgeComponent
+		standardEdgeInformation={props}
+		edgeStyle = {{ stroke: 'blue' }}
+		label = 'side-effect-on-call'
+		source={props.source}
+		target={props.target}
+	/>
+}
\ No newline at end of file
diff --git a/source/components/model/graph.ts b/source/components/model/graph.ts
index aadc851..ce38150 100644
--- a/source/components/model/graph.ts
+++ b/source/components/model/graph.ts
@@ -1,11 +1,11 @@
-import { Edge, Node } from '@xyflow/react';
+import type { Edge, Node } from '@xyflow/react'
 
 export interface VisualizationGraph {
     nodesInfo: NodeInformation
-    edges: Edge[]
+    edges:     Edge[]
 }
 
 export interface NodeInformation{
-    nodes: Node[],
+    nodes:   Node[],
     nodeMap: Map<string, Node>
 }
\ No newline at end of file
diff --git a/source/components/model/graphBuilder.ts b/source/components/model/graphBuilder.ts
index d6db46f..ca16cb9 100644
--- a/source/components/model/graphBuilder.ts
+++ b/source/components/model/graphBuilder.ts
@@ -1,78 +1,79 @@
-import { Edge, Node } from '@xyflow/react';
-import { VisualizationGraph } from "./graph";
-import { EdgeTypeName, edgeTypesToNames } from "@eagleoutice/flowr/dataflow/graph/edge";
-import { NodeId } from "@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/node-id";
-import { NormalizedAst, ParentInformation } from "@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/decorate";
-import { visitAst } from "@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/visitor";
-import { RNode } from "@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/model";
+import type { Edge, Node } from '@xyflow/react'
+import type { VisualizationGraph } from './graph'
+import { EdgeTypeName, edgeTypesToNames } from '@eagleoutice/flowr/dataflow/graph/edge'
+import type { NodeId } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/node-id'
+import type { ParentInformation } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/decorate'
+import { NormalizedAst } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/decorate'
+import { visitAst } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/visitor'
+import type { RNode } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/model'
 
 export interface Graph {
-    rootVertices: Set<string>,
+    rootVertices:      Set<string>,
     vertexInformation: Map<string, {name: string, tag: string}>,
-    edgeInformation: Map<string, Map<string, {types: {[key: string]: string}}>>
+    edgeInformation:   Map<string, Map<string, {types: {[key: string]: string}}>>
 }
 
 export interface OtherGraph{
-    "rootVertices": number[]
-    "vertexInformation": [number, VertexInfo][]
-    "edgeInformation": [number, [number, EdgeInfo][]][]
-    "_idMap": IdMapInfo,
-    "functionCache"?: any
+    'rootVertices':      number[]
+    'vertexInformation': [number, VertexInfo][]
+    'edgeInformation':   [number, [number, EdgeInfo][]][]
+    '_idMap':            IdMapInfo,
+    'functionCache'?:    any
 }
 
 export interface IdMapInfo{
-    "size": number,
-    "k2v": [number | string, VertexMapInfo][],
-    "v2k": any
+    'size': number,
+    'k2v':  [number | string, VertexMapInfo][],
+    'v2k':  any
 }
 
 export interface VertexMapInfo{
-    "type": string,
-    "location"?: number[],
-    "content"?: any,
-    "lexeme"?: string,
-    "info": any,
-    "lhs"?: any,
-    "rhs"?: any,
-    "operator"?:any,
-    "children"?: any
+    'type':      string,
+    'location'?: number[],
+    'content'?:  any,
+    'lexeme'?:   string,
+    'info':      any,
+    'lhs'?:      any,
+    'rhs'?:      any,
+    'operator'?: any,
+    'children'?: any
 }
 
 export interface VertexInfo{
-    "tag": string,
-    "id": number,
-    "onlyBuiltin"?: boolean,
-    "name"?: string,
-    "environment"?: any,
-    "when"?: string,
-    "args"?:any,
-    "subflow"?: SubFlowInfo
+    'tag':          string,
+    'id':           number,
+    'onlyBuiltin'?: boolean,
+    'name'?:        string,
+    'environment'?: any,
+    'when'?:        string,
+    'args'?:        any,
+    'subflow'?:     SubFlowInfo
 }
 
 interface SubFlowInfo {
-    "graph": number[]
+    'graph': number[]
 }
 
 export interface EdgeInfo{
-    "types": number,
-    "attribute"?: string
+    'types':      number,
+    'attribute'?: string
 }
 
 function constructLexemeMapping(ast: RNode<ParentInformation>): Map<NodeId, string> {
-    const infoMap = new Map<NodeId, string>()
-    visitAst(ast, node => {
-        if(node.lexeme !== undefined){
-            infoMap.set(node.info.id, node.lexeme)
-        }
-    })
+	const infoMap = new Map<NodeId, string>()
+	visitAst(ast, node => {
+		if(node.lexeme !== undefined){
+			infoMap.set(node.info.id, node.lexeme)
+		}
+	})
     
-    return infoMap
+	return infoMap
 }
 
 export interface VisualizationNodeProps extends Record<string, unknown> { 
-    label: string
-    nodeType:string
-    extent?: string
+    label:     string
+    nodeType:  string
+    extent?:   string
     parentId?: string
     children?: string[]
 }
@@ -80,74 +81,74 @@ export interface VisualizationNodeProps extends Record<string, unknown> {
 
 export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInformation>, dataflowGraph: OtherGraph): VisualizationGraph {
 
-    const infoMap = constructLexemeMapping(ast);
+	const infoMap = constructLexemeMapping(ast)
 
-    const subflowMap = new Map<number, number>()
+	const subflowMap = new Map<number, number>()
 
-    const nodeIdMap = new Map<string, Node<VisualizationNodeProps>>()
+	const nodeIdMap = new Map<string, Node<VisualizationNodeProps>>()
     
-    const visualizationGraph: VisualizationGraph = {nodesInfo : {nodes:[], nodeMap:nodeIdMap}, edges: [],}
-
-    //Construct subflow Map and nodeId Map
-    for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation){
-        /* position will be set by the layout later */
-        const nodeInfoInfo = nodeInfo
-        if(nodeInfoInfo.tag ==='function-definition' && nodeInfoInfo.subflow !== undefined){
-            const subflowArray = nodeInfoInfo.subflow.graph
-            subflowArray.forEach((subNode) => {
-                subflowMap.set(subNode,nodeId)
-            })
+	const visualizationGraph: VisualizationGraph = { nodesInfo: { nodes: [], nodeMap: nodeIdMap }, edges: [], }
+
+	//Construct subflow Map and nodeId Map
+	for(const [nodeId, nodeInfo] of dataflowGraph.vertexInformation){
+		/* position will be set by the layout later */
+		const nodeInfoInfo = nodeInfo
+		if(nodeInfoInfo.tag ==='function-definition' && nodeInfoInfo.subflow !== undefined){
+			const subflowArray = nodeInfoInfo.subflow.graph
+			subflowArray.forEach((subNode) => {
+				subflowMap.set(subNode,nodeId)
+			})
             
-            const idNewNode = String(nodeId) //+ '-subflow-node'
-            const newNode: Node<VisualizationNodeProps> = {
-                id: idNewNode,
-                data: {label: infoMap.get(nodeId) ?? '', nodeType: nodeInfoInfo.tag, children:[]},
-                position: { x: 0, y: 0 },
-                connectable: false,
-                dragging: true,
-                selectable: true,
-                type: nodeTagMapper(nodeInfoInfo.tag)
-            }
-            visualizationGraph.nodesInfo.nodes.push(newNode)
-            nodeIdMap.set(idNewNode, newNode)
-        }
-    }
-
-    //Construct Nodes
-    for(let [nodeId, nodeInfo] of dataflowGraph.vertexInformation){
-        /* position will be set by the layout later */
-        const nodeInfoInfo = nodeInfo
+			const idNewNode = String(nodeId) //+ '-subflow-node'
+			const newNode: Node<VisualizationNodeProps> = {
+				id:          idNewNode,
+				data:        { label: infoMap.get(nodeId) ?? '', nodeType: nodeInfoInfo.tag, children: [] },
+				position:    { x: 0, y: 0 },
+				connectable: false,
+				dragging:    true,
+				selectable:  true,
+				type:        nodeTagMapper(nodeInfoInfo.tag)
+			}
+			visualizationGraph.nodesInfo.nodes.push(newNode)
+			nodeIdMap.set(idNewNode, newNode)
+		}
+	}
+
+	//Construct Nodes
+	for(const [nodeId, nodeInfo] of dataflowGraph.vertexInformation){
+		/* position will be set by the layout later */
+		const nodeInfoInfo = nodeInfo
         
-        const idNewNode = String(nodeId)
-        const newNode: Node<VisualizationNodeProps> = {
-            id: idNewNode,
-            data: {label: infoMap.get(nodeId) ?? '', nodeType: nodeInfoInfo.tag},
-            position: { x: 0, y: 0 },
-            connectable: false,
-            dragging: true,
-            selectable: true,
-            type: nodeTagMapper(nodeInfoInfo.tag),
-        }
+		const idNewNode = String(nodeId)
+		const newNode: Node<VisualizationNodeProps> = {
+			id:          idNewNode,
+			data:        { label: infoMap.get(nodeId) ?? '', nodeType: nodeInfoInfo.tag },
+			position:    { x: 0, y: 0 },
+			connectable: false,
+			dragging:    true,
+			selectable:  true,
+			type:        nodeTagMapper(nodeInfoInfo.tag),
+		}
 
         
-        if(!nodeIdMap.has(idNewNode)){
-            nodeIdMap.set(idNewNode, newNode)
-            visualizationGraph.nodesInfo.nodes.push(newNode)
-        }
+		if(!nodeIdMap.has(idNewNode)){
+			nodeIdMap.set(idNewNode, newNode)
+			visualizationGraph.nodesInfo.nodes.push(newNode)
+		}
         
-        if(subflowMap.has(nodeId)){
-            const toAlterNode = nodeIdMap.get(idNewNode)
-            const parentId = String(subflowMap.get(nodeId))
+		if(subflowMap.has(nodeId)){
+			const toAlterNode = nodeIdMap.get(idNewNode)
+			const parentId = String(subflowMap.get(nodeId))
             toAlterNode!.data = {
-                ...toAlterNode!.data,
-                parentId: parentId,
-                extent: 'parent'
+            	...toAlterNode!.data,
+            	parentId: parentId,
+            	extent:   'parent'
             }
             nodeIdMap.get(parentId)?.data.children?.push(idNewNode)
-        }
+		}
         
         
-        /*
+		/*
         if(subflowMap.has(nodeId)){
             const parentId = String(subflowMap.get(nodeId)) + '-subflow-node'
             const idNewNode = String(nodeId)
@@ -178,41 +179,41 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
             nodeIdMap.set(idNewNode, newNode)
         }
         */
-    }
-
-    //construct Edges
-    for( let [sourceNodeId, listOfConnectedNodes] of dataflowGraph.edgeInformation){
-        const listOfConnectedNodes2 = listOfConnectedNodes
-        for(let [targetNodeId, targetNodeInfo] of listOfConnectedNodes2){
-            const listOfEdgeTypes = edgeTypesToNames(targetNodeInfo.types)
-            let labelNames:string = ''
-            let lastEdgeType:string = ''
-            for( let linkEdgeType of listOfEdgeTypes){
-                labelNames += linkEdgeType + ' '
-                lastEdgeType = linkEdgeType
-            }
-            const newEdge: Edge = {
-                source: String(sourceNodeId),
-                target: String(targetNodeId),
-                id: `edge-${sourceNodeId}-${targetNodeId}`,
-                label: labelNames,
-                data: { label: labelNames, edgeType: 'multiEdge' , edgeTypes: listOfEdgeTypes }
-            }
-            visualizationGraph.edges.push(newEdge)
-        }
-    }
-    return visualizationGraph
+	}
+
+	//construct Edges
+	for( const [sourceNodeId, listOfConnectedNodes] of dataflowGraph.edgeInformation){
+		const listOfConnectedNodes2 = listOfConnectedNodes
+		for(const [targetNodeId, targetNodeInfo] of listOfConnectedNodes2){
+			const listOfEdgeTypes = edgeTypesToNames(targetNodeInfo.types)
+			let labelNames:string = ''
+			let lastEdgeType:string = ''
+			for( const linkEdgeType of listOfEdgeTypes){
+				labelNames += linkEdgeType + ' '
+				lastEdgeType = linkEdgeType
+			}
+			const newEdge: Edge = {
+				source: String(sourceNodeId),
+				target: String(targetNodeId),
+				id:     `edge-${sourceNodeId}-${targetNodeId}`,
+				label:  labelNames,
+				data:   { label: labelNames, edgeType: 'multiEdge' , edgeTypes: listOfEdgeTypes }
+			}
+			visualizationGraph.edges.push(newEdge)
+		}
+	}
+	return visualizationGraph
 }
 
 function nodeTagMapper(type: string):string{
-    return nodeTagMap[type] ?? ''
+	return nodeTagMap[type] ?? ''
 }
 
-const nodeTagMap:{[index: string]:string} = {
-    'use':                  'useNode',
-    'variable-definition':  'variableDefinitionNode',
-    'function-call':        'functionCallNode',
-    'function-definition':  'functionDefinitionNode',
-    'exit-point':           'exitPointNode',
-    'value':                'valueNode'
+const nodeTagMap:{[index: string]: string} = {
+	'use':                 'useNode',
+	'variable-definition': 'variableDefinitionNode',
+	'function-call':       'functionCallNode',
+	'function-definition': 'functionDefinitionNode',
+	'exit-point':          'exitPointNode',
+	'value':               'valueNode'
 }
\ No newline at end of file
diff --git a/source/components/model/graphTransition.ts b/source/components/model/graphTransition.ts
index 00b582b..7873ee8 100644
--- a/source/components/model/graphTransition.ts
+++ b/source/components/model/graphTransition.ts
@@ -1,60 +1,60 @@
-import { ElkExtendedEdge, ElkNode, LayoutOptions } from "elkjs";
-import { flattenToNodeArray, foldIntoElkHierarchy} from "../graphHierarchy";
-import { Edge, Node } from '@xyflow/react'
-import { edgeTagMapper } from "./edges/edgeBase";
-import { VisualStateModel } from "./visualStateModel";
+import type { ElkExtendedEdge, ElkNode, LayoutOptions } from 'elkjs'
+import { flattenToNodeArray, foldIntoElkHierarchy } from '../graphHierarchy'
+import type { Edge, Node } from '@xyflow/react'
+import { edgeTagMapper } from './edges/edgeBase'
+import type { VisualStateModel } from './visualStateModel'
 
 export function transformGraphForLayouting(nodes: Node[], nodeIdMap: Map<string,Node>, edges: ElkExtendedEdge[], options: LayoutOptions, isHorizontal: boolean):ElkNode{
-  const toReturn: ElkNode = {
-    id: 'root',
-    layoutOptions: options,
-    children: foldIntoElkHierarchy(nodes, nodeIdMap, isHorizontal),
-    edges: edges
-    };
+	const toReturn: ElkNode = {
+		id:            'root',
+		layoutOptions: options,
+		children:      foldIntoElkHierarchy(nodes, nodeIdMap, isHorizontal),
+		edges:         edges
+	}
 
-  return toReturn
+	return toReturn
 }
 
 
 export interface ExtendedExtendedEdge extends ElkExtendedEdge{
-  data:any
+  data:     any
   edgeType: string
-  label:string
+  label:    string
 }
 
 export function transformGraphForShowing(layoutedGraph: ElkNode, isHorizontal: boolean, visualStateModel: VisualStateModel): { nodes: Node[]; edges: Edge[] }{
   
-  const newNodes = flattenToNodeArray(layoutedGraph.children ?? [])
+	const newNodes = flattenToNodeArray(layoutedGraph.children ?? [])
 
-  //reset node height and width so they will be correctly calculated and set afterwards
+	//reset node height and width so they will be correctly calculated and set afterwards
   
-  newNodes.forEach((node) => {
-    delete node['height']
-    delete node['width']
-    node.data = {...node.data, visualStateModel: visualStateModel}
+	newNodes.forEach((node) => {
+		delete node['height']
+		delete node['width']
+		node.data = { ...node.data, visualStateModel: visualStateModel }
     
-    //size needs to be defined for size of function definiton to make sense
-    if(node.data.nodeType === 'function-definition'){
-      node.width = node.data.estimatedMaxX - node.data.estimatedMinX
-      node.height = node.data.estimatedMaxY - node.data.estimatedMinY
-    }
-  })
+		//size needs to be defined for size of function definiton to make sense
+		if(node.data.nodeType === 'function-definition'){
+			node.width = node.data.estimatedMaxX - node.data.estimatedMinX
+			node.height = node.data.estimatedMaxY - node.data.estimatedMinY
+		}
+	})
   
-  return {
-    nodes: newNodes,
-    edges: (layoutedGraph.edges as ExtendedExtendedEdge[] ?? []).map(e => { 
-      return {
-      id: e.id,
-      source: e.sources[0],
-      target: e.targets[0],
-      sourceHandle: isHorizontal ? 'right' : 'bottom',
-      targetHandle: isHorizontal ? 'left' : 'top',
-      label: e.label,
-      //animated: true,
-      //style: { stroke: '#000' },
-      type: edgeTagMapper(e.edgeType),
-      data: { ...e.data, isHovered: false, visualStateModel: visualStateModel}
-      };
-    })
-  }
+	return {
+		nodes: newNodes,
+		edges: (layoutedGraph.edges as ExtendedExtendedEdge[] ?? []).map(e => { 
+			return {
+				id:           e.id,
+				source:       e.sources[0],
+				target:       e.targets[0],
+				sourceHandle: isHorizontal ? 'right' : 'bottom',
+				targetHandle: isHorizontal ? 'left' : 'top',
+				label:        e.label,
+				//animated: true,
+				//style: { stroke: '#000' },
+				type:         edgeTagMapper(e.edgeType),
+				data:         { ...e.data, isHovered: false, visualStateModel: visualStateModel }
+			}
+		})
+	}
 }
\ No newline at end of file
diff --git a/source/components/model/nodes/handleNodeComponent.tsx b/source/components/model/nodes/handleNodeComponent.tsx
index 4ec7a41..649f64a 100644
--- a/source/components/model/nodes/handleNodeComponent.tsx
+++ b/source/components/model/nodes/handleNodeComponent.tsx
@@ -1,15 +1,15 @@
-import { Handle, NodeProps, Position } from '@xyflow/react';
+import { Handle, NodeProps, Position } from '@xyflow/react'
 
  interface HandleNodeComponentProps {
-   targetHandleId:string
-   sourceHandleId:string
+   targetHandleId: string
+   sourceHandleId: string
 }
 
 export const HandleNodeComponent:React.FC<React.PropsWithChildren<HandleNodeComponentProps>> = (props) => {
-   return (<>
-      <Handle id = {'top'} type="target" position={Position.Top} isConnectable={false} className="node-handle"/>
-      {props.children}
-      <Handle id = {'bottom'} type="source" position={Position.Bottom} isConnectable={false} className="node-handle" />
-   </>)
+	return (<>
+		<Handle id = {'top'} type="target" position={Position.Top} isConnectable={false} className="node-handle"/>
+		{props.children}
+		<Handle id = {'bottom'} type="source" position={Position.Bottom} isConnectable={false} className="node-handle" />
+	</>)
 }
 
diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/nodeDefinition.tsx
index 83ae8ed..796bb77 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/nodeDefinition.tsx
@@ -1,132 +1,132 @@
-import { ConnectionLineComponentProps, Node, NodeProps , NodeResizer, Position, useUpdateNodeInternals} from '@xyflow/react'
-import { HandleNodeComponent } from "./handleNodeComponent"
-import React, { useState } from "react";
-import { ProgressPlugin } from "webpack";
+import type { ConnectionLineComponentProps, Node, NodeProps } from '@xyflow/react'
+import { NodeResizer, Position, useUpdateNodeInternals , getBezierPath } from '@xyflow/react'
+import { HandleNodeComponent } from './handleNodeComponent'
+import React, { useState } from 'react'
+import { ProgressPlugin } from 'webpack'
 
-import { getBezierPath } from '@xyflow/react';
-import { getEdgeParams } from "../edges/edgeBase";
-import { VisualStateModel } from '../visualStateModel';
+import { getEdgeParams } from '../edges/edgeBase'
+import { VisualStateModel } from '../visualStateModel'
 
 
 function FloatingConnectionLine(props:ConnectionLineComponentProps) {
-  const { toX, toY, fromPosition, toPosition, fromNode} = props
+	const { toX, toY, fromPosition, toPosition, fromNode } = props
   
-  if (!fromNode) {
-    return null;
-  }
-
-  const targetNode: Node = {
-    id: 'connection-target',
-    width: 1,
-    height: 1,
-    position: {x: toX, y: toY},
-    data:{}
-  };
-
-  const { sourceX, sourceY } = getEdgeParams(fromNode, targetNode, false);
-  const [edgePath] = getBezierPath({
-    sourceX: sourceX,
-    sourceY: sourceY,
-    sourcePosition: fromPosition,
-    targetPosition: toPosition,
-    targetX: toX,
-    targetY: toY
-  });
-
-  return (
-      <g>
-        <path
-            fill="none"
-            stroke="#222"
-            strokeWidth={1.5}
-            className="animated"
-            d={edgePath}
-        />
-        <circle
-            cx={toX}
-            cy={toY}
-            fill="#fff"
-            r={3}
-            stroke="#222"
-            strokeWidth={1.5}
-        />
-      </g>
-  );
+	if(!fromNode) {
+		return null
+	}
+
+	const targetNode: Node = {
+		id:       'connection-target',
+		width:    1,
+		height:   1,
+		position: { x: toX, y: toY },
+		data:     {}
+	}
+
+	const { sourceX, sourceY } = getEdgeParams(fromNode, targetNode, false)
+	const [edgePath] = getBezierPath({
+		sourceX:        sourceX,
+		sourceY:        sourceY,
+		sourcePosition: fromPosition,
+		targetPosition: toPosition,
+		targetX:        toX,
+		targetY:        toY
+	})
+
+	return (
+		<g>
+			<path
+				fill="none"
+				stroke="#222"
+				strokeWidth={1.5}
+				className="animated"
+				d={edgePath}
+			/>
+			<circle
+				cx={toX}
+				cy={toY}
+				fill="#fff"
+				r={3}
+				stroke="#222"
+				strokeWidth={1.5}
+			/>
+		</g>
+	)
 }
 
-export default FloatingConnectionLine;
+export default FloatingConnectionLine
 
 
 
 
 interface BodyNodeComponentProps{
   readonly className: string
-  readonly data: NodeProps['data']
+  readonly data:      NodeProps['data']
 }
 
 interface NodeComponentProps {
   readonly data: NodeProps['data']
 }
 
-const BodyNodeComponent: React.FC<BodyNodeComponentProps> = ({data, className}) => {
-  const visualStateModel = data.visualStateModel as VisualStateModel ?? new VisualStateModel()
-  const isGreyedOut = visualStateModel.isGreyedOutMap.get(data.nodeType as string ?? '') ?? false
-  const bodyClassName = className + (isGreyedOut ? ' legend-passive' : '')
-  const shownLabel = data.label as string + (data.isNodeIdShown ? ' (' + data.id + ')': '')
-  return (
-    <HandleNodeComponent targetHandleId={data.id as string + '-targetHandle'} sourceHandleId={data.id as string + '-sourceHandle'}>
-      <div className = {bodyClassName} id={`in-graph-node-${data.id}`}>
-        <HoverOverComponent name={data.label as string} id={data.id as string} nodeType= {data.nodeType as string}/>
-        <label htmlFor="text">{shownLabel}</label>
-      </div>
-    </HandleNodeComponent>
-  )
+const BodyNodeComponent: React.FC<BodyNodeComponentProps> = ({ data, className }) => {
+	const visualStateModel = data.visualStateModel as VisualStateModel ?? new VisualStateModel()
+	const isGreyedOut = visualStateModel.isGreyedOutMap.get(data.nodeType as string ?? '') ?? false
+	const bodyClassName = className + (isGreyedOut ? ' legend-passive' : '')
+	const shownLabel = data.label as string + (data.isNodeIdShown ? ' (' + data.id + ')': '')
+	return (
+		<HandleNodeComponent targetHandleId={data.id as string + '-targetHandle'} sourceHandleId={data.id as string + '-sourceHandle'}>
+			<div className = {bodyClassName} id={`in-graph-node-${data.id}`}>
+				<HoverOverComponent name={data.label as string} id={data.id as string} nodeType= {data.nodeType as string}/>
+				<label htmlFor="text">{shownLabel}</label>
+			</div>
+		</HandleNodeComponent>
+	)
 }
 
 interface HoverOverComponentProps{
-  readonly name: string,
-  readonly id: string,
+  readonly name:     string,
+  readonly id:       string,
   readonly nodeType: string
 }
-export const HoverOverComponent: React.FC<HoverOverComponentProps> = ({name, id , nodeType}) => {
-  return (
-    <span className='hover-over-text'>
-      <div className='one-line'>name:{name}</div><br/>
-      <div className='one-line'>id:{id}</div><br/>
-      <div className='one-line'>nodeType:{nodeType}</div><br/>
-    </span>
-  )
+export const HoverOverComponent: React.FC<HoverOverComponentProps> = ({ name, id , nodeType }) => {
+	return (
+		<span className='hover-over-text'>
+			<div className='one-line'>name:{name}</div><br/>
+			<div className='one-line'>id:{id}</div><br/>
+			<div className='one-line'>nodeType:{nodeType}</div><br/>
+		</span>
+	)
 }
 
 export const VariableDefinitionNode: React.FC<NodeComponentProps> = ({ data }) => {
-  return <BodyNodeComponent data={data} className='variable-definition-node base-node'/>
+	return <BodyNodeComponent data={data} className='variable-definition-node base-node'/>
 }
 
 export const UseNode: React.FC<NodeComponentProps> = ({ data }) => {
-  return <BodyNodeComponent data={data} className='use-node base-node'/>
+	return <BodyNodeComponent data={data} className='use-node base-node'/>
 }
 
 export const FunctionCallNode: React.FC<NodeComponentProps> = ({ data }) => {
-  return <BodyNodeComponent data={data} className='function-call-node base-node'/>
+	return <BodyNodeComponent data={data} className='function-call-node base-node'/>
 }
 
 
 export const FunctionDefinitionNode: React.FC<NodeProps> = ({ data, selected }) => {
-  const {estimatedMinX, estimatedMinY, estimatedMaxX, estimatedMaxY} = data as {
+	const { estimatedMinX, estimatedMinY, estimatedMaxX, estimatedMaxY } = data as {
     estimatedMinX: number,
     estimatedMinY: number,
     estimatedMaxX: number,
     estimatedMaxY: number
   }
-  const divStyle: React.CSSProperties = {}
-  divStyle.width = estimatedMaxX - estimatedMinX
-  divStyle.height = estimatedMaxY - estimatedMinY
-  const minWidth = estimatedMaxX - estimatedMinX
-  const minHeight = estimatedMaxY - estimatedMinY
-  //<NodeResizer minWidth={minWidth} minHeight={minHeight}/>
-  // style = {divStyle}
-  // style={{ height: '100%', width:'100%'}}
-  /* 
+	const divStyle: React.CSSProperties = {}
+	divStyle.width = estimatedMaxX - estimatedMinX
+	divStyle.height = estimatedMaxY - estimatedMinY
+	const minWidth = estimatedMaxX - estimatedMinX
+	const minHeight = estimatedMaxY - estimatedMinY
+	//<NodeResizer minWidth={minWidth} minHeight={minHeight}/>
+	// style = {divStyle}
+	// style={{ height: '100%', width:'100%'}}
+	/* 
     <HandleNodeComponent targetHandleId={data.id as string + '-targetHandle'} sourceHandleId={data.id as string + '-sourceHandle'}>
       <div className = 'function-definition-node base-node' >
         <HoverOverComponent name={data.label as string} id={data.id as string} nodeType= {data.nodeType as string}/>
@@ -135,38 +135,38 @@ export const FunctionDefinitionNode: React.FC<NodeProps> = ({ data, selected })
     </HandleNodeComponent>
   */
 
-  return (
-    <>
-    <NodeResizer lineClassName='function-definition-node function-definition-node-resizer-line' handleClassName='function-definition-node function-definition-node-resizer-edge-dot' />
-    <BodyNodeComponent data = {data} className='function-definition-node base-node'/>
-    </>
-  )
+	return (
+		<>
+			<NodeResizer lineClassName='function-definition-node function-definition-node-resizer-line' handleClassName='function-definition-node function-definition-node-resizer-edge-dot' />
+			<BodyNodeComponent data = {data} className='function-definition-node base-node'/>
+		</>
+	)
 }
 
 
 export const ExitPointNode: React.FC<NodeComponentProps> = ({ data }) => {
-  return <BodyNodeComponent data={data} className='exit-point-node base-node'/>
+	return <BodyNodeComponent data={data} className='exit-point-node base-node'/>
 }
 
 export const ValueNode: React.FC<NodeComponentProps> = ({ data }) => {
-  return <BodyNodeComponent data={data} className='value-node base-node'/>
+	return <BodyNodeComponent data={data} className='value-node base-node'/>
 }
 
 export const GroupNode: React.FC<NodeComponentProps> = ({ data }) => {
-  const {estimatedMinX, estimatedMinY, estimatedMaxX, estimatedMaxY} = data as {
+	const { estimatedMinX, estimatedMinY, estimatedMaxX, estimatedMaxY } = data as {
     estimatedMinX: number,
     estimatedMinY: number,
     estimatedMaxX: number,
     estimatedMaxY: number
   }
 
-  const divStyle: React.CSSProperties = {}
-  divStyle.width = estimatedMaxX - estimatedMinX
-  divStyle.height = estimatedMaxY - estimatedMinY
+	const divStyle: React.CSSProperties = {}
+	divStyle.width = estimatedMaxX - estimatedMinX
+	divStyle.height = estimatedMaxY - estimatedMinY
   
-  return ( 
-    <div className = 'group-node' style = {divStyle}>
-      {data.label as string}
-    </div>
-  )
+	return ( 
+		<div className = 'group-node' style = {divStyle}>
+			{data.label as string}
+		</div>
+	)
 }
\ No newline at end of file
diff --git a/source/components/model/visualStateModel.tsx b/source/components/model/visualStateModel.tsx
index 923622d..fc04bbf 100644
--- a/source/components/model/visualStateModel.tsx
+++ b/source/components/model/visualStateModel.tsx
@@ -1,5 +1,5 @@
 export class VisualStateModel {
-  readonly isGreyedOutMap: Map<string, boolean> = new Map<string, boolean>()
-  isNodeIdShown: boolean = false
+	readonly isGreyedOutMap: Map<string, boolean> = new Map<string, boolean>()
+	isNodeIdShown:           boolean = false
   
 }
\ No newline at end of file
diff --git a/source/components/network/visualizerWebsocketClient.ts b/source/components/network/visualizerWebsocketClient.ts
index 5dbf534..2010719 100644
--- a/source/components/network/visualizerWebsocketClient.ts
+++ b/source/components/network/visualizerWebsocketClient.ts
@@ -1,53 +1,53 @@
 
-import { FileAnalysisRequestMessage, FileAnalysisResponseMessageJson } from '@eagleoutice/flowr/cli/repl/server/messages/analysis';
-import { FlowrHelloResponseMessage } from '@eagleoutice/flowr/cli/repl/server/messages/hello';
+import type { FileAnalysisRequestMessage, FileAnalysisResponseMessageJson } from '@eagleoutice/flowr/cli/repl/server/messages/analysis'
+import type { FlowrHelloResponseMessage } from '@eagleoutice/flowr/cli/repl/server/messages/hello'
 
 export class VisualizerWebsocketClient{
-  endpoint:string
-  websocket:WebSocket
-  id:number
-  connected: boolean;
+	endpoint:  string
+	websocket: WebSocket
+	id:        number
+	connected: boolean
 
-  constructor(endpoint: string){
-    this.endpoint = endpoint
-    this.websocket = new WebSocket(endpoint)
-    this.id = 0
-    this.connected = false;
-    this.websocket.onopen = () => {
-      console.log('connected')
-      this.connected = true;
-    }
-    this.websocket.onerror = (event) => {
-      console.log('error', event)
-      this.connected = false;
-    }
-    this.websocket.onmessage = (event) => {
-      const parsedJson = JSON.parse(event.data)
-      if(parsedJson.type === 'response-file-analysis'){
-        const requestResponse: FileAnalysisResponseMessageJson = parsedJson
-        this.onFileAnalysisResponse?.(requestResponse)
-      } else if(parsedJson.type === 'hello') {
-        const requestResponse: FlowrHelloResponseMessage = parsedJson
-        this.onHelloMessage?.(requestResponse)
-      }
-    }
-  }
+	constructor(endpoint: string){
+		this.endpoint = endpoint
+		this.websocket = new WebSocket(endpoint)
+		this.id = 0
+		this.connected = false
+		this.websocket.onopen = () => {
+			console.log('connected')
+			this.connected = true
+		}
+		this.websocket.onerror = (event) => {
+			console.log('error', event)
+			this.connected = false
+		}
+		this.websocket.onmessage = (event) => {
+			const parsedJson = JSON.parse(event.data)
+			if(parsedJson.type === 'response-file-analysis'){
+				const requestResponse: FileAnalysisResponseMessageJson = parsedJson
+				this.onFileAnalysisResponse?.(requestResponse)
+			} else if(parsedJson.type === 'hello') {
+				const requestResponse: FlowrHelloResponseMessage = parsedJson
+				this.onHelloMessage?.(requestResponse)
+			}
+		}
+	}
 
-  public onFileAnalysisResponse: ((response: FileAnalysisResponseMessageJson) => void) | undefined;
+	public onFileAnalysisResponse: ((response: FileAnalysisResponseMessageJson) => void) | undefined
   
-  public onHelloMessage: ((response:FlowrHelloResponseMessage) => void) | undefined;
+	public onHelloMessage: ((response:FlowrHelloResponseMessage) => void) | undefined
   
-  sendAnalysisRequestJSON(rCode:string):void{
-    console.log('send request for', rCode);
+	sendAnalysisRequestJSON(rCode:string):void{
+		console.log('send request for', rCode)
     
-    const msg: FileAnalysisRequestMessage = {
-      id: this.id.toString(),
-      type:     'request-file-analysis',
-      content:  rCode,
-      filename: 'request.R',
-    }
-    this.id++
-    this.websocket.send(JSON.stringify(msg) + '\n');
-  }
+		const msg: FileAnalysisRequestMessage = {
+			id:       this.id.toString(),
+			type:     'request-file-analysis',
+			content:  rCode,
+			filename: 'request.R',
+		}
+		this.id++
+		this.websocket.send(JSON.stringify(msg) + '\n')
+	}
   
 }
\ No newline at end of file
diff --git a/source/components/svgDefinitions.tsx b/source/components/svgDefinitions.tsx
index cb01f94..1e536f0 100644
--- a/source/components/svgDefinitions.tsx
+++ b/source/components/svgDefinitions.tsx
@@ -3,183 +3,183 @@ interface SvgDefinitionsComponentProps{}
 
 
 export const SvgDefinitionsComponent: React.FC<SvgDefinitionsComponentProps> = ({}) => {
-    return (
-        <>
-        <marker
-            id="triangle"
-            viewBox="0 0 10 10"
-            refX="6"
-            refY="5"
-            markerUnits="strokeWidth"
-            markerWidth="10"
-            markerHeight="10"
-            orient="auto">
-            <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
-          </marker>
+	return (
+		<>
+			<marker
+				id="triangle"
+				viewBox="0 0 10 10"
+				refX="6"
+				refY="5"
+				markerUnits="strokeWidth"
+				markerWidth="10"
+				markerHeight="10"
+				orient="auto">
+				<path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
+			</marker>
           
-          <marker
-            id="dotMarker"
-            viewBox="-5 -5 10 10"
-            markerUnits="strokeWidth"
-            markerWidth="10"
-            markerHeight="10"
-            orient="auto">
-              <circle className = 'dotMarker' r = '3'/>
-          </marker>
-
-          <marker
-            id="crossMarker"
-            viewBox="-5 -5 10 10"
-            markerUnits="strokeWidth"
-            markerWidth="10"
-            markerHeight="10"
-            orient="auto">
-              <line x1='0' y1='3' x2='0' y2='-3' style={{stroke:'black', strokeWidth: '1'}}></line>
-              <line x1='3' y1='0' x2='-3' y2='0' style={{stroke:'black', strokeWidth: '1'}}></line>
-          </marker>
-
-          <marker
-            id="hexagonHollowMarker"
-            viewBox="-10 -10 100 100"
-            markerUnits="strokeWidth"
-            markerWidth="50"
-            markerHeight="50"
-            orient="auto">
-            <g transform='translate(-12,-12)'>
-              <path d="m16.476 3c.369 0 .709.197.887.514.9 1.595 3.633 6.445 4.509 8.001.075.131.118.276.126.423.012.187-.029.377-.126.547-.876 1.556-3.609 6.406-4.509 8-.178.318-.518.515-.887.515h-8.951c-.369 0-.709-.197-.887-.515-.899-1.594-3.634-6.444-4.51-8-.085-.151-.128-.318-.128-.485s.043-.334.128-.485c.876-1.556 3.611-6.406 4.51-8.001.178-.317.518-.514.887-.514zm-8.672 1.5-4.228 7.5 4.228 7.5h8.393l4.227-7.5-4.227-7.5z"/>
-            </g> 
-          </marker>
-
-          <marker
-            id="rectangleHollowMarker"
-            viewBox="-500 -500 1000 1000"
-            markerUnits="strokeWidth"
-            markerWidth="70"
-            markerHeight="70"
-            orient="auto">
-              <g transform='translate(-150, -75)'>
-                <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                  <path d="m3 17v3c0 .621.52 1 1 1h3v-1.5h-2.5v-2.5zm8.5 4h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5zm5-4h-1.5v2.5h-2.5v1.5h3c.478 0 1-.379 1-1zm-1.5-1v-3.363h1.5v3.363zm-15-3.363v3.363h-1.5v-3.363zm15-1v-3.637h1.5v3.637zm-15-3.637v3.637h-1.5v-3.637zm12.5-5v1.5h2.5v2.5h1.5v-3c0-.478-.379-1-1-1zm-10 0h-3c-.62 0-1 .519-1 1v3h1.5v-2.5h2.5zm4.5 1.5h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5z" fillRule="nonzero"/>
-                </svg>
-              </g>
-          </marker>
-
-          <marker
-            id="triangleHollowMarker"
-            viewBox="-500 -500 1000 1000"
-            markerUnits="strokeWidth"
-            markerWidth="70"
-            markerHeight="70"
-            orient="auto">
-              <g transform='translate(-150, -85)'>
-              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.882 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm1.935-.384h15.939l-7.97-14.22z" fillRule="nonzero"/></svg>
-              </g>
-          </marker>
-
-          <marker
-            id="rhombusHollowMarker"
-            viewBox="-500 -500 1000 1000"
-            markerUnits="strokeWidth"
-            markerWidth="70"
-            markerHeight="70"
-            orient="auto">
-              <g transform='translate(-150, -75)'>
-                <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.262 2.306c.196-.196.461-.306.738-.306s.542.11.738.306c1.917 1.917 7.039 7.039 8.956 8.956.196.196.306.461.306.738s-.11.542-.306.738c-1.917 1.917-7.039 7.039-8.956 8.956-.196.196-.461.306-.738.306s-.542-.11-.738-.306c-1.917-1.917-7.039-7.039-8.956-8.956-.196-.196-.306-.461-.306-.738s.11-.542.306-.738c1.917-1.917 7.039-7.039 8.956-8.956zm-7.573 9.694 8.311 8.311 8.311-8.311-8.311-8.311z" fillRule="nonzero"/></svg>
-              </g>
-          </marker>
-
-
-          <marker
-            id="starFilledMarker"
-            viewBox="-500 -500 1000 1000"
-            markerUnits="strokeWidth"
-            markerWidth="70"
-            markerHeight="70"
-            orient="auto">
-              <g transform='translate(-150, -75)'>
-              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.322 2.923c.126-.259.39-.423.678-.423.289 0 .552.164.678.423.974 1.998 2.65 5.44 2.65 5.44s3.811.524 6.022.829c.403.055.65.396.65.747 0 .19-.072.383-.231.536-1.61 1.538-4.382 4.191-4.382 4.191s.677 3.767 1.069 5.952c.083.462-.275.882-.742.882-.122 0-.244-.029-.355-.089-1.968-1.048-5.359-2.851-5.359-2.851s-3.391 1.803-5.359 2.851c-.111.06-.234.089-.356.089-.465 0-.825-.421-.741-.882.393-2.185 1.07-5.952 1.07-5.952s-2.773-2.653-4.382-4.191c-.16-.153-.232-.346-.232-.535 0-.352.249-.694.651-.748 2.211-.305 6.021-.829 6.021-.829s1.677-3.442 2.65-5.44z" fillRule="nonzero"/></svg>
-              </g>
-          </marker>
-
-          <marker
-            id="circleHollowMarker"
-            viewBox="-500 -500 1000 1000"
-            markerUnits="strokeWidth"
-            markerWidth="70"
-            markerHeight="70"
-            orient="auto">
-              <g transform='translate(-150, -75)'>
-              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.998 2c5.517 0 9.997 4.48 9.997 9.998 0 5.517-4.48 9.997-9.997 9.997-5.518 0-9.998-4.48-9.998-9.997 0-5.518 4.48-9.998 9.998-9.998zm0 1.5c-4.69 0-8.498 3.808-8.498 8.498s3.808 8.497 8.498 8.497 8.497-3.807 8.497-8.497-3.807-8.498-8.497-8.498z" fillRule="nonzero"/></svg>
-            </g>
-          </marker>
-
-          <marker
-            id="cubeFilledMarker"
-            viewBox="-500 -500 1000 1000"
-            markerUnits="strokeWidth"
-            markerWidth="70"
-            markerHeight="70"
-            orient="auto">
-              <g transform='translate(-150, -75)'>
-              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.514 6.61c-.317.179-.514.519-.514.887v8.95c0 .37.197.708.514.887 1.597.901 6.456 3.639 8.005 4.512.152.085.319.128.487.128.164 0 .328-.041.477-.123 1.549-.855 6.39-3.523 7.994-4.408.323-.177.523-.519.523-.891v-9.055c0-.368-.197-.708-.515-.887-1.595-.899-6.444-3.632-7.999-4.508-.151-.085-.319-.128-.486-.128-.168 0-.335.043-.486.128-1.555.876-6.405 3.609-8 4.508m15.986 2.115v7.525l-6.75 3.722v-7.578zm-15 7.425v-7.458l6.75 3.75v7.511zm.736-8.769 6.764-3.813 6.801 3.834-6.801 3.716z" fillRule="nonzero"/></svg>
-            </g>
-          </marker>
-
-          <symbol id="dotSymbol" width="10" height="10" overflow={'visible'}>
-            <g>
-              <circle r = '3' cx={0} cy = {0} overflow={'visible'} />
-            </g>
-          </symbol>
-
-          <symbol id="crossSymbol" width="10" height="10" overflow={'visible'}>  
-            <g>
-            <line x1='0' y1='3' x2='0' y2='-3' style={{stroke:'black', strokeWidth: '1'}}></line>
-            <line x1='3' y1='0' x2='-3' y2='0' style={{stroke:'black', strokeWidth: '1'}}></line>
-          </g>
-            </symbol>
+			<marker
+				id="dotMarker"
+				viewBox="-5 -5 10 10"
+				markerUnits="strokeWidth"
+				markerWidth="10"
+				markerHeight="10"
+				orient="auto">
+				<circle className = 'dotMarker' r = '3'/>
+			</marker>
+
+			<marker
+				id="crossMarker"
+				viewBox="-5 -5 10 10"
+				markerUnits="strokeWidth"
+				markerWidth="10"
+				markerHeight="10"
+				orient="auto">
+				<line x1='0' y1='3' x2='0' y2='-3' style={{ stroke: 'black', strokeWidth: '1' }}></line>
+				<line x1='3' y1='0' x2='-3' y2='0' style={{ stroke: 'black', strokeWidth: '1' }}></line>
+			</marker>
+
+			<marker
+				id="hexagonHollowMarker"
+				viewBox="-10 -10 100 100"
+				markerUnits="strokeWidth"
+				markerWidth="50"
+				markerHeight="50"
+				orient="auto">
+				<g transform='translate(-12,-12)'>
+					<path d="m16.476 3c.369 0 .709.197.887.514.9 1.595 3.633 6.445 4.509 8.001.075.131.118.276.126.423.012.187-.029.377-.126.547-.876 1.556-3.609 6.406-4.509 8-.178.318-.518.515-.887.515h-8.951c-.369 0-.709-.197-.887-.515-.899-1.594-3.634-6.444-4.51-8-.085-.151-.128-.318-.128-.485s.043-.334.128-.485c.876-1.556 3.611-6.406 4.51-8.001.178-.317.518-.514.887-.514zm-8.672 1.5-4.228 7.5 4.228 7.5h8.393l4.227-7.5-4.227-7.5z"/>
+				</g> 
+			</marker>
+
+			<marker
+				id="rectangleHollowMarker"
+				viewBox="-500 -500 1000 1000"
+				markerUnits="strokeWidth"
+				markerWidth="70"
+				markerHeight="70"
+				orient="auto">
+				<g transform='translate(-150, -75)'>
+					<svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+						<path d="m3 17v3c0 .621.52 1 1 1h3v-1.5h-2.5v-2.5zm8.5 4h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5zm5-4h-1.5v2.5h-2.5v1.5h3c.478 0 1-.379 1-1zm-1.5-1v-3.363h1.5v3.363zm-15-3.363v3.363h-1.5v-3.363zm15-1v-3.637h1.5v3.637zm-15-3.637v3.637h-1.5v-3.637zm12.5-5v1.5h2.5v2.5h1.5v-3c0-.478-.379-1-1-1zm-10 0h-3c-.62 0-1 .519-1 1v3h1.5v-2.5h2.5zm4.5 1.5h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5z" fillRule="nonzero"/>
+					</svg>
+				</g>
+			</marker>
+
+			<marker
+				id="triangleHollowMarker"
+				viewBox="-500 -500 1000 1000"
+				markerUnits="strokeWidth"
+				markerWidth="70"
+				markerHeight="70"
+				orient="auto">
+				<g transform='translate(-150, -85)'>
+					<svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.882 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm1.935-.384h15.939l-7.97-14.22z" fillRule="nonzero"/></svg>
+				</g>
+			</marker>
+
+			<marker
+				id="rhombusHollowMarker"
+				viewBox="-500 -500 1000 1000"
+				markerUnits="strokeWidth"
+				markerWidth="70"
+				markerHeight="70"
+				orient="auto">
+				<g transform='translate(-150, -75)'>
+					<svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.262 2.306c.196-.196.461-.306.738-.306s.542.11.738.306c1.917 1.917 7.039 7.039 8.956 8.956.196.196.306.461.306.738s-.11.542-.306.738c-1.917 1.917-7.039 7.039-8.956 8.956-.196.196-.461.306-.738.306s-.542-.11-.738-.306c-1.917-1.917-7.039-7.039-8.956-8.956-.196-.196-.306-.461-.306-.738s.11-.542.306-.738c1.917-1.917 7.039-7.039 8.956-8.956zm-7.573 9.694 8.311 8.311 8.311-8.311-8.311-8.311z" fillRule="nonzero"/></svg>
+				</g>
+			</marker>
+
+
+			<marker
+				id="starFilledMarker"
+				viewBox="-500 -500 1000 1000"
+				markerUnits="strokeWidth"
+				markerWidth="70"
+				markerHeight="70"
+				orient="auto">
+				<g transform='translate(-150, -75)'>
+					<svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.322 2.923c.126-.259.39-.423.678-.423.289 0 .552.164.678.423.974 1.998 2.65 5.44 2.65 5.44s3.811.524 6.022.829c.403.055.65.396.65.747 0 .19-.072.383-.231.536-1.61 1.538-4.382 4.191-4.382 4.191s.677 3.767 1.069 5.952c.083.462-.275.882-.742.882-.122 0-.244-.029-.355-.089-1.968-1.048-5.359-2.851-5.359-2.851s-3.391 1.803-5.359 2.851c-.111.06-.234.089-.356.089-.465 0-.825-.421-.741-.882.393-2.185 1.07-5.952 1.07-5.952s-2.773-2.653-4.382-4.191c-.16-.153-.232-.346-.232-.535 0-.352.249-.694.651-.748 2.211-.305 6.021-.829 6.021-.829s1.677-3.442 2.65-5.44z" fillRule="nonzero"/></svg>
+				</g>
+			</marker>
+
+			<marker
+				id="circleHollowMarker"
+				viewBox="-500 -500 1000 1000"
+				markerUnits="strokeWidth"
+				markerWidth="70"
+				markerHeight="70"
+				orient="auto">
+				<g transform='translate(-150, -75)'>
+					<svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.998 2c5.517 0 9.997 4.48 9.997 9.998 0 5.517-4.48 9.997-9.997 9.997-5.518 0-9.998-4.48-9.998-9.997 0-5.518 4.48-9.998 9.998-9.998zm0 1.5c-4.69 0-8.498 3.808-8.498 8.498s3.808 8.497 8.498 8.497 8.497-3.807 8.497-8.497-3.807-8.498-8.497-8.498z" fillRule="nonzero"/></svg>
+				</g>
+			</marker>
+
+			<marker
+				id="cubeFilledMarker"
+				viewBox="-500 -500 1000 1000"
+				markerUnits="strokeWidth"
+				markerWidth="70"
+				markerHeight="70"
+				orient="auto">
+				<g transform='translate(-150, -75)'>
+					<svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.514 6.61c-.317.179-.514.519-.514.887v8.95c0 .37.197.708.514.887 1.597.901 6.456 3.639 8.005 4.512.152.085.319.128.487.128.164 0 .328-.041.477-.123 1.549-.855 6.39-3.523 7.994-4.408.323-.177.523-.519.523-.891v-9.055c0-.368-.197-.708-.515-.887-1.595-.899-6.444-3.632-7.999-4.508-.151-.085-.319-.128-.486-.128-.168 0-.335.043-.486.128-1.555.876-6.405 3.609-8 4.508m15.986 2.115v7.525l-6.75 3.722v-7.578zm-15 7.425v-7.458l6.75 3.75v7.511zm.736-8.769 6.764-3.813 6.801 3.834-6.801 3.716z" fillRule="nonzero"/></svg>
+				</g>
+			</marker>
+
+			<symbol id="dotSymbol" width="10" height="10" overflow={'visible'}>
+				<g>
+					<circle r = '3' cx={0} cy = {0} overflow={'visible'} />
+				</g>
+			</symbol>
+
+			<symbol id="crossSymbol" width="10" height="10" overflow={'visible'}>  
+				<g>
+					<line x1='0' y1='3' x2='0' y2='-3' style={{ stroke: 'black', strokeWidth: '1' }}></line>
+					<line x1='3' y1='0' x2='-3' y2='0' style={{ stroke: 'black', strokeWidth: '1' }}></line>
+				</g>
+			</symbol>
           
-          <symbol id = 'hexagonHollowSymbol' width="2.5" height="2.5" viewBox = '0 0 5 5' overflow={'visible'}>
-            <g transform='translate(-12,-12)'>
-              <path d="m16.476 3c.369 0 .709.197.887.514.9 1.595 3.633 6.445 4.509 8.001.075.131.118.276.126.423.012.187-.029.377-.126.547-.876 1.556-3.609 6.406-4.509 8-.178.318-.518.515-.887.515h-8.951c-.369 0-.709-.197-.887-.515-.899-1.594-3.634-6.444-4.51-8-.085-.151-.128-.318-.128-.485s.043-.334.128-.485c.876-1.556 3.611-6.406 4.51-8.001.178-.317.518-.514.887-.514zm-8.672 1.5-4.228 7.5 4.228 7.5h8.393l4.227-7.5-4.227-7.5z"/>
-            </g>
-          </symbol>
+			<symbol id = 'hexagonHollowSymbol' width="2.5" height="2.5" viewBox = '0 0 5 5' overflow={'visible'}>
+				<g transform='translate(-12,-12)'>
+					<path d="m16.476 3c.369 0 .709.197.887.514.9 1.595 3.633 6.445 4.509 8.001.075.131.118.276.126.423.012.187-.029.377-.126.547-.876 1.556-3.609 6.406-4.509 8-.178.318-.518.515-.887.515h-8.951c-.369 0-.709-.197-.887-.515-.899-1.594-3.634-6.444-4.51-8-.085-.151-.128-.318-.128-.485s.043-.334.128-.485c.876-1.556 3.611-6.406 4.51-8.001.178-.317.518-.514.887-.514zm-8.672 1.5-4.228 7.5 4.228 7.5h8.393l4.227-7.5-4.227-7.5z"/>
+				</g>
+			</symbol>
           
-          <symbol id = 'rectangleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
-            <g transform='translate(-2.5,-2.5)'>
-              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3 17v3c0 .621.52 1 1 1h3v-1.5h-2.5v-2.5zm8.5 4h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5zm5-4h-1.5v2.5h-2.5v1.5h3c.478 0 1-.379 1-1zm-1.5-1v-3.363h1.5v3.363zm-15-3.363v3.363h-1.5v-3.363zm15-1v-3.637h1.5v3.637zm-15-3.637v3.637h-1.5v-3.637zm12.5-5v1.5h2.5v2.5h1.5v-3c0-.478-.379-1-1-1zm-10 0h-3c-.62 0-1 .519-1 1v3h1.5v-2.5h2.5zm4.5 1.5h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5z" fillRule="nonzero"/></svg>
-            </g>
-          </symbol>
+			<symbol id = 'rectangleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
+				<g transform='translate(-2.5,-2.5)'>
+					<svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3 17v3c0 .621.52 1 1 1h3v-1.5h-2.5v-2.5zm8.5 4h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5zm5-4h-1.5v2.5h-2.5v1.5h3c.478 0 1-.379 1-1zm-1.5-1v-3.363h1.5v3.363zm-15-3.363v3.363h-1.5v-3.363zm15-1v-3.637h1.5v3.637zm-15-3.637v3.637h-1.5v-3.637zm12.5-5v1.5h2.5v2.5h1.5v-3c0-.478-.379-1-1-1zm-10 0h-3c-.62 0-1 .519-1 1v3h1.5v-2.5h2.5zm4.5 1.5h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5z" fillRule="nonzero"/></svg>
+				</g>
+			</symbol>
           
-          <symbol id = 'triangleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
-            <g transform='translate(-2.5,-2.5)'>
-              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.882 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm1.935-.384h15.939l-7.97-14.22z" fillRule="nonzero"/></svg>
-            </g>
-          </symbol>
+			<symbol id = 'triangleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
+				<g transform='translate(-2.5,-2.5)'>
+					<svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.882 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm1.935-.384h15.939l-7.97-14.22z" fillRule="nonzero"/></svg>
+				</g>
+			</symbol>
           
-          <symbol id='rhombusHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
-            <g transform='translate(-2.5,-2.5)'>
-              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.262 2.306c.196-.196.461-.306.738-.306s.542.11.738.306c1.917 1.917 7.039 7.039 8.956 8.956.196.196.306.461.306.738s-.11.542-.306.738c-1.917 1.917-7.039 7.039-8.956 8.956-.196.196-.461.306-.738.306s-.542-.11-.738-.306c-1.917-1.917-7.039-7.039-8.956-8.956-.196-.196-.306-.461-.306-.738s.11-.542.306-.738c1.917-1.917 7.039-7.039 8.956-8.956zm-7.573 9.694 8.311 8.311 8.311-8.311-8.311-8.311z" fillRule="nonzero"/></svg>
-            </g>
-          </symbol>
-
-          <symbol id='starFilledSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
-            <g transform='translate(-2.5,-2.5)'>
-            <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.322 2.923c.126-.259.39-.423.678-.423.289 0 .552.164.678.423.974 1.998 2.65 5.44 2.65 5.44s3.811.524 6.022.829c.403.055.65.396.65.747 0 .19-.072.383-.231.536-1.61 1.538-4.382 4.191-4.382 4.191s.677 3.767 1.069 5.952c.083.462-.275.882-.742.882-.122 0-.244-.029-.355-.089-1.968-1.048-5.359-2.851-5.359-2.851s-3.391 1.803-5.359 2.851c-.111.06-.234.089-.356.089-.465 0-.825-.421-.741-.882.393-2.185 1.07-5.952 1.07-5.952s-2.773-2.653-4.382-4.191c-.16-.153-.232-.346-.232-.535 0-.352.249-.694.651-.748 2.211-.305 6.021-.829 6.021-.829s1.677-3.442 2.65-5.44z" fillRule="nonzero"/></svg>
-            </g>
-          </symbol>
-
-          <symbol id='circleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
-            <g transform='translate(-2.5,-2.5)'>
-            <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.998 2c5.517 0 9.997 4.48 9.997 9.998 0 5.517-4.48 9.997-9.997 9.997-5.518 0-9.998-4.48-9.998-9.997 0-5.518 4.48-9.998 9.998-9.998zm0 1.5c-4.69 0-8.498 3.808-8.498 8.498s3.808 8.497 8.498 8.497 8.497-3.807 8.497-8.497-3.807-8.498-8.497-8.498z" fillRule="nonzero"/></svg>
-            </g>
-          </symbol>
-
-          <symbol id='cubeFilledSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
-            <g transform='translate(-2.5,-2.5)'>
-              <svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.514 6.61c-.317.179-.514.519-.514.887v8.95c0 .37.197.708.514.887 1.597.901 6.456 3.639 8.005 4.512.152.085.319.128.487.128.164 0 .328-.041.477-.123 1.549-.855 6.39-3.523 7.994-4.408.323-.177.523-.519.523-.891v-9.055c0-.368-.197-.708-.515-.887-1.595-.899-6.444-3.632-7.999-4.508-.151-.085-.319-.128-.486-.128-.168 0-.335.043-.486.128-1.555.876-6.405 3.609-8 4.508m15.986 2.115v7.525l-6.75 3.722v-7.578zm-15 7.425v-7.458l6.75 3.75v7.511zm.736-8.769 6.764-3.813 6.801 3.834-6.801 3.716z" fillRule="nonzero"/></svg>
-            </g>
-          </symbol>
-          </>)
+			<symbol id='rhombusHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
+				<g transform='translate(-2.5,-2.5)'>
+					<svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.262 2.306c.196-.196.461-.306.738-.306s.542.11.738.306c1.917 1.917 7.039 7.039 8.956 8.956.196.196.306.461.306.738s-.11.542-.306.738c-1.917 1.917-7.039 7.039-8.956 8.956-.196.196-.461.306-.738.306s-.542-.11-.738-.306c-1.917-1.917-7.039-7.039-8.956-8.956-.196-.196-.306-.461-.306-.738s.11-.542.306-.738c1.917-1.917 7.039-7.039 8.956-8.956zm-7.573 9.694 8.311 8.311 8.311-8.311-8.311-8.311z" fillRule="nonzero"/></svg>
+				</g>
+			</symbol>
+
+			<symbol id='starFilledSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
+				<g transform='translate(-2.5,-2.5)'>
+					<svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.322 2.923c.126-.259.39-.423.678-.423.289 0 .552.164.678.423.974 1.998 2.65 5.44 2.65 5.44s3.811.524 6.022.829c.403.055.65.396.65.747 0 .19-.072.383-.231.536-1.61 1.538-4.382 4.191-4.382 4.191s.677 3.767 1.069 5.952c.083.462-.275.882-.742.882-.122 0-.244-.029-.355-.089-1.968-1.048-5.359-2.851-5.359-2.851s-3.391 1.803-5.359 2.851c-.111.06-.234.089-.356.089-.465 0-.825-.421-.741-.882.393-2.185 1.07-5.952 1.07-5.952s-2.773-2.653-4.382-4.191c-.16-.153-.232-.346-.232-.535 0-.352.249-.694.651-.748 2.211-.305 6.021-.829 6.021-.829s1.677-3.442 2.65-5.44z" fillRule="nonzero"/></svg>
+				</g>
+			</symbol>
+
+			<symbol id='circleHollowSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
+				<g transform='translate(-2.5,-2.5)'>
+					<svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.998 2c5.517 0 9.997 4.48 9.997 9.998 0 5.517-4.48 9.997-9.997 9.997-5.518 0-9.998-4.48-9.998-9.997 0-5.518 4.48-9.998 9.998-9.998zm0 1.5c-4.69 0-8.498 3.808-8.498 8.498s3.808 8.497 8.498 8.497 8.497-3.807 8.497-8.497-3.807-8.498-8.497-8.498z" fillRule="nonzero"/></svg>
+				</g>
+			</symbol>
+
+			<symbol id='cubeFilledSymbol' width="10" height="10" viewBox = '0 0 5 5' overflow={'visible'}>
+				<g transform='translate(-2.5,-2.5)'>
+					<svg clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.514 6.61c-.317.179-.514.519-.514.887v8.95c0 .37.197.708.514.887 1.597.901 6.456 3.639 8.005 4.512.152.085.319.128.487.128.164 0 .328-.041.477-.123 1.549-.855 6.39-3.523 7.994-4.408.323-.177.523-.519.523-.891v-9.055c0-.368-.197-.708-.515-.887-1.595-.899-6.444-3.632-7.999-4.508-.151-.085-.319-.128-.486-.128-.168 0-.335.043-.486.128-1.555.876-6.405 3.609-8 4.508m15.986 2.115v7.525l-6.75 3.722v-7.578zm-15 7.425v-7.458l6.75 3.75v7.511zm.736-8.769 6.764-3.813 6.801 3.834-6.801 3.716z" fillRule="nonzero"/></svg>
+				</g>
+			</symbol>
+		</>)
 
     
 }
\ No newline at end of file
diff --git a/source/index.tsx b/source/index.tsx
index 098396f..1f6a18e 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -1,18 +1,20 @@
-import { createRoot } from 'react-dom/client';
-import '../css/main.css';
+import { createRoot } from 'react-dom/client'
+import '../css/main.css'
 import '@xyflow/react/dist/style.css'
 import '@xyflow/react/dist/base.css'
-import { MainContainerComponent } from './components/mainContainerComponent';
-import { OtherGraph, transformToVisualizationGraphForOtherGraph } from './components/model/graphBuilder';
-import { ReactFlowProvider, Node } from '@xyflow/react';
-import { LayoutFlow } from './components/graphComponent';
-import { VisualizerWebsocketClient } from './components/network/visualizerWebsocketClient';
-import { FormEvent } from 'react';
-import { VisualizationGraph } from './components/model/graph';
-import { RNode } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/model';
-import { ParentInformation } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/decorate';
-import { LegendComponent, slideInLegend } from './components/legendComonent';
-import { VisualStateModel } from './components/model/visualStateModel';
+import { MainContainerComponent } from './components/mainContainerComponent'
+import type { OtherGraph } from './components/model/graphBuilder'
+import { transformToVisualizationGraphForOtherGraph } from './components/model/graphBuilder'
+import type { Node } from '@xyflow/react'
+import { ReactFlowProvider } from '@xyflow/react'
+import { LayoutFlow } from './components/graphComponent'
+import { VisualizerWebsocketClient } from './components/network/visualizerWebsocketClient'
+import type { FormEvent } from 'react'
+import type { VisualizationGraph } from './components/model/graph'
+import type { RNode } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/model'
+import type { ParentInformation } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/decorate'
+import { LegendComponent, slideInLegend } from './components/legendComonent'
+import { VisualStateModel } from './components/model/visualStateModel'
 import * as monaco from 'monaco-editor'
 /* old example
 const otherGraph:OtherGraph =  {
@@ -24,86 +26,86 @@ const otherGraph:OtherGraph =  {
     "edgeInformation":[["0",[["2",{"types":["reads"],"attribute":"always"}],["5",{"types":["reads"],"attribute":"always"}]]]]};
 */
 
-const otherGraph: OtherGraph = {       "_idMap":{
-  "size":13,
-  "k2v":[[0,{
-  "type":"RSymbol","location":[1,1,1,1],"content":"x","lexeme":"x","info":{
-      "fullRange":[1,1,1,1],"additionalTokens":[],"fullLexeme":"x","id":0,"parent":4,"role":"binop-lhs","index":0,"depth":2}
-  }],
-  [1,{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}}],
-  [2,{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}}],
-  [3,{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}}],
-  [4,{"type":"RBinaryOp","location":[1,3,1,4],"lhs":{"type":"RSymbol","location":[1,1,1,1],"content":"x","lexeme":"x","info":{"fullRange":[1,1,1,1],"additionalTokens":[],"fullLexeme":"x","id":0,"parent":4,"role":"binop-lhs","index":0,"depth":2}},"rhs":{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}},"operator":"<-","lexeme":"<-","info":{"fullRange":[1,1,1,10],"additionalTokens":[],"fullLexeme":"x <- 2 * 3","id":4,"parent":6,"depth":1,"index":0,"role":"expr-list-child"}}],
-  [5,{"type":"RSymbol","location":[1,13,1,13],"content":"x","lexeme":"x","info":{"fullRange":[1,13,1,13],"additionalTokens":[],"fullLexeme":"x","id":5,"parent":6,"role":"expr-list-child","index":1,"depth":1}}],
-  [6,{"type":"RExpressionList","children":[{"type":"RBinaryOp","location":[1,3,1,4],"lhs":{"type":"RSymbol","location":[1,1,1,1],"content":"x","lexeme":"x","info":{"fullRange":[1,1,1,1],"additionalTokens":[],"fullLexeme":"x","id":0,"parent":4,"role":"binop-lhs","index":0,"depth":2}},"rhs":{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}},"operator":"<-","lexeme":"<-","info":{"fullRange":[1,1,1,10],"additionalTokens":[],"fullLexeme":"x <- 2 * 3","id":4,"parent":6,"depth":1,"index":0,"role":"expr-list-child"}},{"type":"RSymbol","location":[1,13,1,13],"content":"x","lexeme":"x","info":{"fullRange":[1,13,1,13],"additionalTokens":[],"fullLexeme":"x","id":5,"parent":6,"role":"expr-list-child","index":1,"depth":1}}],"info":{"additionalTokens":[],"id":6,"depth":0,"role":"root","index":0}}],
-  ["4-arg",{"type":"RBinaryOp","location":[1,3,1,4],"lhs":{"type":"RSymbol","location":[1,1,1,1],"content":"x","lexeme":"x","info":{"fullRange":[1,1,1,1],"additionalTokens":[],"fullLexeme":"x","id":0,"parent":4,"role":"binop-lhs","index":0,"depth":2}},"rhs":{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}},"operator":"<-","lexeme":"<-","info":{"fullRange":[1,1,1,10],"additionalTokens":[],"fullLexeme":"x <- 2 * 3","id":4,"parent":6,"depth":1,"index":0,"role":"expr-list-child"}}],["5-arg",{"type":"RSymbol","location":[1,13,1,13],"content":"x","lexeme":"x","info":{"fullRange":[1,13,1,13],"additionalTokens":[],"fullLexeme":"x","id":5,"parent":6,"role":"expr-list-child","index":1,"depth":1}}],["0-arg",{"type":"RSymbol","location":[1,1,1,1],"content":"x","lexeme":"x","info":{"fullRange":[1,1,1,1],"additionalTokens":[],"fullLexeme":"x","id":0,"parent":4,"role":"binop-lhs","index":0,"depth":2}}],["3-arg",{"type":"RBinaryOp","location":[1,8,1,8],"lhs":{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}},"rhs":{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}},"operator":"*","lexeme":"*","info":{"fullRange":[1,6,1,10],"additionalTokens":[],"fullLexeme":"2 * 3","id":3,"parent":4,"depth":2,"index":1,"role":"binop-rhs"}}],["1-arg",{"location":[1,6,1,6],"lexeme":"2","info":{"fullRange":[1,6,1,6],"additionalTokens":[],"fullLexeme":"2","id":1,"parent":3,"role":"binop-lhs","index":0,"depth":3},"type":"RNumber","content":{"num":2,"complexNumber":false,"markedAsInt":false}}],["2-arg",{"location":[1,10,1,10],"lexeme":"3","info":{"fullRange":[1,10,1,10],"additionalTokens":[],"fullLexeme":"3","id":2,"parent":3,"role":"binop-rhs","index":1,"depth":3},"type":"RNumber","content":{"num":3,"complexNumber":false,"markedAsInt":false}}]],
-  "v2k":{}
+const otherGraph: OtherGraph = {       '_idMap': {
+	'size': 13,
+	'k2v':  [[0,{
+		'type':     'RSymbol','location': [1,1,1,1],'content':  'x','lexeme':   'x','info':     {
+			'fullRange': [1,1,1,1],'additionalTokens': [],'fullLexeme': 'x','id': 0,'parent': 4,'role': 'binop-lhs','index': 0,'depth': 2 }
+	}],
+	[1,{ 'location': [1,6,1,6],'lexeme': '2','info': { 'fullRange': [1,6,1,6],'additionalTokens': [],'fullLexeme': '2','id': 1,'parent': 3,'role': 'binop-lhs','index': 0,'depth': 3 },'type': 'RNumber','content': { 'num': 2,'complexNumber': false,'markedAsInt': false } }],
+	[2,{ 'location': [1,10,1,10],'lexeme': '3','info': { 'fullRange': [1,10,1,10],'additionalTokens': [],'fullLexeme': '3','id': 2,'parent': 3,'role': 'binop-rhs','index': 1,'depth': 3 },'type': 'RNumber','content': { 'num': 3,'complexNumber': false,'markedAsInt': false } }],
+	[3,{ 'type': 'RBinaryOp','location': [1,8,1,8],'lhs': { 'location': [1,6,1,6],'lexeme': '2','info': { 'fullRange': [1,6,1,6],'additionalTokens': [],'fullLexeme': '2','id': 1,'parent': 3,'role': 'binop-lhs','index': 0,'depth': 3 },'type': 'RNumber','content': { 'num': 2,'complexNumber': false,'markedAsInt': false } },'rhs': { 'location': [1,10,1,10],'lexeme': '3','info': { 'fullRange': [1,10,1,10],'additionalTokens': [],'fullLexeme': '3','id': 2,'parent': 3,'role': 'binop-rhs','index': 1,'depth': 3 },'type': 'RNumber','content': { 'num': 3,'complexNumber': false,'markedAsInt': false } },'operator': '*','lexeme': '*','info': { 'fullRange': [1,6,1,10],'additionalTokens': [],'fullLexeme': '2 * 3','id': 3,'parent': 4,'depth': 2,'index': 1,'role': 'binop-rhs' } }],
+	[4,{ 'type': 'RBinaryOp','location': [1,3,1,4],'lhs': { 'type': 'RSymbol','location': [1,1,1,1],'content': 'x','lexeme': 'x','info': { 'fullRange': [1,1,1,1],'additionalTokens': [],'fullLexeme': 'x','id': 0,'parent': 4,'role': 'binop-lhs','index': 0,'depth': 2 } },'rhs': { 'type': 'RBinaryOp','location': [1,8,1,8],'lhs': { 'location': [1,6,1,6],'lexeme': '2','info': { 'fullRange': [1,6,1,6],'additionalTokens': [],'fullLexeme': '2','id': 1,'parent': 3,'role': 'binop-lhs','index': 0,'depth': 3 },'type': 'RNumber','content': { 'num': 2,'complexNumber': false,'markedAsInt': false } },'rhs': { 'location': [1,10,1,10],'lexeme': '3','info': { 'fullRange': [1,10,1,10],'additionalTokens': [],'fullLexeme': '3','id': 2,'parent': 3,'role': 'binop-rhs','index': 1,'depth': 3 },'type': 'RNumber','content': { 'num': 3,'complexNumber': false,'markedAsInt': false } },'operator': '*','lexeme': '*','info': { 'fullRange': [1,6,1,10],'additionalTokens': [],'fullLexeme': '2 * 3','id': 3,'parent': 4,'depth': 2,'index': 1,'role': 'binop-rhs' } },'operator': '<-','lexeme': '<-','info': { 'fullRange': [1,1,1,10],'additionalTokens': [],'fullLexeme': 'x <- 2 * 3','id': 4,'parent': 6,'depth': 1,'index': 0,'role': 'expr-list-child' } }],
+	[5,{ 'type': 'RSymbol','location': [1,13,1,13],'content': 'x','lexeme': 'x','info': { 'fullRange': [1,13,1,13],'additionalTokens': [],'fullLexeme': 'x','id': 5,'parent': 6,'role': 'expr-list-child','index': 1,'depth': 1 } }],
+	[6,{ 'type': 'RExpressionList','children': [{ 'type': 'RBinaryOp','location': [1,3,1,4],'lhs': { 'type': 'RSymbol','location': [1,1,1,1],'content': 'x','lexeme': 'x','info': { 'fullRange': [1,1,1,1],'additionalTokens': [],'fullLexeme': 'x','id': 0,'parent': 4,'role': 'binop-lhs','index': 0,'depth': 2 } },'rhs': { 'type': 'RBinaryOp','location': [1,8,1,8],'lhs': { 'location': [1,6,1,6],'lexeme': '2','info': { 'fullRange': [1,6,1,6],'additionalTokens': [],'fullLexeme': '2','id': 1,'parent': 3,'role': 'binop-lhs','index': 0,'depth': 3 },'type': 'RNumber','content': { 'num': 2,'complexNumber': false,'markedAsInt': false } },'rhs': { 'location': [1,10,1,10],'lexeme': '3','info': { 'fullRange': [1,10,1,10],'additionalTokens': [],'fullLexeme': '3','id': 2,'parent': 3,'role': 'binop-rhs','index': 1,'depth': 3 },'type': 'RNumber','content': { 'num': 3,'complexNumber': false,'markedAsInt': false } },'operator': '*','lexeme': '*','info': { 'fullRange': [1,6,1,10],'additionalTokens': [],'fullLexeme': '2 * 3','id': 3,'parent': 4,'depth': 2,'index': 1,'role': 'binop-rhs' } },'operator': '<-','lexeme': '<-','info': { 'fullRange': [1,1,1,10],'additionalTokens': [],'fullLexeme': 'x <- 2 * 3','id': 4,'parent': 6,'depth': 1,'index': 0,'role': 'expr-list-child' } },{ 'type': 'RSymbol','location': [1,13,1,13],'content': 'x','lexeme': 'x','info': { 'fullRange': [1,13,1,13],'additionalTokens': [],'fullLexeme': 'x','id': 5,'parent': 6,'role': 'expr-list-child','index': 1,'depth': 1 } }],'info': { 'additionalTokens': [],'id': 6,'depth': 0,'role': 'root','index': 0 } }],
+	['4-arg',{ 'type': 'RBinaryOp','location': [1,3,1,4],'lhs': { 'type': 'RSymbol','location': [1,1,1,1],'content': 'x','lexeme': 'x','info': { 'fullRange': [1,1,1,1],'additionalTokens': [],'fullLexeme': 'x','id': 0,'parent': 4,'role': 'binop-lhs','index': 0,'depth': 2 } },'rhs': { 'type': 'RBinaryOp','location': [1,8,1,8],'lhs': { 'location': [1,6,1,6],'lexeme': '2','info': { 'fullRange': [1,6,1,6],'additionalTokens': [],'fullLexeme': '2','id': 1,'parent': 3,'role': 'binop-lhs','index': 0,'depth': 3 },'type': 'RNumber','content': { 'num': 2,'complexNumber': false,'markedAsInt': false } },'rhs': { 'location': [1,10,1,10],'lexeme': '3','info': { 'fullRange': [1,10,1,10],'additionalTokens': [],'fullLexeme': '3','id': 2,'parent': 3,'role': 'binop-rhs','index': 1,'depth': 3 },'type': 'RNumber','content': { 'num': 3,'complexNumber': false,'markedAsInt': false } },'operator': '*','lexeme': '*','info': { 'fullRange': [1,6,1,10],'additionalTokens': [],'fullLexeme': '2 * 3','id': 3,'parent': 4,'depth': 2,'index': 1,'role': 'binop-rhs' } },'operator': '<-','lexeme': '<-','info': { 'fullRange': [1,1,1,10],'additionalTokens': [],'fullLexeme': 'x <- 2 * 3','id': 4,'parent': 6,'depth': 1,'index': 0,'role': 'expr-list-child' } }],['5-arg',{ 'type': 'RSymbol','location': [1,13,1,13],'content': 'x','lexeme': 'x','info': { 'fullRange': [1,13,1,13],'additionalTokens': [],'fullLexeme': 'x','id': 5,'parent': 6,'role': 'expr-list-child','index': 1,'depth': 1 } }],['0-arg',{ 'type': 'RSymbol','location': [1,1,1,1],'content': 'x','lexeme': 'x','info': { 'fullRange': [1,1,1,1],'additionalTokens': [],'fullLexeme': 'x','id': 0,'parent': 4,'role': 'binop-lhs','index': 0,'depth': 2 } }],['3-arg',{ 'type': 'RBinaryOp','location': [1,8,1,8],'lhs': { 'location': [1,6,1,6],'lexeme': '2','info': { 'fullRange': [1,6,1,6],'additionalTokens': [],'fullLexeme': '2','id': 1,'parent': 3,'role': 'binop-lhs','index': 0,'depth': 3 },'type': 'RNumber','content': { 'num': 2,'complexNumber': false,'markedAsInt': false } },'rhs': { 'location': [1,10,1,10],'lexeme': '3','info': { 'fullRange': [1,10,1,10],'additionalTokens': [],'fullLexeme': '3','id': 2,'parent': 3,'role': 'binop-rhs','index': 1,'depth': 3 },'type': 'RNumber','content': { 'num': 3,'complexNumber': false,'markedAsInt': false } },'operator': '*','lexeme': '*','info': { 'fullRange': [1,6,1,10],'additionalTokens': [],'fullLexeme': '2 * 3','id': 3,'parent': 4,'depth': 2,'index': 1,'role': 'binop-rhs' } }],['1-arg',{ 'location': [1,6,1,6],'lexeme': '2','info': { 'fullRange': [1,6,1,6],'additionalTokens': [],'fullLexeme': '2','id': 1,'parent': 3,'role': 'binop-lhs','index': 0,'depth': 3 },'type': 'RNumber','content': { 'num': 2,'complexNumber': false,'markedAsInt': false } }],['2-arg',{ 'location': [1,10,1,10],'lexeme': '3','info': { 'fullRange': [1,10,1,10],'additionalTokens': [],'fullLexeme': '3','id': 2,'parent': 3,'role': 'binop-rhs','index': 1,'depth': 3 },'type': 'RNumber','content': { 'num': 3,'complexNumber': false,'markedAsInt': false } }]],
+	'v2k': {}
 },
-"functionCache":[],
-"rootVertices":[1,2,3,0,4,5],
-"vertexInformation":
+'functionCache': [],
+'rootVertices':  [1,2,3,0,4,5],
+'vertexInformation':
 [
-  [1,{"tag":"value","id":1}],
-  [2,{"tag":"value","id":2}],
-  [3,{"tag":"function-call","id":3,"name":"*","onlyBuiltin":true,"args":[{"nodeId":1},{"nodeId":2}]}],[0,{"tag":"variable-definition","id":0}],
-  [4,{"tag":"function-call","id":4,"name":"<-","onlyBuiltin":true,"args":[{"nodeId":0},{"nodeId":3}]}],[5,{"tag":"use","id":5}]
+	[1,{ 'tag': 'value','id': 1 }],
+	[2,{ 'tag': 'value','id': 2 }],
+	[3,{ 'tag': 'function-call','id': 3,'name': '*','onlyBuiltin': true,'args': [{ 'nodeId': 1 },{ 'nodeId': 2 }] }],[0,{ 'tag': 'variable-definition','id': 0 }],
+	[4,{ 'tag': 'function-call','id': 4,'name': '<-','onlyBuiltin': true,'args': [{ 'nodeId': 0 },{ 'nodeId': 3 }] }],[5,{ 'tag': 'use','id': 5 }]
 ],
-"edgeInformation":[
-  [3,[[1,{"types":65}],[2,{"types":65}]]],
-  [4,[[3,{"types":64}],[0,{"types":72}]]],
-  [0,[[3,{"types":2}],[4,{"types":2}]]],
-  [5,[[0,{"types":1}]]]
+'edgeInformation': [
+	[3,[[1,{ 'types': 65 }],[2,{ 'types': 65 }]]],
+	[4,[[3,{ 'types': 64 }],[0,{ 'types': 72 }]]],
+	[0,[[3,{ 'types': 2 }],[4,{ 'types': 2 }]]],
+	[5,[[0,{ 'types': 1 }]]]
 ]
 }
 
 
 
 
-let client: VisualizerWebsocketClient | undefined = undefined;
-try{
-client = new VisualizerWebsocketClient('ws://127.0.0.1:1042')
-client.onFileAnalysisResponse = (json) => {
-  console.log(JSON.stringify(json.results.dataflow.graph))
-  updateGraph(json.results.normalize.ast, json.results.dataflow.graph as unknown as OtherGraph)
-}
-client.onHelloMessage = (json) => {
-  console.log('hello', json);
-  client?.sendAnalysisRequestJSON('x <- 2 * 3; x')
-}
+let client: VisualizerWebsocketClient | undefined = undefined
+try {
+	client = new VisualizerWebsocketClient('ws://127.0.0.1:1042')
+	client.onFileAnalysisResponse = (json) => {
+		console.log(JSON.stringify(json.results.dataflow.graph))
+		updateGraph(json.results.normalize.ast, json.results.dataflow.graph as unknown as OtherGraph)
+	}
+	client.onHelloMessage = (json) => {
+		console.log('hello', json)
+		client?.sendAnalysisRequestJSON('x <- 2 * 3; x')
+	}
 } catch(e){
-  console.log(e)
+	console.log(e)
 }
 
 
 let currentValue: string = ''
 function onRCodeInputChange(event: FormEvent<HTMLInputElement>) {
-  currentValue = event.currentTarget.value;
+	currentValue = event.currentTarget.value
 }
 
 function onRCodeRequest() {
-  client?.sendAnalysisRequestJSON(currentValue)
+	client?.sendAnalysisRequestJSON(currentValue)
 }
-let graphFromOtherGraph: VisualizationGraph = {
-  edges: [],
-  nodesInfo: {nodes:[], nodeMap: new Map<string,Node>()}
+const graphFromOtherGraph: VisualizationGraph = {
+	edges:     [],
+	nodesInfo: { nodes: [], nodeMap: new Map<string,Node>() }
   
 }
 
-let graphUpdater: ((graph: VisualizationGraph) => void) | undefined = undefined;
+let graphUpdater: ((graph: VisualizationGraph) => void) | undefined = undefined
 function setGraphUpdater(updater: (graph: VisualizationGraph) => void) {
-  graphUpdater = updater;
+	graphUpdater = updater
 }
 
 function updateGraph(ast: RNode<ParentInformation>, graph: OtherGraph) {
-  // borderline graph :D
-  const newGraph = transformToVisualizationGraphForOtherGraph(ast, graph)
-  graphUpdater?.(newGraph);
+	// borderline graph :D
+	const newGraph = transformToVisualizationGraphForOtherGraph(ast, graph)
+	graphUpdater?.(newGraph)
 }
 
-const main = document.createElement('div');
-main.id = 'main';
-document.body.appendChild(main);
-const root = createRoot(main);
+const main = document.createElement('div')
+main.id = 'main'
+document.body.appendChild(main)
+const root = createRoot(main)
 const visualStateModel = new VisualStateModel()
 
 const firstValue = 'x <- 42'
@@ -111,38 +113,40 @@ const firstValue = 'x <- 42'
 
 
 root.render(
-  <MainContainerComponent initialize={() => { console.log('Hey') }}>
-    <div className='left-side'>
-    <div className='r-code-input'>
-        <input onChange={onRCodeInputChange}></input>
-        <button onClick={onRCodeRequest}>Send R code</button>
-      </div>
-      <div id='editor-target' className = 'editor-div'> </div>
-    </div>
-    <div className = 'reactflow-div'>
-      <div style={{ position: 'relative', top: 0, right: 0, width: '100%', height: '100%'}}>
-      <ReactFlowProvider>
-        <LayoutFlow graph={graphFromOtherGraph} assignGraphUpdater={setGraphUpdater} visualStateModel={visualStateModel}/>
-      </ReactFlowProvider>
-      </div>
-      <LegendComponent visualStateModel={visualStateModel}/>
-    </div>
+	<MainContainerComponent initialize={() => {
+		console.log('Hey') 
+	}}>
+		<div className='left-side'>
+			<div className='r-code-input'>
+				<input onChange={onRCodeInputChange}></input>
+				<button onClick={onRCodeRequest}>Send R code</button>
+			</div>
+			<div id='editor-target' className = 'editor-div'> </div>
+		</div>
+		<div className = 'reactflow-div'>
+			<div style={{ position: 'relative', top: 0, right: 0, width: '100%', height: '100%' }}>
+				<ReactFlowProvider>
+					<LayoutFlow graph={graphFromOtherGraph} assignGraphUpdater={setGraphUpdater} visualStateModel={visualStateModel}/>
+				</ReactFlowProvider>
+			</div>
+			<LegendComponent visualStateModel={visualStateModel}/>
+		</div>
     
-  </MainContainerComponent>
-);
+	</MainContainerComponent>
+)
 
 window.MonacoEnvironment = {
-  getWorker: (workerId, label) => {
-    return new Worker('monaco-editor/vs/base/worker/workerMain.js')
-  }
+	getWorker: (workerId, label) => {
+		return new Worker('monaco-editor/vs/base/worker/workerMain.js')
+	}
 }
 
 window.onload = () => {
-  monaco.editor.create((document.getElementById('editor-target') as HTMLElement), {
-    value: firstValue,
-    language: 'r',
-    automaticLayout: true,
-  });
+	monaco.editor.create((document.getElementById('editor-target') as HTMLElement), {
+		value:           firstValue,
+		language:        'r',
+		automaticLayout: true,
+	})
 }
 
 

From 3b022d65f5168633286c96d767de083b9bcbaac6 Mon Sep 17 00:00:00 2001
From: EagleoutIce <florian.sihler@uni-ulm.de>
Date: Sun, 11 Aug 2024 11:52:34 +0200
Subject: [PATCH 74/75] refactor: another, manual, lint round

---
 README.md                                     |   2 +-
 .../{graphHierarchy.ts => graph-hierarchy.ts} |  52 ++++---
 .../{legendComonent.tsx => graph-legend.tsx}  |  30 ++--
 .../{graphComponent.tsx => graph-viewer.tsx}  |  80 +++++------
 ...tainerComponent.tsx => main-container.tsx} |   0
 .../{argumentEdge.tsx => argument-edge.tsx}   |   4 +-
 .../edges/{callsEdge.tsx => calls-edge.tsx}   |   4 +-
 ...{definedByEdge.tsx => defined-by-edge.tsx} |   4 +-
 ...llEdge.tsx => defined-by-on-call-edge.tsx} |   4 +-
 ...nCallEdge.tsx => defines-on-call-edge.tsx} |   4 +-
 .../edges/{edgeBase.tsx => edge-base.tsx}     |  53 ++++---
 .../edges/{multiEdge.tsx => multi-edge.tsx}   | 134 +++++++-----------
 ...e.tsx => non-standard-evaluation-edge.tsx} |   4 +-
 .../edges/{readsEdge.tsx => reads-edge.tsx}   |   3 +-
 .../{relatesEdge.tsx => relates-edge.tsx}     |   4 +-
 .../{returnsEdge.tsx => returns-edge.tsx}     |   4 +-
 ...meDefDefEdge.tsx => same-def-def-edge.tsx} |   4 +-
 ...adReadEdge.tsx => same-read-read-edge.tsx} |   4 +-
 ...lEdge.tsx => side-effect-on-call-edge.tsx} |   4 +-
 .../{graphBuilder.ts => graph-builder.ts}     |  31 ++--
 ...graphTransition.ts => graph-transition.ts} |  18 +--
 ...omponent.tsx => handle-node-component.tsx} |   2 +-
 ...nodeDefinition.tsx => node-definition.tsx} |  25 ++--
 ...lStateModel.tsx => visual-state-model.tsx} |   0
 ...svgDefinitions.tsx => svg-definitions.tsx} |   0
 source/index.tsx                              |  64 ++-------
 26 files changed, 211 insertions(+), 327 deletions(-)
 rename source/components/{graphHierarchy.ts => graph-hierarchy.ts} (82%)
 rename source/components/{legendComonent.tsx => graph-legend.tsx} (92%)
 rename source/components/{graphComponent.tsx => graph-viewer.tsx} (70%)
 rename source/components/{mainContainerComponent.tsx => main-container.tsx} (100%)
 rename source/components/model/edges/{argumentEdge.tsx => argument-edge.tsx} (85%)
 rename source/components/model/edges/{callsEdge.tsx => calls-edge.tsx} (85%)
 rename source/components/model/edges/{definedByEdge.tsx => defined-by-edge.tsx} (85%)
 rename source/components/model/edges/{definedByOnCallEdge.tsx => defined-by-on-call-edge.tsx} (86%)
 rename source/components/model/edges/{definesOnCallEdge.tsx => defines-on-call-edge.tsx} (86%)
 rename source/components/model/edges/{edgeBase.tsx => edge-base.tsx} (92%)
 rename source/components/model/edges/{multiEdge.tsx => multi-edge.tsx} (83%)
 rename source/components/model/edges/{nonStandardEvaluationEdge.tsx => non-standard-evaluation-edge.tsx} (86%)
 rename source/components/model/edges/{readsEdge.tsx => reads-edge.tsx} (86%)
 rename source/components/model/edges/{relatesEdge.tsx => relates-edge.tsx} (85%)
 rename source/components/model/edges/{returnsEdge.tsx => returns-edge.tsx} (85%)
 rename source/components/model/edges/{sameDefDefEdge.tsx => same-def-def-edge.tsx} (85%)
 rename source/components/model/edges/{sameReadReadEdge.tsx => same-read-read-edge.tsx} (85%)
 rename source/components/model/edges/{sideEffectOnCallEdge.tsx => side-effect-on-call-edge.tsx} (85%)
 rename source/components/model/{graphBuilder.ts => graph-builder.ts} (92%)
 rename source/components/model/{graphTransition.ts => graph-transition.ts} (92%)
 rename source/components/model/nodes/{handleNodeComponent.tsx => handle-node-component.tsx} (88%)
 rename source/components/model/nodes/{nodeDefinition.tsx => node-definition.tsx} (90%)
 rename source/components/model/{visualStateModel.tsx => visual-state-model.tsx} (100%)
 rename source/components/{svgDefinitions.tsx => svg-definitions.tsx} (100%)

diff --git a/README.md b/README.md
index 88fa5d2..87dca47 100644
--- a/README.md
+++ b/README.md
@@ -5,4 +5,4 @@ To run the project, you need [npm](https://www.npmjs.com/).
 1. Run `npm ci` to install all required packages (only once or after updates)
 2. Run `npm start` to start the server
 3. Open the URL shown in the logfile (probably something like <http://localhost:8080/>)
-4. Work work work! :D
+4. Work, work, work! :D
diff --git a/source/components/graphHierarchy.ts b/source/components/graph-hierarchy.ts
similarity index 82%
rename from source/components/graphHierarchy.ts
rename to source/components/graph-hierarchy.ts
index 5193279..22c9276 100644
--- a/source/components/graphHierarchy.ts
+++ b/source/components/graph-hierarchy.ts
@@ -1,27 +1,29 @@
 import type { ElkNode } from 'elkjs'
 import type { Node, XYPosition } from '@xyflow/react'
-import { CoordinateExtent } from '@xyflow/react'
-import type { VisualizationNodeProps } from './model/graphBuilder'
+import type { VisualizationNodeProps } from './model/graph-builder'
 
 const standardHeight = 50
 const standardWidth  = 150
 
 /**
- * Transforms the Nodestructure into the structure needed for the ELK Layouting algorithm
- * @param nodes nodes given from the VisualizationGraph
+ * Transforms the Nodes structure into the structure needed for the ELK Layouting algorithm
+ * @param nodes - nodes given from the VisualizationGraph
+ * @param nodesIdMap - Map of the nodes with the id as key
+ * @param isHorizontal - boolean to determine if the layout should be horizontal or vertical
  */
 export function foldIntoElkHierarchy(nodes:Node[], nodesIdMap: Map<string,Node>, isHorizontal: boolean):ElkNode[]{
 	const usedMap  = new Map<string, boolean>()
 	nodesIdMap.forEach((node, id) => usedMap.set(id,false))
 
-	const toReturn =  (nodes.map((node) => foldOnVisualizationGraphNodes(node as Node<VisualizationNodeProps>, nodesIdMap as Map<string, Node<VisualizationNodeProps>>, usedMap, isHorizontal))).filter(nonEmpty)
-    
-	return toReturn
+	return nodes
+		.map(node =>
+			foldOnVisualizationGraphNodes(node as Node<VisualizationNodeProps>, nodesIdMap as Map<string, Node<VisualizationNodeProps>>, usedMap, isHorizontal)
+		).filter(nonEmpty)
 }
 
-interface ExtendedElkNode extends ElkNode{
+interface ExtendedElkNode extends ElkNode {
   data:{
-    label:     string, 
+    label:     string,
     nodeType:  string,
     parentId?: string,
     children?: string[]
@@ -32,7 +34,7 @@ export interface HierarchyElkNode extends ElkNode {
     targetPosition: string,
     sourcePosition: string,
     parentId?:      string,
-    //extent?: "parent" | CoordinateExtent 
+    //extent?: "parent" | CoordinateExtent
     children?:      HierarchyElkNode[]
 }
 
@@ -41,21 +43,17 @@ function nonEmpty<TValue>(value:TValue| null| undefined): value is TValue{
 }
 
 
-function foldOnVisualizationGraphNodes(currentNode: Node<VisualizationNodeProps>, 
-																																							nodeIdMap: Map<string, Node<VisualizationNodeProps>>, 
+function foldOnVisualizationGraphNodes(currentNode: Node<VisualizationNodeProps>,
+																																							nodeIdMap: Map<string, Node<VisualizationNodeProps>>,
 																																							usedIdsMap: Map<string,boolean>,
 																																							isHorizontal: boolean):HierarchyElkNode | undefined{
 	if(currentNode.data.children !== undefined){
 		//calculate Children of the currentNode
-		const childrenOfNode : HierarchyElkNode[]= 
-          currentNode.data.children
-          	.map((nodeId) => nodeIdMap.get(nodeId))
-          	.filter((node => node !== undefined))
-          	.map((node) => foldOnVisualizationGraphNodes(node!,nodeIdMap,usedIdsMap, isHorizontal))
-          	.filter(nonEmpty)
+		const childrenOfNode : HierarchyElkNode[]=
+          currentNode.data.children.map(nodeId => nodeIdMap.get(nodeId)).filter(node => node !== undefined).map(node => foldOnVisualizationGraphNodes(node as Node<VisualizationNodeProps>,nodeIdMap,usedIdsMap, isHorizontal)).filter(nonEmpty)
 		const newHeight = childrenOfNode.reduce((accumulatedHeight, node) => accumulatedHeight + (node.height ?? 0), 0) + standardHeight
 		const newWidth = standardWidth + 10
-		const toReturn = {
+		return {
 			...currentNode,
 			// Adjust the target and source handle positions based on the layout
 			// direction.
@@ -69,9 +67,7 @@ function foldOnVisualizationGraphNodes(currentNode: Node<VisualizationNodeProps>
 			...(currentNode.data.parentId !== undefined) && { parentId: currentNode.data.parentId },
 			...(currentNode.data.parentId !== undefined) && { extent: 'parent' }
 		}
-
-		return toReturn
-	} 
+	}
 
 	if(usedIdsMap.get(currentNode.id)){
 		return undefined
@@ -120,13 +116,13 @@ export function flattenToNodeArray(nodeArray:ElkNode[]):Node<FinalNodeProps>[] {
 function flattenHierarchyNode(currentNode: ElkNode, positionParentNode: XYPosition):FlattenReturnProperties[]{
 	let toReturnNodeArray: FlattenReturnProperties[] = []
 
-	const absolutePositionX = (currentNode.x ?? 0) + (positionParentNode.x ?? 0) 
+	const absolutePositionX = (currentNode.x ?? 0) + (positionParentNode.x ?? 0)
 	const absolutePositionY = (currentNode.y ?? 0) + (positionParentNode.y ?? 0)
 	const newNode: Node<FinalNodeProps> = {
 		...currentNode,
-		data: { 
-			label:         currentNode.labels?.[0]?.text ?? '', 
-			id:            currentNode.id, 
+		data: {
+			label:         currentNode.labels?.[0]?.text ?? '',
+			id:            currentNode.id,
 			nodeType:      (currentNode as ExtendedElkNode).data.nodeType,
 			estimatedMinX: absolutePositionX,
 			estimatedMinY: absolutePositionY,
@@ -153,7 +149,7 @@ function flattenHierarchyNode(currentNode: ElkNode, positionParentNode: XYPositi
 	toReturnNodeArray.push(newFlattenedProperty)
 	if(currentNode.children !== undefined){
 		const flattenedChildNodes = currentNode.children.map((node) => flattenHierarchyNode(node, newNode.position)).flat()
-        
+
 		//calculate dimensions for function definition node
 		newNode.data.estimatedMaxX = flattenedChildNodes.map((flattenedProperty) => flattenedProperty.maxX).reduce((previousMax, currentMax) => {
 			return previousMax < currentMax ? currentMax : previousMax
@@ -166,4 +162,4 @@ function flattenHierarchyNode(currentNode: ElkNode, positionParentNode: XYPositi
 	}
 
 	return toReturnNodeArray
-}
\ No newline at end of file
+}
diff --git a/source/components/legendComonent.tsx b/source/components/graph-legend.tsx
similarity index 92%
rename from source/components/legendComonent.tsx
rename to source/components/graph-legend.tsx
index e72f465..b05646f 100644
--- a/source/components/legendComonent.tsx
+++ b/source/components/graph-legend.tsx
@@ -1,6 +1,6 @@
-import { edgeTypeToMarkerIdMapper } from './model/edges/multiEdge'
-import type { VisualStateModel } from './model/visualStateModel'
-import { setIsNodeIdShownReactFlow } from './graphComponent'
+import { edgeTypeToMarkerIdMapper } from './model/edges/multi-edge'
+import type { VisualStateModel } from './model/visual-state-model'
+import { setIsNodeIdShownReactFlow } from './graph-viewer'
 
 
 interface LegendComponentProps {
@@ -18,9 +18,9 @@ export function slideOutLegend(){
 }
 
 export const LegendComponent: React.FC<LegendComponentProps> = ({ visualStateModel }) => {
-    
+
 	const isGreyedOutMap = visualStateModel.isGreyedOutMap
-    
+
 	return (
 		<div className = 'slide-in-legend' id = 'slide-in-legend' >
 			<div className='legend-nodes'>
@@ -42,12 +42,12 @@ export const LegendComponent: React.FC<LegendComponentProps> = ({ visualStateMod
 				<EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'side-effect-on-call' edgeText='side-effect-on-call' />
 				<EdgeLegendComponent isGreyedOutMap = {isGreyedOutMap} edgeType = 'non-standard-evaluation' edgeText='non-standard-evaluation' />
 			</div>
-            
+
 			<div className = 'legend-control-elements'>
 				<div style={{ whiteSpace: 'nowrap' }}>
-					<input 
-						type='checkbox' 
-						id='show-id-checkbox' 
+					<input
+						type='checkbox'
+						id='show-id-checkbox'
 						onClick={() => {
 							const checkbox = document.getElementById('show-id-checkbox') as HTMLInputElement ?? new HTMLInputElement()
 							const isChecked = checkbox.checked
@@ -74,7 +74,7 @@ interface EdgeLegendComponentProps {
 
 const EdgeLegendComponent: React.FC<EdgeLegendComponentProps> = ({ edgeText, edgeType, isGreyedOutMap }) => {
 	const classNameEdge = edgeType + '-edge' + ' legend-edge' + ' ' + edgeType + '-legend-edge'
-	const classNameInteractiveEdge = edgeType + '-legend-interactive-edge' + ' legend-interactive-edge' 
+	const classNameInteractiveEdge = edgeType + '-legend-interactive-edge' + ' legend-interactive-edge'
 	const markerId = edgeTypeToMarkerIdMapper(edgeType)
 	const legendId = edgeType + '-legend'
 	return (<svg
@@ -83,7 +83,7 @@ const EdgeLegendComponent: React.FC<EdgeLegendComponentProps> = ({ edgeText, edg
 			const pathElements = document.getElementsByClassName(`${edgeType}-edge`) as HTMLCollectionOf<SVGPathElement>
 			const symbolElements = document.getElementsByClassName(`${edgeType}-edge-symbol`) as HTMLCollectionOf<SVGUseElement>
 			const legendSVGElement = document.getElementById(legendId) as HTMLElement
-            
+
 			//get the greyed out state and set it correctly
 			const isEdgeTypeGreyedOut:boolean = isGreyedOutMap.get(edgeType) ?? false
 			isGreyedOutMap.set(edgeType,!isEdgeTypeGreyedOut)
@@ -92,7 +92,7 @@ const EdgeLegendComponent: React.FC<EdgeLegendComponentProps> = ({ edgeText, edg
 			for(const element of pathElements){
 				element.classList.toggle('legend-passive', !isEdgeTypeGreyedOut)
 			}
-            
+
 			for(const element of symbolElements){
 				element.classList.toggle('legend-passive', !isEdgeTypeGreyedOut)
 			}
@@ -101,14 +101,14 @@ const EdgeLegendComponent: React.FC<EdgeLegendComponentProps> = ({ edgeText, edg
 	>
 		<path className={classNameEdge} d='m0 10 l20 0 l20 0 l20 0 l20 0' markerEnd='url(#triangle)' markerMid={`url(#${markerId})`} ></path>
 		<path className = {classNameInteractiveEdge} d='m0 10 l80 0' ></path>
-        
+
 		<text x = {92} y = {15}>{edgeText}</text>
 	</svg>)
-}  
+}
 
 interface NodeLegendComponentProps{
     nodeType:       string
-    isGreyedOutMap: Map<string,boolean>    
+    isGreyedOutMap: Map<string,boolean>
 }
 
 const NodeLegendComponent: React.FC<NodeLegendComponentProps> = ({ nodeType, isGreyedOutMap }) => {
diff --git a/source/components/graphComponent.tsx b/source/components/graph-viewer.tsx
similarity index 70%
rename from source/components/graphComponent.tsx
rename to source/components/graph-viewer.tsx
index 4a2f27f..b809cd9 100644
--- a/source/components/graphComponent.tsx
+++ b/source/components/graph-viewer.tsx
@@ -1,56 +1,39 @@
 import type { ElkExtendedEdge, ElkNode, LayoutOptions } from 'elkjs/lib/elk.bundled.js'
 import ELK from 'elkjs/lib/elk.bundled.js'
-import React, { ChangeEventHandler, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react'
-import type {
-	Edge,
-	Node } from '@xyflow/react'
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import type { Edge, Node } from '@xyflow/react'
 import {
 	ReactFlow,
-	addEdge,
-	Panel,
 	useNodesState,
 	useEdgesState,
 	useReactFlow,
-	Connection,
 	MiniMap,
-	NodeToolbar,
 	Controls,
 	Background,
-	Position,
-	Handle,
-	NodeProps,
-	getStraightPath,
-	BaseEdge,
-	EdgeLabelRenderer,
-	MarkerType,
-	EdgeProps,
-	applyEdgeChanges,
 	ControlButton,
 } from '@xyflow/react'
 
 import '@xyflow/react/dist/style.css'
 
 import type { VisualizationGraph } from './model/graph'
-import FloatingConnectionLine, { ExitPointNode, FunctionCallNode, FunctionDefinitionNode, GroupNode, UseNode, ValueNode, VariableDefinitionNode } from './model/nodes/nodeDefinition'
-import ReadsEdge from './model/edges/readsEdge'
-import { edgeTagMapper } from './model/edges/edgeBase'
-import { ArgumentEdge } from './model/edges/argumentEdge'
-import { CallsEdge } from './model/edges/callsEdge'
-import { DefinedByEdge } from './model/edges/definedByEdge'
-import { DefinedByOnCallEdge } from './model/edges/definedByOnCallEdge'
-import { DefinesOnCallEdge } from './model/edges/definesOnCallEdge'
-import { RelatesEdge } from './model/edges/relatesEdge'
-import { ReturnsEdge } from './model/edges/returnsEdge'
-import { SameDefDefEdge } from './model/edges/sameDefDefEdge'
-import { SameReadReadEdge } from './model/edges/sameReadReadEdge'
-import { SideEffectOnCallEdge } from './model/edges/sideEffectOnCallEdge'
-import { NonStandardEvaluationEdge } from './model/edges/nonStandardEvaluationEdge'
-import { flattenToNodeArray, foldIntoElkHierarchy } from './graphHierarchy'
-import { ExtendedExtendedEdge, transformGraphForLayouting, transformGraphForShowing } from './model/graphTransition'
-import { MultiEdge } from './model/edges/multiEdge'
-import { slideInLegend } from './legendComonent'
-import { SvgDefinitionsComponent } from './svgDefinitions'
-import type { VisualStateModel } from './model/visualStateModel'
+import FloatingConnectionLine, { ExitPointNode, FunctionCallNode, FunctionDefinitionNode, GroupNode, UseNode, ValueNode, VariableDefinitionNode } from './model/nodes/node-definition'
+import ReadsEdge from './model/edges/reads-edge'
+import { ArgumentEdge } from './model/edges/argument-edge'
+import { CallsEdge } from './model/edges/calls-edge'
+import { DefinedByEdge } from './model/edges/defined-by-edge'
+import { DefinedByOnCallEdge } from './model/edges/defined-by-on-call-edge'
+import { DefinesOnCallEdge } from './model/edges/defines-on-call-edge'
+import { RelatesEdge } from './model/edges/relates-edge'
+import { ReturnsEdge } from './model/edges/returns-edge'
+import { SameDefDefEdge } from './model/edges/same-def-def-edge'
+import { SameReadReadEdge } from './model/edges/same-read-read-edge'
+import { SideEffectOnCallEdge } from './model/edges/side-effect-on-call-edge'
+import { NonStandardEvaluationEdge } from './model/edges/non-standard-evaluation-edge'
+import { transformGraphForLayouting, transformGraphForShowing } from './model/graph-transition'
+import { MultiEdge } from './model/edges/multi-edge'
+import { slideInLegend } from './graph-legend'
+import { SvgDefinitionsComponent } from './svg-definitions'
+import type { VisualStateModel } from './model/visual-state-model'
 
 
 
@@ -69,8 +52,8 @@ const elkOptions: LayoutOptions = {
 
 
 async function getLayoutedElements(nodes: Node[],
-																																			nodeIdMap: Map<string,Node>, 
-																																			edges: ElkExtendedEdge[], 
+																																			nodeIdMap: Map<string,Node>,
+																																			edges: ElkExtendedEdge[],
 																																			options: LayoutOptions,
 																																			visualStateModel: VisualStateModel): Promise<{ nodes: Node[]; edges: Edge[] }> {
 	const isHorizontal = options?.['elk.direction'] === 'RIGHT'
@@ -118,13 +101,13 @@ export function LayoutFlow({ graph, assignGraphUpdater, visualStateModel } : Lay
 	const { fitView } = useReactFlow()
 
 	const [isNodeIdShown, setIsNodeIdShown] = useState(false)
-   
+
 	setIsNodeIdShownReactFlow = setIsNodeIdShown
 
 
 	useEffect(() => {
 		setNodes((currentNodes) =>
-			currentNodes.map((node) =>{ 
+			currentNodes.map((node) =>{
 				node.data.isNodeIdShown = isNodeIdShown
 				return ({
 					...node
@@ -140,19 +123,20 @@ export function LayoutFlow({ graph, assignGraphUpdater, visualStateModel } : Lay
 		setCurrentGraph(g)
 		onLayout({ direction: 'DOWN', g })
 	})
-  
+
 	const onLayout = useCallback(
 		({ direction , g = undefined } : { direction: string, g?: VisualizationGraph }) => {
 			const opts = { 'elk.direction': direction, ...elkOptions }
 			const ns = g ? g.nodesInfo.nodes : nodes
 			const es = g ? g.edges : edges
 			const nm = g ? g.nodesInfo.nodeMap: nodeMap
-			getLayoutedElements(ns, nm, convertToExtendedEdges(es), opts, visualStateModel).then(({ nodes: layoutedNodes, edges: layoutedEdges }) => {
-				setNodes(layoutedNodes)
-				setEdges(layoutedEdges)
+			void getLayoutedElements(ns, nm, convertToExtendedEdges(es), opts, visualStateModel)
+				.then(({ nodes: layoutedNodes, edges: layoutedEdges }) => {
+					setNodes(layoutedNodes)
+					setEdges(layoutedEdges)
 
-				window.requestAnimationFrame(() => fitView())
-			})
+					window.requestAnimationFrame(() => void fitView())
+				})
 		},
 		[nodes, edges, currentGraph]
 	)
@@ -162,7 +146,7 @@ export function LayoutFlow({ graph, assignGraphUpdater, visualStateModel } : Lay
 		onLayout({ direction: 'DOWN', g: currentGraph })
 	}, [])
 
-	/* allows to map custom node types */
+	/* mapping custom node types */
 	const nodeTypes = useMemo(() => ({
 		variableDefinitionNode: VariableDefinitionNode,
 		useNode:                UseNode,
diff --git a/source/components/mainContainerComponent.tsx b/source/components/main-container.tsx
similarity index 100%
rename from source/components/mainContainerComponent.tsx
rename to source/components/main-container.tsx
diff --git a/source/components/model/edges/argumentEdge.tsx b/source/components/model/edges/argument-edge.tsx
similarity index 85%
rename from source/components/model/edges/argumentEdge.tsx
rename to source/components/model/edges/argument-edge.tsx
index 559ed7f..78cb11e 100644
--- a/source/components/model/edges/argumentEdge.tsx
+++ b/source/components/model/edges/argument-edge.tsx
@@ -1,5 +1,5 @@
 import type { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from './edgeBase'
+import { BodyEdgeComponent } from './edge-base'
 
 export function ArgumentEdge(props:EdgeProps) {
 	return <BodyEdgeComponent
@@ -9,4 +9,4 @@ export function ArgumentEdge(props:EdgeProps) {
 		source={props.source}
 		target={props.target}
 	/>
-}
\ No newline at end of file
+}
diff --git a/source/components/model/edges/callsEdge.tsx b/source/components/model/edges/calls-edge.tsx
similarity index 85%
rename from source/components/model/edges/callsEdge.tsx
rename to source/components/model/edges/calls-edge.tsx
index 332ffee..1359d7e 100644
--- a/source/components/model/edges/callsEdge.tsx
+++ b/source/components/model/edges/calls-edge.tsx
@@ -1,5 +1,5 @@
 import type { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from './edgeBase'
+import { BodyEdgeComponent } from './edge-base'
 
 export function CallsEdge(props:EdgeProps){
 	return <BodyEdgeComponent
@@ -10,4 +10,4 @@ export function CallsEdge(props:EdgeProps){
 		source={props.source}
 		target={props.target}
 	/>
-}
\ No newline at end of file
+}
diff --git a/source/components/model/edges/definedByEdge.tsx b/source/components/model/edges/defined-by-edge.tsx
similarity index 85%
rename from source/components/model/edges/definedByEdge.tsx
rename to source/components/model/edges/defined-by-edge.tsx
index 052bc21..0cfaaca 100644
--- a/source/components/model/edges/definedByEdge.tsx
+++ b/source/components/model/edges/defined-by-edge.tsx
@@ -1,5 +1,5 @@
 import type { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from './edgeBase'
+import { BodyEdgeComponent } from './edge-base'
 
 export function DefinedByEdge(props:EdgeProps) {
 	return <BodyEdgeComponent
@@ -10,4 +10,4 @@ export function DefinedByEdge(props:EdgeProps) {
 		source={props.source}
 		target={props.target}
 	/>
-}
\ No newline at end of file
+}
diff --git a/source/components/model/edges/definedByOnCallEdge.tsx b/source/components/model/edges/defined-by-on-call-edge.tsx
similarity index 86%
rename from source/components/model/edges/definedByOnCallEdge.tsx
rename to source/components/model/edges/defined-by-on-call-edge.tsx
index 06fae4e..3a6035f 100644
--- a/source/components/model/edges/definedByOnCallEdge.tsx
+++ b/source/components/model/edges/defined-by-on-call-edge.tsx
@@ -1,5 +1,5 @@
 import type { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from './edgeBase'
+import { BodyEdgeComponent } from './edge-base'
 
 export function DefinedByOnCallEdge(props: EdgeProps) {
 	return <BodyEdgeComponent
@@ -10,4 +10,4 @@ export function DefinedByOnCallEdge(props: EdgeProps) {
 		source={props.source}
 		target={props.target}
 	/>
-}
\ No newline at end of file
+}
diff --git a/source/components/model/edges/definesOnCallEdge.tsx b/source/components/model/edges/defines-on-call-edge.tsx
similarity index 86%
rename from source/components/model/edges/definesOnCallEdge.tsx
rename to source/components/model/edges/defines-on-call-edge.tsx
index d121115..283b3ef 100644
--- a/source/components/model/edges/definesOnCallEdge.tsx
+++ b/source/components/model/edges/defines-on-call-edge.tsx
@@ -1,5 +1,5 @@
 import type { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from './edgeBase'
+import { BodyEdgeComponent } from './edge-base'
 
 export function DefinesOnCallEdge(props:EdgeProps) {
 	return <BodyEdgeComponent
@@ -10,4 +10,4 @@ export function DefinesOnCallEdge(props:EdgeProps) {
 		source={props.source}
 		target={props.target}
 	/>
-}
\ No newline at end of file
+}
diff --git a/source/components/model/edges/edgeBase.tsx b/source/components/model/edges/edge-base.tsx
similarity index 92%
rename from source/components/model/edges/edgeBase.tsx
rename to source/components/model/edges/edge-base.tsx
index 5e47854..45a8326 100644
--- a/source/components/model/edges/edgeBase.tsx
+++ b/source/components/model/edges/edge-base.tsx
@@ -1,6 +1,5 @@
-import { useCallback } from 'react'
 import type { EdgeProps, Node, XYPosition } from '@xyflow/react'
-import { getStraightPath, BaseEdge, EdgeLabelRenderer, getBezierPath, Position, useStore, useInternalNode, InternalNode } from '@xyflow/react'
+import { BaseEdge, EdgeLabelRenderer, getBezierPath, Position, useInternalNode } from '@xyflow/react'
 
 const edgeTagMap:{[index: string]: string} = {
 	'reads':                   'readsEdge',
@@ -34,15 +33,15 @@ export const BodyEdgeComponent: React.FC<BodyEdgeComponentProps> = (props) => {
 
 	const sourceNode = useInternalNode(props.source)
 	const targetNode = useInternalNode(props.target)
-    
+
 	if(!sourceNode || !targetNode) {
 		return null
 	}
-  
+
 	const {  sourceX, sourceY, targetX, targetY, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode,false)
 
 
-	const [edgePath, labelX, labelY, offsetX, offsetY] = getBezierPath({
+	const [edgePath, labelX, labelY] = getBezierPath({
 		sourceX:        sourceX,
 		sourceY:        sourceY,
 		sourcePosition: sourcePos,
@@ -50,16 +49,16 @@ export const BodyEdgeComponent: React.FC<BodyEdgeComponentProps> = (props) => {
 		targetX:        targetX,
 		targetY:        targetY,
 	})
-  
-	//const labelPositionX = targetX - sourceX > 0 ? labelX + offsetX / 2 : labelX - offsetX / 2 
+
+	//const labelPositionX = targetX - sourceX > 0 ? labelX + offsetX / 2 : labelX - offsetX / 2
 	//const labelPositionY = targetY - sourceY > 0 ? labelY + offsetY / 2 : labelY - offsetY / 2
 	return (
 		<>
 			<BaseEdge
-				id={props.standardEdgeInformation.id} 
-				path={edgePath} 
-				style={props.edgeStyle} 
-				markerEnd={props.arrowEnd ? 'url(#triangle)' : undefined} markerStart={props.arrowStart ? 'url(#triangle)' : undefined} 
+				id={props.standardEdgeInformation.id}
+				path={edgePath}
+				style={props.edgeStyle}
+				markerEnd={props.arrowEnd ? 'url(#triangle)' : undefined} markerStart={props.arrowStart ? 'url(#triangle)' : undefined}
 			/>
 			<EdgeLabelRenderer>
 				<div
@@ -83,7 +82,7 @@ export const BodyEdgeComponent: React.FC<BodyEdgeComponentProps> = (props) => {
 // of the line between the center of the intersectionNode and the target node
 function getNodeIntersection(intersectionNode:Node, targetNode:Node):XYPosition {
 	// https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
-  
+
 
 
 	const intersectionNodeWidth = intersectionNode.measured?.width
@@ -91,7 +90,7 @@ function getNodeIntersection(intersectionNode:Node, targetNode:Node):XYPosition
 
 	const targetNodeWidth = targetNode.measured?.width
 	const targetNodeHeight = targetNode.measured?.height
-  
+
 	if(intersectionNodeHeight === undefined || intersectionNodeWidth === undefined || targetNodeWidth === undefined || targetNodeHeight === undefined){
 		throw Error('width or height not measured')
 	}
@@ -106,7 +105,7 @@ function getNodeIntersection(intersectionNode:Node, targetNode:Node):XYPosition
 	const intersectionNodePosition = getAbsolutePosition(intersectionNode)
 
 	//Set position correctly because subnode position is relative to parent
-  
+
 	const w = intersectionNodeWidth / 2
 	const h = intersectionNodeHeight / 2
 
@@ -133,22 +132,22 @@ function getNodeIntersectionForTargetPosition(intersectionNode:Node, targetPosit
 	const intersectionNodeWidth = intersectionNode.measured?.width
 	const intersectionNodeHeight = intersectionNode.measured?.height
 
-  
+
 	if(intersectionNodeHeight === undefined || intersectionNodeWidth === undefined){
 		throw Error('width or height not measured')
 	}
-  
+
 	const intersectionNodePosition = getAbsolutePosition(intersectionNode)
 
 	//Set position correctly because subnode position is relative to parent
-  
+
 	const w = intersectionNodeWidth / 2
 	const h = intersectionNodeHeight / 2
 
 	const x2 = intersectionNodePosition.x + w
 	const y2 = intersectionNodePosition.y + h
-	const x1 = targetPosition.x 
-	const y1 = targetPosition.y 
+	const x1 = targetPosition.x
+	const y1 = targetPosition.y
 
 	const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h)
 	const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h)
@@ -164,7 +163,7 @@ function getNodeIntersectionForTargetPosition(intersectionNode:Node, targetPosit
 
 // returns the position (top,right,bottom or right) passed node compared to the intersection point
 function getEdgePosition(node: Node, intersectionPoint:XYPosition): Position {
-  
+
 
 	if(node.position.x === undefined || node.position.y === undefined || node.measured?.height === undefined || node.measured.width === undefined){
 		throw Error('position or measured dimension undefined')
@@ -172,11 +171,11 @@ function getEdgePosition(node: Node, intersectionPoint:XYPosition): Position {
 
 	const absolutePositionNode = getAbsolutePosition(node)
 
-	const leftPosition = absolutePositionNode.x 
+	const leftPosition = absolutePositionNode.x
 	const rightPosition = absolutePositionNode.x + node.measured.width
 	const topPosition = absolutePositionNode.y
 	const bottomPosition = absolutePositionNode.y + node.measured.height
-  
+
 	if(Math.abs(leftPosition - intersectionPoint.x) <= 0.1){
 		return Position.Left
 	}
@@ -232,17 +231,17 @@ function rotatePositionOnNodeDegrees(node:Node, intersectionPoint:XYPosition, an
 		throw Error('position or measured dimension undefined')
 	}
 	const nodeMiddle:XYPosition = { x: node.position.x + 1/2 * node.measured.width, y: node.position.y + 1/2 * node.measured.height }
-  
+
 	const distanceToMiddle:XYPosition = { x: intersectionPoint.x - nodeMiddle.x, y: intersectionPoint.y - nodeMiddle.y }
 	let degreeFromMiddle  = 0
 	if(distanceToMiddle.x === 0){
-		degreeFromMiddle = distanceToMiddle.y >= 0 ?  Math.PI / 2 : Math.PI * 3/2 
+		degreeFromMiddle = distanceToMiddle.y >= 0 ?  Math.PI / 2 : Math.PI * 3/2
 	} else {
 		degreeFromMiddle = Math.atan2(distanceToMiddle.y , distanceToMiddle.x)
 	}
-  
+
 	const newAngle = degreeFromMiddle + angleInDegrees / 360 * 2 * Math.PI
 	const lengthLongerFromMiddleOfNode = node.measured.height + node.measured.width
-	const newReferencePoint:XYPosition = { x: Math.cos(newAngle) * lengthLongerFromMiddleOfNode + nodeMiddle.x, y: Math.sin(newAngle) * lengthLongerFromMiddleOfNode + nodeMiddle.y } 
+	const newReferencePoint:XYPosition = { x: Math.cos(newAngle) * lengthLongerFromMiddleOfNode + nodeMiddle.x, y: Math.sin(newAngle) * lengthLongerFromMiddleOfNode + nodeMiddle.y }
 	return getNodeIntersectionForTargetPosition(node, newReferencePoint)
-}
\ No newline at end of file
+}
diff --git a/source/components/model/edges/multiEdge.tsx b/source/components/model/edges/multi-edge.tsx
similarity index 83%
rename from source/components/model/edges/multiEdge.tsx
rename to source/components/model/edges/multi-edge.tsx
index 64b549d..d1d1467 100644
--- a/source/components/model/edges/multiEdge.tsx
+++ b/source/components/model/edges/multi-edge.tsx
@@ -1,17 +1,15 @@
-import { useCallback } from 'react'
 import type { EdgeProps, ReactFlowState, XYPosition } from '@xyflow/react'
-import { BaseEdge, Edge, EdgeLabelRenderer, EdgeMouseHandler, EdgeTypes, InternalNode, getBezierPath, useInternalNode, useStore } from '@xyflow/react'
-import { getEdgeParams } from './edgeBase'
+import { EdgeLabelRenderer, getBezierPath, useInternalNode, useStore } from '@xyflow/react'
+import { getEdgeParams } from './edge-base'
 import type { EdgeTypeName } from '@eagleoutice/flowr/dataflow/graph/edge'
-import { EdgeType } from '@eagleoutice/flowr/dataflow/graph/edge'
-import { VisualStateModel } from '../visualStateModel'
+import { VisualStateModel } from '../visual-state-model'
 
 const amountOfSamplePointsForLength = 100
 const lengthBetweenMarkerPoints = 10
 const startEndDistanceToMarkers = 10
 
 export function MultiEdge(props:EdgeProps){
-    
+
 	return <BodyMultiEdgeComponent
 		standardEdgeInformation={props}
 		source={props.source}
@@ -26,7 +24,7 @@ interface BodyMultiEdgeComponentProps {
     readonly target:                  string;
 }
 
-export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = ({ standardEdgeInformation, arrowEnd, source, target }) => {
+export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = ({ standardEdgeInformation, source, target }) => {
 	const sourceNode = useInternalNode(source)
 	const targetNode = useInternalNode(target)
 
@@ -36,7 +34,7 @@ export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = ({
 
 	const isBiDirectionEdge = useStore((s: ReactFlowState) => {
 		const edgeExists = s.edges.some(
-			(e) =>
+			e =>
 				(e.source === standardEdgeInformation.target && e.target === standardEdgeInformation.source) ||
         (e.target === standardEdgeInformation.source && e.source === standardEdgeInformation.target),
 		)
@@ -46,7 +44,7 @@ export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = ({
 
 	const {  sourceX, sourceY, targetX, targetY, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode, isBiDirectionEdge)
 
-	const [edgePath, labelX, labelY, offsetX, offsetY] = getBezierPath({
+	const [edgePath, labelX, labelY] = getBezierPath({
 		sourceX:        sourceX,
 		sourceY:        sourceY,
 		sourcePosition: sourcePos,
@@ -55,11 +53,6 @@ export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = ({
 		targetY:        targetY,
 	})
 
-	//const labelPositionX = targetX - sourceX > 0 ? labelX + offsetX / 2 : labelX - offsetX / 2 
-	//const labelPositionY = targetY - sourceY > 0 ? labelY + offsetY / 2 : labelY - offsetY / 2
-	const defaultEdgeStyle: React.CSSProperties = { stroke: 'black', pointerEvents: 'none', cursor: 'none' }
-	const arrowStart = false
-
 	let label = ''
 	for(const singleLabel of (standardEdgeInformation.data?.edgeTypes as string[] ?? [])){
 		label += singleLabel + ' '
@@ -68,16 +61,9 @@ export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = ({
 	const edgeLabelId = standardEdgeInformation.id + '-edgeLabel'
 	const hoverOverEdgeId = standardEdgeInformation.id + '-hoverover-interactive'
 	const cssRule = `body:has(#${hoverOverEdgeId}:hover) #${edgeLabelId} {visibility: visible;}`
-  
+
 	const givenEdgeTypes = standardEdgeInformation.data?.edgeTypes as Set<EdgeTypeName> ?? new Set<EdgeTypeName>()
-  
-	//insert respective className
-	let classNameString = ''
-	givenEdgeTypes.forEach((edgeTypeName) => {
-		classNameString += ' ' + edgeTypeName + '-edge'
-	})
-	classNameString = classNameString.slice(1)
-  
+
 	return (
 		<>
 			<PathWithMarkerComponent id={standardEdgeInformation.id} edgeTypes={givenEdgeTypes} edgePath={edgePath} visualStateModel={standardEdgeInformation.data?.visualStateModel as VisualStateModel ?? new VisualStateModel()}/>
@@ -96,7 +82,7 @@ export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = ({
 				>
 					{label}
 				</div>
-      
+
 			</EdgeLabelRenderer>
 		</>
 	)
@@ -104,13 +90,8 @@ export const BodyMultiEdgeComponent: React.FC<BodyMultiEdgeComponentProps> = ({
 
 //see also https://en.wikipedia.org/wiki/B%C3%A9zier_curve
 /**
- * Calculates Point on BezierCurve 
- * @param t 0 <= t <= 1
- * @param startingPoint 
- * @param startControlPoint 
- * @param endControlPoint 
- * @param endingPoint 
- * @returns Point on BezierCurve 
+ * Calculates Point on BezierCurve. `t - 0 <= t <= 1`
+ * @returns Point on BezierCurve
  */
 function bezierCurve(t:number, startingPoint:XYPosition, startControlPoint:XYPosition, endControlPoint: XYPosition, endingPoint:XYPosition):XYPosition {
 	return ({
@@ -137,13 +118,9 @@ function calculateLengthOfBezierCurve(startingPoint:XYPosition, startControlPoin
 }
 
 /**
- * calculates the percentage wise (in relation to length) point on bezier curve
- * @param t 0 <= t <= 1
- * @param startingPoint 
- * @param startControlPoint 
- * @param endControlPoint 
- * @param endingPoint 
- * @returns point which is approximately t percent through the bezier curve
+ * calculates the percentage wise (in relation to length) point on bezier-curve.
+ * `t` must be in the range of `0 <= t <= 1`
+ * @returns point which is approximately t percent through the bezier-curve
  */
 function linearPercentageBezierCurve(t:number, startingPoint:XYPosition, startControlPoint:XYPosition, endControlPoint: XYPosition, endingPoint:XYPosition):XYPosition{
 	const curveLengthTotal = calculateLengthOfBezierCurve(startingPoint, startControlPoint, endControlPoint, endingPoint)
@@ -212,12 +189,8 @@ export function edgeTypeToMarkerIdMapper(edgeTag: string): string {
 }
 
 /**
- * split a cubic bezier curve into two parts using de Casteljaus Algorithm
- * @param t point to split at 0 < t < 1
- * @param startingPoint 
- * @param startControlPoint 
- * @param endControlPoint 
- * @param endingPoint 
+ * split a cubic bezier-curve into two parts using de Casteljaus Algorithm.
+ * `t` must be in the range of `0 < t < 1`
  * @returns Array of two elements where the first is the first part of the split curve and second is last part of the split curve
  */
 function splitSingleBezierCurve(t:number, startingPoint:XYPosition, startControlPoint:XYPosition, endControlPoint: XYPosition, endingPoint:XYPosition):BezierCurve[] {
@@ -230,8 +203,8 @@ function splitSingleBezierCurve(t:number, startingPoint:XYPosition, startControl
 	for(let algorithmIndex = 1; algorithmIndex <= 3; algorithmIndex++){
 		for(let pointIndex = 0; pointIndex <= 3 - algorithmIndex; pointIndex++){
 			const calcX = pointArray[algorithmIndex - 1][pointIndex].x * (1 - t) + pointArray[algorithmIndex - 1][pointIndex + 1].x * t
-			const calcY = pointArray[algorithmIndex - 1][pointIndex].y * (1 - t) + pointArray[algorithmIndex - 1][pointIndex + 1].y * t 
-			pointArray[algorithmIndex].push({ x: calcX, y: calcY }) 
+			const calcY = pointArray[algorithmIndex - 1][pointIndex].y * (1 - t) + pointArray[algorithmIndex - 1][pointIndex + 1].y * t
+			pointArray[algorithmIndex].push({ x: calcX, y: calcY })
 		}
 	}
 	return ([
@@ -242,16 +215,12 @@ function splitSingleBezierCurve(t:number, startingPoint:XYPosition, startControl
 }
 
 /**
- * calculate the splitted parts of a cubic bezierCurve
- * @param t All values must follow the format 0 < t[i] < 1 && t[i] < t[i + 1]
- * @param startingPoint 
- * @param startControlPoint 
- * @param endControlPoint 
- * @param endingPoint 
+ * Calculate the split parts of a cubic bezierCurve.
+ * All values from `t` must follow the format `0 < t[i] < 1 && t[i] < t[i + 1]`
  * @returns Array of BezierCurves
  */
 function splitBezierCurve(t:number[], startingPoint:XYPosition, startControlPoint:XYPosition, endControlPoint: XYPosition, endingPoint:XYPosition):BezierCurve[]{
-  
+
 	let A = startingPoint
 	let B = startControlPoint
 	let C = endControlPoint
@@ -259,7 +228,7 @@ function splitBezierCurve(t:number[], startingPoint:XYPosition, startControlPoin
 
 	const returnArray:BezierCurve[] = []
 
-  
+
 	//Calculate linear percentages of curves.
 	const linearPercentagePoints: number[] = []
 	const curveLengthTotal = calculateLengthOfBezierCurve(startingPoint, startControlPoint, endControlPoint, endingPoint)
@@ -279,25 +248,18 @@ function splitBezierCurve(t:number[], startingPoint:XYPosition, startControlPoin
 		}
 	}
 
-	const E: XYPosition = { x: 0, y: 0 }
-	const F: XYPosition = { x: 0, y: 0 }
-	const G: XYPosition = { x: 0, y: 0 }
-	const H: XYPosition = { x: 0, y: 0 }
-	const J: XYPosition = { x: 0, y: 0 }
-	const K: XYPosition = { x: 0, y: 0 }
-
 	let lastBezierCurve:BezierCurve = { startPoint: { x: 0, y: 0 }, controlPointStart: { x: 0, y: 0 }, controlPointEnd: { x: 0, y: 0 }, endPoint: { x: 0, y: 0 } }
 	let startPercentage: number = 0
 	for(let percentIndex = 0; percentIndex < linearPercentagePoints.length; percentIndex++){
 		const currentT = (linearPercentagePoints[percentIndex] - startPercentage) / (1 - startPercentage)
-    
+
 		const newCurves = splitSingleBezierCurve(currentT, A, B, C, D)
 		lastBezierCurve = newCurves[1]
-    
+
 		returnArray.push({
-			startPoint:        newCurves[0].startPoint, 
-			controlPointStart: newCurves[0].controlPointStart, 
-			controlPointEnd:   newCurves[0].controlPointEnd, 
+			startPoint:        newCurves[0].startPoint,
+			controlPointStart: newCurves[0].controlPointStart,
+			controlPointEnd:   newCurves[0].controlPointEnd,
 			endPoint:          newCurves[0].endPoint })
 
 		startPercentage = linearPercentagePoints[percentIndex]
@@ -308,16 +270,16 @@ function splitBezierCurve(t:number[], startingPoint:XYPosition, startControlPoin
 	}
 
 	returnArray.push({
-		startPoint:        lastBezierCurve.startPoint, 
-		controlPointStart: lastBezierCurve.controlPointStart, 
-		controlPointEnd:   lastBezierCurve.controlPointEnd, 
+		startPoint:        lastBezierCurve.startPoint,
+		controlPointStart: lastBezierCurve.controlPointStart,
+		controlPointEnd:   lastBezierCurve.controlPointEnd,
 		endPoint:          lastBezierCurve.endPoint })
 	return returnArray
 }
 
 /** */
 const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = ({ edgePath, edgeTypes, id, visualStateModel }) => {
-	//Parse 4 Points from the calculated bezier curve
+	//Parse 4 Points from the calculated bezier-curve
 	const pointArray = edgePath.replace('M','').replace('C','').split(' ').map((stringPoint)=> stringPoint.split(',').map((stringNumber) => +stringNumber))
 	const startPointBez = { x: pointArray[0][0], y: pointArray[0][1] }
 	const startControlPointBez = { x: pointArray[1][0], y: pointArray[1][1] }
@@ -326,7 +288,7 @@ const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = ({ edge
 
 	const lengthOfCurve = calculateLengthOfBezierCurve(startPointBez,startControlPointBez,endControlPointBez,endPointBez)
 
-	//check if curve is too small to fit many points
+	//check if the curve is too small to fit many points
 	let amountOfMarkerPointsInBetween = Math.floor((lengthOfCurve - startEndDistanceToMarkers * 2 - 2 * lengthBetweenMarkerPoints * edgeTypes.size) / lengthBetweenMarkerPoints)
 	if(amountOfMarkerPointsInBetween <= 0){
 		amountOfMarkerPointsInBetween = 0
@@ -334,9 +296,9 @@ const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = ({ edge
 
 	const maximumOfInBetweenPoints = 4
 
-	const individualMarkerPointsInBetween = Math.floor(amountOfMarkerPointsInBetween / edgeTypes.size) > maximumOfInBetweenPoints ? 
-		maximumOfInBetweenPoints : 
-		Math.floor(amountOfMarkerPointsInBetween / edgeTypes.size) 
+	const individualMarkerPointsInBetween = Math.floor(amountOfMarkerPointsInBetween / edgeTypes.size) > maximumOfInBetweenPoints ?
+		maximumOfInBetweenPoints :
+		Math.floor(amountOfMarkerPointsInBetween / edgeTypes.size)
 
 	//calculate which symbols need to be on which points
 	//index -> edgeType
@@ -360,21 +322,21 @@ const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = ({ edge
 			while(nextPoint < 1 - (startEndDistanceToMarkers + lengthBetweenMarkerPoints *  edgeTypes.size)/ lengthOfCurve){
 				percentageArray.push(nextPoint)
 				nextPoint += (edgeTypes.size) * //Correctly jump for each marker
-                      (1 - 2 * (startEndDistanceToMarkers + lengthBetweenMarkerPoints * edgeTypes.size) / lengthOfCurve) * // use in between distance as reference 
+                      (1 - 2 * (startEndDistanceToMarkers + lengthBetweenMarkerPoints * edgeTypes.size) / lengthOfCurve) * // use in between distance as reference
                       1 / (individualMarkerPointsInBetween * edgeTypes.size + 1) //spacing between points
 			}
 			// last marker
-			nextPoint = 1 - (startEndDistanceToMarkers + lengthBetweenMarkerPoints *  (edgeTypes.size - (indexOfMarkerType + 1)))/ lengthOfCurve 
+			nextPoint = 1 - (startEndDistanceToMarkers + lengthBetweenMarkerPoints *  (edgeTypes.size - (indexOfMarkerType + 1)))/ lengthOfCurve
 			percentageArray.push(nextPoint)
 		}
-    
+
 		//get points on BezierCurve
 		const pointsOnCurve = percentageArray.map((percentage) => linearPercentageBezierCurve(percentage, startPointBez, startControlPointBez, endControlPointBez, endPointBez))
 		pointsMap.set(indexOfMarkerType, pointsOnCurve)
 		curveMap.set(indexOfMarkerType, splitBezierCurve(percentageArray, startPointBez, startControlPointBez, endControlPointBez, endPointBez))
 		indexOfMarkerType += 1
 	}
-   
+
 	//create use elements
 	let useArray:JSX.Element[] = []
 	markerMap.forEach((edgeType,offsetIndex) => {
@@ -383,11 +345,11 @@ const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = ({ edge
 			return (<use className = {`${edgeType}-edge-symbol`}key = {id + '-' + point.x + '-' + point.y} id = {id + '-' + point.x + '-' + point.y} href={`#${edgeTypeToSymbolIdMapper(edgeType)}`} x={point.x} y={point.y} />)
 		}) ?? []
 		useArray = useArray.concat(useBlockArray)
-	}) 
-  
+	})
+
 	//create curve
 	const markerEdgeMap: JSX.Element[] = []
-  
+
 	curveMap.forEach((array, index) =>{
 		const firstBezierCurve = array[0]
 		let dOfPath = `M${firstBezierCurve.startPoint.x},${firstBezierCurve.startPoint.y} `
@@ -395,16 +357,16 @@ const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = ({ edge
 			dOfPath += `C${curve.controlPointStart.x},${curve.controlPointStart.y} ${curve.controlPointEnd.x},${curve.controlPointEnd.y} ${curve.endPoint.x},${curve.endPoint.y} `
 		})
 
-		const edgeType = markerMap.get(index) ?? '' 
+		const edgeType = markerMap.get(index) ?? ''
 		dOfPath = dOfPath.trimEnd()
 		const pathId = id + `-${edgeType}-marker-edge`
 		const markerEdge = (
 			<path
-				key = {pathId} 
+				key = {pathId}
 				id = {pathId}
 				className={'react-flow__edge-path multi-edge' + ` ${edgeType}-edge` + ((visualStateModel.isGreyedOutMap.get(edgeType) ?? false) ? ' legend-passive': '')}
 				d={dOfPath}
-				markerMid = {`url(#${edgeTypeToMarkerIdMapper(edgeType)})`} 
+				markerMid = {`url(#${edgeTypeToMarkerIdMapper(edgeType)})`}
 				markerEnd = {'url(#triangle)'}
 			/>
 		)
@@ -415,8 +377,8 @@ const PathWithMarkerComponent : React.FC<PathWithMarkerComponentProps> = ({ edge
 		<>
 			<path
 				id={hoverOverEdgeId} //Interaction Edge
-				d={edgePath} 
-				className = 'interactive-edge' 
+				d={edgePath}
+				className = 'interactive-edge'
 			/>
 			{markerEdgeMap.map((self) => self)}
 		</>)
diff --git a/source/components/model/edges/nonStandardEvaluationEdge.tsx b/source/components/model/edges/non-standard-evaluation-edge.tsx
similarity index 86%
rename from source/components/model/edges/nonStandardEvaluationEdge.tsx
rename to source/components/model/edges/non-standard-evaluation-edge.tsx
index 4e698b6..9ddf743 100644
--- a/source/components/model/edges/nonStandardEvaluationEdge.tsx
+++ b/source/components/model/edges/non-standard-evaluation-edge.tsx
@@ -1,5 +1,5 @@
 import type { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from './edgeBase'
+import { BodyEdgeComponent } from './edge-base'
 
 export function NonStandardEvaluationEdge(props:EdgeProps) {
 	return <BodyEdgeComponent
@@ -9,4 +9,4 @@ export function NonStandardEvaluationEdge(props:EdgeProps) {
 		source={props.source}
 		target={props.target}
 	/>
-}
\ No newline at end of file
+}
diff --git a/source/components/model/edges/readsEdge.tsx b/source/components/model/edges/reads-edge.tsx
similarity index 86%
rename from source/components/model/edges/readsEdge.tsx
rename to source/components/model/edges/reads-edge.tsx
index fa322bf..35139b4 100644
--- a/source/components/model/edges/readsEdge.tsx
+++ b/source/components/model/edges/reads-edge.tsx
@@ -1,5 +1,5 @@
 import type { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from './edgeBase'
+import { BodyEdgeComponent } from './edge-base'
 
 
 export default function ReadsEdge(props: EdgeProps) {
@@ -13,4 +13,3 @@ export default function ReadsEdge(props: EdgeProps) {
 	/>
 }
 
- 
\ No newline at end of file
diff --git a/source/components/model/edges/relatesEdge.tsx b/source/components/model/edges/relates-edge.tsx
similarity index 85%
rename from source/components/model/edges/relatesEdge.tsx
rename to source/components/model/edges/relates-edge.tsx
index b0b7ab8..d13f272 100644
--- a/source/components/model/edges/relatesEdge.tsx
+++ b/source/components/model/edges/relates-edge.tsx
@@ -1,5 +1,5 @@
 import type { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from './edgeBase'
+import { BodyEdgeComponent } from './edge-base'
 
 export function RelatesEdge(props:EdgeProps) {
 	return <BodyEdgeComponent
@@ -9,4 +9,4 @@ export function RelatesEdge(props:EdgeProps) {
 		source={props.source}
 		target={props.target}
 	/>
-}
\ No newline at end of file
+}
diff --git a/source/components/model/edges/returnsEdge.tsx b/source/components/model/edges/returns-edge.tsx
similarity index 85%
rename from source/components/model/edges/returnsEdge.tsx
rename to source/components/model/edges/returns-edge.tsx
index 5a39e10..49e7bcc 100644
--- a/source/components/model/edges/returnsEdge.tsx
+++ b/source/components/model/edges/returns-edge.tsx
@@ -1,5 +1,5 @@
 import type { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from './edgeBase'
+import { BodyEdgeComponent } from './edge-base'
 
 export function ReturnsEdge(props:EdgeProps) {
 	return <BodyEdgeComponent
@@ -10,4 +10,4 @@ export function ReturnsEdge(props:EdgeProps) {
 		source={props.source}
 		target={props.target}
 	/>
-}
\ No newline at end of file
+}
diff --git a/source/components/model/edges/sameDefDefEdge.tsx b/source/components/model/edges/same-def-def-edge.tsx
similarity index 85%
rename from source/components/model/edges/sameDefDefEdge.tsx
rename to source/components/model/edges/same-def-def-edge.tsx
index 7aa8a4d..719e551 100644
--- a/source/components/model/edges/sameDefDefEdge.tsx
+++ b/source/components/model/edges/same-def-def-edge.tsx
@@ -1,5 +1,5 @@
 import type { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from './edgeBase'
+import { BodyEdgeComponent } from './edge-base'
 
 export function SameDefDefEdge(props:EdgeProps) {
 	return <BodyEdgeComponent
@@ -9,4 +9,4 @@ export function SameDefDefEdge(props:EdgeProps) {
 		source={props.source}
 		target={props.target}
 	/>
-}
\ No newline at end of file
+}
diff --git a/source/components/model/edges/sameReadReadEdge.tsx b/source/components/model/edges/same-read-read-edge.tsx
similarity index 85%
rename from source/components/model/edges/sameReadReadEdge.tsx
rename to source/components/model/edges/same-read-read-edge.tsx
index 91c8570..9b9bdad 100644
--- a/source/components/model/edges/sameReadReadEdge.tsx
+++ b/source/components/model/edges/same-read-read-edge.tsx
@@ -1,5 +1,5 @@
 import type { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from './edgeBase'
+import { BodyEdgeComponent } from './edge-base'
 
 export function SameReadReadEdge(props:EdgeProps) {
 	return <BodyEdgeComponent
@@ -9,4 +9,4 @@ export function SameReadReadEdge(props:EdgeProps) {
 		source={props.source}
 		target={props.target}
 	/>
-}
\ No newline at end of file
+}
diff --git a/source/components/model/edges/sideEffectOnCallEdge.tsx b/source/components/model/edges/side-effect-on-call-edge.tsx
similarity index 85%
rename from source/components/model/edges/sideEffectOnCallEdge.tsx
rename to source/components/model/edges/side-effect-on-call-edge.tsx
index d5317ec..8a7b44a 100644
--- a/source/components/model/edges/sideEffectOnCallEdge.tsx
+++ b/source/components/model/edges/side-effect-on-call-edge.tsx
@@ -1,5 +1,5 @@
 import type { EdgeProps } from '@xyflow/react'
-import { BodyEdgeComponent } from './edgeBase'
+import { BodyEdgeComponent } from './edge-base'
 
 export function SideEffectOnCallEdge(props:EdgeProps) {
 	return <BodyEdgeComponent
@@ -9,4 +9,4 @@ export function SideEffectOnCallEdge(props:EdgeProps) {
 		source={props.source}
 		target={props.target}
 	/>
-}
\ No newline at end of file
+}
diff --git a/source/components/model/graphBuilder.ts b/source/components/model/graph-builder.ts
similarity index 92%
rename from source/components/model/graphBuilder.ts
rename to source/components/model/graph-builder.ts
index ca16cb9..5ebe4a2 100644
--- a/source/components/model/graphBuilder.ts
+++ b/source/components/model/graph-builder.ts
@@ -1,18 +1,11 @@
 import type { Edge, Node } from '@xyflow/react'
 import type { VisualizationGraph } from './graph'
-import { EdgeTypeName, edgeTypesToNames } from '@eagleoutice/flowr/dataflow/graph/edge'
+import { edgeTypesToNames } from '@eagleoutice/flowr/dataflow/graph/edge'
 import type { NodeId } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/node-id'
 import type { ParentInformation } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/decorate'
-import { NormalizedAst } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/decorate'
 import { visitAst } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/visitor'
 import type { RNode } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/model'
 
-export interface Graph {
-    rootVertices:      Set<string>,
-    vertexInformation: Map<string, {name: string, tag: string}>,
-    edgeInformation:   Map<string, Map<string, {types: {[key: string]: string}}>>
-}
-
 export interface OtherGraph{
     'rootVertices':      number[]
     'vertexInformation': [number, VertexInfo][]
@@ -66,11 +59,11 @@ function constructLexemeMapping(ast: RNode<ParentInformation>): Map<NodeId, stri
 			infoMap.set(node.info.id, node.lexeme)
 		}
 	})
-    
+
 	return infoMap
 }
 
-export interface VisualizationNodeProps extends Record<string, unknown> { 
+export interface VisualizationNodeProps extends Record<string, unknown> {
     label:     string
     nodeType:  string
     extent?:   string
@@ -86,7 +79,7 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
 	const subflowMap = new Map<number, number>()
 
 	const nodeIdMap = new Map<string, Node<VisualizationNodeProps>>()
-    
+
 	const visualizationGraph: VisualizationGraph = { nodesInfo: { nodes: [], nodeMap: nodeIdMap }, edges: [], }
 
 	//Construct subflow Map and nodeId Map
@@ -98,7 +91,7 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
 			subflowArray.forEach((subNode) => {
 				subflowMap.set(subNode,nodeId)
 			})
-            
+
 			const idNewNode = String(nodeId) //+ '-subflow-node'
 			const newNode: Node<VisualizationNodeProps> = {
 				id:          idNewNode,
@@ -118,7 +111,7 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
 	for(const [nodeId, nodeInfo] of dataflowGraph.vertexInformation){
 		/* position will be set by the layout later */
 		const nodeInfoInfo = nodeInfo
-        
+
 		const idNewNode = String(nodeId)
 		const newNode: Node<VisualizationNodeProps> = {
 			id:          idNewNode,
@@ -130,12 +123,12 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
 			type:        nodeTagMapper(nodeInfoInfo.tag),
 		}
 
-        
+
 		if(!nodeIdMap.has(idNewNode)){
 			nodeIdMap.set(idNewNode, newNode)
 			visualizationGraph.nodesInfo.nodes.push(newNode)
 		}
-        
+
 		if(subflowMap.has(nodeId)){
 			const toAlterNode = nodeIdMap.get(idNewNode)
 			const parentId = String(subflowMap.get(nodeId))
@@ -146,8 +139,8 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
             }
             nodeIdMap.get(parentId)?.data.children?.push(idNewNode)
 		}
-        
-        
+
+
 		/*
         if(subflowMap.has(nodeId)){
             const parentId = String(subflowMap.get(nodeId)) + '-subflow-node'
@@ -187,10 +180,8 @@ export function transformToVisualizationGraphForOtherGraph(ast: RNode<ParentInfo
 		for(const [targetNodeId, targetNodeInfo] of listOfConnectedNodes2){
 			const listOfEdgeTypes = edgeTypesToNames(targetNodeInfo.types)
 			let labelNames:string = ''
-			let lastEdgeType:string = ''
 			for( const linkEdgeType of listOfEdgeTypes){
 				labelNames += linkEdgeType + ' '
-				lastEdgeType = linkEdgeType
 			}
 			const newEdge: Edge = {
 				source: String(sourceNodeId),
@@ -216,4 +207,4 @@ const nodeTagMap:{[index: string]: string} = {
 	'function-definition': 'functionDefinitionNode',
 	'exit-point':          'exitPointNode',
 	'value':               'valueNode'
-}
\ No newline at end of file
+}
diff --git a/source/components/model/graphTransition.ts b/source/components/model/graph-transition.ts
similarity index 92%
rename from source/components/model/graphTransition.ts
rename to source/components/model/graph-transition.ts
index 7873ee8..b704413 100644
--- a/source/components/model/graphTransition.ts
+++ b/source/components/model/graph-transition.ts
@@ -1,8 +1,8 @@
 import type { ElkExtendedEdge, ElkNode, LayoutOptions } from 'elkjs'
-import { flattenToNodeArray, foldIntoElkHierarchy } from '../graphHierarchy'
+import { flattenToNodeArray, foldIntoElkHierarchy } from '../graph-hierarchy'
 import type { Edge, Node } from '@xyflow/react'
-import { edgeTagMapper } from './edges/edgeBase'
-import type { VisualStateModel } from './visualStateModel'
+import { edgeTagMapper } from './edges/edge-base'
+import type { VisualStateModel } from './visual-state-model'
 
 export function transformGraphForLayouting(nodes: Node[], nodeIdMap: Map<string,Node>, edges: ElkExtendedEdge[], options: LayoutOptions, isHorizontal: boolean):ElkNode{
 	const toReturn: ElkNode = {
@@ -23,26 +23,26 @@ export interface ExtendedExtendedEdge extends ElkExtendedEdge{
 }
 
 export function transformGraphForShowing(layoutedGraph: ElkNode, isHorizontal: boolean, visualStateModel: VisualStateModel): { nodes: Node[]; edges: Edge[] }{
-  
+
 	const newNodes = flattenToNodeArray(layoutedGraph.children ?? [])
 
 	//reset node height and width so they will be correctly calculated and set afterwards
-  
+
 	newNodes.forEach((node) => {
 		delete node['height']
 		delete node['width']
 		node.data = { ...node.data, visualStateModel: visualStateModel }
-    
+
 		//size needs to be defined for size of function definiton to make sense
 		if(node.data.nodeType === 'function-definition'){
 			node.width = node.data.estimatedMaxX - node.data.estimatedMinX
 			node.height = node.data.estimatedMaxY - node.data.estimatedMinY
 		}
 	})
-  
+
 	return {
 		nodes: newNodes,
-		edges: (layoutedGraph.edges as ExtendedExtendedEdge[] ?? []).map(e => { 
+		edges: (layoutedGraph.edges as ExtendedExtendedEdge[] ?? []).map(e => {
 			return {
 				id:           e.id,
 				source:       e.sources[0],
@@ -57,4 +57,4 @@ export function transformGraphForShowing(layoutedGraph: ElkNode, isHorizontal: b
 			}
 		})
 	}
-}
\ No newline at end of file
+}
diff --git a/source/components/model/nodes/handleNodeComponent.tsx b/source/components/model/nodes/handle-node-component.tsx
similarity index 88%
rename from source/components/model/nodes/handleNodeComponent.tsx
rename to source/components/model/nodes/handle-node-component.tsx
index 649f64a..df9efe7 100644
--- a/source/components/model/nodes/handleNodeComponent.tsx
+++ b/source/components/model/nodes/handle-node-component.tsx
@@ -1,4 +1,4 @@
-import { Handle, NodeProps, Position } from '@xyflow/react'
+import { Handle, Position } from '@xyflow/react'
 
  interface HandleNodeComponentProps {
    targetHandleId: string
diff --git a/source/components/model/nodes/nodeDefinition.tsx b/source/components/model/nodes/node-definition.tsx
similarity index 90%
rename from source/components/model/nodes/nodeDefinition.tsx
rename to source/components/model/nodes/node-definition.tsx
index 796bb77..6a5bddd 100644
--- a/source/components/model/nodes/nodeDefinition.tsx
+++ b/source/components/model/nodes/node-definition.tsx
@@ -1,16 +1,15 @@
 import type { ConnectionLineComponentProps, Node, NodeProps } from '@xyflow/react'
-import { NodeResizer, Position, useUpdateNodeInternals , getBezierPath } from '@xyflow/react'
-import { HandleNodeComponent } from './handleNodeComponent'
-import React, { useState } from 'react'
-import { ProgressPlugin } from 'webpack'
+import { NodeResizer, getBezierPath } from '@xyflow/react'
+import { HandleNodeComponent } from './handle-node-component'
+import React from 'react'
 
-import { getEdgeParams } from '../edges/edgeBase'
-import { VisualStateModel } from '../visualStateModel'
+import { getEdgeParams } from '../edges/edge-base'
+import { VisualStateModel } from '../visual-state-model'
 
 
-function FloatingConnectionLine(props:ConnectionLineComponentProps) {
+function FloatingConnectionLine(props: ConnectionLineComponentProps) {
 	const { toX, toY, fromPosition, toPosition, fromNode } = props
-  
+
 	if(!fromNode) {
 		return null
 	}
@@ -121,12 +120,10 @@ export const FunctionDefinitionNode: React.FC<NodeProps> = ({ data, selected })
 	const divStyle: React.CSSProperties = {}
 	divStyle.width = estimatedMaxX - estimatedMinX
 	divStyle.height = estimatedMaxY - estimatedMinY
-	const minWidth = estimatedMaxX - estimatedMinX
-	const minHeight = estimatedMaxY - estimatedMinY
 	//<NodeResizer minWidth={minWidth} minHeight={minHeight}/>
 	// style = {divStyle}
 	// style={{ height: '100%', width:'100%'}}
-	/* 
+	/*
     <HandleNodeComponent targetHandleId={data.id as string + '-targetHandle'} sourceHandleId={data.id as string + '-sourceHandle'}>
       <div className = 'function-definition-node base-node' >
         <HoverOverComponent name={data.label as string} id={data.id as string} nodeType= {data.nodeType as string}/>
@@ -163,10 +160,10 @@ export const GroupNode: React.FC<NodeComponentProps> = ({ data }) => {
 	const divStyle: React.CSSProperties = {}
 	divStyle.width = estimatedMaxX - estimatedMinX
 	divStyle.height = estimatedMaxY - estimatedMinY
-  
-	return ( 
+
+	return (
 		<div className = 'group-node' style = {divStyle}>
 			{data.label as string}
 		</div>
 	)
-}
\ No newline at end of file
+}
diff --git a/source/components/model/visualStateModel.tsx b/source/components/model/visual-state-model.tsx
similarity index 100%
rename from source/components/model/visualStateModel.tsx
rename to source/components/model/visual-state-model.tsx
diff --git a/source/components/svgDefinitions.tsx b/source/components/svg-definitions.tsx
similarity index 100%
rename from source/components/svgDefinitions.tsx
rename to source/components/svg-definitions.tsx
diff --git a/source/index.tsx b/source/index.tsx
index 1f6a18e..0e60a74 100644
--- a/source/index.tsx
+++ b/source/index.tsx
@@ -2,64 +2,20 @@ import { createRoot } from 'react-dom/client'
 import '../css/main.css'
 import '@xyflow/react/dist/style.css'
 import '@xyflow/react/dist/base.css'
-import { MainContainerComponent } from './components/mainContainerComponent'
-import type { OtherGraph } from './components/model/graphBuilder'
-import { transformToVisualizationGraphForOtherGraph } from './components/model/graphBuilder'
+import { MainContainerComponent } from './components/main-container'
+import type { OtherGraph } from './components/model/graph-builder'
+import { transformToVisualizationGraphForOtherGraph } from './components/model/graph-builder'
 import type { Node } from '@xyflow/react'
 import { ReactFlowProvider } from '@xyflow/react'
-import { LayoutFlow } from './components/graphComponent'
+import { LayoutFlow } from './components/graph-viewer'
 import { VisualizerWebsocketClient } from './components/network/visualizerWebsocketClient'
 import type { FormEvent } from 'react'
 import type { VisualizationGraph } from './components/model/graph'
 import type { RNode } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/model'
 import type { ParentInformation } from '@eagleoutice/flowr/r-bridge/lang-4.x/ast/model/processing/decorate'
-import { LegendComponent, slideInLegend } from './components/legendComonent'
-import { VisualStateModel } from './components/model/visualStateModel'
+import { LegendComponent } from './components/graph-legend'
+import { VisualStateModel } from './components/model/visual-state-model'
 import * as monaco from 'monaco-editor'
-/* old example
-const otherGraph:OtherGraph =  {
-  "rootVertices":["0","2","5"],
-  "vertexInformation":[
-    ["0",{"tag":"use","id":"0","name":"a", "when": 'always'}],
-    ["2",{"tag":"use","id":"2","name":"unnamed-argument-2","environment":{"current":{"name":".GlobalEnv","id":"761","memory":[["return",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"return","nodeId":"built-in"}]],["cat",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"cat","nodeId":"built-in"}]],["print",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"print","nodeId":"built-in"}]],["source",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"source","nodeId":"built-in"}]]]},"level":0},"when":"always"}],
-    ["5",{"tag":"use","id":"5","name":"unnamed-argument-5","environment":{"current":{"name":".GlobalEnv","id":"763","memory":[["return",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"return","nodeId":"built-in"}]],["cat",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"cat","nodeId":"built-in"}]],["print",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"print","nodeId":"built-in"}]],["source",[{"kind":"built-in-function","scope":".GlobalEnv","used":"always","definedAt":"built-in","name":"source","nodeId":"built-in"}]]]},"level":0},"when":"always"}]],
-    "edgeInformation":[["0",[["2",{"types":["reads"],"attribute":"always"}],["5",{"types":["reads"],"attribute":"always"}]]]]};
-*/
-
-const otherGraph: OtherGraph = {       '_idMap': {
-	'size': 13,
-	'k2v':  [[0,{
-		'type':     'RSymbol','location': [1,1,1,1],'content':  'x','lexeme':   'x','info':     {
-			'fullRange': [1,1,1,1],'additionalTokens': [],'fullLexeme': 'x','id': 0,'parent': 4,'role': 'binop-lhs','index': 0,'depth': 2 }
-	}],
-	[1,{ 'location': [1,6,1,6],'lexeme': '2','info': { 'fullRange': [1,6,1,6],'additionalTokens': [],'fullLexeme': '2','id': 1,'parent': 3,'role': 'binop-lhs','index': 0,'depth': 3 },'type': 'RNumber','content': { 'num': 2,'complexNumber': false,'markedAsInt': false } }],
-	[2,{ 'location': [1,10,1,10],'lexeme': '3','info': { 'fullRange': [1,10,1,10],'additionalTokens': [],'fullLexeme': '3','id': 2,'parent': 3,'role': 'binop-rhs','index': 1,'depth': 3 },'type': 'RNumber','content': { 'num': 3,'complexNumber': false,'markedAsInt': false } }],
-	[3,{ 'type': 'RBinaryOp','location': [1,8,1,8],'lhs': { 'location': [1,6,1,6],'lexeme': '2','info': { 'fullRange': [1,6,1,6],'additionalTokens': [],'fullLexeme': '2','id': 1,'parent': 3,'role': 'binop-lhs','index': 0,'depth': 3 },'type': 'RNumber','content': { 'num': 2,'complexNumber': false,'markedAsInt': false } },'rhs': { 'location': [1,10,1,10],'lexeme': '3','info': { 'fullRange': [1,10,1,10],'additionalTokens': [],'fullLexeme': '3','id': 2,'parent': 3,'role': 'binop-rhs','index': 1,'depth': 3 },'type': 'RNumber','content': { 'num': 3,'complexNumber': false,'markedAsInt': false } },'operator': '*','lexeme': '*','info': { 'fullRange': [1,6,1,10],'additionalTokens': [],'fullLexeme': '2 * 3','id': 3,'parent': 4,'depth': 2,'index': 1,'role': 'binop-rhs' } }],
-	[4,{ 'type': 'RBinaryOp','location': [1,3,1,4],'lhs': { 'type': 'RSymbol','location': [1,1,1,1],'content': 'x','lexeme': 'x','info': { 'fullRange': [1,1,1,1],'additionalTokens': [],'fullLexeme': 'x','id': 0,'parent': 4,'role': 'binop-lhs','index': 0,'depth': 2 } },'rhs': { 'type': 'RBinaryOp','location': [1,8,1,8],'lhs': { 'location': [1,6,1,6],'lexeme': '2','info': { 'fullRange': [1,6,1,6],'additionalTokens': [],'fullLexeme': '2','id': 1,'parent': 3,'role': 'binop-lhs','index': 0,'depth': 3 },'type': 'RNumber','content': { 'num': 2,'complexNumber': false,'markedAsInt': false } },'rhs': { 'location': [1,10,1,10],'lexeme': '3','info': { 'fullRange': [1,10,1,10],'additionalTokens': [],'fullLexeme': '3','id': 2,'parent': 3,'role': 'binop-rhs','index': 1,'depth': 3 },'type': 'RNumber','content': { 'num': 3,'complexNumber': false,'markedAsInt': false } },'operator': '*','lexeme': '*','info': { 'fullRange': [1,6,1,10],'additionalTokens': [],'fullLexeme': '2 * 3','id': 3,'parent': 4,'depth': 2,'index': 1,'role': 'binop-rhs' } },'operator': '<-','lexeme': '<-','info': { 'fullRange': [1,1,1,10],'additionalTokens': [],'fullLexeme': 'x <- 2 * 3','id': 4,'parent': 6,'depth': 1,'index': 0,'role': 'expr-list-child' } }],
-	[5,{ 'type': 'RSymbol','location': [1,13,1,13],'content': 'x','lexeme': 'x','info': { 'fullRange': [1,13,1,13],'additionalTokens': [],'fullLexeme': 'x','id': 5,'parent': 6,'role': 'expr-list-child','index': 1,'depth': 1 } }],
-	[6,{ 'type': 'RExpressionList','children': [{ 'type': 'RBinaryOp','location': [1,3,1,4],'lhs': { 'type': 'RSymbol','location': [1,1,1,1],'content': 'x','lexeme': 'x','info': { 'fullRange': [1,1,1,1],'additionalTokens': [],'fullLexeme': 'x','id': 0,'parent': 4,'role': 'binop-lhs','index': 0,'depth': 2 } },'rhs': { 'type': 'RBinaryOp','location': [1,8,1,8],'lhs': { 'location': [1,6,1,6],'lexeme': '2','info': { 'fullRange': [1,6,1,6],'additionalTokens': [],'fullLexeme': '2','id': 1,'parent': 3,'role': 'binop-lhs','index': 0,'depth': 3 },'type': 'RNumber','content': { 'num': 2,'complexNumber': false,'markedAsInt': false } },'rhs': { 'location': [1,10,1,10],'lexeme': '3','info': { 'fullRange': [1,10,1,10],'additionalTokens': [],'fullLexeme': '3','id': 2,'parent': 3,'role': 'binop-rhs','index': 1,'depth': 3 },'type': 'RNumber','content': { 'num': 3,'complexNumber': false,'markedAsInt': false } },'operator': '*','lexeme': '*','info': { 'fullRange': [1,6,1,10],'additionalTokens': [],'fullLexeme': '2 * 3','id': 3,'parent': 4,'depth': 2,'index': 1,'role': 'binop-rhs' } },'operator': '<-','lexeme': '<-','info': { 'fullRange': [1,1,1,10],'additionalTokens': [],'fullLexeme': 'x <- 2 * 3','id': 4,'parent': 6,'depth': 1,'index': 0,'role': 'expr-list-child' } },{ 'type': 'RSymbol','location': [1,13,1,13],'content': 'x','lexeme': 'x','info': { 'fullRange': [1,13,1,13],'additionalTokens': [],'fullLexeme': 'x','id': 5,'parent': 6,'role': 'expr-list-child','index': 1,'depth': 1 } }],'info': { 'additionalTokens': [],'id': 6,'depth': 0,'role': 'root','index': 0 } }],
-	['4-arg',{ 'type': 'RBinaryOp','location': [1,3,1,4],'lhs': { 'type': 'RSymbol','location': [1,1,1,1],'content': 'x','lexeme': 'x','info': { 'fullRange': [1,1,1,1],'additionalTokens': [],'fullLexeme': 'x','id': 0,'parent': 4,'role': 'binop-lhs','index': 0,'depth': 2 } },'rhs': { 'type': 'RBinaryOp','location': [1,8,1,8],'lhs': { 'location': [1,6,1,6],'lexeme': '2','info': { 'fullRange': [1,6,1,6],'additionalTokens': [],'fullLexeme': '2','id': 1,'parent': 3,'role': 'binop-lhs','index': 0,'depth': 3 },'type': 'RNumber','content': { 'num': 2,'complexNumber': false,'markedAsInt': false } },'rhs': { 'location': [1,10,1,10],'lexeme': '3','info': { 'fullRange': [1,10,1,10],'additionalTokens': [],'fullLexeme': '3','id': 2,'parent': 3,'role': 'binop-rhs','index': 1,'depth': 3 },'type': 'RNumber','content': { 'num': 3,'complexNumber': false,'markedAsInt': false } },'operator': '*','lexeme': '*','info': { 'fullRange': [1,6,1,10],'additionalTokens': [],'fullLexeme': '2 * 3','id': 3,'parent': 4,'depth': 2,'index': 1,'role': 'binop-rhs' } },'operator': '<-','lexeme': '<-','info': { 'fullRange': [1,1,1,10],'additionalTokens': [],'fullLexeme': 'x <- 2 * 3','id': 4,'parent': 6,'depth': 1,'index': 0,'role': 'expr-list-child' } }],['5-arg',{ 'type': 'RSymbol','location': [1,13,1,13],'content': 'x','lexeme': 'x','info': { 'fullRange': [1,13,1,13],'additionalTokens': [],'fullLexeme': 'x','id': 5,'parent': 6,'role': 'expr-list-child','index': 1,'depth': 1 } }],['0-arg',{ 'type': 'RSymbol','location': [1,1,1,1],'content': 'x','lexeme': 'x','info': { 'fullRange': [1,1,1,1],'additionalTokens': [],'fullLexeme': 'x','id': 0,'parent': 4,'role': 'binop-lhs','index': 0,'depth': 2 } }],['3-arg',{ 'type': 'RBinaryOp','location': [1,8,1,8],'lhs': { 'location': [1,6,1,6],'lexeme': '2','info': { 'fullRange': [1,6,1,6],'additionalTokens': [],'fullLexeme': '2','id': 1,'parent': 3,'role': 'binop-lhs','index': 0,'depth': 3 },'type': 'RNumber','content': { 'num': 2,'complexNumber': false,'markedAsInt': false } },'rhs': { 'location': [1,10,1,10],'lexeme': '3','info': { 'fullRange': [1,10,1,10],'additionalTokens': [],'fullLexeme': '3','id': 2,'parent': 3,'role': 'binop-rhs','index': 1,'depth': 3 },'type': 'RNumber','content': { 'num': 3,'complexNumber': false,'markedAsInt': false } },'operator': '*','lexeme': '*','info': { 'fullRange': [1,6,1,10],'additionalTokens': [],'fullLexeme': '2 * 3','id': 3,'parent': 4,'depth': 2,'index': 1,'role': 'binop-rhs' } }],['1-arg',{ 'location': [1,6,1,6],'lexeme': '2','info': { 'fullRange': [1,6,1,6],'additionalTokens': [],'fullLexeme': '2','id': 1,'parent': 3,'role': 'binop-lhs','index': 0,'depth': 3 },'type': 'RNumber','content': { 'num': 2,'complexNumber': false,'markedAsInt': false } }],['2-arg',{ 'location': [1,10,1,10],'lexeme': '3','info': { 'fullRange': [1,10,1,10],'additionalTokens': [],'fullLexeme': '3','id': 2,'parent': 3,'role': 'binop-rhs','index': 1,'depth': 3 },'type': 'RNumber','content': { 'num': 3,'complexNumber': false,'markedAsInt': false } }]],
-	'v2k': {}
-},
-'functionCache': [],
-'rootVertices':  [1,2,3,0,4,5],
-'vertexInformation':
-[
-	[1,{ 'tag': 'value','id': 1 }],
-	[2,{ 'tag': 'value','id': 2 }],
-	[3,{ 'tag': 'function-call','id': 3,'name': '*','onlyBuiltin': true,'args': [{ 'nodeId': 1 },{ 'nodeId': 2 }] }],[0,{ 'tag': 'variable-definition','id': 0 }],
-	[4,{ 'tag': 'function-call','id': 4,'name': '<-','onlyBuiltin': true,'args': [{ 'nodeId': 0 },{ 'nodeId': 3 }] }],[5,{ 'tag': 'use','id': 5 }]
-],
-'edgeInformation': [
-	[3,[[1,{ 'types': 65 }],[2,{ 'types': 65 }]]],
-	[4,[[3,{ 'types': 64 }],[0,{ 'types': 72 }]]],
-	[0,[[3,{ 'types': 2 }],[4,{ 'types': 2 }]]],
-	[5,[[0,{ 'types': 1 }]]]
-]
-}
-
-
-
 
 let client: VisualizerWebsocketClient | undefined = undefined
 try {
@@ -88,7 +44,7 @@ function onRCodeRequest() {
 const graphFromOtherGraph: VisualizationGraph = {
 	edges:     [],
 	nodesInfo: { nodes: [], nodeMap: new Map<string,Node>() }
-  
+
 }
 
 let graphUpdater: ((graph: VisualizationGraph) => void) | undefined = undefined
@@ -114,7 +70,7 @@ const firstValue = 'x <- 42'
 
 root.render(
 	<MainContainerComponent initialize={() => {
-		console.log('Hey') 
+		console.log('Hey')
 	}}>
 		<div className='left-side'>
 			<div className='r-code-input'>
@@ -131,12 +87,12 @@ root.render(
 			</div>
 			<LegendComponent visualStateModel={visualStateModel}/>
 		</div>
-    
+
 	</MainContainerComponent>
 )
 
 window.MonacoEnvironment = {
-	getWorker: (workerId, label) => {
+	getWorker: () => {
 		return new Worker('monaco-editor/vs/base/worker/workerMain.js')
 	}
 }

From 12135484c1fca1fa4f8af951a81353865bcf9eb3 Mon Sep 17 00:00:00 2001
From: EagleoutIce <florian.sihler@uni-ulm.de>
Date: Sun, 11 Aug 2024 11:55:27 +0200
Subject: [PATCH 75/75] dep: a set of dep updates

---
 README.md         |  2 +-
 package-lock.json | 62 +++++++++++++++++++----------------------------
 package.json      |  2 +-
 3 files changed, 27 insertions(+), 39 deletions(-)

diff --git a/README.md b/README.md
index 87dca47..b098adb 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 To run the project, you need [npm](https://www.npmjs.com/).
 
-1. Run `npm ci` to install all required packages (only once or after updates)
+1. Run `npm ci --force` to install all required packages (only once or after updates). Due to `react-split-pane` we currently have to use force.
 2. Run `npm start` to start the server
 3. Open the URL shown in the logfile (probably something like <http://localhost:8080/>)
 4. Work, work, work! :D
diff --git a/package-lock.json b/package-lock.json
index 5a240e1..bb427bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@eagleoutice/flowr": "^2.0.9",
         "@types/react": "^18.0.18",
         "@types/react-dom": "^18.0.6",
-        "@xyflow/react": "^12.0.0",
+        "@xyflow/react": "^12.0.4",
         "allotment": "^1.17.0",
         "css-loader": "^6.7.1",
         "elkjs": "^0.9.2",
@@ -48,11 +48,11 @@
       }
     },
     "node_modules/@75lb/deep-merge": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@75lb/deep-merge/-/deep-merge-1.1.1.tgz",
-      "integrity": "sha512-xvgv6pkMGBA6GwdyJbNAnDmfAIR/DfWhrj9jgWh3TY7gRm3KO46x/GPjRg6wJ0nOepwqrNxFfojebh0Df4h4Tw==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@75lb/deep-merge/-/deep-merge-1.1.2.tgz",
+      "integrity": "sha512-08K9ou5VNbheZFxM5tDWoqjA3ImC50DiuuJ2tj1yEPRfkp8lLLg6XAaJ4On+a0yAXor/8ay5gHnAIshRM44Kpw==",
       "dependencies": {
-        "lodash.assignwith": "^4.2.0",
+        "lodash": "^4.17.21",
         "typical": "^7.1.1"
       },
       "engines": {
@@ -1667,11 +1667,11 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
     "node_modules/@xyflow/react": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.0.0.tgz",
-      "integrity": "sha512-f0cboW5ZbKR+xGUr2QtYiIZwGvxDHzCjdtp2KBSNcQCmyc9xgaJ2PMCKBpwAUF0u+RoA7mEW2jE3mPI9WCBy0A==",
+      "version": "12.0.4",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.0.4.tgz",
+      "integrity": "sha512-eeQzw1gIbLKOB55rp2+20uB1PASDUf1q6zy2VsgugnuPEcL/olVMX3WT42XxyG8m3rcbUiHlq2NSmPTFWEjiUQ==",
       "dependencies": {
-        "@xyflow/system": "0.0.34",
+        "@xyflow/system": "0.0.37",
         "classcat": "^5.0.3",
         "zustand": "^4.4.0"
       },
@@ -1681,9 +1681,9 @@
       }
     },
     "node_modules/@xyflow/system": {
-      "version": "0.0.34",
-      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.34.tgz",
-      "integrity": "sha512-Gcc2aSPZX5YMn+Rv6a2lxRes005YLc6LRaMtzRsobCcIEMpBUWzEx8/OrvpAYOCM3UCxlqfUOK2ekglxbjzYEQ==",
+      "version": "0.0.37",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.37.tgz",
+      "integrity": "sha512-hSIhezhxgftPUpC+xiQVIorcRILZUOWlLjpYPTyGWRu8s4RJvM4GqvrsFmD5OnMKXLgpU7/PqqUibDVO67oWQQ==",
       "dependencies": {
         "@types/d3-drag": "^3.0.7",
         "@types/d3-selection": "^3.0.10",
@@ -5395,13 +5395,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
-    },
-    "node_modules/lodash.assignwith": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.assignwith/-/lodash.assignwith-4.2.0.tgz",
-      "integrity": "sha512-ZznplvbvtjK2gMvnQ1BR/zqPFZmS6jbK4p+6Up4xcRYA7yMIwxHCfbTcrYxXKzzqLsQ05eJPVznEW3tuwV7k1g=="
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
@@ -8654,11 +8648,11 @@
   },
   "dependencies": {
     "@75lb/deep-merge": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@75lb/deep-merge/-/deep-merge-1.1.1.tgz",
-      "integrity": "sha512-xvgv6pkMGBA6GwdyJbNAnDmfAIR/DfWhrj9jgWh3TY7gRm3KO46x/GPjRg6wJ0nOepwqrNxFfojebh0Df4h4Tw==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@75lb/deep-merge/-/deep-merge-1.1.2.tgz",
+      "integrity": "sha512-08K9ou5VNbheZFxM5tDWoqjA3ImC50DiuuJ2tj1yEPRfkp8lLLg6XAaJ4On+a0yAXor/8ay5gHnAIshRM44Kpw==",
       "requires": {
-        "lodash.assignwith": "^4.2.0",
+        "lodash": "^4.17.21",
         "typical": "^7.1.1"
       },
       "dependencies": {
@@ -9901,19 +9895,19 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
     "@xyflow/react": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.0.0.tgz",
-      "integrity": "sha512-f0cboW5ZbKR+xGUr2QtYiIZwGvxDHzCjdtp2KBSNcQCmyc9xgaJ2PMCKBpwAUF0u+RoA7mEW2jE3mPI9WCBy0A==",
+      "version": "12.0.4",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.0.4.tgz",
+      "integrity": "sha512-eeQzw1gIbLKOB55rp2+20uB1PASDUf1q6zy2VsgugnuPEcL/olVMX3WT42XxyG8m3rcbUiHlq2NSmPTFWEjiUQ==",
       "requires": {
-        "@xyflow/system": "0.0.34",
+        "@xyflow/system": "0.0.37",
         "classcat": "^5.0.3",
         "zustand": "^4.4.0"
       }
     },
     "@xyflow/system": {
-      "version": "0.0.34",
-      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.34.tgz",
-      "integrity": "sha512-Gcc2aSPZX5YMn+Rv6a2lxRes005YLc6LRaMtzRsobCcIEMpBUWzEx8/OrvpAYOCM3UCxlqfUOK2ekglxbjzYEQ==",
+      "version": "0.0.37",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.37.tgz",
+      "integrity": "sha512-hSIhezhxgftPUpC+xiQVIorcRILZUOWlLjpYPTyGWRu8s4RJvM4GqvrsFmD5OnMKXLgpU7/PqqUibDVO67oWQQ==",
       "requires": {
         "@types/d3-drag": "^3.0.7",
         "@types/d3-selection": "^3.0.10",
@@ -12594,13 +12588,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
-    },
-    "lodash.assignwith": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.assignwith/-/lodash.assignwith-4.2.0.tgz",
-      "integrity": "sha512-ZznplvbvtjK2gMvnQ1BR/zqPFZmS6jbK4p+6Up4xcRYA7yMIwxHCfbTcrYxXKzzqLsQ05eJPVznEW3tuwV7k1g=="
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
diff --git a/package.json b/package.json
index a0b6170..f1dc801 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "@eagleoutice/flowr": "^2.0.9",
     "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
-    "@xyflow/react": "^12.0.0",
+    "@xyflow/react": "^12.0.4",
     "allotment": "^1.17.0",
     "css-loader": "^6.7.1",
     "elkjs": "^0.9.2",