Compare commits
No commits in common. "dfa1434be7920e3b26f3a76be81796019103c2b2" and "51d5f8c7a7734cf83d2e6dd55be0818d827da164" have entirely different histories.
dfa1434be7
...
51d5f8c7a7
|
|
@ -1,28 +1,5 @@
|
|||
import React from 'react';
|
||||
|
||||
// Custom SVG component for schema icon
|
||||
export const CustomSchemaIcon = ({ width = "49", height = "46" }) => (
|
||||
<svg width={width} height={height} viewBox="0 0 49 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.86377" y="0.0722656" width="48.048" height="45.0864" rx="4.224" fill="url(#paint0_linear_892_4172)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.4524 29.6995H38.6536C38.4553 27.918 37.6756 26.2385 36.3718 24.8796C34.5615 22.9936 32.0024 21.9549 29.1667 21.9549H25.5936V13.5075H32.0566C32.4084 13.5075 32.6934 13.2222 32.6934 12.8708V8.0723C32.6934 7.72053 32.4084 7.43555 32.0566 7.43555H17.9481C17.5959 7.43555 17.311 7.72053 17.311 8.0723V12.8708C17.311 13.2222 17.5959 13.5075 17.9481 13.5075H24.4002V21.9549H20.8141C15.7173 21.9549 11.9295 25.1589 11.3636 29.7182C9.30036 29.9044 7.68359 31.6361 7.68359 33.7475C7.68359 35.9829 9.49629 37.7955 11.7316 37.7955C13.9673 37.7955 15.7796 35.9829 15.7796 33.7475C15.7796 31.7928 14.394 30.1622 12.5517 29.7829C13.0711 25.8284 16.3123 23.1483 20.8141 23.1483H24.4002V29.6995H20.268C20.0446 29.6995 19.913 29.9594 20.0401 30.1497L24.7743 37.6713C24.8844 37.8368 25.1199 37.8368 25.2305 37.6713L29.9646 30.1497C30.0917 29.9594 29.9597 29.6995 29.7367 29.6995H25.5936V23.1483H29.1667C31.6749 23.1483 33.928 24.0566 35.5104 25.7058C36.5981 26.8388 37.2611 28.2269 37.4546 29.6995H34.6348C34.2818 29.6995 33.9956 29.9857 33.9956 30.3387V37.1564C33.9956 37.5094 34.2818 37.7955 34.6348 37.7955H41.4524C41.8054 37.7955 42.0916 37.5094 42.0916 37.1564V30.3387C42.0916 29.9857 41.8054 29.6995 41.4524 29.6995Z" fill="white"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_892_4172" x1="0.86377" y1="22.6155" x2="48.9118" y2="22.6155" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FF9D2C"/>
|
||||
<stop offset="1" stop-color="#CD750F"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
|
||||
// Custom SVG component for process/workflow icon
|
||||
export const CustomProcessIcon = ({ width = "24", height = "24" }) => (
|
||||
<svg width={width} height={height} viewBox="0 0 91 91" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="90" height="90" rx="45" fill="white"/>
|
||||
<rect x="0.5" y="0.5" width="90" height="90" rx="45" stroke="#D9D9D9"/>
|
||||
<path d="M38.0625 32.75H34.2375C37.425 29.9875 41.25 28.5 45.5 28.5C46.1375 28.5 46.775 28.5 47.4125 28.7125C48.475 28.925 49.5375 28.075 49.75 26.8C49.9625 25.7375 49.1125 24.675 47.8375 24.4625C46.9875 24.25 46.35 24.25 45.5 24.25C40.4 24.25 35.5125 26.1625 31.6875 29.35V26.375C31.6875 25.1 30.8375 24.25 29.5625 24.25C28.2875 24.25 27.4375 25.1 27.4375 26.375V34.875C27.4375 36.15 28.2875 37 29.5625 37H38.0625C39.3375 37 40.1875 36.15 40.1875 34.875C40.1875 33.6 39.3375 32.75 38.0625 32.75ZM34.875 50.8125C33.6 50.8125 32.75 51.6625 32.75 52.9375V56.7625C29.9875 53.575 28.5 49.75 28.5 45.5C28.5 44.8625 28.5 44.225 28.7125 43.5875C28.925 42.525 28.075 41.4625 26.8 41.25C25.7375 41.0375 24.675 41.8875 24.4625 43.1625C24.25 44.0125 24.25 44.65 24.25 45.5C24.25 50.6 26.1625 55.4875 29.35 59.3125H26.375C25.1 59.3125 24.25 60.1625 24.25 61.4375C24.25 62.7125 25.1 63.5625 26.375 63.5625H34.875C35.5125 63.5625 36.15 63.1375 36.575 62.7125C36.575 62.5 36.7875 62.2875 36.7875 62.075V52.9375C37 51.6625 36.15 50.8125 34.875 50.8125ZM64.625 31.6875C65.9 31.6875 66.75 30.8375 66.75 29.5625C66.75 28.2875 65.9 27.4375 64.625 27.4375H55.7C55.4875 27.4375 55.275 27.65 55.0625 27.65C54.85 27.8625 54.6375 27.8625 54.6375 28.075C54.6375 28.2875 54.425 28.5 54.425 28.5V37.6375C54.425 38.9125 55.275 39.7625 56.55 39.7625C57.825 39.7625 58.675 38.9125 58.675 37.6375V34.2375C61.4375 37.2125 62.925 41.25 62.925 45.5C62.925 46.1375 62.925 46.775 62.7125 47.4125C62.5 48.475 63.35 49.5375 64.625 49.75H64.8375C65.9 49.75 66.75 48.9 66.9625 47.8375C66.9625 46.9875 67.175 46.35 67.175 45.5C67.175 40.4 65.2625 35.5125 62.075 31.6875H64.625ZM63.1375 55.0625L62.5 54.425C62.2875 54.2125 62.075 54.2125 61.8625 54.2125H52.9375C51.6625 54.2125 50.8125 55.0625 50.8125 56.3375C50.8125 57.6125 51.6625 58.4625 52.9375 58.4625H56.7625C53.7875 61.225 49.75 62.7125 45.5 62.7125C44.8625 62.7125 44.225 62.7125 43.5875 62.5C42.525 62.2875 41.4625 63.1375 41.25 64.4125C41.0375 65.6875 41.8875 66.5375 43.1625 66.75C44.0125 66.75 44.65 66.9625 45.5 66.9625C50.6 66.9625 55.4875 65.05 59.3125 61.8625V64.625C59.3125 65.9 60.1625 66.75 61.4375 66.75C62.7125 66.75 63.5625 65.9 63.5625 64.625V56.125C63.5625 55.7 63.35 55.275 63.1375 55.0625Z" fill="#EB9706"/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
// Custom SVG component for database icon (Stage tables)
|
||||
export const CustomDatabaseIcon = ({ color = "#fa8c16", width = "24", height = "24" }) => (
|
||||
<svg width={width} height={height} viewBox="0 0 49 47" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
|
|||
|
|
@ -130,11 +130,11 @@ const generateCustomStyles = () => {
|
|||
};
|
||||
|
||||
// Import icons from react-icons
|
||||
import { FaTable, FaArrowRight, FaExchangeAlt, FaFilter, FaCode, FaSync, FaCalculator, FaChartLine } from 'react-icons/fa';
|
||||
import { FaTable, FaArrowRight, FaCog, FaExchangeAlt, FaLayerGroup, 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, CustomSchemaIcon } from './CustomIcons';
|
||||
import { CustomDatabaseIcon, CustomDocumentIcon, CustomDimensionIcon } from './CustomIcons';
|
||||
|
||||
// Import mock data
|
||||
import mockApiData from './mockData';
|
||||
|
|
@ -172,11 +172,8 @@ 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'
|
||||
}}>
|
||||
<CustomSchemaIcon width="24" height="22" />
|
||||
<FaLayerGroup size={14} />
|
||||
{data.name}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -313,18 +310,7 @@ const CustomEdge = ({ id, source, target, sourceX, sourceY, targetX, targetY, so
|
|||
};
|
||||
|
||||
// Process Node (represents ETL or data transformation)
|
||||
const ProcessNode = ({ data, id }) => {
|
||||
// Function to handle process edit
|
||||
const handleProcessEdit = () => {
|
||||
// Find the process in the mock data
|
||||
const process = mockApiData.processes.find(p => p.slug === id);
|
||||
if (process) {
|
||||
// We'll use window.processEditCallback which will be set in the main component
|
||||
if (window.processEditCallback) {
|
||||
window.processEditCallback(process);
|
||||
}
|
||||
}
|
||||
};
|
||||
const ProcessNode = ({ data }) => {
|
||||
// Determine status color
|
||||
const statusColor = data.status === 'active' ? '#52c41a' : '#ff4d4f';
|
||||
const isActive = data.status === 'active';
|
||||
|
|
@ -358,7 +344,7 @@ const ProcessNode = ({ data, id }) => {
|
|||
case 'exchange':
|
||||
return <FaExchangeAlt size={iconSize} color={iconColor} />;
|
||||
default:
|
||||
return <CustomProcessIcon width={iconSize} height={iconSize} />;
|
||||
return <FaCog size={iconSize} color={iconColor} />;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -407,20 +393,15 @@ const ProcessNode = ({ data, id }) => {
|
|||
/>
|
||||
|
||||
{/* Process Icon with integrated content */}
|
||||
<div
|
||||
onClick={handleProcessEdit}
|
||||
style={{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
filter: isActive
|
||||
? 'drop-shadow(0 0 8px rgba(250, 140, 22, 0.3))'
|
||||
: 'drop-shadow(0 0 5px rgba(170, 170, 170, 0.2))',
|
||||
cursor: 'pointer',
|
||||
zIndex: 100
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
filter: isActive
|
||||
? 'drop-shadow(0 0 8px rgba(250, 140, 22, 0.3))'
|
||||
: 'drop-shadow(0 0 5px rgba(170, 170, 170, 0.2))'
|
||||
}}>
|
||||
{getProcessIcon()}
|
||||
|
||||
{/* Status indicator (small dot) */}
|
||||
|
|
@ -652,20 +633,6 @@ const DataflowCanvas = () => {
|
|||
const [showProcessForm, setShowProcessForm] = useState(false);
|
||||
const [selectedProcessForEdit, setSelectedProcessForEdit] = useState(null);
|
||||
|
||||
// Set up a global callback for process editing
|
||||
// This is used by the ProcessNode component
|
||||
useEffect(() => {
|
||||
window.processEditCallback = (process) => {
|
||||
setSelectedProcessForEdit(process);
|
||||
setShowProcessForm(true);
|
||||
};
|
||||
|
||||
return () => {
|
||||
// Clean up when component unmounts
|
||||
window.processEditCallback = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Define node types
|
||||
const nodeTypes = useMemo(() => ({
|
||||
table: TableNode,
|
||||
|
|
@ -1648,7 +1615,7 @@ const DataflowCanvas = () => {
|
|||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
}}>
|
||||
<CustomProcessIcon width="20" height="20" /> {selectedProcess.name}
|
||||
<FaCog /> {selectedProcess.name}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
|
|
@ -1750,7 +1717,7 @@ const DataflowCanvas = () => {
|
|||
alignItems: 'center',
|
||||
gap: '5px'
|
||||
}}>
|
||||
<CustomDatabaseIcon width="16" height="16" /> Source Tables
|
||||
<FaDatabase size={12} /> Source Tables
|
||||
</h4>
|
||||
<ul style={{
|
||||
margin: 0,
|
||||
|
|
@ -1782,7 +1749,7 @@ const DataflowCanvas = () => {
|
|||
alignItems: 'center',
|
||||
gap: '5px'
|
||||
}}>
|
||||
<CustomDatabaseIcon width="16" height="16" /> Destination Tables
|
||||
<FaDatabase size={12} /> Destination Tables
|
||||
</h4>
|
||||
<ul style={{
|
||||
margin: 0,
|
||||
|
|
@ -1842,7 +1809,7 @@ const DataflowCanvas = () => {
|
|||
boxShadow: '0 2px 5px rgba(250, 140, 22, 0.3)'
|
||||
}}
|
||||
>
|
||||
<CustomProcessIcon width="16" height="16" /> Edit Process
|
||||
<FaCog size={12} /> Edit Process
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1904,7 +1871,7 @@ const DataflowCanvas = () => {
|
|||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
<CustomProcessIcon width="18" height="18" />
|
||||
<FaCog size={14} />
|
||||
Add Process
|
||||
</button>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -64,11 +64,10 @@ const generateCustomStyles = () => {
|
|||
};
|
||||
|
||||
// Import icons from react-icons
|
||||
import { FaDatabase, FaTable, FaArrowRight, FaExchangeAlt } from 'react-icons/fa';
|
||||
import { FaDatabase, FaTable, FaArrowRight, FaCog, FaExchangeAlt, FaLayerGroup } from 'react-icons/fa';
|
||||
import { BiSolidData } from 'react-icons/bi';
|
||||
import { AiFillFolder } from 'react-icons/ai';
|
||||
import { BsFileEarmarkSpreadsheet } from 'react-icons/bs';
|
||||
import { CustomProcessIcon, CustomSchemaIcon } from './CustomIcons';
|
||||
|
||||
// Import mock data
|
||||
import mockApiData from './mockData';
|
||||
|
|
@ -106,11 +105,8 @@ 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'
|
||||
}}>
|
||||
<CustomSchemaIcon width="24" height="22" />
|
||||
<FaLayerGroup size={14} />
|
||||
{data.name}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -231,18 +227,7 @@ const CustomEdge = ({ id, source, target, sourceX, sourceY, targetX, targetY, so
|
|||
};
|
||||
|
||||
// Process Node (represents ETL or data transformation)
|
||||
const ProcessNode = ({ data, id }) => {
|
||||
// Function to handle process edit
|
||||
const handleProcessEdit = () => {
|
||||
// Find the process in the mock data
|
||||
const process = mockApiData.processes.find(p => p.slug === id);
|
||||
if (process) {
|
||||
// We'll use window.processEditCallback which will be set in the main component
|
||||
if (window.processEditCallback) {
|
||||
window.processEditCallback(process);
|
||||
}
|
||||
}
|
||||
};
|
||||
const ProcessNode = ({ data }) => {
|
||||
// Determine status color
|
||||
const statusColor = data.status === 'active' ? '#52c41a' : '#ff4d4f';
|
||||
const isActive = data.status === 'active';
|
||||
|
|
@ -348,7 +333,7 @@ const ProcessNode = ({ data, id }) => {
|
|||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '15px',
|
||||
pointerEvents: 'auto' // Enable clicks on the content
|
||||
pointerEvents: 'none' // Allow clicks to pass through to the node
|
||||
}}>
|
||||
{/* Icon and title */}
|
||||
<div style={{
|
||||
|
|
@ -357,24 +342,18 @@ const ProcessNode = ({ data, id }) => {
|
|||
alignItems: 'center',
|
||||
marginBottom: '5px'
|
||||
}}>
|
||||
<div
|
||||
onClick={handleProcessEdit}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '50%',
|
||||
background: `url(#${gradientId})`,
|
||||
marginBottom: '8px',
|
||||
boxShadow: '0 3px 6px rgba(0,0,0,0.15)',
|
||||
cursor: 'pointer',
|
||||
pointerEvents: 'auto',
|
||||
zIndex: 100
|
||||
}}
|
||||
>
|
||||
<CustomProcessIcon width="24" height="24" />
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '50%',
|
||||
background: `url(#${gradientId})`,
|
||||
marginBottom: '8px',
|
||||
boxShadow: '0 3px 6px rgba(0,0,0,0.15)'
|
||||
}}>
|
||||
<FaCog color="white" size={18} />
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
|
|
@ -1196,20 +1175,6 @@ const DataflowCanvas = () => {
|
|||
}
|
||||
}, [reactFlowInstance]);
|
||||
|
||||
// Set up a global callback for process editing
|
||||
// This is used by the ProcessNode component
|
||||
useEffect(() => {
|
||||
window.processEditCallback = (process) => {
|
||||
setSelectedProcessForEdit(process);
|
||||
setShowProcessForm(true);
|
||||
};
|
||||
|
||||
return () => {
|
||||
// Clean up when component unmounts
|
||||
window.processEditCallback = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div style={{ width: '100%', height: '100vh' }}>
|
||||
<ReactFlow
|
||||
|
|
@ -1256,7 +1221,7 @@ const DataflowCanvas = () => {
|
|||
boxShadow: '0 2px 5px rgba(0,0,0,0.1)'
|
||||
}}
|
||||
>
|
||||
<CustomProcessIcon width="18" height="18" /> Add Process
|
||||
<FaCog /> Add Process
|
||||
</button>
|
||||
<button
|
||||
onClick={addTableNode}
|
||||
|
|
@ -1294,7 +1259,7 @@ const DataflowCanvas = () => {
|
|||
// Wrap with ReactFlowProvider
|
||||
const DataflowCanvasWithProvider = () => (
|
||||
<ReactFlowProvider>
|
||||
<DataflowCanvasUpdated />
|
||||
<DataflowCanvas />
|
||||
</ReactFlowProvider>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { FaTable, FaArrowRight, FaTimes, FaPlus, FaFilter, FaCalculator, FaExclamationTriangle } from 'react-icons/fa';
|
||||
import { CustomDatabaseIcon, CustomDocumentIcon, CustomDimensionIcon, getTableIcon, CustomProcessIcon } from './CustomIcons';
|
||||
import { FaCog, FaTable, FaArrowRight, FaTimes, FaPlus, FaFilter, FaCalculator, FaExclamationTriangle } from 'react-icons/fa';
|
||||
import { CustomDatabaseIcon, CustomDocumentIcon, CustomDimensionIcon, getTableIcon } from './CustomIcons';
|
||||
|
||||
const ProcessForm = ({ isOpen, onClose, onSave, tables, existingProcess = null }) => {
|
||||
const [processName, setProcessName] = useState('');
|
||||
|
|
@ -361,7 +361,7 @@ const ProcessForm = ({ isOpen, onClose, onSave, tables, existingProcess = null }
|
|||
color: '#fa8c16',
|
||||
marginBottom: '20px'
|
||||
}}>
|
||||
<CustomProcessIcon width="24" height="24" /> {existingProcess ? 'Edit Process' : 'Create New Process'}
|
||||
<FaCog /> {existingProcess ? 'Edit Process' : 'Create New Process'}
|
||||
</h2>
|
||||
|
||||
{/* Validation Error Message */}
|
||||
|
|
@ -1182,7 +1182,7 @@ const ProcessForm = ({ isOpen, onClose, onSave, tables, existingProcess = null }
|
|||
gap: '5px'
|
||||
}}
|
||||
>
|
||||
<CustomProcessIcon width="16" height="16" /> {existingProcess ? 'Update Process' : 'Create Process'}
|
||||
<FaCog size={12} /> {existingProcess ? 'Update Process' : 'Create Process'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ const TableCreationPopup = ({ onClose, onCreateTable }) => {
|
|||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
|
||||
}}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
|
||||
<h2 style={{ margin: 0, display: 'flex', alignItems: 'center', gap: '10px' , color: "black"}}>
|
||||
<h2 style={{ margin: 0, display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
{getTableTypeIcon()}
|
||||
Create New Table
|
||||
</h2>
|
||||
|
|
@ -97,7 +97,7 @@ const TableCreationPopup = ({ onClose, onCreateTable }) => {
|
|||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div style={{ marginBottom: '15px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: "black"}}>
|
||||
<label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
|
||||
Table Name:
|
||||
</label>
|
||||
<input
|
||||
|
|
@ -116,7 +116,7 @@ const TableCreationPopup = ({ onClose, onCreateTable }) => {
|
|||
</div>
|
||||
|
||||
<div style={{ marginBottom: '15px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: "black" }}>
|
||||
<label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
|
||||
Table Type:
|
||||
</label>
|
||||
<div style={{ display: 'flex', gap: '10px' }}>
|
||||
|
|
@ -129,8 +129,7 @@ const TableCreationPopup = ({ onClose, onCreateTable }) => {
|
|||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
backgroundColor: tableType === 'stage' ? '#e6f7ff' : 'white',
|
||||
borderColor: tableType === 'stage' ? '#1890ff' : '#d9d9d9',
|
||||
color: "black"
|
||||
borderColor: tableType === 'stage' ? '#1890ff' : '#d9d9d9'
|
||||
}}>
|
||||
<input
|
||||
type="radio"
|
||||
|
|
@ -140,7 +139,7 @@ const TableCreationPopup = ({ onClose, onCreateTable }) => {
|
|||
onChange={() => setTableType('stage')}
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
<CustomDatabaseIcon width="20" height="20" style={{ color: "black" }}/>
|
||||
<CustomDatabaseIcon width="20" height="20" />
|
||||
Stage
|
||||
</label>
|
||||
|
||||
|
|
@ -153,8 +152,7 @@ const TableCreationPopup = ({ onClose, onCreateTable }) => {
|
|||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
backgroundColor: tableType === 'fact' ? '#fff7e6' : 'white',
|
||||
borderColor: tableType === 'fact' ? '#fa8c16' : '#d9d9d9',
|
||||
color: "black"
|
||||
borderColor: tableType === 'fact' ? '#fa8c16' : '#d9d9d9'
|
||||
}}>
|
||||
<input
|
||||
type="radio"
|
||||
|
|
@ -177,8 +175,7 @@ const TableCreationPopup = ({ onClose, onCreateTable }) => {
|
|||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
backgroundColor: tableType === 'dimension' ? '#f6ffed' : 'white',
|
||||
borderColor: tableType === 'dimension' ? '#52c41a' : '#d9d9d9',
|
||||
color: "black"
|
||||
borderColor: tableType === 'dimension' ? '#52c41a' : '#d9d9d9'
|
||||
}}>
|
||||
<input
|
||||
type="radio"
|
||||
|
|
|
|||
Loading…
Reference in New Issue