From dbd5ae5f40f9c3af98cf74fd867a34d150774271 Mon Sep 17 00:00:00 2001 From: Devika Date: Thu, 19 Jun 2025 12:21:38 +0530 Subject: [PATCH] Added HierarchicalBreadcrumb in the Data Mappings SCreen --- src/components/AddTableModal.jsx | 15 --- src/components/DataflowCanvas.jsx | 145 +++++++++++++++++++++-- src/components/DataflowCanvasUpdated.jsx | 121 ++++++++++++++++++- src/components/InfiniteCanvas.jsx | 11 -- 4 files changed, 253 insertions(+), 39 deletions(-) diff --git a/src/components/AddTableModal.jsx b/src/components/AddTableModal.jsx index 26a3225..34b824d 100644 --- a/src/components/AddTableModal.jsx +++ b/src/components/AddTableModal.jsx @@ -922,7 +922,6 @@ const AddTableModal = ({ Column Name Sequence - Actions @@ -962,17 +961,6 @@ const AddTableModal = ({ - )} - - {isSelected && ( - removeColumnFromKey(selectedKeyForColumns, column.id)} - > - - - )} - ); })} @@ -991,9 +979,6 @@ const AddTableModal = ({ - - - - diff --git a/src/components/DataflowCanvas.jsx b/src/components/DataflowCanvas.jsx index ee19fe7..8fe4329 100644 --- a/src/components/DataflowCanvas.jsx +++ b/src/components/DataflowCanvas.jsx @@ -129,12 +129,15 @@ const generateCustomStyles = () => { }; // Import icons from react-icons -import { FaTable, FaArrowRight, FaExchangeAlt, FaFilter, FaCode, FaSync, FaCalculator, FaChartLine, FaEdit, FaTrash } from 'react-icons/fa'; +import { FaTable, FaArrowRight, FaExchangeAlt, FaFilter, FaCode, FaSync, FaCalculator, FaChartLine, FaEdit, FaTrash, FaChevronDown } 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 Material-UI components for breadcrumb +import { Breadcrumbs, Link, Typography, Menu, MenuItem, ListItemIcon, ListItemText } from '@mui/material'; + // Import API data import mockApiData, { useApiData, createSchema, deleteSchema, updateSchema, createTable, updateTable, deleteTable, createColumn, updateColumn, deleteColumn, fetchColumns } from './mockData'; @@ -1450,6 +1453,132 @@ const DataflowCanvas = ({ dbSlug, hasSchemas = true }) => {
Loading data from API...
); + + // Hierarchical Breadcrumb Component + const HierarchicalBreadcrumb = () => { + const [dataMappingsMenuAnchor, setDataMappingsMenuAnchor] = useState(null); + const [selectedView, setSelectedView] = useState('Data Flow View'); + + const handleDataMappingsClick = (event) => { + setDataMappingsMenuAnchor(event.currentTarget); + }; + + const handleDataMappingsClose = () => { + setDataMappingsMenuAnchor(null); + }; + + const handleViewSelect = (view) => { + setSelectedView(view); + setDataMappingsMenuAnchor(null); + + // Handle navigation based on selected view + if (view === 'Pipelines') { + // Add logic to switch to Pipelines view + console.log('Switching to Pipelines view'); + // You can add navigation logic here + } else { + // Data Flow View is the current view + console.log('Staying in Data Flow View'); + } + }; + + return ( + <> +
+ + e.preventDefault()} + sx={{ fontWeight: 500 }} + > + Qubit + + + {/* Data Mappings Dropdown */} +
+ + Data Mappings + + +
+ + {/* Selected View */} + {selectedView} + +
+ + {/* Data Mappings Menu */} + + handleViewSelect('Data Flow View')} + selected={selectedView === 'Data Flow View'} + > + + + + + + handleViewSelect('Pipelines')} + selected={selectedView === 'Pipelines'} + > + + + + + + + + ); + }; // Log error but continue with mockApiData as fallback useEffect(() => { @@ -1458,13 +1587,6 @@ const DataflowCanvas = ({ dbSlug, hasSchemas = true }) => { } }, [error]); - // Create a loading component - // const LoadingComponent = () => ( - //
- //
Loading data from API...
- //
- // ); - // Log error but continue with mockApiData as fallback useEffect(() => { if (error) { @@ -3245,7 +3367,7 @@ const DataflowCanvas = ({ dbSlug, hasSchemas = true }) => {
{
-

{selectedDatabase.name} Database

-
Data Flow View
+

{selectedDatabase.name} Database

+ {/*
Data Flow View
*/} +
diff --git a/src/components/DataflowCanvasUpdated.jsx b/src/components/DataflowCanvasUpdated.jsx index b44c117..5579c54 100644 --- a/src/components/DataflowCanvasUpdated.jsx +++ b/src/components/DataflowCanvasUpdated.jsx @@ -64,12 +64,15 @@ const generateCustomStyles = () => { }; // Import icons from react-icons -import { FaDatabase, FaTable, FaArrowRight, FaExchangeAlt } from 'react-icons/fa'; +import { FaDatabase, FaTable, FaArrowRight, FaExchangeAlt, FaChevronDown } 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 Material-UI components for breadcrumb +import { Breadcrumbs, Link, Typography, Menu, MenuItem, ListItemIcon, ListItemText } from '@mui/material'; + // Import mock data import mockApiData from './mockData'; @@ -533,6 +536,24 @@ const DataflowCanvas = () => { const [showTableForm, setShowTableForm] = useState(false); const [selectedTableForEdit, setSelectedTableForEdit] = useState(null); + // Breadcrumb state + const [serviceMenuAnchor, setServiceMenuAnchor] = useState(null); + const [selectedService, setSelectedService] = useState('Data Mappings'); + + // Breadcrumb handlers + const handleServiceClick = (event) => { + setServiceMenuAnchor(event.currentTarget); + }; + + const handleServiceClose = () => { + setServiceMenuAnchor(null); + }; + + const handleServiceSelect = (service) => { + setSelectedService(service); + setServiceMenuAnchor(null); + }; + // Get the React Flow instance const reactFlowInstance = useReactFlow(); @@ -1210,8 +1231,104 @@ const DataflowCanvas = () => { }; }, []); + // Debug log to verify component is rendering + console.log('DataflowCanvas rendering with selectedService:', selectedService); + return (
+ {/* Breadcrumb */} +
+ + e.preventDefault()} + sx={{ fontWeight: 500 }} + > + Qubit + + + {/* Data Mappings/Pipelines Dropdown */} +
+ + {selectedService} + + +
+ +
+ + {/* Services Menu */} + + handleServiceSelect('Data Mappings')}> + + + + + + handleServiceSelect('Pipelines')}> + + + + + + + { // Wrap with ReactFlowProvider const DataflowCanvasWithProvider = () => ( - + ); diff --git a/src/components/InfiniteCanvas.jsx b/src/components/InfiniteCanvas.jsx index e106d89..8d85085 100644 --- a/src/components/InfiniteCanvas.jsx +++ b/src/components/InfiniteCanvas.jsx @@ -1104,17 +1104,6 @@ const ServiceNode = ({ data = {} }) => { }} onClick={() => data.onToggle && data.onToggle(data.id)} > - {data.expanded ? ( - <> - Collapse Connections - - - ) : ( - <> - Expand Connections - - - )}