Added Add + button in the ER diagram #10
|
|
@ -36,6 +36,7 @@
|
||||||
"eslint-plugin-react-hooks": "^5.2.0",
|
"eslint-plugin-react-hooks": "^5.2.0",
|
||||||
"eslint-plugin-react-refresh": "^0.4.19",
|
"eslint-plugin-react-refresh": "^0.4.19",
|
||||||
"globals": "^16.0.0",
|
"globals": "^16.0.0",
|
||||||
|
"sass-embedded": "^1.89.2",
|
||||||
"vite": "^6.3.5"
|
"vite": "^6.3.5"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -334,6 +335,13 @@
|
||||||
"node": ">=6.9.0"
|
"node": ">=6.9.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@bufbuild/protobuf": {
|
||||||
|
"version": "2.5.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.5.2.tgz",
|
||||||
|
"integrity": "sha512-foZ7qr0IsUBjzWIq+SuBLfdQCpJ1j8cTuNNT4owngTHoN5KsJb8L9t65fzz7SCeSWzescoOil/0ldqiL041ABg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "(Apache-2.0 AND BSD-3-Clause)"
|
||||||
|
},
|
||||||
"node_modules/@emotion/babel-plugin": {
|
"node_modules/@emotion/babel-plugin": {
|
||||||
"version": "11.13.5",
|
"version": "11.13.5",
|
||||||
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
|
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
|
||||||
|
|
@ -5711,6 +5719,13 @@
|
||||||
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
|
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/buffer-builder": {
|
||||||
|
"version": "0.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz",
|
||||||
|
"integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT/X11"
|
||||||
|
},
|
||||||
"node_modules/bytes": {
|
"node_modules/bytes": {
|
||||||
"version": "3.1.2",
|
"version": "3.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
|
||||||
|
|
@ -5887,6 +5902,13 @@
|
||||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/colorjs.io": {
|
||||||
|
"version": "0.5.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
|
||||||
|
"integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/combined-stream": {
|
"node_modules/combined-stream": {
|
||||||
"version": "1.0.8",
|
"version": "1.0.8",
|
||||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||||
|
|
@ -7476,6 +7498,13 @@
|
||||||
"integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
|
"integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/immutable": {
|
||||||
|
"version": "5.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
|
||||||
|
"integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/import-fresh": {
|
"node_modules/import-fresh": {
|
||||||
"version": "3.3.1",
|
"version": "3.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
|
||||||
|
|
@ -9049,6 +9078,335 @@
|
||||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/sass-embedded": {
|
||||||
|
"version": "1.89.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.89.2.tgz",
|
||||||
|
"integrity": "sha512-Ack2K8rc57kCFcYlf3HXpZEJFNUX8xd8DILldksREmYXQkRHI879yy8q4mRDJgrojkySMZqmmmW1NxrFxMsYaA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@bufbuild/protobuf": "^2.5.0",
|
||||||
|
"buffer-builder": "^0.2.0",
|
||||||
|
"colorjs.io": "^0.5.0",
|
||||||
|
"immutable": "^5.0.2",
|
||||||
|
"rxjs": "^7.4.0",
|
||||||
|
"supports-color": "^8.1.1",
|
||||||
|
"sync-child-process": "^1.0.2",
|
||||||
|
"varint": "^6.0.0"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"sass": "dist/bin/sass.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=16.0.0"
|
||||||
|
},
|
||||||
|
"optionalDependencies": {
|
||||||
|
"sass-embedded-android-arm": "1.89.2",
|
||||||
|
"sass-embedded-android-arm64": "1.89.2",
|
||||||
|
"sass-embedded-android-riscv64": "1.89.2",
|
||||||
|
"sass-embedded-android-x64": "1.89.2",
|
||||||
|
"sass-embedded-darwin-arm64": "1.89.2",
|
||||||
|
"sass-embedded-darwin-x64": "1.89.2",
|
||||||
|
"sass-embedded-linux-arm": "1.89.2",
|
||||||
|
"sass-embedded-linux-arm64": "1.89.2",
|
||||||
|
"sass-embedded-linux-musl-arm": "1.89.2",
|
||||||
|
"sass-embedded-linux-musl-arm64": "1.89.2",
|
||||||
|
"sass-embedded-linux-musl-riscv64": "1.89.2",
|
||||||
|
"sass-embedded-linux-musl-x64": "1.89.2",
|
||||||
|
"sass-embedded-linux-riscv64": "1.89.2",
|
||||||
|
"sass-embedded-linux-x64": "1.89.2",
|
||||||
|
"sass-embedded-win32-arm64": "1.89.2",
|
||||||
|
"sass-embedded-win32-x64": "1.89.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sass-embedded-android-arm": {
|
||||||
|
"version": "1.89.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.89.2.tgz",
|
||||||
|
"integrity": "sha512-oHAPTboBHRZlDBhyRB6dvDKh4KvFs+DZibDHXbkSI6dBZxMTT+Yb2ivocHnctVGucKTLQeT7+OM5DjWHyynL/A==",
|
||||||
|
"cpu": [
|
||||||
|
"arm"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"android"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sass-embedded-android-arm64": {
|
||||||
|
"version": "1.89.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.89.2.tgz",
|
||||||
|
"integrity": "sha512-+pq7a7AUpItNyPu61sRlP6G2A8pSPpyazASb+8AK2pVlFayCSPAEgpwpCE9A2/Xj86xJZeMizzKUHxM2CBCUxA==",
|
||||||
|
"cpu": [
|
||||||
|
"arm64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"android"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sass-embedded-android-riscv64": {
|
||||||
|
"version": "1.89.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.89.2.tgz",
|
||||||
|
"integrity": "sha512-HfJJWp/S6XSYvlGAqNdakeEMPOdhBkj2s2lN6SHnON54rahKem+z9pUbCriUJfM65Z90lakdGuOfidY61R9TYg==",
|
||||||
|
"cpu": [
|
||||||
|
"riscv64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"android"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sass-embedded-android-x64": {
|
||||||
|
"version": "1.89.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.89.2.tgz",
|
||||||
|
"integrity": "sha512-BGPzq53VH5z5HN8de6jfMqJjnRe1E6sfnCWFd4pK+CAiuM7iw5Fx6BQZu3ikfI1l2GY0y6pRXzsVLdp/j4EKEA==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"android"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sass-embedded-darwin-arm64": {
|
||||||
|
"version": "1.89.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.89.2.tgz",
|
||||||
|
"integrity": "sha512-UCm3RL/tzMpG7DsubARsvGUNXC5pgfQvP+RRFJo9XPIi6elopY5B6H4m9dRYDpHA+scjVthdiDwkPYr9+S/KGw==",
|
||||||
|
"cpu": [
|
||||||
|
"arm64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"darwin"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sass-embedded-darwin-x64": {
|
||||||
|
"version": "1.89.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.89.2.tgz",
|
||||||
|
"integrity": "sha512-D9WxtDY5VYtMApXRuhQK9VkPHB8R79NIIR6xxVlN2MIdEid/TZWi1MHNweieETXhWGrKhRKglwnHxxyKdJYMnA==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"darwin"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sass-embedded-linux-arm": {
|
||||||
|
"version": "1.89.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.89.2.tgz",
|
||||||
|
"integrity": "sha512-leP0t5U4r95dc90o8TCWfxNXwMAsQhpWxTkdtySDpngoqtTy3miMd7EYNYd1znI0FN1CBaUvbdCMbnbPwygDlA==",
|
||||||
|
"cpu": [
|
||||||
|
"arm"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sass-embedded-linux-arm64": {
|
||||||
|
"version": "1.89.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.89.2.tgz",
|
||||||
|
"integrity": "sha512-2N4WW5LLsbtrWUJ7iTpjvhajGIbmDR18ZzYRywHdMLpfdPApuHPMDF5CYzHbS+LLx2UAx7CFKBnj5LLjY6eFgQ==",
|
||||||
|
"cpu": [
|
||||||
|
"arm64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sass-embedded-linux-musl-arm": {
|
||||||
|
"version": "1.89.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.89.2.tgz",
|
||||||
|
"integrity": "sha512-Z6gG2FiVEEdxYHRi2sS5VIYBmp17351bWtOCUZ/thBM66+e70yiN6Eyqjz80DjL8haRUegNQgy9ZJqsLAAmr9g==",
|
||||||
|
"cpu": [
|
||||||
|
"arm"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sass-embedded-linux-musl-arm64": {
|
||||||
|
"version": "1.89.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.89.2.tgz",
|
||||||
|
"integrity": "sha512-nTyuaBX6U1A/cG7WJh0pKD1gY8hbg1m2SnzsyoFG+exQ0lBX/lwTLHq3nyhF+0atv7YYhYKbmfz+sjPP8CZ9lw==",
|
||||||
|
"cpu": [
|
||||||
|
"arm64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sass-embedded-linux-musl-riscv64": {
|
||||||
|
"version": "1.89.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.89.2.tgz",
|
||||||
|
"integrity": "sha512-N6oul+qALO0SwGY8JW7H/Vs0oZIMrRMBM4GqX3AjM/6y8JsJRxkAwnfd0fDyK+aICMFarDqQonQNIx99gdTZqw==",
|
||||||
|
"cpu": [
|
||||||
|
"riscv64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sass-embedded-linux-musl-x64": {
|
||||||
|
"version": "1.89.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.89.2.tgz",
|
||||||
|
"integrity": "sha512-K+FmWcdj/uyP8GiG9foxOCPfb5OAZG0uSVq80DKgVSC0U44AdGjvAvVZkrgFEcZ6cCqlNC2JfYmslB5iqdL7tg==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sass-embedded-linux-riscv64": {
|
||||||
|
"version": "1.89.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.89.2.tgz",
|
||||||
|
"integrity": "sha512-g9nTbnD/3yhOaskeqeBQETbtfDQWRgsjHok6bn7DdAuwBsyrR3JlSFyqKc46pn9Xxd9SQQZU8AzM4IR+sY0A0w==",
|
||||||
|
"cpu": [
|
||||||
|
"riscv64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sass-embedded-linux-x64": {
|
||||||
|
"version": "1.89.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.89.2.tgz",
|
||||||
|
"integrity": "sha512-Ax7dKvzncyQzIl4r7012KCMBvJzOz4uwSNoyoM5IV6y5I1f5hEwI25+U4WfuTqdkv42taCMgpjZbh9ERr6JVMQ==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sass-embedded-win32-arm64": {
|
||||||
|
"version": "1.89.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.89.2.tgz",
|
||||||
|
"integrity": "sha512-j96iJni50ZUsfD6tRxDQE2QSYQ2WrfHxeiyAXf41Kw0V4w5KYR/Sf6rCZQLMTUOHnD16qTMVpQi20LQSqf4WGg==",
|
||||||
|
"cpu": [
|
||||||
|
"arm64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"win32"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sass-embedded-win32-x64": {
|
||||||
|
"version": "1.89.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.89.2.tgz",
|
||||||
|
"integrity": "sha512-cS2j5ljdkQsb4PaORiClaVYynE9OAPZG/XjbOMxpQmjRIf7UroY4PEIH+Waf+y47PfXFX9SyxhYuw2NIKGbEng==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"win32"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sass-embedded/node_modules/supports-color": {
|
||||||
|
"version": "8.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
|
||||||
|
"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"has-flag": "^4.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/chalk/supports-color?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/scheduler": {
|
"node_modules/scheduler": {
|
||||||
"version": "0.23.2",
|
"version": "0.23.2",
|
||||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
|
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
|
||||||
|
|
@ -9330,6 +9688,29 @@
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/sync-child-process": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sync-child-process/-/sync-child-process-1.0.2.tgz",
|
||||||
|
"integrity": "sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"sync-message-port": "^1.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=16.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sync-message-port": {
|
||||||
|
"version": "1.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/sync-message-port/-/sync-message-port-1.1.3.tgz",
|
||||||
|
"integrity": "sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=16.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/tailwind-merge": {
|
"node_modules/tailwind-merge": {
|
||||||
"version": "3.3.0",
|
"version": "3.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.0.tgz",
|
||||||
|
|
@ -9577,6 +9958,13 @@
|
||||||
"uuid": "dist/esm/bin/uuid"
|
"uuid": "dist/esm/bin/uuid"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/varint": {
|
||||||
|
"version": "6.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz",
|
||||||
|
"integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/vary": {
|
"node_modules/vary": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
||||||
|
|
|
||||||
|
|
@ -41,6 +41,7 @@
|
||||||
"eslint-plugin-react-hooks": "^5.2.0",
|
"eslint-plugin-react-hooks": "^5.2.0",
|
||||||
"eslint-plugin-react-refresh": "^0.4.19",
|
"eslint-plugin-react-refresh": "^0.4.19",
|
||||||
"globals": "^16.0.0",
|
"globals": "^16.0.0",
|
||||||
|
"sass-embedded": "^1.89.2",
|
||||||
"vite": "^6.3.5"
|
"vite": "^6.3.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -17,13 +17,13 @@ import ReactFlow, {
|
||||||
MarkerType
|
MarkerType
|
||||||
} from 'reactflow';
|
} from 'reactflow';
|
||||||
import 'reactflow/dist/style.css';
|
import 'reactflow/dist/style.css';
|
||||||
|
import './ERDiagramCanvas.scss';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
|
||||||
// Import icons from react-icons
|
// Import icons from react-icons
|
||||||
import {
|
import {
|
||||||
FaDatabase,
|
FaDatabase,
|
||||||
FaTable,
|
FaTable,
|
||||||
FaPlus,
|
|
||||||
FaTimes,
|
FaTimes,
|
||||||
FaKey,
|
FaKey,
|
||||||
FaLink,
|
FaLink,
|
||||||
|
|
@ -40,362 +40,7 @@ import { CustomDatabaseIcon, CustomDocumentIcon, CustomDimensionIcon } from './C
|
||||||
import { Breadcrumbs, Link, Typography, Menu, MenuItem, ListItemIcon, ListItemText } from '@mui/material';
|
import { Breadcrumbs, Link, Typography, Menu, MenuItem, ListItemIcon, ListItemText } from '@mui/material';
|
||||||
import AddTableModal from './AddTableModal';
|
import AddTableModal from './AddTableModal';
|
||||||
|
|
||||||
// Custom styles for ER Diagram
|
|
||||||
const generateERStyles = () => {
|
|
||||||
return `
|
|
||||||
.react-flow__node {
|
|
||||||
z-index: 1;
|
|
||||||
margin: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-database-wrapper {
|
|
||||||
z-index: -2;
|
|
||||||
pointer-events: all;
|
|
||||||
border-radius: 25px;
|
|
||||||
cursor: grab;
|
|
||||||
user-select: none;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
padding: 100px;
|
|
||||||
border: 3px solid rgba(0, 169, 157, 0.4);
|
|
||||||
background: rgba(0, 169, 157, 0.03);
|
|
||||||
box-shadow: 0 0 30px rgba(0, 169, 157, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-database-wrapper:hover {
|
|
||||||
border-color: rgba(0, 169, 157, 0.6);
|
|
||||||
background: rgba(0, 169, 157, 0.05);
|
|
||||||
box-shadow: 0 0 40px rgba(0, 169, 157, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-database-wrapper:active {
|
|
||||||
cursor: grabbing;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-database-label {
|
|
||||||
position: absolute;
|
|
||||||
top: 20px;
|
|
||||||
left: 20px;
|
|
||||||
background: rgba(0, 169, 157, 0.95);
|
|
||||||
color: white;
|
|
||||||
padding: 12px 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 169, 157, 0.3);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
z-index: 15;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-schema-group {
|
|
||||||
z-index: -1;
|
|
||||||
pointer-events: all;
|
|
||||||
border-radius: 20px;
|
|
||||||
cursor: grab;
|
|
||||||
user-select: none;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
padding: 80px;
|
|
||||||
border: 2px dashed rgba(138, 43, 226, 0.3);
|
|
||||||
background: rgba(138, 43, 226, 0.05);
|
|
||||||
position: relative;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-schema-group:hover {
|
|
||||||
border-color: rgba(138, 43, 226, 0.5);
|
|
||||||
background: rgba(138, 43, 226, 0.08);
|
|
||||||
box-shadow: 0 0 20px rgba(138, 43, 226, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-schema-group:active {
|
|
||||||
cursor: grabbing;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-schema-label {
|
|
||||||
position: absolute;
|
|
||||||
top: 15px;
|
|
||||||
left: 15px;
|
|
||||||
background: rgba(138, 43, 226, 0.9);
|
|
||||||
color: white;
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
box-shadow: 0 2px 8px rgba(138, 43, 226, 0.3);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-table-node {
|
|
||||||
background: white;
|
|
||||||
border: 2px solid #e1e5e9;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
||||||
width: 260px;
|
|
||||||
min-height: 200px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-table-node:hover {
|
|
||||||
border-color: #8a2be2;
|
|
||||||
box-shadow: 0 4px 16px rgba(138, 43, 226, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-table-header {
|
|
||||||
background: linear-gradient(135deg, #8a2be2, #9932cc);
|
|
||||||
color: white;
|
|
||||||
padding: 14px 16px;
|
|
||||||
border-radius: 8px 8px 0 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-table-header.stage {
|
|
||||||
background: linear-gradient(135deg, #00a99d, #52c41a);
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-table-header.fact {
|
|
||||||
background: linear-gradient(135deg, #fa8c16, #faad14);
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-table-header.dimension {
|
|
||||||
background: linear-gradient(135deg, #52c41a, #73d13d);
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-column-list {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
list-style: none;
|
|
||||||
max-height: 300px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-column-item {
|
|
||||||
padding: 10px 16px;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
font-size: 13px;
|
|
||||||
transition: background-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-column-item:hover {
|
|
||||||
background-color: #f8f9fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-column-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-column-name {
|
|
||||||
flex: 1;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-column-type {
|
|
||||||
color: #666;
|
|
||||||
font-size: 11px;
|
|
||||||
background: #f5f5f5;
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-primary-key {
|
|
||||||
color: #faad14;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-foreign-key {
|
|
||||||
color: #8a2be2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-relationship-edge {
|
|
||||||
stroke: #8a2be2;
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-relationship-edge .react-flow__edge-path {
|
|
||||||
stroke: #8a2be2;
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-relationship-edge-animated {
|
|
||||||
stroke: #8a2be2;
|
|
||||||
stroke-width: 2;
|
|
||||||
stroke-dasharray: 5;
|
|
||||||
animation: dashdraw 0.5s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes dashdraw {
|
|
||||||
to {
|
|
||||||
stroke-dashoffset: -10;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Enhanced arrow markers */
|
|
||||||
.react-flow__edge.selected .react-flow__edge-path {
|
|
||||||
stroke: #faad14 !important;
|
|
||||||
stroke-width: 3 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-flow__edge:hover .react-flow__edge-path {
|
|
||||||
stroke: #52c41a !important;
|
|
||||||
stroke-width: 3 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom arrow styling */
|
|
||||||
.er-custom-arrow {
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cardinality indicators */
|
|
||||||
.er-cardinality-indicator {
|
|
||||||
background: rgba(255, 255, 255, 0.95) !important;
|
|
||||||
border: 1px solid #8a2be2 !important;
|
|
||||||
border-radius: 3px !important;
|
|
||||||
padding: 2px 6px !important;
|
|
||||||
font-size: 10px !important;
|
|
||||||
font-weight: bold !important;
|
|
||||||
color: #8a2be2 !important;
|
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Relationship direction indicators */
|
|
||||||
.er-direction-arrow {
|
|
||||||
fill: #8a2be2;
|
|
||||||
stroke: #8a2be2;
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-direction-arrow.selected {
|
|
||||||
fill: #faad14;
|
|
||||||
stroke: #faad14;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-relationship-label {
|
|
||||||
background: rgba(138, 43, 226, 0.9);
|
|
||||||
color: white;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-relationship-label:hover + .relationship-tooltip {
|
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-add-button {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 30px;
|
|
||||||
right: 30px;
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: linear-gradient(135deg, #8a2be2, #9932cc);
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
font-size: 24px;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 4px 16px rgba(138, 43, 226, 0.3);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
z-index: 1000;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-add-button:hover {
|
|
||||||
transform: scale(1.1);
|
|
||||||
box-shadow: 0 6px 20px rgba(138, 43, 226, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-add-button:active {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-breadcrumb-dropdown {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: background-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-breadcrumb-dropdown:hover {
|
|
||||||
background-color: rgba(0, 169, 157, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-breadcrumb-dropdown .dropdown-arrow {
|
|
||||||
margin-left: 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-breadcrumb-dropdown.open .dropdown-arrow {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-service-menu {
|
|
||||||
background: rgba(26, 26, 26, 0.95) !important;
|
|
||||||
border: 1px solid rgba(0, 169, 157, 0.3) !important;
|
|
||||||
border-radius: 8px !important;
|
|
||||||
backdrop-filter: blur(10px) !important;
|
|
||||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-service-menu .MuiMenuItem-root {
|
|
||||||
color: #ffffff !important;
|
|
||||||
padding: 12px 16px !important;
|
|
||||||
border-radius: 4px !important;
|
|
||||||
margin: 4px 8px !important;
|
|
||||||
transition: all 0.2s ease !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-service-menu .MuiMenuItem-root:hover {
|
|
||||||
background-color: rgba(0, 169, 157, 0.1) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er-service-menu .MuiListItemIcon-root {
|
|
||||||
color: #00a99d !important;
|
|
||||||
min-width: 32px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure ReactFlow markers are visible */
|
|
||||||
.react-flow__edges {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-flow__edge {
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-flow__edge path {
|
|
||||||
stroke: #8a2be2;
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-flow__edge.selected path {
|
|
||||||
stroke: #faad14 !important;
|
|
||||||
stroke-width: 3 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom arrows are always visible */
|
|
||||||
.er-custom-arrow {
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Custom Table Node Component for ER Diagram
|
// Custom Table Node Component for ER Diagram
|
||||||
const ERTableNode = ({ data, id }) => {
|
const ERTableNode = ({ data, id }) => {
|
||||||
|
|
@ -417,12 +62,10 @@ const ERTableNode = ({ data, id }) => {
|
||||||
<Handle
|
<Handle
|
||||||
type="target"
|
type="target"
|
||||||
position={Position.Left}
|
position={Position.Left}
|
||||||
style={{ background: '#8a2be2', width: 8, height: 8 }}
|
|
||||||
/>
|
/>
|
||||||
<Handle
|
<Handle
|
||||||
type="source"
|
type="source"
|
||||||
position={Position.Right}
|
position={Position.Right}
|
||||||
style={{ background: '#8a2be2', width: 8, height: 8 }}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className={`er-table-header ${data.table_type || 'default'}`}>
|
<div className={`er-table-header ${data.table_type || 'default'}`}>
|
||||||
|
|
@ -629,10 +272,13 @@ const ERDatabaseWrapperNode = ({ data, id }) => {
|
||||||
const autoHeight = Math.max(1000, data.contentHeight + 200); // Base height + content + padding
|
const autoHeight = Math.max(1000, data.contentHeight + 200); // Base height + content + padding
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="er-database-wrapper" style={{
|
<div
|
||||||
width: data.width || autoWidth,
|
className="er-database-wrapper"
|
||||||
height: data.height || autoHeight
|
style={{
|
||||||
}}>
|
'--db-width': `${data.width || autoWidth}px`,
|
||||||
|
'--db-height': `${data.height || autoHeight}px`
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div className="er-database-label">
|
<div className="er-database-label">
|
||||||
<FaDatabase />
|
<FaDatabase />
|
||||||
<span>{data.name}</span>
|
<span>{data.name}</span>
|
||||||
|
|
@ -656,10 +302,13 @@ const ERSchemaGroupNode = ({ data, id }) => {
|
||||||
const autoHeight = Math.max(600, rows * 280 + 200); // Base height + table height + padding
|
const autoHeight = Math.max(600, rows * 280 + 200); // Base height + table height + padding
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="er-schema-group" style={{
|
<div
|
||||||
width: data.width || autoWidth,
|
className="er-schema-group"
|
||||||
height: data.height || autoHeight
|
style={{
|
||||||
}}>
|
'--schema-width': `${data.width || autoWidth}px`,
|
||||||
|
'--schema-height': `${data.height || autoHeight}px`
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div className="er-schema-label">
|
<div className="er-schema-label">
|
||||||
<FaLayerGroup />
|
<FaLayerGroup />
|
||||||
<span>{data.name}</span>
|
<span>{data.name}</span>
|
||||||
|
|
@ -668,16 +317,7 @@ const ERSchemaGroupNode = ({ data, id }) => {
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{tableCount === 0 && (
|
{tableCount === 0 && (
|
||||||
<div style={{
|
<div className="er-schema-empty">
|
||||||
position: 'absolute',
|
|
||||||
top: '50%',
|
|
||||||
left: '50%',
|
|
||||||
transform: 'translate(-50%, -50%)',
|
|
||||||
color: '#999',
|
|
||||||
fontSize: '14px',
|
|
||||||
fontStyle: 'italic',
|
|
||||||
textAlign: 'center'
|
|
||||||
}}>
|
|
||||||
<FaTable style={{ fontSize: '24px', marginBottom: '8px', opacity: 0.5 }} />
|
<FaTable style={{ fontSize: '24px', marginBottom: '8px', opacity: 0.5 }} />
|
||||||
<br />
|
<br />
|
||||||
No tables in this schema
|
No tables in this schema
|
||||||
|
|
@ -1913,11 +1553,9 @@ const ERDiagramCanvasContent = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ width: '100vw', height: '100vh', position: 'relative', display: 'flex', flexDirection: 'column', minWidth: '1200px', minHeight: '800px' }}>
|
<div className="er-diagram-container">
|
||||||
<style dangerouslySetInnerHTML={{ __html: generateERStyles() }} />
|
|
||||||
|
|
||||||
{/* Breadcrumb Header */}
|
{/* Breadcrumb Header */}
|
||||||
<div style={{ padding: '0 20px 20px 20px', flexShrink: 0 }}>
|
<div className="er-breadcrumb-header">
|
||||||
<HierarchicalBreadcrumb
|
<HierarchicalBreadcrumb
|
||||||
selectedService={selectedService}
|
selectedService={selectedService}
|
||||||
selectedDataSource={selectedDataSource}
|
selectedDataSource={selectedDataSource}
|
||||||
|
|
@ -1927,7 +1565,7 @@ const ERDiagramCanvasContent = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ReactFlow Container */}
|
{/* ReactFlow Container */}
|
||||||
<div style={{ flex: 1, position: 'relative', minHeight: '700px' }}>
|
<div className="er-reactflow-container">
|
||||||
<ReactFlow
|
<ReactFlow
|
||||||
nodes={nodes}
|
nodes={nodes}
|
||||||
edges={edges}
|
edges={edges}
|
||||||
|
|
@ -2060,11 +1698,6 @@ const ERDiagramCanvasContent = () => {
|
||||||
<span style={{ color: '#8a2be2' }}>↔</span>
|
<span style={{ color: '#8a2be2' }}>↔</span>
|
||||||
<span><strong>N:M</strong> - Many to Many</span>
|
<span><strong>N:M</strong> - Many to Many</span>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ fontSize: '10px', opacity: 0.7, marginTop: '8px', borderTop: '1px solid rgba(138, 43, 226, 0.2)', paddingTop: '6px' }}>
|
|
||||||
• Arrows show relationship direction<br/>
|
|
||||||
• Numbers show cardinality<br/>
|
|
||||||
• Click edges to select them
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Panel>
|
</Panel>
|
||||||
|
|
@ -2109,7 +1742,13 @@ const ERDiagramCanvasContent = () => {
|
||||||
title="Add New Table"
|
title="Add New Table"
|
||||||
disabled={!availableSchemas.length}
|
disabled={!availableSchemas.length}
|
||||||
>
|
>
|
||||||
<FaPlus />
|
<svg width="99" height="36" viewBox="0 0 99 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="0.5" y="0.5" width="98" height="35" rx="7.5" fill="#3EA29A"/>
|
||||||
|
<rect x="0.5" y="0.5" width="98" height="35" rx="7.5" stroke="#27B5AA"/>
|
||||||
|
<path fillRule="evenodd" clipRule="evenodd" d="M17.3453 10.0167C20.4392 9.67413 23.5614 9.67413 26.6553 10.0167C28.3683 10.2087 29.7503 11.5577 29.9513 13.2767C30.3179 16.4147 30.3179 19.5847 29.9513 22.7227C29.7503 24.4417 28.3683 25.7907 26.6553 25.9827C23.5614 26.3252 20.4392 26.3252 17.3453 25.9827C15.6323 25.7907 14.2503 24.4417 14.0493 22.7227C13.6828 19.585 13.6828 16.4153 14.0493 13.2777C14.151 12.4426 14.5317 11.6662 15.1298 11.0745C15.7278 10.4828 16.5082 10.1104 17.3443 10.0177M22.0003 13.0067C22.1992 13.0067 22.39 13.0857 22.5307 13.2264C22.6713 13.367 22.7503 13.5578 22.7503 13.7567V17.2497H26.2433C26.4422 17.2497 26.633 17.3287 26.7737 17.4694C26.9143 17.61 26.9933 17.8008 26.9933 17.9997C26.9933 18.1986 26.9143 18.3894 26.7737 18.53C26.633 18.6707 26.4422 18.7497 26.2433 18.7497H22.7503V22.2427C22.7503 22.4416 22.6713 22.6324 22.5307 22.773C22.39 22.9137 22.1992 22.9927 22.0003 22.9927C21.8014 22.9927 21.6106 22.9137 21.47 22.773C21.3293 22.6324 21.2503 22.4416 21.2503 22.2427V18.7497H17.7573C17.5584 18.7497 17.3676 18.6707 17.227 18.53C17.0863 18.3894 17.0073 18.1986 17.0073 17.9997C17.0073 17.8008 17.0863 17.61 17.227 17.4694C17.3676 17.3287 17.5584 17.2497 17.7573 17.2497H21.2503V13.7567C21.2503 13.5578 21.3293 13.367 21.47 13.2264C21.6106 13.0857 21.8014 13.0067 22.0003 13.0067Z" fill="white"/>
|
||||||
|
<path d="M38.9787 23H37.348L41.0121 12.8182H42.7869L46.451 23H44.8203L41.9418 14.6676H41.8622L38.9787 23ZM39.2521 19.0128H44.5419V20.3054H39.2521V19.0128ZM50.5376 23.1491C49.9212 23.1491 49.371 22.9917 48.8871 22.6768C48.4065 22.3587 48.0286 21.9062 47.7536 21.3196C47.4818 20.7296 47.3459 20.022 47.3459 19.1967C47.3459 18.3714 47.4834 17.6655 47.7585 17.0788C48.0369 16.4922 48.4181 16.0431 48.902 15.7315C49.3859 15.42 49.9344 15.2642 50.5476 15.2642C51.0215 15.2642 51.4027 15.3438 51.6911 15.5028C51.9827 15.6586 52.2081 15.8409 52.3672 16.0497C52.5296 16.2585 52.6555 16.4425 52.745 16.6016H52.8345V12.8182H54.321V23H52.8693V21.8118H52.745C52.6555 21.9742 52.5263 22.1598 52.3572 22.3686C52.1915 22.5774 51.9628 22.7597 51.6712 22.9155C51.3795 23.0713 51.0017 23.1491 50.5376 23.1491ZM50.8658 21.8814C51.2933 21.8814 51.6546 21.7687 51.9496 21.5433C52.2479 21.3146 52.4732 20.9981 52.6257 20.5938C52.7815 20.1894 52.8594 19.7187 52.8594 19.1818C52.8594 18.6515 52.7831 18.1875 52.6307 17.7898C52.4782 17.392 52.2545 17.0821 51.9595 16.8601C51.6645 16.638 51.3 16.527 50.8658 16.527C50.4183 16.527 50.0455 16.643 49.7472 16.875C49.4489 17.107 49.2235 17.4235 49.071 17.8246C48.9219 18.2256 48.8473 18.678 48.8473 19.1818C48.8473 19.6922 48.9235 20.1513 49.076 20.5589C49.2285 20.9666 49.4538 21.2898 49.7521 21.5284C50.0537 21.7637 50.425 21.8814 50.8658 21.8814ZM59.3013 23.1491C58.6848 23.1491 58.1346 22.9917 57.6507 22.6768C57.1702 22.3587 56.7923 21.9062 56.5172 21.3196C56.2454 20.7296 56.1096 20.022 56.1096 19.1967C56.1096 18.3714 56.2471 17.6655 56.5222 17.0788C56.8006 16.4922 57.1818 16.0431 57.6657 15.7315C58.1496 15.42 58.6981 15.2642 59.3113 15.2642C59.7852 15.2642 60.1664 15.3438 60.4547 15.5028C60.7464 15.6586 60.9718 15.8409 61.1309 16.0497C61.2933 16.2585 61.4192 16.4425 61.5087 16.6016H61.5982V12.8182H63.0847V23H61.633V21.8118H61.5087C61.4192 21.9742 61.29 22.1598 61.1209 22.3686C60.9552 22.5774 60.7265 22.7597 60.4348 22.9155C60.1432 23.0713 59.7653 23.1491 59.3013 23.1491ZM59.6294 21.8814C60.057 21.8814 60.4183 21.7687 60.7132 21.5433C61.0115 21.3146 61.2369 20.9981 61.3894 20.5938C61.5452 20.1894 61.623 19.7187 61.623 19.1818C61.623 18.6515 61.5468 18.1875 61.3944 17.7898C61.2419 17.392 61.0182 17.0821 60.7232 16.8601C60.4282 16.638 60.0636 16.527 59.6294 16.527C59.182 16.527 58.8091 16.643 58.5108 16.875C58.2125 17.107 57.9872 17.4235 57.8347 17.8246C57.6855 18.2256 57.611 18.678 57.611 19.1818C57.611 19.6922 57.6872 20.1513 57.8397 20.5589C57.9921 20.9666 58.2175 21.2898 58.5158 21.5284C58.8174 21.7637 59.1886 21.8814 59.6294 21.8814Z" fill="white"/>
|
||||||
|
<path d="M69.3439 17.9091C69.3439 16.6629 69.508 15.5161 69.8361 14.4688C70.1642 13.4214 70.6432 12.4553 71.2729 11.5703H72.6351C72.3899 11.8984 72.1612 12.3011 71.949 12.7784C71.7369 13.2557 71.5513 13.7794 71.3922 14.3494C71.2331 14.9162 71.1088 15.5045 71.0194 16.1143C70.9299 16.7209 70.8851 17.3191 70.8851 17.9091C70.8851 18.6979 70.963 19.4967 71.1188 20.3054C71.2746 21.1141 71.485 21.8648 71.7502 22.5575C72.0153 23.2502 72.3103 23.8153 72.6351 24.2528H71.2729C70.6432 23.3679 70.1642 22.4018 69.8361 21.3544C69.508 20.3071 69.3439 19.1586 69.3439 17.9091ZM75.1818 23H73.5511L77.2152 12.8182H78.9901L82.6541 23H81.0234L78.1449 14.6676H78.0653L75.1818 23ZM75.4553 19.0128H80.745V20.3054H75.4553V19.0128ZM86.8638 17.9091C86.8638 19.1586 86.6998 20.3071 86.3716 21.3544C86.0435 22.4018 85.5646 23.3679 84.9348 24.2528H83.5726C83.8179 23.9247 84.0466 23.522 84.2587 23.0447C84.4708 22.5675 84.6564 22.0455 84.8155 21.4787C84.9746 20.9086 85.0989 20.3187 85.1884 19.7088C85.2779 19.099 85.3226 18.4991 85.3226 17.9091C85.3226 17.1236 85.2447 16.3265 85.089 15.5178C84.9332 14.709 84.7227 13.9583 84.4576 13.2656C84.1924 12.5729 83.8974 12.0078 83.5726 11.5703H84.9348C85.5646 12.4553 86.0435 13.4214 86.3716 14.4688C86.6998 15.5161 86.8638 16.6629 86.8638 17.9091Z" fill="white" fillOpacity="0.5"/>
|
||||||
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* Add Table Modal */}
|
{/* Add Table Modal */}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,628 @@
|
||||||
|
// ERDiagramCanvas SCSS Styles
|
||||||
|
// Main container and layout styles
|
||||||
|
|
||||||
|
.er-diagram-container {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 1200px;
|
||||||
|
min-height: 800px;
|
||||||
|
background: #121212;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
.react-flow__node {
|
||||||
|
z-index: 1;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Breadcrumb header
|
||||||
|
.er-breadcrumb-header {
|
||||||
|
padding: 0 20px 20px 20px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ReactFlow container
|
||||||
|
.er-reactflow-container {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
min-height: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Loading state styles
|
||||||
|
.er-loading-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
.loading-spinner {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border: 4px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-top: 4px solid white;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-text {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-subtext {
|
||||||
|
font-size: 14px;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Database wrapper styles
|
||||||
|
.er-database-wrapper {
|
||||||
|
z-index: -2;
|
||||||
|
pointer-events: all;
|
||||||
|
border-radius: 25px;
|
||||||
|
cursor: grab;
|
||||||
|
user-select: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
padding: 100px;
|
||||||
|
border: 3px solid rgba(0, 169, 157, 0.4);
|
||||||
|
background: rgba(0, 169, 157, 0.03);
|
||||||
|
box-shadow: 0 0 30px rgba(0, 169, 157, 0.1);
|
||||||
|
|
||||||
|
// Dynamic sizing using CSS custom properties
|
||||||
|
width: var(--db-width, 1400px);
|
||||||
|
height: var(--db-height, 1000px);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: rgba(0, 169, 157, 0.6);
|
||||||
|
background: rgba(0, 169, 157, 0.05);
|
||||||
|
box-shadow: 0 0 40px rgba(0, 169, 157, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.er-database-label {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 20px;
|
||||||
|
background: rgba(0, 169, 157, 0.95);
|
||||||
|
color: white;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 169, 157, 0.3);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
z-index: 15;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Schema group styles
|
||||||
|
.er-schema-group {
|
||||||
|
z-index: -1;
|
||||||
|
pointer-events: all;
|
||||||
|
border-radius: 20px;
|
||||||
|
cursor: grab;
|
||||||
|
user-select: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
padding: 80px;
|
||||||
|
border: 2px dashed rgba(138, 43, 226, 0.3);
|
||||||
|
background: rgba(138, 43, 226, 0.05);
|
||||||
|
position: relative;
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
|
// Dynamic sizing using CSS custom properties
|
||||||
|
width: var(--schema-width, 800px);
|
||||||
|
height: var(--schema-height, 600px);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: rgba(138, 43, 226, 0.5);
|
||||||
|
background: rgba(138, 43, 226, 0.08);
|
||||||
|
box-shadow: 0 0 20px rgba(138, 43, 226, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.er-schema-empty {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
color: #999;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: italic;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.er-schema-label {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
left: 15px;
|
||||||
|
background: rgba(138, 43, 226, 0.9);
|
||||||
|
color: white;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
box-shadow: 0 2px 8px rgba(138, 43, 226, 0.3);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Table node styles
|
||||||
|
.er-table-node {
|
||||||
|
background: white;
|
||||||
|
border: 2px solid #e1e5e9;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
width: 260px;
|
||||||
|
min-height: 200px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #8a2be2;
|
||||||
|
box-shadow: 0 4px 16px rgba(138, 43, 226, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle styles
|
||||||
|
.react-flow__handle {
|
||||||
|
background: #8a2be2;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.er-table-header {
|
||||||
|
background: linear-gradient(135deg, #8a2be2, #9932cc);
|
||||||
|
color: white;
|
||||||
|
padding: 14px 16px;
|
||||||
|
border-radius: 8px 8px 0 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
&.stage {
|
||||||
|
background: linear-gradient(135deg, #00a99d, #52c41a);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.fact {
|
||||||
|
background: linear-gradient(135deg, #fa8c16, #faad14);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.dimension {
|
||||||
|
background: linear-gradient(135deg, #52c41a, #73d13d);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.er-column-list {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
max-height: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.er-column-item {
|
||||||
|
padding: 10px 16px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.er-column-name {
|
||||||
|
flex: 1;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.er-column-type {
|
||||||
|
color: #666;
|
||||||
|
font-size: 11px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.er-primary-key {
|
||||||
|
color: #faad14;
|
||||||
|
}
|
||||||
|
|
||||||
|
.er-foreign-key {
|
||||||
|
color: #8a2be2;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Relationship edge styles
|
||||||
|
.er-relationship-edge {
|
||||||
|
stroke: #8a2be2;
|
||||||
|
stroke-width: 2;
|
||||||
|
|
||||||
|
.react-flow__edge-path {
|
||||||
|
stroke: #8a2be2;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.er-relationship-edge-animated {
|
||||||
|
stroke: #8a2be2;
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke-dasharray: 5;
|
||||||
|
animation: dashdraw 0.5s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dashdraw {
|
||||||
|
to {
|
||||||
|
stroke-dashoffset: -10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Enhanced arrow markers
|
||||||
|
.react-flow__edge.selected .react-flow__edge-path {
|
||||||
|
stroke: #faad14 !important;
|
||||||
|
stroke-width: 3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-flow__edge:hover .react-flow__edge-path {
|
||||||
|
stroke: #52c41a !important;
|
||||||
|
stroke-width: 3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom arrow styling
|
||||||
|
.er-custom-arrow {
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cardinality indicators
|
||||||
|
.er-cardinality-indicator {
|
||||||
|
background: rgba(255, 255, 255, 0.95) !important;
|
||||||
|
border: 1px solid #8a2be2 !important;
|
||||||
|
border-radius: 3px !important;
|
||||||
|
padding: 2px 6px !important;
|
||||||
|
font-size: 10px !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
color: #8a2be2 !important;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Relationship direction indicators
|
||||||
|
.er-direction-arrow {
|
||||||
|
fill: #8a2be2;
|
||||||
|
stroke: #8a2be2;
|
||||||
|
stroke-width: 1;
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
fill: #faad14;
|
||||||
|
stroke: #faad14;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.er-relationship-label {
|
||||||
|
background: rgba(138, 43, 226, 0.9);
|
||||||
|
color: white;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
&:hover + .relationship-tooltip {
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add button styles
|
||||||
|
.er-add-button {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 30px;
|
||||||
|
right: 30px;
|
||||||
|
width: 105px;
|
||||||
|
height: 42px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: linear-gradient(135deg, #8a2be2, #9932cc);
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
padding: 3px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 99px;
|
||||||
|
height: 36px;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 4px 16px rgba(138, 43, 226, 0.3);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
z-index: 1000;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
box-shadow: 0 6px 20px rgba(138, 43, 226, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Breadcrumb styles
|
||||||
|
.er-breadcrumb-dropdown {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(0, 169, 157, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-arrow {
|
||||||
|
margin-left: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.open .dropdown-arrow {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Service menu styles
|
||||||
|
.er-service-menu {
|
||||||
|
background: rgba(26, 26, 26, 0.95) !important;
|
||||||
|
border: 1px solid rgba(0, 169, 157, 0.3) !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
backdrop-filter: blur(10px) !important;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
|
||||||
|
|
||||||
|
.MuiMenuItem-root {
|
||||||
|
color: #ffffff !important;
|
||||||
|
padding: 12px 16px !important;
|
||||||
|
border-radius: 4px !important;
|
||||||
|
margin: 4px 8px !important;
|
||||||
|
transition: all 0.2s ease !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(0, 169, 157, 0.1) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.MuiListItemIcon-root {
|
||||||
|
color: #00a99d !important;
|
||||||
|
min-width: 32px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ReactFlow specific overrides
|
||||||
|
.react-flow__edges {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-flow__edge {
|
||||||
|
pointer-events: all;
|
||||||
|
|
||||||
|
path {
|
||||||
|
stroke: #8a2be2;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected path {
|
||||||
|
stroke: #faad14 !important;
|
||||||
|
stroke-width: 3 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Panel styles
|
||||||
|
.er-info-panel {
|
||||||
|
background: rgba(26, 26, 26, 0.9);
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid rgba(138, 43, 226, 0.3);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 13px;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
min-width: 280px;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-service-info {
|
||||||
|
font-size: 12px;
|
||||||
|
opacity: 0.9;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
.service-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-source-selector {
|
||||||
|
font-size: 11px;
|
||||||
|
opacity: 0.7;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 2px 4px;
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(138, 43, 226, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-stats {
|
||||||
|
font-size: 12px;
|
||||||
|
opacity: 0.8;
|
||||||
|
border-top: 1px solid rgba(138, 43, 226, 0.2);
|
||||||
|
padding-top: 8px;
|
||||||
|
|
||||||
|
.stats-row {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mock-data-indicator {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #faad14;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
margin-top: 4px;
|
||||||
|
|
||||||
|
.indicator-dot {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background: #faad14;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.er-legend-panel {
|
||||||
|
background: rgba(26, 26, 26, 0.9);
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid rgba(138, 43, 226, 0.3);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
min-width: 200px;
|
||||||
|
|
||||||
|
.legend-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-content {
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 1.4;
|
||||||
|
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
|
||||||
|
.legend-symbol {
|
||||||
|
color: #8a2be2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-footer {
|
||||||
|
font-size: 10px;
|
||||||
|
opacity: 0.7;
|
||||||
|
margin-top: 8px;
|
||||||
|
border-top: 1px solid rgba(138, 43, 226, 0.2);
|
||||||
|
padding-top: 6px;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Responsive design
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.er-info-panel {
|
||||||
|
min-width: 240px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.er-legend-panel {
|
||||||
|
min-width: 180px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.er-add-button {
|
||||||
|
width: 95px;
|
||||||
|
height: 38px;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 20px;
|
||||||
|
padding: 2px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 89px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.er-database-wrapper {
|
||||||
|
padding: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.er-schema-group {
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.er-table-node {
|
||||||
|
width: 220px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue