- updates;

package-lock.json

@@ -14,6 +14,7 @@
         "@emotion/styled": "11.13.0",
         "@wordpress/i18n": "^5.5.0",
         "@wordpress/react-i18n": "^4.5.0",
+        "@xyflow/react": "^12.2.0",
         "deep-object-diff": "^1.1.9",
         "dompurify": "3.1.6",
         "fast-deep-equal": "^3.1.3",
@@ -3943,6 +3944,49 @@
         "@types/node": "*"
       }
     },
+    "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-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "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-transition": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.8.tgz",
+      "integrity": "sha512-ew63aJfQ/ms7QQ4X7pk5NxQ9fZH/z+i24ZfJ6tJSfqxJMrYLiK01EAs2/Rtw/JreGUsS3pLPNV644qXFGnoZNQ==",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "8.56.11",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.11.tgz",
@@ -4703,6 +4747,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.2.0",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.2.0.tgz",
+      "integrity": "sha512-aQ1636zCfTey+k2d4xxkQrfwMWe0uazIJoKUXyCoVTX+KH5/ep9wxr7yGlSW4s1XIGzmP3f+qUwTk0GvxvP0Rg==",
+      "dependencies": {
+        "@xyflow/system": "0.0.40",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.40",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.40.tgz",
+      "integrity": "sha512-pS4m6J+Q+kUoUV73rKMfGPm+FOA9OajHyADrTlTE6VaG4/vMV2gHS/ZMVZb295jkY/ZpZkpQZKp1sRm0m31Jpw==",
+      "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/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -5933,6 +6005,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.3.1.tgz",
       "integrity": "sha512-a3KdPAANPbNE4ZUv9h6LckSl9zLsYOP4MBmhIPkRaeyybt+r4UghLvq+xw/YwUcC1gqylCkL4rdVs3Lwupjm4Q=="
     },
+    "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/clean-css": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
@@ -6638,6 +6715,102 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "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": ">=12"
+      }
+    },
+    "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/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/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": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "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/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"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "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": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",

package.json

@@ -9,6 +9,7 @@
     "@emotion/styled": "11.13.0",
     "@wordpress/i18n": "^5.5.0",
     "@wordpress/react-i18n": "^4.5.0",
+    "@xyflow/react": "^12.2.0",
     "deep-object-diff": "^1.1.9",
     "dompurify": "3.1.6",
     "fast-deep-equal": "^3.1.3",

src/assets/scss/components/reactFlow.scss

@@ -0,0 +1,4 @@
+.reactFlow__wrapper {
+  width: 100%;
+  height: 500px;
+}

src/assets/scss/theme.scss

@@ -36,3 +36,4 @@
 @import "./components/formBuilder.scss";
 @import "./components/misc.scss";
 @import "./components/login.scss";
+@import "./components/reactFlow.scss";

src/components/FlowBuilder/index.js

@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from 'react';
+import {
+    ReactFlow,
+    Background,
+    useNodesState,
+    useEdgesState,
+    addEdge,
+    getIncomers,
+    getOutgoers,
+    getConnectedEdges,
+} from '@xyflow/react';
+import { isEmpty } from 'ramda';
+
+import '@xyflow/react/dist/style.css';
+
+const FlowBuilder = ({ initialForm = 0, finalForm = 0, forms = [], updateFn }) => {
+    const [nodes, setNodes] = useState([]);
+    const [edges, setEdges] = useState([]);
+
+    const range = (start, stop, step) => {
+        return Array.from(
+            { length: (stop - start) / step + 1 },
+            (_, i) => start + i * step
+        );
+    }
+
+    useEffect(() => {
+        if (initialForm && finalForm && forms.length) {
+            const total = (forms.length - 2) * (200 - 90);
+            let coordinates = range(total * -1, total, 200);
+
+            const initialNodes = forms.map(o => {
+                let obj;
+
+                if (o.id === initialForm) {
+                    obj = {
+                        id: String(o.id),
+                        type: 'input',
+                        data: { label: o.label },
+                        position: { x: 0, y: 0 },
+                    }
+                } else if (o.id === finalForm) {
+                    obj = {
+                        id: String(o.id),
+                        type: 'output',
+                        data: { label: o.label },
+                        position: { x: 0, y: 300 },
+                    }
+                } else {
+                    const x = coordinates.splice(0, 1);
+                    obj = {
+                        id: String(o.id),
+                        data: { label: o.label },
+                        position: { x, y: 150 },
+                    }
+                }
+                return obj
+            });
+
+            let edges = [];
+            forms.map(o => {
+                if (o.id !== initialForm && o.id !== finalForm) {
+                    edges.push({ id: `${initialForm}->${o.id}`, source: String(initialForm), target: String(o.id) });
+                    edges.push({ id: `${o.id}->${finalForm}`, source: String(o.id), target: String(finalForm) });
+                }
+            });
+
+            setNodes(initialNodes);
+            setEdges(edges);
+            updateFn(edges);
+        } else {
+            setNodes([]);
+            setEdges([]);
+        }
+    }, [initialForm, finalForm, forms]);
+
+    return (
+        !isEmpty(nodes) && !isEmpty(edges)
+            ? <div className="reactFlow__wrapper">
+                <ReactFlow
+                    nodes={nodes}
+                    edges={edges}
+                    nodesDraggable={false}
+                    nodesConnectable={false}
+                    fitView
+                    attributionPosition="top-right"
+                >
+                    <Background variant="dots" gap={12} size={1}/>
+                </ReactFlow>
+            </div>
+            : null
+    );
+}
+
+export default FlowBuilder;

src/components/ProtectedRoute/index.js

@@ -17,9 +17,9 @@ const ProtectedRoute = () => {
         return (<Navigate to={'/login?redirectReason=auth_required'} replace/>);
     }
 
-    if (window.location.pathname === '/') {
+    /*if (window.location.pathname === '/') {
         return (<Navigate to={'/'} replace/>);
-    }
+    }*/
 
     return <Outlet/>;
 }

src/pages/BandoFlowEdit/index.js

@@ -0,0 +1,128 @@
+import React, { useEffect, useState } from 'react';
+import { __ } from '@wordpress/i18n';
+import { useNavigate, useParams } from 'react-router-dom';
+
+// store
+import { storeSet, useStore } from '../../store';
+
+// components
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+import { Dropdown } from 'primereact/dropdown';
+import FormsService from '../../service/forms-service';
+import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
+import FlowBuilder from '../../components/FlowBuilder';
+
+const BandoFlowEdit = () => {
+    const { id } = useParams();
+    const navigate = useNavigate();
+    const [forms, setForms] = useState([]);
+    const [formOptions, setFormOptions] = useState([]);
+    const [initialForm, setInitialForm] = useState(0);
+    const [finalForm, setFinalForm] = useState(0);
+    const isAsyncRequest = useStore().main.isAsyncRequest();
+
+    const getBandoId = () => {
+        const parsed = parseInt(id)
+        return !isNaN(parsed) ? parsed : 0;
+    }
+
+    const goBack = () => {
+        const bandoId = getBandoId();
+        navigate(`/bandi/${bandoId}/forms`);
+    }
+
+    const doSave = () => {
+        console.log('doSave');
+    }
+
+    const updateEdges = (data) => {
+
+    }
+
+    const getFormsCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const formOptions = data.data.map(o => ({label: o.label, value: o.id}))
+            setForms(data.data);
+            setFormOptions(formOptions);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetFormsCallback = (data) => {
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    useEffect(() => {
+        const bandoId = getBandoId();
+        storeSet.main.setAsyncRequest();
+        FormsService.getFormsForCall(bandoId, getFormsCallback, errGetFormsCallback);
+    }, [id]);
+
+    return (
+        <div className="appPage">
+            <div className="appPage__pageHeader">
+                <h1>{__('Gestisci flusso dei form', 'gepafin')}</h1>
+                <p>
+                    {__('Scegli un form iniziale e li form finale e aggiungi i form intermedi per questo bando', 'gepafin')}
+                </p>
+            </div>
+
+            <div className="appPage__spacer"></div>
+
+            <div className="appPageSection">
+                <div className="row">
+                    <div className="appForm__field">
+                        <label htmlFor="initialForm">{__('Scegli form iniziale', 'gepafin')}</label>
+                        <Dropdown
+                            id="initialForm"
+                            value={initialForm}
+                            onChange={(e) => setInitialForm(e.value)}
+                            optionDisabled={(opt) => finalForm === opt.value}
+                            options={formOptions}
+                            optionLabel="label"
+                            optionValue="value"
+                            placeholder={__('Scegli il form', 'gepafin')} />
+                    </div>
+
+                    <div className="appForm__field">
+                        <label htmlFor="finalForm">{__('Scegli form finale', 'gepafin')}</label>
+                        <Dropdown
+                            id="finalForm"
+                            value={finalForm}
+                            onChange={(e) => setFinalForm(e.value)}
+                            optionDisabled={(opt) => initialForm === opt.value}
+                            options={formOptions}
+                            optionLabel="label"
+                            optionValue="value"
+                            placeholder={__('Scegli il form', 'gepafin')} />
+                    </div>
+                </div>
+            </div>
+
+            <div className="appPage__spacer"></div>
+
+            <div className="appPageSection">
+                <FlowBuilder forms={forms} initialForm={initialForm} finalForm={finalForm} updateFn={updateEdges}/>
+            </div>
+
+            <div className="appPage__spacer"></div>
+
+            <div className="appPageSection">
+                <div className="appPageSection__actions">
+                    <Button
+                        onClick={goBack}
+                        outlined
+                        label={__('Indietro', 'gepafin')} icon="pi pi-arrow-left" iconPos="left"/>
+                    <Button
+                        onClick={doSave}
+                        label={__('Salva', 'gepafin')} icon="pi pi-save" iconPos="right"/>
+                </div>
+            </div>
+        </div>
+    )
+
+}
+
+export default BandoFlowEdit;

src/pages/BandoFormsEdit/index.js

@@ -35,7 +35,7 @@ const BandoFormsEdit = () => {
         navigate(`/bandi/${bandoId}/forms`);
     }
 
-    const doSave = () => {
+    const doSave = (shouldRedirect = false) => {
         const content = storeGet.main.formElements();
         const bandoId = getBandoId();
         const parsedFormId = parseInt(formId)
@@ -47,21 +47,25 @@ const BandoFormsEdit = () => {
 
         storeSet.main.setAsyncRequest();
         if (bandoFormId === 0) {
-            FormsService.createFormForCall(bandoId, formData, formCreateCallback, errFormCreateCallback);
+            FormsService.createFormForCall(bandoId, formData, (data) => formCreateCallback(data, shouldRedirect), errFormCreateCallback);
         } else {
-            FormsService.updateForm(bandoFormId, formData, formCreateCallback, errFormCreateCallback);
+            FormsService.updateForm(bandoFormId, formData, (data) => formCreateCallback(data, shouldRedirect), errFormCreateCallback);
         }
     }
 
-    const formCreateCallback = (data) => {
+    const formCreateCallback = (data, shouldRedirect) => {
         if (data.status === 'SUCCESS') {
-            const parsed = parseInt(id)
+            storeSet.main.unsetAsyncRequest();
-            const bandoId = !isNaN(parsed) ? parsed : 0;
+            const bandoId = getBandoId();
+
+            if (shouldRedirect) {
+                navigate(`/bandi/${bandoId}/forms/${data.data.id}/preview`);
+                return;
+            }
             if (data.data.id) {
                 navigate(`/bandi/${bandoId}/forms/${data.data.id}`);
             }
         }
-        storeSet.main.unsetAsyncRequest();
     }
 
     const errFormCreateCallback = (data) => {
@@ -70,8 +74,7 @@ const BandoFormsEdit = () => {
     }
 
     const openPreview = () => {
-        const bandoId = getBandoId();
+        doSave(true);
-        navigate(`/bandi/${bandoId}/forms/${formId}/preview`);
     }
 
     const confirmDelete = (event) => {

src/routes.js

@@ -13,6 +13,7 @@ import BandoView from './pages/BandoView';
 import BandoFormsEdit from './pages/BandoFormsEdit';
 import BandoForms from './pages/BandoForms';
 import BandoFormsPreview from './pages/BandoFormsPreview';
+import BandoFlowEdit from './pages/BandoFlowEdit';
 
 const routes = ({ role }) => {
     return (
@@ -43,6 +44,9 @@ const routes = ({ role }) => {
                 <Route path="/bandi/:id/forms/:formId/preview" element={<DefaultLayout>
                     {'ROLE_SUPER_ADMIN' === role ? <BandoFormsPreview/> : null}
                 </DefaultLayout>}/>
+                <Route path="/bandi/:id/flow" element={<DefaultLayout>
+                    {'ROLE_SUPER_ADMIN' === role ? <BandoFlowEdit/> : null}
+                </DefaultLayout>}/>
             </Route>
             <Route exact path="/login" element={<Login/>}/>
             {/*<Route exact path="/forgot-password" element={<ForgotPassword/>}/>*/}

yarn.lock

@@ -2067,6 +2067,45 @@
   dependencies:
     "@types/node" "*"
 
+"@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-drag@^3.0.7":
+  version "3.0.7"
+  resolved "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz"
+  integrity sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-interpolate@*":
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz"
+  integrity sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==
+  dependencies:
+    "@types/d3-color" "*"
+
+"@types/d3-selection@*", "@types/d3-selection@^3.0.10":
+  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-transition@^3.0.8":
+  version "3.0.8"
+  resolved "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.8.tgz"
+  integrity sha512-ew63aJfQ/ms7QQ4X7pk5NxQ9fZH/z+i24ZfJ6tJSfqxJMrYLiK01EAs2/Rtw/JreGUsS3pLPNV644qXFGnoZNQ==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-zoom@^3.0.8":
+  version "3.0.8"
+  resolved "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz"
+  integrity sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==
+  dependencies:
+    "@types/d3-interpolate" "*"
+    "@types/d3-selection" "*"
+
 "@types/eslint-scope@^3.7.3":
   version "3.7.7"
   resolved "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz"
@@ -2607,6 +2646,28 @@
   resolved "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
+"@xyflow/react@^12.2.0":
+  version "12.2.0"
+  resolved "https://registry.npmjs.org/@xyflow/react/-/react-12.2.0.tgz"
+  integrity sha512-aQ1636zCfTey+k2d4xxkQrfwMWe0uazIJoKUXyCoVTX+KH5/ep9wxr7yGlSW4s1XIGzmP3f+qUwTk0GvxvP0Rg==
+  dependencies:
+    "@xyflow/system" "0.0.40"
+    classcat "^5.0.3"
+    zustand "^4.4.0"
+
+"@xyflow/system@0.0.40":
+  version "0.0.40"
+  resolved "https://registry.npmjs.org/@xyflow/system/-/system-0.0.40.tgz"
+  integrity sha512-pS4m6J+Q+kUoUV73rKMfGPm+FOA9OajHyADrTlTE6VaG4/vMV2gHS/ZMVZb295jkY/ZpZkpQZKp1sRm0m31Jpw==
+  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"
+
 abab@^2.0.3, abab@^2.0.5:
   version "2.0.6"
   resolved "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz"
@@ -3434,6 +3495,11 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.3.1.tgz"
   integrity sha512-a3KdPAANPbNE4ZUv9h6LckSl9zLsYOP4MBmhIPkRaeyybt+r4UghLvq+xw/YwUcC1gqylCkL4rdVs3Lwupjm4Q==
 
+classcat@^5.0.3:
+  version "5.0.5"
+  resolved "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz"
+  integrity sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==
+
 clean-css@^5.2.2:
   version "5.3.3"
   resolved "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz"
@@ -3892,6 +3958,68 @@ csstype@^3.0.2:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
+"d3-color@1 - 3":
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz"
+  integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
+
+"d3-dispatch@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz"
+  integrity sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==
+
+d3-drag@^3.0.0, "d3-drag@2 - 3":
+  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"
+
+"d3-ease@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz"
+  integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
+
+"d3-interpolate@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz"
+  integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
+  dependencies:
+    d3-color "1 - 3"
+
+d3-selection@^3.0.0, "d3-selection@2 - 3", d3-selection@3:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz"
+  integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==
+
+"d3-timer@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz"
+  integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
+
+"d3-transition@2 - 3":
+  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"
+
+d3-zoom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz"
+  integrity sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-drag "2 - 3"
+    d3-interpolate "1 - 3"
+    d3-selection "2 - 3"
+    d3-transition "2 - 3"
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
@@ -8297,7 +8425,7 @@ react-dnd@^16.0.1:
     fast-deep-equal "^3.1.3"
     hoist-non-react-statics "^3.3.2"
 
-react-dom@*, "react-dom@^17.0.0 || ^18.0.0 || ^19.0.0", react-dom@^18.3.0, react-dom@>=16.6.0, react-dom@>=16.8, react-dom@18.3.1:
+react-dom@*, "react-dom@^17.0.0 || ^18.0.0 || ^19.0.0", react-dom@^18.3.0, react-dom@>=16.6.0, react-dom@>=16.8, react-dom@>=17, react-dom@18.3.1:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -8428,7 +8556,7 @@ react-transition-group@^4.4.1:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-"react@^16.8.0 || ^17 || ^18 || ^19", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.0 || ^18.0.0 || ^19.0.0", react@^18.3.0, react@^18.3.1, "react@>= 16", "react@>= 16.14", react@>=16.6.0, react@>=16.8, react@>=16.8.0, "react@0.14 || 15 || 16 || 17 || 18", react@18.3.1:
+"react@^16.8.0 || ^17 || ^18 || ^19", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.0 || ^18.0.0 || ^19.0.0", react@^18.3.0, react@^18.3.1, "react@>= 16", "react@>= 16.14", react@>=16.6.0, react@>=16.8, react@>=16.8.0, react@>=17, "react@0.14 || 15 || 16 || 17 || 18", react@18.3.1:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
@@ -10541,7 +10669,7 @@ zustand-x@3.0.4:
     lodash.mapvalues "^4.6.0"
     react-tracked "^1.7.11"
 
-zustand@>=4.3.9, zustand@4.5.4:
+zustand@^4.4.0, zustand@>=4.3.9, zustand@4.5.4:
   version "4.5.4"
   resolved "https://registry.npmjs.org/zustand/-/zustand-4.5.4.tgz"
   integrity sha512-/BPMyLKJPtFEvVL0E9E9BTUM63MNyhPGlvxk1XjrfWTUlV+BR8jufjsovHzrtR6YNcBEcL7cMHovL1n9xHawEg==