chore(ui): Impact analysis style updates

This commit is contained in:
Chirag Madlani 2025-09-25 15:22:03 +05:30
parent 787d27f3f7
commit c6f99bbf07
15 changed files with 57 additions and 554 deletions

View File

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.9 3H4.87935C4.47687 2.99999 4.14468 2.99999 3.87409 3.0221C3.59304 3.04506 3.33469 3.09434 3.09202 3.21799C2.7157 3.40973 2.40973 3.7157 2.21799 4.09202C2.09434 4.33469 2.04506 4.59304 2.0221 4.87409C1.99999 5.14468 1.99999 5.47686 2 5.87934V5.9V8.5V16.1V16.1207C1.99999 16.5231 1.99999 16.8553 2.0221 17.1259C2.04506 17.407 2.09434 17.6653 2.21799 17.908C2.40973 18.2843 2.7157 18.5903 3.09202 18.782C3.33469 18.9057 3.59304 18.9549 3.87409 18.9779C4.14468 19 4.47686 19 4.87934 19H4.9H7.5H9C9.27614 19 9.5 18.7761 9.5 18.5C9.5 18.2239 9.27614 18 9 18H8V9H21V10.5C21 10.7761 21.2239 11 21.5 11C21.7761 11 22 10.7761 22 10.5V8.5V5.9V5.87934C22 5.47689 22 5.14467 21.9779 4.87409C21.9549 4.59304 21.9057 4.33469 21.782 4.09202C21.5903 3.7157 21.2843 3.40973 20.908 3.21799C20.6653 3.09434 20.407 3.04506 20.1259 3.0221C19.8553 2.99999 19.5231 2.99999 19.1207 3H19.1H7.5H4.9ZM7 9V18H4.9C4.47171 18 4.18056 17.9996 3.95552 17.9812C3.73631 17.9633 3.62421 17.9309 3.54601 17.891C3.35785 17.7951 3.20487 17.6422 3.10899 17.454C3.06915 17.3758 3.03669 17.2637 3.01878 17.0445C3.00039 16.8194 3 16.5283 3 16.1V9H7ZM7 8H3V5.9C3 5.47171 3.00039 5.18056 3.01878 4.95552C3.03669 4.73631 3.06915 4.62421 3.10899 4.54601C3.20487 4.35785 3.35785 4.20487 3.54601 4.10899C3.62421 4.06915 3.73631 4.03669 3.95552 4.01878C4.18056 4.00039 4.47171 4 4.9 4H7V8ZM8 8V4H19.1C19.5283 4 19.8194 4.00039 20.0445 4.01878C20.2637 4.03669 20.3758 4.06915 20.454 4.10899C20.6422 4.20487 20.7951 4.35785 20.891 4.54601C20.9309 4.62421 20.9633 4.73631 20.9812 4.95552C20.9996 5.18056 21 5.47171 21 5.9V8H8ZM15.5 11C15.3106 11 15.1375 11.107 15.0528 11.2764L14.2322 12.9177L12.6213 12.5149C12.3939 12.4581 12.1576 12.5668 12.0528 12.7764L11.0528 14.7764C10.9565 14.9689 10.9943 15.2014 11.1464 15.3536L12.2929 16.5L11.1464 17.6464C10.9943 17.7986 10.9565 18.0311 11.0528 18.2236L12.0528 20.2236C12.1576 20.4332 12.3939 20.5419 12.6213 20.4851L14.2322 20.0823L15.0528 21.7236C15.1375 21.893 15.3106 22 15.5 22H17.5C17.6894 22 17.8625 21.893 17.9472 21.7236L18.7678 20.0823L20.3787 20.4851C20.6061 20.5419 20.8424 20.4332 20.9472 20.2236L21.9472 18.2236C22.0435 18.0311 22.0057 17.7986 21.8536 17.6464L20.7071 16.5L21.8536 15.3536C22.0057 15.2014 22.0435 14.9689 21.9472 14.7764L20.9472 12.7764C20.8424 12.5668 20.6061 12.4581 20.3787 12.5149L18.7678 12.9177L17.9472 11.2764C17.8625 11.107 17.6894 11 17.5 11H15.5ZM14.9472 13.7236L15.809 12H17.191L18.0528 13.7236C18.1576 13.9332 18.3939 14.0419 18.6213 13.9851L20.2322 13.5823L20.8916 14.9013L19.6464 16.1464C19.4512 16.3417 19.4512 16.6583 19.6464 16.8536L20.8916 18.0987L20.2322 19.4177L18.6213 19.0149C18.3939 18.9581 18.1576 19.0668 18.0528 19.2764L17.191 21H15.809L14.9472 19.2764C14.8424 19.0668 14.6061 18.9581 14.3787 19.0149L12.7678 19.4177L12.1084 18.0987L13.3536 16.8536C13.5488 16.6583 13.5488 16.3417 13.3536 16.1464L12.1084 14.9013L12.7678 13.5823L14.3787 13.9851C14.6061 14.0419 14.8424 13.9332 14.9472 13.7236ZM16 16.5C16 16.2239 16.2239 16 16.5 16C16.7761 16 17 16.2239 17 16.5C17 16.7761 16.7761 17 16.5 17C16.2239 17 16 16.7761 16 16.5ZM16.5 15C15.6716 15 15 15.6716 15 16.5C15 17.3284 15.6716 18 16.5 18C17.3284 18 18 17.3284 18 16.5C18 15.6716 17.3284 15 16.5 15Z" fill="#414651"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.9 3H4.87935C4.47687 2.99999 4.14468 2.99999 3.87409 3.0221C3.59304 3.04506 3.33469 3.09434 3.09202 3.21799C2.7157 3.40973 2.40973 3.7157 2.21799 4.09202C2.09434 4.33469 2.04506 4.59304 2.0221 4.87409C1.99999 5.14468 1.99999 5.47686 2 5.87934V5.9V8.5V16.1V16.1207C1.99999 16.5231 1.99999 16.8553 2.0221 17.1259C2.04506 17.407 2.09434 17.6653 2.21799 17.908C2.40973 18.2843 2.7157 18.5903 3.09202 18.782C3.33469 18.9057 3.59304 18.9549 3.87409 18.9779C4.14468 19 4.47686 19 4.87934 19H4.9H7.5H9C9.27614 19 9.5 18.7761 9.5 18.5C9.5 18.2239 9.27614 18 9 18H8V9H21V10.5C21 10.7761 21.2239 11 21.5 11C21.7761 11 22 10.7761 22 10.5V8.5V5.9V5.87934C22 5.47689 22 5.14467 21.9779 4.87409C21.9549 4.59304 21.9057 4.33469 21.782 4.09202C21.5903 3.7157 21.2843 3.40973 20.908 3.21799C20.6653 3.09434 20.407 3.04506 20.1259 3.0221C19.8553 2.99999 19.5231 2.99999 19.1207 3H19.1H7.5H4.9ZM7 9V18H4.9C4.47171 18 4.18056 17.9996 3.95552 17.9812C3.73631 17.9633 3.62421 17.9309 3.54601 17.891C3.35785 17.7951 3.20487 17.6422 3.10899 17.454C3.06915 17.3758 3.03669 17.2637 3.01878 17.0445C3.00039 16.8194 3 16.5283 3 16.1V9H7ZM7 8H3V5.9C3 5.47171 3.00039 5.18056 3.01878 4.95552C3.03669 4.73631 3.06915 4.62421 3.10899 4.54601C3.20487 4.35785 3.35785 4.20487 3.54601 4.10899C3.62421 4.06915 3.73631 4.03669 3.95552 4.01878C4.18056 4.00039 4.47171 4 4.9 4H7V8ZM8 8V4H19.1C19.5283 4 19.8194 4.00039 20.0445 4.01878C20.2637 4.03669 20.3758 4.06915 20.454 4.10899C20.6422 4.20487 20.7951 4.35785 20.891 4.54601C20.9309 4.62421 20.9633 4.73631 20.9812 4.95552C20.9996 5.18056 21 5.47171 21 5.9V8H8ZM15.5 11C15.3106 11 15.1375 11.107 15.0528 11.2764L14.2322 12.9177L12.6213 12.5149C12.3939 12.4581 12.1576 12.5668 12.0528 12.7764L11.0528 14.7764C10.9565 14.9689 10.9943 15.2014 11.1464 15.3536L12.2929 16.5L11.1464 17.6464C10.9943 17.7986 10.9565 18.0311 11.0528 18.2236L12.0528 20.2236C12.1576 20.4332 12.3939 20.5419 12.6213 20.4851L14.2322 20.0823L15.0528 21.7236C15.1375 21.893 15.3106 22 15.5 22H17.5C17.6894 22 17.8625 21.893 17.9472 21.7236L18.7678 20.0823L20.3787 20.4851C20.6061 20.5419 20.8424 20.4332 20.9472 20.2236L21.9472 18.2236C22.0435 18.0311 22.0057 17.7986 21.8536 17.6464L20.7071 16.5L21.8536 15.3536C22.0057 15.2014 22.0435 14.9689 21.9472 14.7764L20.9472 12.7764C20.8424 12.5668 20.6061 12.4581 20.3787 12.5149L18.7678 12.9177L17.9472 11.2764C17.8625 11.107 17.6894 11 17.5 11H15.5ZM14.9472 13.7236L15.809 12H17.191L18.0528 13.7236C18.1576 13.9332 18.3939 14.0419 18.6213 13.9851L20.2322 13.5823L20.8916 14.9013L19.6464 16.1464C19.4512 16.3417 19.4512 16.6583 19.6464 16.8536L20.8916 18.0987L20.2322 19.4177L18.6213 19.0149C18.3939 18.9581 18.1576 19.0668 18.0528 19.2764L17.191 21H15.809L14.9472 19.2764C14.8424 19.0668 14.6061 18.9581 14.3787 19.0149L12.7678 19.4177L12.1084 18.0987L13.3536 16.8536C13.5488 16.6583 13.5488 16.3417 13.3536 16.1464L12.1084 14.9013L12.7678 13.5823L14.3787 13.9851C14.6061 14.0419 14.8424 13.9332 14.9472 13.7236ZM16 16.5C16 16.2239 16.2239 16 16.5 16C16.7761 16 17 16.2239 17 16.5C17 16.7761 16.7761 17 16.5 17C16.2239 17 16 16.7761 16 16.5ZM16.5 15C15.6716 15 15 15.6716 15 16.5C15 17.3284 15.6716 18 16.5 18C17.3284 18 18 17.3284 18 16.5C18 15.6716 17.3284 15 16.5 15Z" fill="currentColor"/>
</svg>

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@ -1,5 +1,4 @@
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.00485 1.94124C2.57309 1.40666 3.36968 1.25 4.23 1.25H8.27C9.13032 1.25 9.92691 1.40666 10.4952 1.94124C11.0749 2.48664 11.25 3.26514 11.25 4.1V19.9C11.25 20.7349 11.0749 21.5134 10.4952 22.0588C9.92691 22.5933 9.13032 22.75 8.27 22.75H4.23C3.36968 22.75 2.57309 22.5933 2.00485 22.0588C1.4251 21.5134 1.25 20.7349 1.25 19.9V4.1C1.25 3.26514 1.4251 2.48664 2.00485 1.94124ZM3.03265 3.03376C2.8949 3.16336 2.75 3.43486 2.75 4.1V19.9C2.75 20.5651 2.8949 20.8366 3.03265 20.9662C3.18191 21.1067 3.50032 21.25 4.23 21.25H8.27C8.99969 21.25 9.31809 21.1067 9.46735 20.9662C9.6051 20.8366 9.75 20.5651 9.75 19.9V4.1C9.75 3.43486 9.6051 3.16336 9.46735 3.03376C9.31809 2.89334 8.99969 2.75 8.27 2.75H4.23C3.50032 2.75 3.18191 2.89334 3.03265 3.03376Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5048 1.94124C14.0731 1.40666 14.8697 1.25 15.73 1.25H19.77C20.6303 1.25 21.4269 1.40666 21.9952 1.94124C22.5749 2.48664 22.75 3.26514 22.75 4.1V19.9C22.75 20.7349 22.5749 21.5134 21.9952 22.0588C21.4269 22.5933 20.6303 22.75 19.77 22.75H15.73C14.8697 22.75 14.0731 22.5933 13.5048 22.0588C12.9251 21.5134 12.75 20.7349 12.75 19.9V4.1C12.75 3.26514 12.9251 2.48664 13.5048 1.94124ZM14.5327 3.03376C14.3949 3.16336 14.25 3.43486 14.25 4.1V19.9C14.25 20.5651 14.3949 20.8366 14.5327 20.9662C14.6819 21.1067 15.0003 21.25 15.73 21.25H19.77C20.4997 21.25 20.8181 21.1067 20.9673 20.9662C21.1051 20.8366 21.25 20.5651 21.25 19.9V4.1C21.25 3.43486 21.1051 3.16336 20.9673 3.03376C20.8181 2.89334 20.4997 2.75 19.77 2.75H15.73C15.0003 2.75 14.6819 2.89334 14.5327 3.03376Z" fill="currentColor"/>
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.53333 2H4.13333C3.3866 2 3.01323 2 2.72801 2.14532C2.47713 2.27316 2.27316 2.47713 2.14532 2.72801C2 3.01323 2 3.3866 2 4.13333V11.8667C2 12.6134 2 12.9868 2.14532 13.272C2.27316 13.5229 2.47713 13.7268 2.72801 13.8547C3.01323 14 3.3866 14 4.13333 14H4.53333C5.28007 14 5.65344 14 5.93865 13.8547C6.18954 13.7268 6.39351 13.5229 6.52134 13.272C6.66667 12.9868 6.66667 12.6134 6.66667 11.8667V4.13333C6.66667 3.3866 6.66667 3.01323 6.52134 2.72801C6.39351 2.47713 6.18954 2.27316 5.93865 2.14532C5.65344 2 5.28007 2 4.53333 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.8667 2H11.4667C10.7199 2 10.3466 2 10.0613 2.14532C9.81046 2.27316 9.60649 2.47713 9.47866 2.72801C9.33333 3.01323 9.33333 3.3866 9.33333 4.13333V11.8667C9.33333 12.6134 9.33333 12.9868 9.47866 13.272C9.60649 13.5229 9.81046 13.7268 10.0613 13.8547C10.3466 14 10.7199 14 11.4667 14H11.8667C12.6134 14 12.9868 14 13.272 13.8547C13.5229 13.7268 13.7268 13.5229 13.8547 13.272C14 12.9868 14 12.6134 14 11.8667V4.13333C14 3.3866 14 3.01323 13.8547 2.72801C13.7268 2.47713 13.5229 2.27316 13.272 2.14532C12.9868 2 12.6134 2 11.8667 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -1,3 +1,3 @@
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 15V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V15M17 10L12 15M12 15L7 10M12 15V3" stroke="#535862" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 15V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V15M17 10L12 15M12 15L7 10M12 15V3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 447 B

