vdevika
/
Qubit_EPM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: vdevika:e479fb387e5f4caa8a81db25b75b96914a2c9ce2
Branches Tags
vdevika:main
vdevika:develop
..
compare: vdevika:ed0cc6ee15382f8942ce5411b415528e8514e019
Branches Tags
vdevika:main
vdevika:develop

No commits in common. "e479fb387e5f4caa8a81db25b75b96914a2c9ce2" and "ed0cc6ee15382f8942ce5411b415528e8514e019" have entirely different histories.
e479fb387e ... ed0cc6ee15

4 changed files with 42 additions and 272 deletions
Show Stats Expand all files Collapse all files

4
src/components/AddTableModal.jsx
View File

@ -1074,7 +1074,7 @@ const AddTableModal = ({
</Select>
</FormControl>
</Grid>
{/* <Grid item xs={12} md={2}>
<Grid item xs={12} md={2}>
<FormControl fullWidth size="small">
<InputLabel>Relation Type</InputLabel>
<Select
@ -1087,7 +1087,7 @@ const AddTableModal = ({
<MenuItem value="N:M">Many to Many</MenuItem>
</Select>
</FormControl>
</Grid> */}
</Grid>
<Grid item xs={12} md={1}>
<IconButton
onClick={() => removeRelation(relation.id)}

179
src/components/ERDiagramCanvas.jsx
View File

@ -74,44 +74,14 @@ const ERTableNode = ({ data, id }) => {
</div>
<ul className="er-column-list">
{data.columns && data.columns.map((column, index) => {
// Determine the column's role in relationships
const isSourceKey = column.is_source_key;
const isForeignKey = column.is_foreign_key;
const isPrimaryKey = column.is_primary_key;
// Create CSS classes for highlighting - ONLY based on API relationship data
let columnClasses = "er-column-item";
if (isSourceKey) columnClasses += " er-source-key";
if (isForeignKey) columnClasses += " er-foreign-key-highlight";
// Debug logging for CSS classes - only for actual relationships
if (isSourceKey || isForeignKey) {
console.log(`🎨 Column ${column.name} classes: ${columnClasses}`);
console.log(`🎨 isSourceKey: ${isSourceKey}, isForeignKey: ${isForeignKey}`);
console.log(`Column data:`, column);
}
return (
<li key={index} className={columnClasses}>
{isPrimaryKey && <FaKey className="er-primary-key" />}
{isForeignKey && <FaLink className="er-foreign-key" />}
{isSourceKey && !isPrimaryKey && <FaKey className="er-source-key-icon" />}
{data.columns && data.columns.map((column, index) => (
<li key={index} className="er-column-item">
{column.is_primary_key && <FaKey className="er-primary-key" />}
{column.is_foreign_key && <FaLink className="er-foreign-key" />}
<span className="er-column-name">{column.name}</span>
<span className="er-column-type">{column.data_type}</span>
{/* Show relationship info on hover */}
{column.relationship_info && column.relationship_info.length > 0 && (
<div className="er-relationship-tooltip">
{column.relationship_info.map((rel, relIndex) => (
<div key={relIndex} className="er-relationship-info">
{isSourceKey ? `→ ${rel.targetTable}.${rel.targetColumn}` : `← ${rel.sourceTable}.${rel.sourceColumn}`}
</div>
))}
</div>
)}
</li>
);
})}
))}
</ul>
</div>
);
@ -608,27 +578,25 @@ const ERDiagramCanvasContent = () => {
{
id: 1,
name: "accounts",
tbl: "accounts", // Add tbl field for consistency
table_type: "dimension",
columns: [
{ name: "account_id", col: "account_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
{ name: "account_number", col: "account_number", data_type: "VARCHAR(20)", is_primary_key: false, is_foreign_key: false },
{ name: "account_name", col: "account_name", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
{ name: "account_type", col: "account_type", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false },
{ name: "balance", col: "balance", data_type: "DECIMAL(15,2)", is_primary_key: false, is_foreign_key: false },
{ name: "created_date", col: "created_date", data_type: "TIMESTAMP", is_primary_key: false, is_foreign_key: false }
{ name: "account_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
{ name: "account_number", data_type: "VARCHAR(20)", is_primary_key: false, is_foreign_key: false },
{ name: "account_name", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
{ name: "account_type", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false },
{ name: "balance", data_type: "DECIMAL(15,2)", is_primary_key: false, is_foreign_key: false },
{ name: "created_date", data_type: "TIMESTAMP", is_primary_key: false, is_foreign_key: false }
]
},
{
id: 2,
name: "transactions",
tbl: "transactions", // Add tbl field for consistency
table_type: "fact",
columns: [
{ name: "transaction_id", col: "transaction_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
{ name: "account_id", col: "account_id", data_type: "INTEGER", is_primary_key: false, is_foreign_key: true },
{ name: "transaction_date", col: "transaction_date", data_type: "DATE", is_primary_key: false, is_foreign_key: false },
{ name: "amount", col: "amount", data_type: "DECIMAL(12,2)", is_primary_key: false, is_foreign_key: false }
{ name: "transaction_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
{ name: "account_id", data_type: "INTEGER", is_primary_key: false, is_foreign_key: true },
{ name: "transaction_date", data_type: "DATE", is_primary_key: false, is_foreign_key: false },
{ name: "amount", data_type: "DECIMAL(12,2)", is_primary_key: false, is_foreign_key: false }
]
}
]
@ -640,30 +608,15 @@ const ERDiagramCanvasContent = () => {
{
id: 3,
name: "customers",
tbl: "customers", // Add tbl field for consistency
table_type: "dimension",
columns: [
{ name: "customer_id", col: "customer_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
{ name: "customer_name", col: "customer_name", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
{ name: "email", col: "email", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false }
{ name: "customer_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
{ name: "customer_name", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
{ name: "email", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false }
]
}
]
}
],
relationships: [
{
id: "relationship-1",
sourceTable: "accounts",
sourceSchema: "FINANCE_MART",
sourceColumn: "account_id",
sourceKeyName: "pk_accounts",
targetTable: "transactions",
targetSchema: "FINANCE_MART",
targetColumn: "account_id",
targetKeyName: "fk_transactions_account",
relationship_type: "1:N"
}
]
};
@ -1264,21 +1217,9 @@ const ERDiagramCanvasContent = () => {
console.log('🔄 Starting ER diagram generation...');
console.log('Database received:', database?.name);
console.log('Total schemas:', database?.schemas?.length);
console.log('Relationships received:', database?.relationships?.length);
console.log('Relationship details:', database?.relationships);
// Debug each relationship in detail
if (database?.relationships && database.relationships.length > 0) {
database.relationships.forEach((rel, index) => {
console.log(`🔗 Relationship ${index + 1}:`);
console.log(` Source: ${rel.sourceSchema}.${rel.sourceTable}.${rel.sourceColumn}`);
console.log(` Target: ${rel.targetSchema}.${rel.targetTable}.${rel.targetColumn}`);
console.log(` Type: ${rel.relationship_type}`);
});
}
const newNodes = [];
const newEdges = []; // Will be populated with relationship edges
const newEdges = []; // No edges - removing all connections
// Process the selected database
console.log('Generating ER diagram for database:', database?.name);
@ -1429,12 +1370,6 @@ const ERDiagramCanvasContent = () => {
schemaLayout.schema.tables.forEach((table, tableIndex) => {
const tableId = `table-${table.id || `${database.slug}-${schemaLayout.schema.sch}-${table.name}`}`;
// Debug table structure
if (tableIndex === 0) {
console.log(`📋 Sample table structure:`, table);
console.log(`📋 Sample column structure:`, table.columns?.[0]);
}
// Calculate table position within schema (relative to schema, not absolute)
const tableX = tableStartX + (currentCol * tableSpacing);
const tableY = tableStartY + (currentRow * tableRowSpacing);
@ -1456,63 +1391,17 @@ const ERDiagramCanvasContent = () => {
// Add primary key and foreign key indicators to columns based on relationships
const enhancedColumns = (table.columns || []).map((col, colIndex) => {
// Get table identifier - use table_slug from API or fallback to name
const tableSlug = table.tbl || table.table_slug || table.name;
// Get schema identifier
const schemaSlug = schemaLayout.schema.sch || schemaLayout.schema.schema_slug || schemaLayout.schema.name;
// Get column identifier - use column_slug from the column data
const columnSlug = col.col || col.column_slug || col.name;
// Check if this column is a foreign key (target/destination of a relationship)
const isForeignKey = database.relationships?.some(rel => {
const matchesTable = rel.targetTable === tableSlug;
const matchesSchema = rel.targetSchema === schemaSlug;
const matchesColumn = rel.targetColumn === columnSlug;
return matchesTable && matchesSchema && matchesColumn;
}) || false;
// Check if this column is a source key (source of a relationship)
const isSourceKey = database.relationships?.some(rel => {
const matchesTable = rel.sourceTable === tableSlug;
const matchesSchema = rel.sourceSchema === schemaSlug;
const matchesColumn = rel.sourceColumn === columnSlug;
return matchesTable && matchesSchema && matchesColumn;
}) || false;
// Debug logging for relationship matching
if (database.relationships && database.relationships.length > 0) {
// Only log for the first few columns to avoid spam
if (colIndex < 3) {
console.log(`🔍 Checking column: table=${tableSlug}, schema=${schemaSlug}, column=${columnSlug}`);
console.log(`🔍 Available relationships:`, database.relationships.map(r =>
`${r.sourceSchema}.${r.sourceTable}.${r.sourceColumn} -> ${r.targetSchema}.${r.targetTable}.${r.targetColumn}`
));
}
if (isForeignKey || isSourceKey) {
console.log(`🔗 MATCH FOUND! Column ${tableSlug}.${columnSlug} - isSourceKey: ${isSourceKey}, isForeignKey: ${isForeignKey}`);
// Find the matching relationship for more details
const matchingRel = database.relationships.find(rel =>
(rel.targetTable === tableSlug && rel.targetSchema === schemaSlug && rel.targetColumn === columnSlug) ||
(rel.sourceTable === tableSlug && rel.sourceSchema === schemaSlug && rel.sourceColumn === columnSlug)
);
console.log(`🔗 Matching relationship:`, matchingRel);
}
}
// Check if this column is a foreign key based on relationships
const isForeignKey = database.relationships?.some(rel =>
rel.targetTable === table.tbl &&
rel.targetSchema === schemaLayout.schema.sch &&
rel.targetColumn === col.col
) || false;
return {
...col,
is_primary_key: col.is_primary_key || colIndex === 0, // Use existing or first column as primary key
is_foreign_key: isForeignKey,
is_source_key: isSourceKey,
relationship_info: database.relationships?.filter(rel => {
const isTarget = rel.targetTable === tableSlug && rel.targetSchema === schemaSlug && rel.targetColumn === columnSlug;
const isSource = rel.sourceTable === tableSlug && rel.sourceSchema === schemaSlug && rel.sourceColumn === columnSlug;
return isTarget || isSource;
}) || []
is_foreign_key: isForeignKey
};
});
@ -1552,17 +1441,23 @@ const ERDiagramCanvasContent = () => {
console.log('Creating relationship edges:', database.relationships.length);
database.relationships.forEach((relationship, index) => {
// Find source and target table nodes by matching table names and schemas
// Find source and target table nodes
const sourceTableId = `table-${database.slug}-${relationship.sourceSchema}-${relationship.sourceTable}`;
const targetTableId = `table-${database.slug}-${relationship.targetSchema}-${relationship.targetTable}`;
// Check if both source and target tables exist in the nodes
const sourceNode = newNodes.find(node =>
node.type === 'erTable' &&
node.data?.schema === relationship.sourceSchema &&
(node.data?.name === relationship.sourceTable || node.data?.tbl === relationship.sourceTable)
(node.id === sourceTableId ||
node.id.includes(relationship.sourceTable) &&
node.data?.schema === relationship.sourceSchema)
);
const targetNode = newNodes.find(node =>
node.type === 'erTable' &&
node.data?.schema === relationship.targetSchema &&
(node.data?.name === relationship.targetTable || node.data?.tbl === relationship.targetTable)
(node.id === targetTableId ||
node.id.includes(relationship.targetTable) &&
node.data?.schema === relationship.targetSchema)
);
if (sourceNode && targetNode) {

118
src/components/ERDiagramCanvas.scss
View File

@ -265,124 +265,6 @@
color: #8a2be2;
}
.er-source-key-icon {
color: #52c41a;
}
// Highlighting for relationship keys - SOURCE KEY (Teal)
.er-column-item.er-source-key {
background: linear-gradient(90deg, rgba(0, 150, 136, 0.4), rgba(0, 150, 136, 0.15)) !important;
border-left: 6px solid #009688 !important;
border-right: 3px solid rgba(0, 150, 136, 0.5) !important;
box-shadow: inset 0 0 20px rgba(0, 150, 136, 0.2), 0 3px 10px rgba(0, 150, 136, 0.3) !important;
position: relative !important;
&:before {
content: "SOURCE" !important;
position: absolute !important;
right: 8px !important;
top: 3px !important;
font-size: 9px !important;
color: #009688 !important;
font-weight: bold !important;
opacity: 0.8 !important;
background: rgba(255, 255, 255, 0.9) !important;
padding: 1px 3px !important;
border-radius: 2px !important;
}
&:hover {
background: linear-gradient(90deg, rgba(0, 150, 136, 0.5), rgba(0, 150, 136, 0.2)) !important;
box-shadow: inset 0 0 25px rgba(0, 150, 136, 0.3), 0 5px 15px rgba(0, 150, 136, 0.4) !important;
}
.er-column-name {
color: #009688 !important;
font-weight: 900 !important;
text-shadow: 0 1px 4px rgba(0, 150, 136, 0.5) !important;
font-size: 15px !important;
}
.er-column-type {
background: rgba(0, 150, 136, 0.4) !important;
color: #00695c !important;
border: 1px solid rgba(0, 150, 136, 0.6) !important;
font-weight: 700 !important;
}
}
// Highlighting for relationship keys - FOREIGN KEY (Same Teal as Source)
.er-column-item.er-foreign-key-highlight {
background: linear-gradient(90deg, rgba(0, 150, 136, 0.4), rgba(0, 150, 136, 0.15)) !important;
border-left: 6px solid #009688 !important;
border-right: 3px solid rgba(0, 150, 136, 0.5) !important;
box-shadow: inset 0 0 20px rgba(0, 150, 136, 0.2), 0 3px 10px rgba(0, 150, 136, 0.3) !important;
position: relative !important;
&:before {
content: "TARGET" !important;
position: absolute !important;
right: 8px !important;
top: 3px !important;
font-size: 9px !important;
color: #009688 !important;
font-weight: bold !important;
opacity: 0.8 !important;
background: rgba(255, 255, 255, 0.9) !important;
padding: 1px 3px !important;
border-radius: 2px !important;
}
&:hover {
background: linear-gradient(90deg, rgba(0, 150, 136, 0.5), rgba(0, 150, 136, 0.2)) !important;
box-shadow: inset 0 0 25px rgba(0, 150, 136, 0.3), 0 5px 15px rgba(0, 150, 136, 0.4) !important;
}
.er-column-name {
color: #009688 !important;
font-weight: 900 !important;
text-shadow: 0 1px 4px rgba(0, 150, 136, 0.5) !important;
font-size: 15px !important;
}
.er-column-type {
background: rgba(0, 150, 136, 0.4) !important;
color: #00695c !important;
border: 1px solid rgba(0, 150, 136, 0.6) !important;
font-weight: 700 !important;
}
}
// Relationship tooltip
.er-relationship-tooltip {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 10px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 1000;
}
.er-column-item:hover .er-relationship-tooltip {
opacity: 1;
}
.er-relationship-info {
margin-bottom: 2px;
&:last-child {
margin-bottom: 0;
}
}
// Relationship edge styles
.er-relationship-edge {
stroke: #8a2be2;

7
src/components/children/Pipelines.jsx
View File

@ -1,7 +0,0 @@
export const Pipelines=()=>{
return(
<div>
Pipelines
</div>
)
}