From dfa1434be7920e3b26f3a76be81796019103c2b2 Mon Sep 17 00:00:00 2001 From: Devika Date: Fri, 23 May 2025 17:31:52 +0530 Subject: [PATCH 1/2] Replaced the Schema Icons in the Schema Wrapper in the Infinite Canvas --- src/components/CustomIcons.jsx | 14 ++++++++++++++ src/components/DataflowCanvas.jsx | 9 ++++++--- src/components/DataflowCanvasUpdated.jsx | 9 ++++++--- 3 files changed, 26 insertions(+), 6 deletions(-) diff --git a/src/components/CustomIcons.jsx b/src/components/CustomIcons.jsx index 3534a3c..fa650af 100644 --- a/src/components/CustomIcons.jsx +++ b/src/components/CustomIcons.jsx @@ -1,5 +1,19 @@ import React from 'react'; +// Custom SVG component for schema icon +export const CustomSchemaIcon = ({ width = "49", height = "46" }) => ( + + + + + + + + + + +); + // Custom SVG component for process/workflow icon export const CustomProcessIcon = ({ width = "24", height = "24" }) => ( diff --git a/src/components/DataflowCanvas.jsx b/src/components/DataflowCanvas.jsx index 92c3ade..8d430c5 100644 --- a/src/components/DataflowCanvas.jsx +++ b/src/components/DataflowCanvas.jsx @@ -130,11 +130,11 @@ const generateCustomStyles = () => { }; // Import icons from react-icons -import { FaTable, FaArrowRight, FaExchangeAlt, FaLayerGroup, FaFilter, FaCode, FaSync, FaCalculator, FaChartLine } from 'react-icons/fa'; +import { FaTable, FaArrowRight, FaExchangeAlt, FaFilter, FaCode, FaSync, FaCalculator, FaChartLine } from 'react-icons/fa'; import { BiSolidData, BiTransfer } from 'react-icons/bi'; import { AiFillFolder } from 'react-icons/ai'; import { TbTransform } from 'react-icons/tb'; -import { CustomDatabaseIcon, CustomDocumentIcon, CustomDimensionIcon, CustomProcessIcon } from './CustomIcons'; +import { CustomDatabaseIcon, CustomDocumentIcon, CustomDimensionIcon, CustomProcessIcon, CustomSchemaIcon } from './CustomIcons'; // Import mock data import mockApiData from './mockData'; @@ -172,8 +172,11 @@ const SchemaBackgroundNode = ({ data }) => { padding: '8px 12px', // More padding background: 'rgba(255, 255, 255, 0.9)', // More opaque background boxShadow: '0 3px 6px rgba(0, 0, 0, 0.1)', // Stronger shadow + display: 'flex', + alignItems: 'center', + gap: '8px' }}> - + {data.name} diff --git a/src/components/DataflowCanvasUpdated.jsx b/src/components/DataflowCanvasUpdated.jsx index 1e319ec..b44c117 100644 --- a/src/components/DataflowCanvasUpdated.jsx +++ b/src/components/DataflowCanvasUpdated.jsx @@ -64,11 +64,11 @@ const generateCustomStyles = () => { }; // Import icons from react-icons -import { FaDatabase, FaTable, FaArrowRight, FaExchangeAlt, FaLayerGroup } from 'react-icons/fa'; +import { FaDatabase, FaTable, FaArrowRight, FaExchangeAlt } from 'react-icons/fa'; import { BiSolidData } from 'react-icons/bi'; import { AiFillFolder } from 'react-icons/ai'; import { BsFileEarmarkSpreadsheet } from 'react-icons/bs'; -import { CustomProcessIcon } from './CustomIcons'; +import { CustomProcessIcon, CustomSchemaIcon } from './CustomIcons'; // Import mock data import mockApiData from './mockData'; @@ -106,8 +106,11 @@ const SchemaBackgroundNode = ({ data }) => { padding: '8px 12px', // More padding background: 'rgba(255, 255, 255, 0.9)', // More opaque background boxShadow: '0 3px 6px rgba(0, 0, 0, 0.1)', // Stronger shadow + display: 'flex', + alignItems: 'center', + gap: '8px' }}> - + {data.name} -- 2.40.1 From 51b47eb5098464b3ea39f47e61e714c55b4b3438 Mon Sep 17 00:00:00 2001 From: Devika Date: Mon, 26 May 2025 17:29:27 +0530 Subject: [PATCH 2/2] Added Add + button icon and Create Database Popup to create database , schemas and tables in the InfiniteCanvas.jsx --- src/components/InfiniteCanvas.jsx | 1919 +++++++++++++++++++++++++++-- 1 file changed, 1802 insertions(+), 117 deletions(-) diff --git a/src/components/InfiniteCanvas.jsx b/src/components/InfiniteCanvas.jsx index 7244cfc..64280f1 100644 --- a/src/components/InfiniteCanvas.jsx +++ b/src/components/InfiniteCanvas.jsx @@ -19,11 +19,1237 @@ import ReactFlow, { import 'reactflow/dist/style.css'; // Import icons from react-icons -import { FaDatabase, FaTable, FaFlask, FaArrowRight } from 'react-icons/fa'; +import { FaDatabase, FaTable, FaFlask, FaArrowRight, FaPlus, FaTimes } from 'react-icons/fa'; import { BiSolidData } from 'react-icons/bi'; import { AiFillFolder } from 'react-icons/ai'; import { BsFileEarmarkSpreadsheet } from 'react-icons/bs'; +// Import mock data from DataflowCanvas +import mockApiData from './mockData'; + +// Modal component for creating entities +const Modal = ({ isOpen, title, onClose, children }) => { + if (!isOpen) return null; + + return ( +
+
+
+

