diff --git a/src/App.jsx b/src/App.jsx index 9ec5711..4eccd53 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -10,22 +10,26 @@ function App() { const getInitialTab = () => { const pathname = window.location.pathname; if (pathname === '/charts') return 'charts'; - if (pathname === '/dataflow') return 'dataflow'; + if (pathname === '/data_mappings') return 'data_mappigs'; if (pathname === '/settings') return 'settings'; - // Default to canvas/explorer - window.history.pushState(null, '', '/explorer'); + // Default to canvas/qubit_service + window.history.pushState(null, '', '/qubit_service'); return 'canvas'; }; const [activeTab, setActiveTab] = useState(getInitialTab()); + // Add state to track the current database for DataflowCanvas + const [currentDbSlug, setCurrentDbSlug] = useState(null); + // Add state to track if the current database has schemas + const [hasSchemas, setHasSchemas] = useState(true); // Handle browser back/forward navigation useEffect(() => { const handleLocationChange = () => { const pathname = window.location.pathname; - if (pathname === '/explorer') setActiveTab('canvas'); + if (pathname === '/qubit_service') setActiveTab('canvas'); else if (pathname === '/charts') setActiveTab('charts'); - else if (pathname === '/dataflow') setActiveTab('dataflow'); + else if (pathname === '/data_mappings') setActiveTab('data_mappigs'); // Settings tab would be handled here too }; @@ -43,10 +47,17 @@ function App() { setActiveTab('dataflow'); // Update URL path - window.history.pushState(null, '', '/dataflow'); + window.history.pushState(null, '', '/data_mappings'); - // Log the database info (in a real app, you would use this to initialize the DataFlow view) + // Set the current database slug to force DataflowCanvas to re-render + setCurrentDbSlug(event.detail.databaseSlug); + + // Set whether this database has schemas + setHasSchemas(!event.detail.isEmpty); + + // Log the database info console.log('Viewing DataFlow for database:', event.detail); + console.log('Database has schemas:', !event.detail.isEmpty); }; // Handler for switching to any tab @@ -55,9 +66,9 @@ function App() { setActiveTab(event.detail); // Update URL path based on the tab - let path = '/explorer'; + let path = '/qubit_service'; if (event.detail === 'charts') path = '/charts'; - if (event.detail === 'dataflow') path = '/dataflow'; + if (event.detail === 'data_mappigs') path = '/data_mappings'; if (event.detail === 'settings') path = '/settings'; window.history.pushState(null, '', path); @@ -117,7 +128,7 @@ function App() { {/* Navigation */}
{ e.preventDefault(); setActiveTab('canvas'); - window.history.pushState(null, '', '/explorer'); + window.history.pushState(null, '', '/qubit_service'); }} > - Data Explorer + Overview { e.preventDefault(); setActiveTab('dataflow'); - window.history.pushState(null, '', '/dataflow'); + window.history.pushState(null, '', '/data_mappings'); }} > - Data Flow + Data Mapping - +
{ + const [columnName, setColumnName] = useState(''); + const [dataType, setDataType] = useState('TEXT'); + const [description, setDescription] = useState(''); + const [alias, setAlias] = useState(''); + const [isKey, setIsKey] = useState(false); + + const handleSubmit = (e) => { + e.preventDefault(); + + if (columnName.trim() === '') return; + + onCreateColumn({ + name: columnName, + data_type: dataType, + description: description, + alias: alias, + is_key: isKey ? 1 : 0, + tbl: tableInfo.tbl, + sch: tableInfo.sch, + con: tableInfo.con + }); + + onClose(); + }; + + return ( +
+
+
+

+ + Add New Column +

+ +
+ +
+

+ Table: {tableInfo.tbl} +
+ Schema: {tableInfo.sch} +
+ Database: {tableInfo.con} +

+
+ +
+
+ + setColumnName(e.target.value)} + style={{ + width: '100%', + padding: '8px', + borderRadius: '4px', + border: '1px solid #d9d9d9' + }} + placeholder="Enter column name" + required + /> +
+ +
+ + +
+ +
+ +