After

Width:  |  Height:  |  Size: 452 B

View File

@ -1,3 +1,3 @@
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 4V20M7 20L3 16M7 20L11 16M17 20V4M17 4L13 8M17 4L21 8" stroke="#535862" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 4V20M7 20L3 16M7 20L11 16M17 20V4M17 4L13 8M17 4L21 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 232 B

After

Width:  |  Height:  |  Size: 237 B

View File

@ -1,3 +1,3 @@
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 17L14.1314 9.13137C13.7354 8.73535 13.5373 8.53735 13.309 8.46316C13.1082 8.3979 12.8918 8.3979 12.691 8.46316C12.4627 8.53735 12.2646 8.73535 11.8686 9.13137L9.13137 11.8686C8.73535 12.2646 8.53735 12.4627 8.30902 12.5368C8.10817 12.6021 7.89183 12.6021 7.69098 12.5368C7.46265 12.4627 7.26465 12.2646 6.86863 11.8686L2 7M22 17H15M22 17V10" stroke="#535862" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 17L14.1314 9.13137C13.7354 8.73535 13.5373 8.53735 13.309 8.46316C13.1082 8.3979 12.8918 8.3979 12.691 8.46316C12.4627 8.53735 12.2646 8.73535 11.8686 9.13137L9.13137 11.8686C8.73535 12.2646 8.53735 12.4627 8.30902 12.5368C8.10817 12.6021 7.89183 12.6021 7.69098 12.5368C7.46265 12.4627 7.26465 12.2646 6.86863 11.8686L2 7M22 17H15M22 17V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 520 B