{title}

+ +
+
+ {children} +
+
+
+ ); +}; + +// Database Creation Form with nested schema and table creation +const DatabaseForm = ({ onSave, onCancel }) => { + const [formData, setFormData] = useState({ + name: '', + description: '', + url: '', + key: '', + type: 'PostgreSQL', + schemas: [] // Array to hold schemas + }); + + const [showSchemaForm, setShowSchemaForm] = useState(false); + const [currentSchemaIndex, setCurrentSchemaIndex] = useState(null); + const [showTableForm, setShowTableForm] = useState(false); + const [currentSchemaForTable, setCurrentSchemaForTable] = useState(null); + + const handleChange = (e) => { + const { name, value } = e.target; + setFormData(prev => ({ ...prev, [name]: value })); + }; + + const handleSubmit = (e) => { + e.preventDefault(); + onSave(formData); + }; + + const fetchId = () => { + // In a real app, this would make an API call + alert('Fetching ID from URL: ' + formData.url); + }; + + // Add a new schema to the database + const addSchema = (schemaData) => { + if (currentSchemaIndex !== null) { + // Edit existing schema + const updatedSchemas = [...formData.schemas]; + updatedSchemas[currentSchemaIndex] = { + ...updatedSchemas[currentSchemaIndex], + ...schemaData, + }; + setFormData(prev => ({ ...prev, schemas: updatedSchemas })); + } else { + // Add new schema + const newSchema = { + id: `schema-${Date.now()}`, + name: schemaData.name, + description: schemaData.description, + tables: [] // Initialize with empty tables array + }; + setFormData(prev => ({ + ...prev, + schemas: [...prev.schemas, newSchema] + })); + } + setShowSchemaForm(false); + setCurrentSchemaIndex(null); + }; + + // Add a new table to a schema + const addTable = (tableData) => { + const schemaIndex = formData.schemas.findIndex(s => s.id === currentSchemaForTable); + if (schemaIndex !== -1) { + const newTable = { + id: `table-${Date.now()}`, + name: tableData.name, + description: tableData.description, + type: tableData.type + }; + + const updatedSchemas = [...formData.schemas]; + updatedSchemas[schemaIndex] = { + ...updatedSchemas[schemaIndex], + tables: [...updatedSchemas[schemaIndex].tables, newTable] + }; + + setFormData(prev => ({ ...prev, schemas: updatedSchemas })); + } + setShowTableForm(false); + setCurrentSchemaForTable(null); + }; + + // Remove a schema + const removeSchema = (index) => { + const updatedSchemas = [...formData.schemas]; + updatedSchemas.splice(index, 1); + setFormData(prev => ({ ...prev, schemas: updatedSchemas })); + }; + + // Remove a table + const removeTable = (schemaIndex, tableIndex) => { + const updatedSchemas = [...formData.schemas]; + updatedSchemas[schemaIndex].tables.splice(tableIndex, 1); + setFormData(prev => ({ ...prev, schemas: updatedSchemas })); + }; + + return ( +
+ {showSchemaForm ? ( +
+
+

+ {currentSchemaIndex !== null ? 'Edit Schema' : 'Add Schema'} +

+ +
+ + { + setShowSchemaForm(false); + setCurrentSchemaIndex(null); + }} + initialData={currentSchemaIndex !== null ? formData.schemas[currentSchemaIndex] : null} + /> +
+ ) : showTableForm ? ( +
+
+

Add Table

+ +
+ + { + setShowTableForm(false); + setCurrentSchemaForTable(null); + }} + /> +
+ ) : ( +
+
+ + +
+ +
+ +