In a complex business scenario, a page is split into multiple components, or multiple components together form an independent module without being affected by other modules. As shown in the figure below.
{"type":"excalidraw","version":2,"source":"http://localhost:2323","elements":[{"type":"rectangle","version":64,"versionNonce":1710817260,"isDeleted":false,"id":"GK-n75GVEWlHVs8et0k8X","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2041.83203125,"y":2500.59765625,"strokeColor":"#1971c2","backgroundColor":"transparent","width":745.1640625,"height":439.69140625,"seed":1482611386,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108700,"link":null,"locked":false},{"type":"rectangle","version":88,"versionNonce":1376273620,"isDeleted":false,"id":"2Ftl8RWp0x89dSn-fTDHb","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2056.25,"y":2513.57421875,"strokeColor":"#1971c2","backgroundColor":"transparent","width":189.1015625,"height":29.765625000000007,"seed":571550758,"groupIds":[],"frameId":null,"roundness":{"type":3},"boundElements":[],"updated":1706803108700,"link":null,"locked":false},{"type":"rectangle","version":58,"versionNonce":1697260140,"isDeleted":false,"id":"hG9or2PXyl7E6OC-x45xW","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2058.6484375,"y":2550.87890625,"strokeColor":"#1971c2","backgroundColor":"transparent","width":238.86328125,"height":280.91796875,"seed":930699706,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108700,"link":null,"locked":false},{"type":"rectangle","version":74,"versionNonce":1943046740,"isDeleted":false,"id":"lPo8wD4ucN9tbCZT4YCY-","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2067.21875,"y":2564.28515625,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":220.75390625,"height":45.94140625,"seed":415706726,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[{"id":"ZDhpEwlrH5AUtXRIg92Ik","type":"arrow"},{"id":"RtvlzwWGSKKnUn9O-K37j","type":"arrow"}],"updated":1706803108700,"link":null,"locked":false},{"type":"rectangle","version":131,"versionNonce":1460860140,"isDeleted":false,"id":"QZD0BD4kTfZiKvkUBiu92","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2070.814453125,"y":2623.904296875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":220.75390625,"height":45.94140625,"seed":1492938042,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108700,"link":null,"locked":false},{"type":"rectangle","version":176,"versionNonce":259268564,"isDeleted":false,"id":"vHRngh0rrfBh0T4ixrtGc","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2071.822265625,"y":2690.029296875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":220.75390625,"height":45.94140625,"seed":1884407654,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108700,"link":null,"locked":false},{"type":"rectangle","version":200,"versionNonce":1765635948,"isDeleted":false,"id":"OuoDOOi03U51ZjTrf2LFM","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2070.572265625,"y":2754.748046875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":220.75390625,"height":45.94140625,"seed":1505724006,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"TZHuoQcIx4AVsFSC4W873"},{"id":"fN3Xr0Xg8o5d5SKePUMi8","type":"arrow"}],"updated":1706803108700,"link":null,"locked":false},{"type":"text","version":8,"versionNonce":1829307732,"isDeleted":false,"id":"TZHuoQcIx4AVsFSC4W873","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2152.997245788574,"y":2767.71875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":55.90394592285156,"height":20,"seed":234102650,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108700,"link":null,"locked":false,"fontSize":16,"fontFamily":1,"text":"Asset4","textAlign":"center","verticalAlign":"middle","containerId":"OuoDOOi03U51ZjTrf2LFM","originalText":"Asset4","lineHeight":1.25,"baseline":14},{"type":"rectangle","version":100,"versionNonce":133409260,"isDeleted":false,"id":"QizMpm6TYfwEd2YVnKLkk","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2328.125,"y":2523.00390625,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":311.22265625,"height":404.6953125,"seed":1283715942,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[{"id":"n4x98gzrAgK-AxpVR0k-Z","type":"arrow"}],"updated":1706803108700,"link":null,"locked":false},{"type":"text","version":59,"versionNonce":1642412756,"isDeleted":false,"id":"wYu4LBPAKlzaH6P-aI6q7","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2148.6015625,"y":2575.921875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":49.99995422363281,"height":20,"seed":1543458618,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108700,"link":null,"locked":false,"fontSize":16,"fontFamily":1,"text":"Asset1","textAlign":"left","verticalAlign":"top","containerId":null,"originalText":"Asset1","lineHeight":1.25,"baseline":14},{"type":"text","version":11,"versionNonce":104828012,"isDeleted":false,"id":"B0H9SU3nlbooyNdiqQZ8v","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2147,"y":2644,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":57.05595397949219,"height":20,"seed":1538414330,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[{"id":"sCDVxOChArbTvFmTdCeIh","type":"arrow"}],"updated":1706803108700,"link":null,"locked":false,"fontSize":16,"fontFamily":1,"text":"Asset2","textAlign":"left","verticalAlign":"top","containerId":null,"originalText":"Asset2","lineHeight":1.25,"baseline":14},{"type":"text","version":10,"versionNonce":681492564,"isDeleted":false,"id":"4NH7KVhfIpdFqEUVXze30","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2149,"y":2709,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":56.55995178222656,"height":20,"seed":1947529210,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"fontSize":16,"fontFamily":1,"text":"Asset3","textAlign":"left","verticalAlign":"top","containerId":null,"originalText":"Asset3","lineHeight":1.25,"baseline":14},{"type":"text","version":54,"versionNonce":1173036780,"isDeleted":false,"id":"dvHatSpIlps--4bBXbVsx","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2417.03125,"y":2548.9296875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":106.65592956542969,"height":20,"seed":741250022,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"fontSize":16,"fontFamily":1,"text":"Asset1 Detail","textAlign":"left","verticalAlign":"top","containerId":null,"originalText":"Asset1 Detail","lineHeight":1.25,"baseline":14},{"type":"rectangle","version":49,"versionNonce":957060564,"isDeleted":false,"id":"kdjnQsec9D5nbnIMZkbB5","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2069.44921875,"y":2521.12109375,"strokeColor":"#1e1e1e","backgroundColor":"#a5d8ff","width":62.1796875,"height":14.94140625,"seed":944487162,"groupIds":[],"frameId":null,"roundness":{"type":3},"boundElements":[],"updated":1706803108701,"link":null,"locked":false},{"type":"rectangle","version":45,"versionNonce":1602249068,"isDeleted":false,"id":"wvRoG1UfHUWTBg2OCa1lE","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2660.8125,"y":2525.48828125,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":112.57421875,"height":203.3203125,"seed":909423994,"groupIds":[],"frameId":null,"roundness":{"type":3},"boundElements":[],"updated":1706803108701,"link":null,"locked":false},{"type":"rectangle","version":99,"versionNonce":541178708,"isDeleted":false,"id":"7X5LNnpol1JluuaV7uP1F","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2674.0390625,"y":2601.10546875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":81.91015625,"height":30,"seed":1748841530,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"YB3ecIRABZs6ZQLZch3_K"}],"updated":1706803108701,"link":null,"locked":false},{"type":"text","version":70,"versionNonce":1246319596,"isDeleted":false,"id":"YB3ecIRABZs6ZQLZch3_K","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2682.466163635254,"y":2606.10546875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":65.05595397949219,"height":20,"seed":777509050,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"fontSize":16,"fontFamily":1,"text":"Asset 2","textAlign":"center","verticalAlign":"middle","containerId":"7X5LNnpol1JluuaV7uP1F","originalText":"Asset 2","lineHeight":1.25,"baseline":14},{"type":"rectangle","version":114,"versionNonce":1486303444,"isDeleted":false,"id":"X3GqCIiWPuY7iU7C02zqO","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2675.689453125,"y":2658.67578125,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":81.91015625,"height":30,"seed":1946014138,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"hqK4DM4haEED5tqVy7Y69"},{"id":"fN3Xr0Xg8o5d5SKePUMi8","type":"arrow"}],"updated":1706803108701,"link":null,"locked":false},{"type":"text","version":84,"versionNonce":72349292,"isDeleted":false,"id":"hqK4DM4haEED5tqVy7Y69","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2684.692558288574,"y":2663.67578125,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":63.90394592285156,"height":20,"seed":512723578,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"fontSize":16,"fontFamily":1,"text":"Asset 4","textAlign":"center","verticalAlign":"middle","containerId":"X3GqCIiWPuY7iU7C02zqO","originalText":"Asset 4","lineHeight":1.25,"baseline":14},{"type":"text","version":94,"versionNonce":564262484,"isDeleted":false,"id":"MQGXGRKE4fIK7pcUv2G8s","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2671.31640625,"y":2548.49609375,"width":88.71621704101562,"height":15.406250000000004,"seed":1184364006,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"fontSize":12.325000000000003,"fontFamily":1,"text":"Related asset","textAlign":"left","verticalAlign":"top","containerId":null,"originalText":"Related asset","lineHeight":1.25,"baseline":11},{"type":"rectangle","version":66,"versionNonce":979257580,"isDeleted":false,"id":"BTWLv3DEaMsrW_DVWaInM","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2353.65625,"y":2594.75390625,"strokeColor":"#1e1e1e","backgroundColor":"#e9ecef","width":246.16015625,"height":110.27734375,"seed":1127375418,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[{"id":"RtvlzwWGSKKnUn9O-K37j","type":"arrow"}],"updated":1706803108701,"link":null,"locked":false},{"type":"line","version":53,"versionNonce":1480068052,"isDeleted":false,"id":"cQX5pznZP-lc-7FJfKf6N","fillStyle":"hachure","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2357.22265625,"y":2740.70703125,"strokeColor":"#1e1e1e","backgroundColor":"#e9ecef","width":224.93359375,"height":0.6640625,"seed":527008826,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"startBinding":null,"endBinding":null,"lastCommittedPoint":null,"startArrowhead":null,"endArrowhead":null,"points":[[0,0],[224.93359375,0.6640625]]},{"type":"line","version":68,"versionNonce":1878936428,"isDeleted":false,"id":"5WvLajTNXm0YKkplRW6oP","fillStyle":"hachure","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2358.169921875,"y":2763.43704118742,"strokeColor":"#1e1e1e","backgroundColor":"#e9ecef","width":224.93359375,"height":0.6640625,"seed":1790333178,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"startBinding":null,"endBinding":null,"lastCommittedPoint":null,"startArrowhead":null,"endArrowhead":null,"points":[[0,0],[224.93359375,0.6640625]]},{"type":"line","version":69,"versionNonce":1315926356,"isDeleted":false,"id":"Kn6cPJNmvb7ZyY9eguXN6","fillStyle":"hachure","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2358.447265625,"y":2790.44875993742,"strokeColor":"#1e1e1e","backgroundColor":"#e9ecef","width":224.93359375,"height":0.6640625,"seed":7871738,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"startBinding":null,"endBinding":null,"lastCommittedPoint":null,"startArrowhead":null,"endArrowhead":null,"points":[[0,0],[224.93359375,0.6640625]]},{"type":"line","version":84,"versionNonce":662306284,"isDeleted":false,"id":"XRbGMuY1fGpPfYa2XIb5I","fillStyle":"hachure","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2361.923828125,"y":2819.27688493742,"strokeColor":"#1e1e1e","backgroundColor":"#e9ecef","width":224.93359375,"height":0.6640625,"seed":665762234,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"startBinding":null,"endBinding":null,"lastCommittedPoint":null,"startArrowhead":null,"endArrowhead":null,"points":[[0,0],[224.93359375,0.6640625]]},{"type":"arrow","version":134,"versionNonce":597567188,"isDeleted":false,"id":"ZDhpEwlrH5AUtXRIg92Ik","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":1946.42578125,"y":2420.640625,"strokeColor":"#1e1e1e","backgroundColor":"#e9ecef","width":108.22265625,"height":131.546875,"seed":1135300922,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"startBinding":{"elementId":"prloiiGuYMACQ4gmNuWWJ","focus":0.5324848235368168,"gap":3.44921875},"endBinding":{"elementId":"lPo8wD4ucN9tbCZT4YCY-","focus":-0.7278819525299076,"gap":12.5703125},"lastCommittedPoint":null,"startArrowhead":null,"endArrowhead":"triangle","points":[[0,0],[108.22265625,131.546875]]},{"type":"rectangle","version":66,"versionNonce":165372012,"isDeleted":false,"id":"prloiiGuYMACQ4gmNuWWJ","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":1903.53125,"y":2368.62109375,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":131.40234375,"height":48.5703125,"seed":162462714,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[{"id":"ZDhpEwlrH5AUtXRIg92Ik","type":"arrow"}],"updated":1706803108701,"link":null,"locked":false},{"type":"text","version":15,"versionNonce":475671636,"isDeleted":false,"id":"JU8Py956wVzj0n5kgeRYp","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":1935,"y":2380,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":68.63995361328125,"height":20,"seed":1497332218,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"fontSize":16,"fontFamily":1,"text":"module A","textAlign":"left","verticalAlign":"top","containerId":null,"originalText":"module A","lineHeight":1.25,"baseline":14},{"type":"rectangle","version":124,"versionNonce":250376940,"isDeleted":false,"id":"tKL3L2aC9Y8cxs8jSWYSN","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2378.693359375,"y":2364.6015625,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":131.40234375,"height":48.5703125,"seed":588203514,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"Q2NWa76kgx3U_DyJ6wa_i"},{"id":"n4x98gzrAgK-AxpVR0k-Z","type":"arrow"}],"updated":1706803108701,"link":null,"locked":false},{"type":"text","version":69,"versionNonce":2054783444,"isDeleted":false,"id":"Q2NWa76kgx3U_DyJ6wa_i","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2409.5065536499023,"y":2378.88671875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":69.77595520019531,"height":20,"seed":1908654458,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"fontSize":16,"fontFamily":1,"text":"module B","textAlign":"center","verticalAlign":"middle","containerId":"tKL3L2aC9Y8cxs8jSWYSN","originalText":"module B","lineHeight":1.25,"baseline":14},{"type":"arrow","version":117,"versionNonce":2094467180,"isDeleted":false,"id":"n4x98gzrAgK-AxpVR0k-Z","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2440.14453125,"y":2419.671875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":2.46484375,"height":99.078125,"seed":680559014,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803121362,"link":null,"locked":false,"startBinding":{"elementId":"tKL3L2aC9Y8cxs8jSWYSN","focus":0.07564800794178884,"gap":6.5},"endBinding":{"elementId":"QizMpm6TYfwEd2YVnKLkk","focus":-0.2240163115727252,"gap":4.25390625},"lastCommittedPoint":null,"startArrowhead":null,"endArrowhead":"triangle","points":[[0,0],[2.46484375,99.078125]]},{"type":"rectangle","version":14,"versionNonce":1427253076,"isDeleted":false,"id":"5490YS86sCqQezno3L-pv","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2754.546875,"y":2380.53515625,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":162.00390625,"height":53.453125,"seed":155774118,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"rjS9lEz69DvuZWxVemJ9O"}],"updated":1706803108701,"link":null,"locked":false},{"type":"text","version":13,"versionNonce":1510320108,"isDeleted":false,"id":"rjS9lEz69DvuZWxVemJ9O","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2801.324851989746,"y":2397.26171875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":68.44795227050781,"height":20,"seed":987603430,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"fontSize":16,"fontFamily":1,"text":"module C","textAlign":"center","verticalAlign":"middle","containerId":"5490YS86sCqQezno3L-pv","originalText":"module C","lineHeight":1.25,"baseline":14},{"type":"arrow","version":26,"versionNonce":372830444,"isDeleted":false,"id":"btN2r0CS_VncTdv6gB5dc","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2793.5234375,"y":2433.48046875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":66.2109375,"height":94.6484375,"seed":1538471866,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803117715,"link":null,"locked":false,"startBinding":null,"endBinding":null,"lastCommittedPoint":null,"startArrowhead":null,"endArrowhead":"triangle","points":[[0,0],[-66.2109375,94.6484375]]},{"type":"arrow","version":19,"versionNonce":23186028,"isDeleted":false,"id":"RtvlzwWGSKKnUn9O-K37j","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2289.51171875,"y":2587.484375,"strokeColor":"#e03131","backgroundColor":"transparent","width":49.44921875,"height":34.78125,"seed":1723189350,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"startBinding":{"elementId":"lPo8wD4ucN9tbCZT4YCY-","focus":-0.7801672895683777,"gap":1.5390625},"endBinding":{"elementId":"BTWLv3DEaMsrW_DVWaInM","focus":-0.48889002049329133,"gap":14.6953125},"lastCommittedPoint":null,"startArrowhead":"triangle","endArrowhead":"triangle","points":[[0,0],[49.44921875,34.78125]]},{"type":"arrow","version":362,"versionNonce":373776980,"isDeleted":false,"id":"fN3Xr0Xg8o5d5SKePUMi8","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2718.12109375,"y":2691.70703125,"strokeColor":"#e03131","backgroundColor":"transparent","width":547.7265625,"height":216.359375,"seed":1514526694,"groupIds":[],"frameId":null,"roundness":{"type":2},"boundElements":[{"type":"text","id":"6o5zfsB8HOc-2hMy3Xq2x"}],"updated":1706803108701,"link":null,"locked":false,"startBinding":{"elementId":"X3GqCIiWPuY7iU7C02zqO","focus":-0.17773525171820775,"gap":3.03125},"endBinding":{"elementId":"OuoDOOi03U51ZjTrf2LFM","focus":0.6344269725650357,"gap":4.705078125},"lastCommittedPoint":null,"startArrowhead":"triangle","endArrowhead":"triangle","points":[[0,0],[-81.70703125,216.359375],[-547.7265625,113.6875]]},{"type":"text","version":19,"versionNonce":1578474732,"isDeleted":false,"id":"6o5zfsB8HOc-2hMy3Xq2x","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2593.5500869750977,"y":2898.06640625,"strokeColor":"#e03131","backgroundColor":"transparent","width":85.72795104980469,"height":20,"seed":1791878886,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"fontSize":16,"fontFamily":1,"text":"same data","textAlign":"center","verticalAlign":"middle","containerId":"fN3Xr0Xg8o5d5SKePUMi8","originalText":"same data","lineHeight":1.25,"baseline":14},{"type":"arrow","version":276,"versionNonce":1833957332,"isDeleted":false,"id":"sCDVxOChArbTvFmTdCeIh","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2675.23828125,"y":2611.203125,"strokeColor":"#e03131","backgroundColor":"transparent","width":472.2421875,"height":231.82421875,"seed":1470848826,"groupIds":[],"frameId":null,"roundness":{"type":2},"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"startBinding":null,"endBinding":{"elementId":"B0H9SU3nlbooyNdiqQZ8v","focus":-0.19719908405051073,"gap":9.66796875},"lastCommittedPoint":null,"startArrowhead":"triangle","endArrowhead":"triangle","points":[[0,0],[-67.171875,231.82421875],[-472.2421875,62.46484375]]}],"appState":{"gridSize":null,"viewBackgroundColor":"#ffffff"}}
However, we find that although these three modules are independent, the data is interconnected. As shown below.
{"type":"excalidraw/clipboard","elements":[{"id":"GK-n75GVEWlHVs8et0k8X","type":"rectangle","x":2041.83203125,"y":2500.56640625,"width":745.1640625,"height":439.69140625,"angle":0,"strokeColor":"#1971c2","backgroundColor":"transparent","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"frameId":null,"roundness":null,"seed":1482611386,"version":59,"versionNonce":1104928166,"isDeleted":false,"boundElements":null,"updated":1706596526837,"link":null,"locked":false},{"id":"2Ftl8RWp0x89dSn-fTDHb","type":"rectangle","x":2056.25,"y":2513.57421875,"width":189.1015625,"height":29.765625000000007,"angle":0,"strokeColor":"#1971c2","backgroundColor":"transparent","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"frameId":null,"roundness":{"type":3},"seed":571550758,"version":84,"versionNonce":588030010,"isDeleted":false,"boundElements":null,"updated":1706596561848,"link":null,"locked":false},{"id":"hG9or2PXyl7E6OC-x45xW","type":"rectangle","x":2058.6484375,"y":2550.87890625,"width":238.86328125,"height":280.91796875,"angle":0,"strokeColor":"#1971c2","backgroundColor":"transparent","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"frameId":null,"roundness":null,"seed":930699706,"version":54,"versionNonce":828008826,"isDeleted":false,"boundElements":null,"updated":1706596571369,"link":null,"locked":false},{"id":"lPo8wD4ucN9tbCZT4YCY-","type":"rectangle","x":2067.21875,"y":2564.28515625,"width":220.75390625,"height":45.94140625,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"frameId":null,"roundness":null,"seed":415706726,"version":70,"versionNonce":506841210,"isDeleted":false,"boundElements":[{"id":"ZDhpEwlrH5AUtXRIg92Ik","type":"arrow"},{"id":"RtvlzwWGSKKnUn9O-K37j","type":"arrow"}],"updated":1706596877125,"link":null,"locked":false},{"type":"rectangle","version":127,"versionNonce":1137592550,"isDeleted":false,"id":"QZD0BD4kTfZiKvkUBiu92","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2070.814453125,"y":2623.904296875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":220.75390625,"height":45.94140625,"seed":1492938042,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706596588513,"link":null,"locked":false},{"type":"rectangle","version":172,"versionNonce":2024967610,"isDeleted":false,"id":"vHRngh0rrfBh0T4ixrtGc","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2071.822265625,"y":2690.029296875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":220.75390625,"height":45.94140625,"seed":1884407654,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706596645207,"link":null,"locked":false},{"type":"rectangle","version":196,"versionNonce":620143546,"isDeleted":false,"id":"OuoDOOi03U51ZjTrf2LFM","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2070.572265625,"y":2754.748046875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":220.75390625,"height":45.94140625,"seed":1505724006,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"TZHuoQcIx4AVsFSC4W873"},{"id":"fN3Xr0Xg8o5d5SKePUMi8","type":"arrow"}],"updated":1706597018487,"link":null,"locked":false},{"id":"TZHuoQcIx4AVsFSC4W873","type":"text","x":2152.997245788574,"y":2767.71875,"width":55.90394592285156,"height":20,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"frameId":null,"roundness":null,"seed":234102650,"version":4,"versionNonce":1071671846,"isDeleted":false,"boundElements":null,"updated":1706596651822,"link":null,"locked":false,"text":"Asset4","fontSize":16,"fontFamily":1,"textAlign":"center","verticalAlign":"middle","baseline":14,"containerId":"OuoDOOi03U51ZjTrf2LFM","originalText":"Asset4","lineHeight":1.25},{"id":"QizMpm6TYfwEd2YVnKLkk","type":"rectangle","x":2328.125,"y":2523.00390625,"width":311.22265625,"height":404.6953125,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"frameId":null,"roundness":null,"seed":1283715942,"version":96,"versionNonce":1978474298,"isDeleted":false,"boundElements":[{"id":"n4x98gzrAgK-AxpVR0k-Z","type":"arrow"}],"updated":1706596850859,"link":null,"locked":false},{"id":"wYu4LBPAKlzaH6P-aI6q7","type":"text","x":2148.6015625,"y":2575.921875,"width":49.99995422363281,"height":20,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"frameId":null,"roundness":null,"seed":1543458618,"version":53,"versionNonce":2059078330,"isDeleted":false,"boundElements":null,"updated":1706596747600,"link":null,"locked":false,"text":"Asset1","fontSize":16,"fontFamily":1,"textAlign":"left","verticalAlign":"top","baseline":14,"containerId":null,"originalText":"Asset1","lineHeight":1.25},{"id":"B0H9SU3nlbooyNdiqQZ8v","type":"text","x":2147,"y":2644,"width":57.05595397949219,"height":20,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"frameId":null,"roundness":null,"seed":1538414330,"version":5,"versionNonce":2115386982,"isDeleted":false,"boundElements":[{"id":"sCDVxOChArbTvFmTdCeIh","type":"arrow"}],"updated":1706597065214,"link":null,"locked":false,"text":"Asset2","fontSize":16,"fontFamily":1,"textAlign":"left","verticalAlign":"top","baseline":14,"containerId":null,"originalText":"Asset2","lineHeight":1.25},{"id":"4NH7KVhfIpdFqEUVXze30","type":"text","x":2149,"y":2709,"width":56.55995178222656,"height":20,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"frameId":null,"roundness":null,"seed":1947529210,"version":4,"versionNonce":253222502,"isDeleted":false,"boundElements":null,"updated":1706596647093,"link":null,"locked":false,"text":"Asset3","fontSize":16,"fontFamily":1,"textAlign":"left","verticalAlign":"top","baseline":14,"containerId":null,"originalText":"Asset3","lineHeight":1.25},{"id":"dvHatSpIlps--4bBXbVsx","type":"text","x":2417.03125,"y":2548.9296875,"width":106.65592956542969,"height":20,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"frameId":null,"roundness":null,"seed":741250022,"version":48,"versionNonce":1309891302,"isDeleted":false,"boundElements":null,"updated":1706596754148,"link":null,"locked":false,"text":"Asset1 Detail","fontSize":16,"fontFamily":1,"textAlign":"left","verticalAlign":"top","baseline":14,"containerId":null,"originalText":"Asset1 Detail","lineHeight":1.25},{"id":"kdjnQsec9D5nbnIMZkbB5","type":"rectangle","x":2069.44921875,"y":2521.12109375,"width":62.1796875,"height":14.94140625,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"#a5d8ff","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"frameId":null,"roundness":{"type":3},"seed":944487162,"version":45,"versionNonce":1456991226,"isDeleted":false,"boundElements":null,"updated":1706596691795,"link":null,"locked":false},{"id":"wvRoG1UfHUWTBg2OCa1lE","type":"rectangle","x":2660.8125,"y":2525.48828125,"width":112.57421875,"height":203.3203125,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"frameId":null,"roundness":{"type":3},"seed":909423994,"version":41,"versionNonce":1317909370,"isDeleted":false,"boundElements":null,"updated":1706596710477,"link":null,"locked":false},{"id":"7X5LNnpol1JluuaV7uP1F","type":"rectangle","x":2674.0390625,"y":2601.10546875,"width":81.91015625,"height":30,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"frameId":null,"roundness":null,"seed":1748841530,"version":95,"versionNonce":1967814566,"isDeleted":false,"boundElements":[{"type":"text","id":"YB3ecIRABZs6ZQLZch3_K"}],"updated":1706596898011,"link":null,"locked":false},{"id":"YB3ecIRABZs6ZQLZch3_K","type":"text","x":2682.466163635254,"y":2606.10546875,"width":65.05595397949219,"height":20,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"frameId":null,"roundness":null,"seed":777509050,"version":66,"versionNonce":27824870,"isDeleted":false,"boundElements":null,"updated":1706596898011,"link":null,"locked":false,"fontSize":16,"fontFamily":1,"text":"Asset 2","textAlign":"center","verticalAlign":"middle","containerId":"7X5LNnpol1JluuaV7uP1F","originalText":"Asset 2","lineHeight":1.25,"baseline":14},{"type":"rectangle","version":114,"versionNonce":1486303444,"isDeleted":false,"id":"X3GqCIiWPuY7iU7C02zqO","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2675.689453125,"y":2658.67578125,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":81.91015625,"height":30,"seed":1946014138,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"hqK4DM4haEED5tqVy7Y69"},{"id":"fN3Xr0Xg8o5d5SKePUMi8","type":"arrow"}],"updated":1706597018487,"link":null,"locked":false},{"type":"text","version":70,"versionNonce":1246319596,"isDeleted":false,"id":"hqK4DM4haEED5tqVy7Y69","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2684.692558288574,"y":2663.67578125,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":63.90394592285156,"height":20,"seed":512723578,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706596898894,"link":null,"locked":false,"fontSize":16,"fontFamily":1,"text":"Asset 4","textAlign":"center","verticalAlign":"middle","containerId":"X3GqCIiWPuY7iU7C02zqO","originalText":"Asset 4","lineHeight":1.25,"baseline":14},{"type":"text","version":94,"versionNonce":564262484,"isDeleted":false,"id":"MQGXGRKE4fIK7pcUv2G8s","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2671.31640625,"y":2548.49609375,"width":88.71621704101562,"height":15.406250000000004,"seed":1184364006,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706596934353,"link":null,"locked":false,"fontSize":12.325000000000003,"fontFamily":1,"text":"Related asset","textAlign":"left","verticalAlign":"top","containerId":null,"originalText":"Related asset","lineHeight":1.25,"baseline":11},{"type":"rectangle","version":66,"versionNonce":979257580,"isDeleted":false,"id":"BTWLv3DEaMsrW_DVWaInM","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2353.65625,"y":2594.75390625,"strokeColor":"#1e1e1e","backgroundColor":"#e9ecef","width":246.16015625,"height":110.27734375,"seed":1127375418,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[{"id":"RtvlzwWGSKKnUn9O-K37j","type":"arrow"}],"updated":1706803108701,"link":null,"locked":false},{"type":"line","version":53,"versionNonce":1480068052,"isDeleted":false,"id":"cQX5pznZP-lc-7FJfKf6N","fillStyle":"hachure","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2357.22265625,"y":2740.70703125,"strokeColor":"#1e1e1e","backgroundColor":"#e9ecef","width":224.93359375,"height":0.6640625,"seed":527008826,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"startBinding":null,"endBinding":null,"lastCommittedPoint":null,"startArrowhead":null,"endArrowhead":null,"points":[[0,0],[224.93359375,0.6640625]]},{"type":"line","version":68,"versionNonce":1878936428,"isDeleted":false,"id":"5WvLajTNXm0YKkplRW6oP","fillStyle":"hachure","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2358.169921875,"y":2763.43704118742,"strokeColor":"#1e1e1e","backgroundColor":"#e9ecef","width":224.93359375,"height":0.6640625,"seed":1790333178,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"startBinding":null,"endBinding":null,"lastCommittedPoint":null,"startArrowhead":null,"endArrowhead":null,"points":[[0,0],[224.93359375,0.6640625]]},{"type":"line","version":69,"versionNonce":1315926356,"isDeleted":false,"id":"Kn6cPJNmvb7ZyY9eguXN6","fillStyle":"hachure","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2358.447265625,"y":2790.44875993742,"strokeColor":"#1e1e1e","backgroundColor":"#e9ecef","width":224.93359375,"height":0.6640625,"seed":7871738,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"startBinding":null,"endBinding":null,"lastCommittedPoint":null,"startArrowhead":null,"endArrowhead":null,"points":[[0,0],[224.93359375,0.6640625]]},{"type":"line","version":84,"versionNonce":662306284,"isDeleted":false,"id":"XRbGMuY1fGpPfYa2XIb5I","fillStyle":"hachure","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2361.923828125,"y":2819.27688493742,"strokeColor":"#1e1e1e","backgroundColor":"#e9ecef","width":224.93359375,"height":0.6640625,"seed":665762234,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"startBinding":null,"endBinding":null,"lastCommittedPoint":null,"startArrowhead":null,"endArrowhead":null,"points":[[0,0],[224.93359375,0.6640625]]},{"type":"arrow","version":134,"versionNonce":597567188,"isDeleted":false,"id":"ZDhpEwlrH5AUtXRIg92Ik","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":1946.42578125,"y":2420.640625,"strokeColor":"#1e1e1e","backgroundColor":"#e9ecef","width":108.22265625,"height":131.546875,"seed":1135300922,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"startBinding":{"elementId":"prloiiGuYMACQ4gmNuWWJ","focus":0.5324848235368168,"gap":3.44921875},"endBinding":{"elementId":"lPo8wD4ucN9tbCZT4YCY-","focus":-0.7278819525299076,"gap":12.5703125},"lastCommittedPoint":null,"startArrowhead":null,"endArrowhead":"triangle","points":[[0,0],[108.22265625,131.546875]]},{"type":"rectangle","version":66,"versionNonce":165372012,"isDeleted":false,"id":"prloiiGuYMACQ4gmNuWWJ","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":1903.53125,"y":2368.62109375,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":131.40234375,"height":48.5703125,"seed":162462714,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[{"id":"ZDhpEwlrH5AUtXRIg92Ik","type":"arrow"}],"updated":1706803108701,"link":null,"locked":false},{"type":"text","version":15,"versionNonce":475671636,"isDeleted":false,"id":"JU8Py956wVzj0n5kgeRYp","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":1935,"y":2380,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":68.63995361328125,"height":20,"seed":1497332218,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"fontSize":16,"fontFamily":1,"text":"module A","textAlign":"left","verticalAlign":"top","containerId":null,"originalText":"module A","lineHeight":1.25,"baseline":14},{"type":"rectangle","version":124,"versionNonce":250376940,"isDeleted":false,"id":"tKL3L2aC9Y8cxs8jSWYSN","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2378.693359375,"y":2364.6015625,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":131.40234375,"height":48.5703125,"seed":588203514,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"Q2NWa76kgx3U_DyJ6wa_i"},{"id":"n4x98gzrAgK-AxpVR0k-Z","type":"arrow"}],"updated":1706803108701,"link":null,"locked":false},{"type":"text","version":69,"versionNonce":2054783444,"isDeleted":false,"id":"Q2NWa76kgx3U_DyJ6wa_i","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2409.5065536499023,"y":2378.88671875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":69.77595520019531,"height":20,"seed":1908654458,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"fontSize":16,"fontFamily":1,"text":"module B","textAlign":"center","verticalAlign":"middle","containerId":"tKL3L2aC9Y8cxs8jSWYSN","originalText":"module B","lineHeight":1.25,"baseline":14},{"type":"arrow","version":117,"versionNonce":2094467180,"isDeleted":false,"id":"n4x98gzrAgK-AxpVR0k-Z","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2440.14453125,"y":2419.671875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":2.46484375,"height":99.078125,"seed":680559014,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803121362,"link":null,"locked":false,"startBinding":{"elementId":"tKL3L2aC9Y8cxs8jSWYSN","focus":0.07564800794178884,"gap":6.5},"endBinding":{"elementId":"QizMpm6TYfwEd2YVnKLkk","focus":-0.2240163115727252,"gap":4.25390625},"lastCommittedPoint":null,"startArrowhead":null,"endArrowhead":"triangle","points":[[0,0],[2.46484375,99.078125]]},{"type":"rectangle","version":14,"versionNonce":1427253076,"isDeleted":false,"id":"5490YS86sCqQezno3L-pv","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2754.546875,"y":2380.53515625,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":162.00390625,"height":53.453125,"seed":155774118,"groupIds":[],"frameId":null,"roundness":{"type":3},"boundElements":[],"updated":1706803108701,"link":null,"locked":false},{"type":"text","version":13,"versionNonce":1510320108,"isDeleted":false,"id":"rjS9lEz69DvuZWxVemJ9O","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2801.324851989746,"y":2397.26171875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2801.324851989746,"y":2397.26171875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":68.44795227050781,"height":20,"seed":987603430,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"fontSize":16,"fontFamily":1,"text":"module C","textAlign":"center","verticalAlign":"middle","containerId":"5490YS86sCqQezno3L-pv","originalText":"module C","lineHeight":1.25,"baseline":14},{"type":"arrow","version":26,"versionNonce":372830444,"isDeleted":false,"id":"btN2r0CS_VncTdv6gB5dc","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2793.5234375,"y":2433.48046875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":66.2109375,"height":94.6484375,"seed":1538471866,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803117715,"link":null,"locked":false,"startBinding":null,"endBinding":null,"lastCommittedPoint":null,"startArrowhead":null,"endArrowhead":"triangle","points":[[0,0],[-66.2109375,94.6484375]]},{"type":"arrow","version":19,"versionNonce":23186028,"isDeleted":false,"id":"RtvlzwWGSKKnUn9O-K37j","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2289.51171875,"y":2587.484375,"strokeColor":"#e03131","backgroundColor":"transparent","width":49.44921875,"height":34.78125,"seed":1723189350,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"startBinding":{"elementId":"lPo8wD4ucN9tbCZT4YCY-","focus":-0.7801672895683777,"gap":1.5390625},"endBinding":{"elementId":"BTWLv3DEaMsrW_DVWaInM","focus":-0.48889002049329133,"gap":14.6953125},"lastCommittedPoint":null,"startArrowhead":"triangle","endArrowhead":"triangle","points":[[0,0],[49.44921875,34.78125]]},{"type":"arrow","version":362,"versionNonce":373776980,"isDeleted":false,"id":"fN3Xr0Xg8o5d5SKePUMi8","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2718.12109375,"y":2691.70703125,"strokeColor":"#e03131","backgroundColor":"transparent","width":547.7265625,"height":216.359375,"seed":1514526694,"groupIds":[],"frameId":null,"roundness":{"type":2},"boundElements":[{"type":"text","id":"6o5zfsB8HOc-2hMy3Xq2x"}],"updated":1706803108701,"link":null,"locked":false,"startBinding":{"elementId":"X3GqCIiWPuY7iU7C02zqO","focus":-0.17773525171820775,"gap":3.03125},"endBinding":{"elementId":"OuoDOOi03U51ZjTrf2LFM","focus":0.6344269725650357,"gap":4.705078125},"lastCommittedPoint":null,"startArrowhead":"triangle","endArrowhead":"triangle","points":[[0,0],[-81.70703125,216.359375],[-547.7265625,113.6875]]},{"type":"text","version":19,"versionNonce":1578474732,"isDeleted":false,"id":"6o5zfsB8HOc-2hMy3Xq2x","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2593.5500869750977,"y":2898.06640625,"strokeColor":"#e03131","backgroundColor":"transparent","width":85.72795104980469,"height":20,"seed":1791878886,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"fontSize":16,"fontFamily":1,"text":"same data","textAlign":"center","verticalAlign":"middle","containerId":"fN3Xr0Xg8o5d5SKePUMi8","originalText":"same data","lineHeight":1.25,"baseline":14},{"type":"arrow","version":276,"versionNonce":1833957332,"isDeleted":false,"id":"sCDVxOChArbTvFmTdCeIh","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":2675.23828125,"y":2611.203125,"strokeColor":"#e03131","backgroundColor":"transparent","width":472.2421875,"height":231.82421875,"seed":1470848826,"groupIds":[],"frameId":null,"roundness":{"type":2},"boundElements":[],"updated":1706803108701,"link":null,"locked":false,"startBinding":null,"endBinding":{"elementId":"B0H9SU3nlbooyNdiqQZ8v","focus":-0.19719908405051073,"gap":9.66796875},"lastCommittedPoint":null,"startArrowhead":"triangle","endArrowhead":"triangle","points":[[0,0],[-67.171875,231.82421875],[-472.2421875,62.46484375]]}],"appState":{"gridSize":null,"viewBackgroundColor":"#ffffff"}}
Using the current method to manage the data of each module seems reasonable, as there is currently no need to worry about the issues caused by data duplication. Rendering the correct UI after the data is generated is the simplest method for static pages.
Now, with the addition of new requirements, real-time modifications to the data need optimistic updates. This means that when the backend data is updated, the corresponding frontend data also needs to be updated.
At this point, in the context of using React Query, optimistic updates for the respective data of the three modules' queries have been made.
{"type":"excalidraw/clipboard","elements":[{"type":"rectangle","version":108,"versionNonce":2098663910,"isDeleted":false,"id":"PqvVZPm_nDYyPfTG73HWD","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":4072.6685460138256,"y":1939.7962431608137,"strokeColor":"#1971c2","backgroundColor":"transparent","width":745.1640625,"height":439.69140625,"seed":1156397478,"groupIds":[],"frameId":null,"roundness":null,"boundElements":[],"updated":1706597833116,"link":null,"locked":false},{"type":"rectangle","version":133,"versionNonce":292021542,"isDeleted":false,"id":"d1alc_pLqmBBvW9d3QHMf","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":4087.0865147638256,"y":1952.8040556608137,"strokeColor":"#1971c2","backgroundColor":"transparent","width":189.1015625,"height":29.765625000000007,"seed":329454822,"groupIds":[],"frameId":null,"roundness":{"type":3},"boundElements":[],"updated":1706597833116,"link":null,"locked":false},{"type":"rectangle","version":103,"versionNonce":1656508518,"isDeleted":false,"id":"7Q1R1w3gYk3fi2XmGp0Bo","fillStyle":"cross-hatch","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":4089.4849522638256,"y":1990.1087431608137,"strokeColor":"#1971c2","backgroundColor":"transparent","width":238.86328125,"height":280.91796875,"seed":494635046,"groupIds":[],"