After

Width:  |  Height:  |  Size: 525 B

View File

@ -116,7 +116,7 @@ const AppRouter = () => {
{/* Render APP position plugin routes (they handle their own layouts) */}
{isAuthenticated &&
plugins.flatMap((plugin) => {
plugins?.flatMap((plugin) => {
const routes = plugin.getRoutes?.() || [];
// Filter routes with APP position
const appRoutes = routes.filter(

View File

@ -34,12 +34,9 @@ import { ExploreQuickFilterField } from '../../Explore/ExplorePage.interface';
import ExploreQuickFilters from '../../Explore/ExploreQuickFilters';
import { AssetsOfEntity } from '../../Glossary/GlossaryTerms/tabs/AssetsTabs.interface';
import { StyledMenu } from '../../LineageTable/LineageTable.styled';
import { LineageControlProps } from './EntityLineage.interface';
import LineageSearchSelect from './LineageSearchSelect/LineageSearchSelect';
const CustomControls: FC<LineageControlProps> = ({
onlyShowTabSwitch,
}: LineageControlProps) => {
const CustomControls: FC = () => {
const { t } = useTranslation();
const { setSelectedQuickFilters, nodes, selectedQuickFilters } =
useLineageProvider();
@ -158,41 +155,35 @@ const CustomControls: FC<LineageControlProps> = ({
}, [filters]);
return (
<div
className={classNames(
'd-flex w-full',
onlyShowTabSwitch ? 'justify-end' : 'justify-between'
)}>
{!onlyShowTabSwitch && (
<div className="d-flex items-center gap-4">
<LineageSearchSelect />
<Space className="m-l-xs" size={16}>
<Button
className="expand-btn"
variant="outlined"
onClick={handleAdvancedClick}>
{t('label.advanced')}
<RightOutlined />
</Button>
<StyledMenu
anchorEl={advanceEl}
open={Boolean(advanceEl)}
onClose={handleCloseAdvance}>
{filterMenu}
</StyledMenu>
<div className={classNames('d-flex w-full')}>
<div className="d-flex items-center gap-4">
<LineageSearchSelect />
<Space className="m-l-xs" size={16}>
<Button
className="expand-btn"
variant="outlined"
onClick={handleAdvancedClick}>
{t('label.advanced')}
<RightOutlined />
</Button>
<StyledMenu
anchorEl={advanceEl}
open={Boolean(advanceEl)}
onClose={handleCloseAdvance}>
{filterMenu}
</StyledMenu>
<ExploreQuickFilters
independent
aggregations={{}}
defaultQueryFilter={queryFilter}
fields={selectedQuickFilters ?? []}
index={SearchIndex.ALL}
showDeleted={false}
onFieldValueSelect={handleQuickFiltersValueSelect}
/>
</Space>
</div>
)}
<ExploreQuickFilters
independent
aggregations={{}}
defaultQueryFilter={queryFilter}
fields={selectedQuickFilters ?? []}
index={SearchIndex.ALL}
showDeleted={false}
onFieldValueSelect={handleQuickFiltersValueSelect}
/>
</Space>
</div>
<div className="d-flex gap-4 items-center">
<Button
className="font-semibold"

View File

@ -11,11 +11,9 @@
* limitations under the License.
*/
import { RadioChangeEvent } from 'antd';
import { LoadingState } from 'Models';
import { ReactNode } from 'react';
import { Edge as FlowEdge, Node } from 'reactflow';
import { LINEAGE_TAB_VIEW } from '../../../constants/Lineage.constants';
import { LineageDirection } from '../../../generated/api/lineage/lineageDirection';
import { EntityReference } from '../../../generated/entity/type';
@ -61,12 +59,6 @@ export interface CustomEdgeData {
export type ElementLoadingState = Exclude<LoadingState, 'waiting'>;
export type CustomElement = { node: Node[]; edge: FlowEdge[] };
export interface LineageControlProps {
onlyShowTabSwitch?: boolean;
activeViewTab: LINEAGE_TAB_VIEW;
handleActiveViewTabChange: (e: RadioChangeEvent) => void;
}
export interface LineageConfig {
upstreamDepth: number;
downstreamDepth: number;

View File

@ -13,19 +13,11 @@
import { Card, RadioChangeEvent } from 'antd';
import classNames from 'classnames';
import Qs from 'qs';
import {
DragEvent,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { DragEvent, useCallback, useEffect, useMemo, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import ReactFlow, { Background, MiniMap, Panel } from 'reactflow';
import {
LINEAGE_TAB_VIEW,
MAX_ZOOM_VALUE,
MIN_ZOOM_VALUE,
} from '../../constants/Lineage.constants';
@ -48,7 +40,6 @@ import LineageControlButtons from '../Entity/EntityLineage/LineageControlButtons
import LineageLayers from '../Entity/EntityLineage/LineageLayers/LineageLayers';
import { SourceType } from '../SearchedData/SearchedData.interface';
import { LineageProps } from './Lineage.interface';
import LineageTable from './LineageTable/LineageTable.component';
const Lineage = ({
deleted,
@ -59,9 +50,7 @@ const Lineage = ({
}: LineageProps) => {
const { t } = useTranslation();
const navigate = useNavigate();
const [activeViewTab, setActiveViewTab] = useState<LINEAGE_TAB_VIEW>(
LINEAGE_TAB_VIEW.DIAGRAM_VIEW
);
const reactFlowWrapper = useRef<HTMLDivElement>(null);
const location = useCustomLocation();
@ -171,15 +160,11 @@ const Lineage = ({
<TitleBreadcrumb className="p-b-lg" titleLinks={breadcrumbs} />
)}
<CustomControlsComponent
activeViewTab={activeViewTab}
handleActiveViewTabChange={handleActiveViewTabChange}
onlyShowTabSwitch={activeViewTab === LINEAGE_TAB_VIEW.TABLE_VIEW}
/>
<CustomControlsComponent />
</div>
)
}>
{activeViewTab === LINEAGE_TAB_VIEW.DIAGRAM_VIEW ? (
{
<div
className="h-full relative lineage-container"
data-testid="lineage-container"
@ -245,9 +230,7 @@ const Lineage = ({
</div>
)}
</div>
) : (
<LineageTable />
)}
}
</Card>
);
};

View File

@ -1,337 +0,0 @@
/*
* Copyright 2023 Collate.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { render, screen, waitFor } from '@testing-library/react';
import { act } from 'react';
import { readString } from 'react-papaparse';
import { ExportTypes } from '../../../constants/Export.constants';
import { LINEAGE_TABLE_COLUMN_LOCALIZATION_KEYS } from '../../../constants/Lineage.constants';
import { useLineageProvider } from '../../../context/LineageProvider/LineageProvider';
import { useFqn } from '../../../hooks/useFqn';
import { getLineageTableConfig } from '../../../utils/EntityLineageUtils';
import { useEntityExportModalProvider } from '../../Entity/EntityExportModalProvider/EntityExportModalProvider.component';
import LineageTable from './LineageTable.component';
// Mock the dependencies
jest.mock('../../../context/LineageProvider/LineageProvider');
jest.mock('../../../hooks/useFqn');
jest.mock('../../../utils/EntityLineageUtils');
jest.mock(
'../../Entity/EntityExportModalProvider/EntityExportModalProvider.component'
);
jest.mock('react-papaparse', () => ({
readString: jest.fn(),
}));
const mockUseLineageProvider = useLineageProvider as jest.MockedFunction<
typeof useLineageProvider
>;
const mockUseFqn = useFqn as jest.MockedFunction<typeof useFqn>;
const mockUseEntityExportModalProvider =
useEntityExportModalProvider as jest.MockedFunction<
typeof useEntityExportModalProvider
>;
const mockGetLineageColumnsAndDataSourceFromCSV =
getLineageTableConfig as jest.MockedFunction<typeof getLineageTableConfig>;
const mockReadString = readString as jest.MockedFunction<typeof readString>;
describe('LineageTable Component', () => {
const mockFqn = 'test.fqn';
const mockExportLineageData = jest.fn();
const mockTriggerExportForBulkEdit = jest.fn();
const mockClearCSVExportData = jest.fn();
const mockTableConfig = {
columns: [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: 200,
ellipsis: { showTitle: false },
render: jest.fn(),
},
{
title: 'Type',
dataIndex: 'type',
key: 'type',
width: 200,
ellipsis: { showTitle: false },
render: jest.fn(),
},
],
dataSource: [
{ name: 'Test Entity 1', type: 'Table', key: '0' },
{ name: 'Test Entity 2', type: 'Dashboard', key: '1' },
],
};
beforeEach(() => {
jest.clearAllMocks();
// Setup default mocks
mockUseFqn.mockReturnValue({ fqn: mockFqn } as any);
mockUseLineageProvider.mockReturnValue({
exportLineageData: mockExportLineageData,
} as any);
mockUseEntityExportModalProvider.mockReturnValue({
triggerExportForBulkEdit: mockTriggerExportForBulkEdit,
csvExportData: undefined,
clearCSVExportData: mockClearCSVExportData,
} as any);
mockGetLineageColumnsAndDataSourceFromCSV.mockReturnValue(mockTableConfig);
});
it('should render the component', async () => {
// Mock CSV data to trigger table rendering
const mockCSVData = 'Name,Type\nTest Entity 1,Table';
const mockParsedData = {
data: [
['Name', 'Type'],
['Test Entity 1', 'Table'],
],
};
mockReadString.mockImplementation((_: string, options: any) => {
if (options.complete) {
options.complete(mockParsedData);
}
});
mockUseEntityExportModalProvider.mockReturnValue({
triggerExportForBulkEdit: mockTriggerExportForBulkEdit,
csvExportData: mockCSVData,
clearCSVExportData: mockClearCSVExportData,
} as any);
await act(async () => {
render(<LineageTable />);
});
await waitFor(() => {
expect(screen.getByTestId('lineage-table')).toBeInTheDocument();
});
});
it('should trigger export for bulk edit on mount', () => {
render(<LineageTable />);
expect(mockTriggerExportForBulkEdit).toHaveBeenCalledWith({
name: mockFqn,
onExport: mockExportLineageData,
exportTypes: [ExportTypes.CSV],
hideExportModal: true,
});
});
it('should clear CSV export data on unmount', () => {
const { unmount } = render(<LineageTable />);
unmount();
expect(mockClearCSVExportData).toHaveBeenCalled();
});
it('should render table with empty data initially', async () => {
// Mock empty CSV data to trigger table rendering with empty state
const mockCSVData = 'Name,Type';
const mockParsedData = {
data: [['Name', 'Type']],
};
mockReadString.mockImplementation((_: string, options: any) => {
if (options.complete) {
options.complete(mockParsedData);
}
});
mockUseEntityExportModalProvider.mockReturnValue({
triggerExportForBulkEdit: mockTriggerExportForBulkEdit,
csvExportData: mockCSVData,
clearCSVExportData: mockClearCSVExportData,
} as any);
render(<LineageTable />);
await waitFor(() => {
expect(screen.getByTestId('lineage-table')).toBeInTheDocument();
});
});
it('should handle CSV data processing when csvExportData is available', async () => {
const mockCSVData =
'Name,Type\nTest Entity 1,Table\nTest Entity 2,Dashboard';
const mockParsedData = {
data: [
['Name', 'Type'],
['Test Entity 1', 'Table'],
['Test Entity 2', 'Dashboard'],
],
};
mockReadString.mockImplementation((_: string, options: any) => {
if (options.complete) {
options.complete(mockParsedData);
}
});
mockUseEntityExportModalProvider.mockReturnValue({
triggerExportForBulkEdit: mockTriggerExportForBulkEdit,
csvExportData: mockCSVData,
clearCSVExportData: mockClearCSVExportData,
} as any);
render(<LineageTable />);
await waitFor(() => {
expect(mockReadString).toHaveBeenCalledWith(mockCSVData, {
worker: true,
skipEmptyLines: true,
complete: expect.any(Function),
});
});
expect(mockGetLineageColumnsAndDataSourceFromCSV).toHaveBeenCalledWith(
mockParsedData.data
);
});
it('should not process CSV data when csvExportData is not available', () => {
render(<LineageTable />);
expect(mockReadString).not.toHaveBeenCalled();
});
it('should update table config when CSV data is processed', async () => {
const mockCSVData = 'Name,Type\nTest Entity 1,Table';
const mockParsedData = {
data: [
['Name', 'Type'],
['Test Entity 1', 'Table'],
],
};
mockReadString.mockImplementation((_: string, options: any) => {
if (options.complete) {
options.complete(mockParsedData);
}
});
mockUseEntityExportModalProvider.mockReturnValue({
triggerExportForBulkEdit: mockTriggerExportForBulkEdit,
csvExportData: mockCSVData,
clearCSVExportData: mockClearCSVExportData,
} as any);
render(<LineageTable />);
await waitFor(() => {
expect(mockGetLineageColumnsAndDataSourceFromCSV).toHaveBeenCalledWith(
mockParsedData.data
);
});
});
it('should handle multiple CSV data updates', async () => {
const mockCSVData1 = 'Name,Type\nTest Entity 1,Table';
const mockCSVData2 = 'Name,Type\nTest Entity 2,Dashboard';
const mockParsedData1 = {
data: [
['Name', 'Type'],
['Test Entity 1', 'Table'],
],
};
const mockParsedData2 = {
data: [
['Name', 'Type'],
['Test Entity 2', 'Dashboard'],
],
};
mockReadString.mockImplementation((data: string, options: any) => {
if (data === mockCSVData1 && options.complete) {
options.complete(mockParsedData1);
} else if (data === mockCSVData2 && options.complete) {
options.complete(mockParsedData2);
}
});
const { rerender } = render(<LineageTable />);
mockUseEntityExportModalProvider.mockReturnValue({
triggerExportForBulkEdit: mockTriggerExportForBulkEdit,
csvExportData: mockCSVData1,
clearCSVExportData: mockClearCSVExportData,
} as any);
rerender(<LineageTable />);
await waitFor(() => {
expect(mockGetLineageColumnsAndDataSourceFromCSV).toHaveBeenCalledWith(
mockParsedData1.data
);
});
mockUseEntityExportModalProvider.mockReturnValue({
triggerExportForBulkEdit: mockTriggerExportForBulkEdit,
csvExportData: mockCSVData2,
clearCSVExportData: mockClearCSVExportData,
} as any);
rerender(<LineageTable />);
await waitFor(() => {
expect(mockGetLineageColumnsAndDataSourceFromCSV).toHaveBeenCalledWith(
mockParsedData2.data
);
});
});
});
describe('LINEAGE_TABLE_COLUMN_LOCALIZATION_KEYS', () => {
it('should contain all required column keys', () => {
const expectedKeys = [
'fromEntityFQN',
'fromServiceName',
'fromServiceType',
'fromOwners',
'fromDomain',
'toEntityFQN',
'toServiceName',
'toServiceType',
'toOwners',
'toDomain',
'fromChildEntityFQN',
'toChildEntityFQN',
'pipelineName',
'pipelineDisplayName',
'pipelineType',
'pipelineDescription',
'pipelineOwners',
'pipelineDomain',
'pipelineServiceName',
'pipelineServiceType',
];
expectedKeys.forEach((key) => {
expect(LINEAGE_TABLE_COLUMN_LOCALIZATION_KEYS).toHaveProperty(key);
expect(LINEAGE_TABLE_COLUMN_LOCALIZATION_KEYS[key]).toMatch(/^label\./);
});
});
it('should have proper localization key format', () => {
Object.values(LINEAGE_TABLE_COLUMN_LOCALIZATION_KEYS).forEach((value) => {
expect(value).toMatch(/^label\.[a-z-]+$/);
});
});
});

View File

@ -1,108 +0,0 @@
/*
* Copyright 2025 Collate.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ColumnsType } from 'antd/lib/table';
import { isEmpty } from 'lodash';
import { useCallback, useEffect, useState } from 'react';
import { readString } from 'react-papaparse';
import { ExportTypes } from '../../../constants/Export.constants';
import { TABLE_SCROLL_VALUE } from '../../../constants/Table.constants';
import { useLineageProvider } from '../../../context/LineageProvider/LineageProvider';
import { useFqn } from '../../../hooks/useFqn';
import { getLineageTableConfig } from '../../../utils/EntityLineageUtils';
import ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
import Loader from '../../common/Loader/Loader';
import Table from '../../common/Table/Table';
import { useEntityExportModalProvider } from '../../Entity/EntityExportModalProvider/EntityExportModalProvider.component';
import './lineage-table.less';
const LineageTable = () => {
const { fqn } = useFqn();
const { exportLineageData } = useLineageProvider();
const { triggerExportForBulkEdit, csvExportData, clearCSVExportData } =
useEntityExportModalProvider();
const [tableConfig, setTableConfig] = useState<{
isLoading: boolean;
columns: ColumnsType<string>;
dataSource: Record<string, string>[];
}>({
isLoading: true,
columns: [],
dataSource: [],
});
const onCSVReadComplete = useCallback((results: { data: string[][] }) => {
const { columns, dataSource } = getLineageTableConfig(
results.data as string[][]
);
setTableConfig({
isLoading: false,
columns,
dataSource,
});
}, []);
useEffect(() => {
setTableConfig({
isLoading: true,
columns: [],
dataSource: [],
});
triggerExportForBulkEdit({
name: fqn,
onExport: exportLineageData,
exportTypes: [ExportTypes.CSV],
hideExportModal: true,
});
}, []);
useEffect(() => {
if (csvExportData) {
readString(csvExportData, {
worker: true,
skipEmptyLines: true,
complete: onCSVReadComplete,
});
}
}, [csvExportData]);
useEffect(() => {
// clear the csvExportData data from the state
return () => {
clearCSVExportData();
};
}, []);
if (tableConfig.isLoading) {
return <Loader />;
}
if (isEmpty(tableConfig.columns)) {
return <ErrorPlaceHolder />;
}
return (
<Table
{...tableConfig}
containerClassName="m-x-sm m-y-md align-table-filter-left"
data-testid="lineage-table"
pagination={false}
rowKey="fullyQualifiedName"
scroll={TABLE_SCROLL_VALUE}
size="middle"
/>
);
};
export default LineageTable;

View File

@ -1,16 +0,0 @@
/*
* Copyright 2025 Collate.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.header-icon {
width: 20px;
height: 20px;
}

View File

@ -11,7 +11,6 @@
* limitations under the License.
*/
import { SettingOutlined } from '@ant-design/icons';
import { ListItemIcon, ListItemText } from '@mui/material';
import Button from '@mui/material/Button';
import Chip from '@mui/material/Chip';
import MenuItem from '@mui/material/MenuItem';
@ -384,8 +383,8 @@ const LineageTable = () => {
handlePageChange(currentPage);
setImpactOnEl(null);
}}>
<ListItemIcon>{option.icon}</ListItemIcon>
<ListItemText>{option.label}</ListItemText>
{option.icon}
{option.label}
</MenuItem>
))}
</StyledMenu>
@ -555,6 +554,7 @@ const LineageTable = () => {
<Button
endIcon={<DropdownIcon />}
sx={{
fontWeight: 500,
'& .MuiButton-endIcon': {
svg: {
height: 12,
@ -604,8 +604,11 @@ const LineageTable = () => {
/>
</div>
<Button
className="m-l-auto"
size="small"
sx={{
fontWeight: 500,
color: theme.palette.primary.main,
}}
variant="text"
onClick={handleClearAllFilters}>
{t('label.clear-entity', { entity: t('label.all') })}
@ -866,15 +869,8 @@ const LineageTable = () => {
}
);
const newItems = updatedQuickFilters.filter(
(item) =>
!selectedQuickFilters.some(
(existingItem) => item.key === existingItem.key
)
);
if (newItems.length > 0) {
setSelectedQuickFilters(newItems);
if (updatedQuickFilters.length > 0) {
setSelectedQuickFilters(updatedQuickFilters);
}
// Toggle fullscreen view based on filter selection

View File

@ -289,7 +289,7 @@ const Table = <T extends Record<string, unknown>>(
{rest.extraTableFilters}
{isCustomizeColumnEnable && (
<Dropdown
className="custom-column-dropdown-menu text-primary"
className="custom-column-dropdown-menu"
menu={menu}
open={isDropdownVisible}
placement="bottomRight"

View File

@ -32,13 +32,16 @@
}
.custom-column-dropdown-menu {
margin-right: 10px;
border: none;
color: @primary-color;
display: flex;
align-items: center;
gap: 4px;
font-weight: 500;
color: @grey-600;
svg {
color: @grey-700;
}
.ant-dropdown-menu {
background-color: @white;