Skip to content

Add close button to lineage tab (#117) #118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ib31iat merged 1 commit into from
Jun 10, 2025
Merged

Add close button to lineage tab (#117) #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import NotFound from './layouts/NotFound';
import RootLayout from './layouts/RootLayout';
import { WorkspaceEmpty } from './layouts/RootLayoutSpinner';
import { amplifyTheme } from './theme';
import { Provider } from 'react-redux';
import store from './app/store';

function Routing() {
const userContext = useUser();
Expand All @@ -31,7 +33,10 @@ function Routing() {
<Route path='workflows/:flowId/:runIdAttempt/:tab?/:stepName?' element={<Run/>}/>
<Route path='workflows/*' element={<NotFound/>}/>
{/* <Route path='lineage/*' element={<LineageExplorer/>}/> */}
<Route path='config/*' element={<ConfigExplorer/>}/>
<Route path='config/*' element={
<Provider store={store}>
<ConfigExplorer/>
</Provider>}/>
</Route>
</>);

Expand Down
73 changes: 36 additions & 37 deletions src/components/ConfigExplorer/ConfigExplorer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { Provider } from 'react-redux';

import { Box, Option, Select, Sheet, Typography } from '@mui/joy';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Panel, PanelGroup } from "react-resizable-panels";
Expand All @@ -18,6 +16,8 @@ import ElementList from './ElementList';
import ElementTable from './ElementTable';
import GlobalConfigView from './GlobalConfigView';
import LineageTabSep from './LineageTab/LineageTabWithSeparateView';
import { useAppSelector } from '../../hooks/useRedux';
import { getLineageTabOpen } from '../../util/ConfigExplorer/slice/LineageTab/Core/LineageTabCoreSlice';

interface SearchFilterDef {
text: string;
Expand Down Expand Up @@ -86,7 +86,6 @@ function ConfigExplorer() {
const parentRef = useRef<HTMLDivElement>(null);
const [filter, setFilter] = useState<SearchFilterDef>();
const isFetching = isFetchingConfig || isFetchingConfigVersion;
const [openLineage, setOpenLineage] = useState(false);

const configDataLists = useMemo(() => {
if (configData) {
Expand All @@ -104,6 +103,8 @@ function ConfigExplorer() {
return configDataLists;
}, [filter, configDataLists]);

const lineageTabOpen = useAppSelector(state => getLineageTabOpen(state));

return (
<Sheet sx={{ display: 'flex', flexDirection: 'column', p: '0.1rem 1rem', gap: '1rem', width: '100%', height: '100%' }}>
<PageHeader
Expand All @@ -113,41 +114,39 @@ function ConfigExplorer() {
{!configData || isFetching ? (
<CenteredCirularProgress />
) : (
<Provider store={store}>
<PanelGroup direction="horizontal">
<Panel defaultSize={15} minSize={8} collapsible={true}>
<ElementList configData={configData} configDataLists={filteredConfigDataLists!} mainRef={listRef} setFilter={setFilter} />
</Panel>
<PanelResizer/>
<Panel>
<Routes>
<Route path=":elementType"
element={<ElementTable dataLists={filteredConfigDataLists!} />}
errorElement={<ErrorBoundary/>}
/>
<Route
path=":elementType/:elementName/:tab?"
element={<ElementDetails configData={configData} parentCmpRef={parentRef} version={version} openLineage={openLineage} setOpenLineage={setOpenLineage} />}
errorElement={<ErrorBoundary />}
/>
<Route path="globalOptions"
element={<GlobalConfigView data={configData?.global}/>}
errorElement={<ErrorBoundary/>}
/>
</Routes>
<PanelGroup direction="horizontal">
<Panel defaultSize={15} minSize={8} collapsible={true}>
<ElementList configData={configData} configDataLists={filteredConfigDataLists!} mainRef={listRef} setFilter={setFilter} />
</Panel>
<PanelResizer/>
<Panel>
<Routes>
<Route path=":elementType"
element={<ElementTable dataLists={filteredConfigDataLists!} />}
errorElement={<ErrorBoundary/>}
/>
<Route
path=":elementType/:elementName/:tab?"
element={<ElementDetails configData={configData} parentCmpRef={parentRef} version={version} />}
errorElement={<ErrorBoundary />}
/>
<Route path="globalOptions"
element={<GlobalConfigView data={configData?.global}/>}
errorElement={<ErrorBoundary/>}
/>
</Routes>
</Panel>
{lineageTabOpen && <>
<PanelResizer style={{marginLeft: "6px"}}/>
<Panel minSize={7} collapsible={true}>
<Sheet sx={{ height: '100%', minWidth: '100px', marginLeft: "6px" }}>
<LineageTabSep />
</Sheet>
</Panel>
{openLineage && <>
<PanelResizer style={{marginLeft: "6px"}}/>
<Panel minSize={7} collapsible={true}>
<Sheet sx={{ height: '100%', minWidth: '100px', marginLeft: "6px" }}>
<LineageTabSep />
</Sheet>
</Panel>
</>
}
</PanelGroup>
</Provider>
)}
</>
}
</PanelGroup>
)}
</Sheet>
</Sheet>
);
Expand Down
14 changes: 7 additions & 7 deletions src/components/ConfigExplorer/ElementDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ import Tabs from '@mui/joy/Tabs';
import React from 'react';
import { useParams } from "react-router-dom";
import { useFetchDataObjectSchemaEntries, useFetchDataObjectStatsEntries, useFetchDescription } from '../../hooks/useFetchData';
import { useAppDispatch } from '../../hooks/useRedux';
import { useAppDispatch, useAppSelector } from '../../hooks/useRedux';
import { useWorkspace } from '../../hooks/useWorkspace';
import { ConfigData } from "../../util/ConfigExplorer/ConfigData";
import { setLineageTabProps } from '../../util/ConfigExplorer/slice/LineageTab/Core/LineageTabCoreSlice';
import { setLineageTabProps, getLineageTabOpen, setLineageTabOpen } from '../../util/ConfigExplorer/slice/LineageTab/Core/LineageTabCoreSlice';
import './ComponentsStyles.css';
import ConfigurationTab from "./ConfigurationTab";
import DescriptionTab from "./DescriptionTab";
Expand All @@ -37,10 +37,8 @@ export default function ElementDetails(props: {
configData?: ConfigData;
parentCmpRef: React.RefObject<HTMLDivElement>;
version: string | undefined;
openLineage: boolean;
setOpenLineage: (boolean) => void;
}) {
const { configData, version, openLineage, setOpenLineage } = props;
const { configData, version } = props;
const { elementName, elementType, tab } = useParams();
const [lastTab, setLastTab] = React.useState('configuration');
const {navigateRel} = useWorkspace();
Expand Down Expand Up @@ -77,6 +75,8 @@ export default function ElementDetails(props: {

const hasSchema = schemaEntries && schemaEntries.length > 0

const lineageTabOpen = useAppSelector(state => getLineageTabOpen(state));

return (
<>
<Sheet sx={{ flex: 1, minWidth: '500px', height: '100%', display: 'flex', flexDirection: 'column', p: '1rem 0rem 1rem 0.5rem' }}>
Expand All @@ -97,9 +97,9 @@ export default function ElementDetails(props: {
</TabList>
{(elementType === "dataObjects" || elementType === "actions") &&
(<Sheet>
{!openLineage &&
{!lineageTabOpen &&
(
<Button size="sm" onClick={() => setOpenLineage(true)}>
<Button size="sm" onClick={() => dispatch(setLineageTabOpen(true))}>
Open lineage
<KeyboardDoubleArrowLeftIcon sx={{ ml: '0.5rem' }} />
</Button>
Expand Down
88 changes: 54 additions & 34 deletions src/components/ConfigExplorer/LineageTab/LineageGraphToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import { Abc, AlignVerticalTop, Apps, ArrowDropDown, Clear, FitScreen, OpenInFull, Search, Send } from '@mui/icons-material';
import AlignHorizontalLeft from '@mui/icons-material/AlignHorizontalLeft';
import CloseFullscreenIcon from '@mui/icons-material/CloseFullscreen';
import CloudDownloadIcon from '@mui/icons-material/CloudDownload';
import {CloudDownload, Close} from '@mui/icons-material';
import FilterCenterFocusIcon from '@mui/icons-material/FilterCenterFocus';
import RocketLaunchOutlined from '@mui/icons-material/RocketLaunchOutlined';
import SchemaIcon from '@mui/icons-material/Schema';
import TableViewTwoTone from '@mui/icons-material/TableViewTwoTone';
import WorkspacesIcon from '@mui/icons-material/Workspaces';
import ToggleButtonGroup from '@mui/joy/ToggleButtonGroup';
import * as React from 'react';
import { ReactElement } from 'react';

import { Autocomplete, Button, Divider, Dropdown, IconButton, Input, ListItemDecorator, Menu, MenuButton, MenuItem, Tooltip } from '@mui/joy';
// import Option from '@mui/joy/Option';
Expand All @@ -22,7 +23,7 @@ import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux';
import { dagreLayoutRf } from '../../../util/ConfigExplorer/Graphs';
import { computeNodePositionFromParent, computeParentNodePositionFromArray, getGraphFromConfig, getNonParentNodesFromArray, getParentNodesFromArray, groupByFeed, groupBySubstring, prioritizeParentNodes, resetViewPort, resetViewPortCentered, restoreGroupSettings, restoreGroupSettingsBySubgroup } from '../../../util/ConfigExplorer/LineageTabUtils';
import { getGroupedState, getGroupingRoutine, getRFI, setGroupingRoutine } from '../../../util/ConfigExplorer/slice/LineageTab/Common/ReactFlowSlice';
import { getConfigData } from '../../../util/ConfigExplorer/slice/LineageTab/Core/LineageTabCoreSlice';
import { getConfigData, getLineageTabOpen, setLineageTabOpen } from '../../../util/ConfigExplorer/slice/LineageTab/Core/LineageTabCoreSlice';
import { getExpansionState, setExpansionState } from '../../../util/ConfigExplorer/slice/LineageTab/Toolbar/GraphExpansionSlice';
import { getGraphView, setGraphView } from '../../../util/ConfigExplorer/slice/LineageTab/Toolbar/GraphViewSlice';
import { setGroupingState } from '../../../util/ConfigExplorer/slice/LineageTab/Toolbar/GroupingSlice';
Expand Down Expand Up @@ -51,42 +52,44 @@ function GraphViewSelector() {
const [selectedIndex, setSelectedIndex] = useState<number>(0);

const options = {
full:
<Tooltip arrow title='show full graph' enterDelay={500} enterNextDelay={500} placement='right'>
<SchemaIcon />
</Tooltip>,
data:
<Tooltip arrow title='show data graph' enterDelay={500} enterNextDelay={500} placement='right'>
<TableViewTwoTone />
</Tooltip>,
action:
<Tooltip arrow title='show action graph' enterDelay={500} enterNextDelay={500} placement='right'>
<RocketLaunchOutlined />
</Tooltip>
full: {title: 'show full graph', icon: SchemaIcon},
data: {title: 'show data graph', icon: TableViewTwoTone},
action: {title: 'show action graph', icon: RocketLaunchOutlined},
}

const handleSelect = (value) => {
setSelectedIndex(value === 'full' ? 0 : value === 'data' ? 1 : value === 'action' ? 2 : 0);
dispatch(setGraphView(value));
};

const createTooltip = (identifier, index, options) => {
const title = options[identifier]['title']
const Icon = options[identifier]['icon']

return (
<MenuItem selected={selectedIndex === index} onClick={() => { handleSelect(identifier); }}>
<ListItemDecorator>
<Tooltip arrow title={title} enterDelay={500} enterNextDelay={500} placement='right'>
<Icon />
</Tooltip>
</ListItemDecorator>
</MenuItem>
)
}

const ToolbarIcon = options[graphView]?.icon

return (
<Dropdown >
<MenuButton endDecorator={<ArrowDropDown sx={{ position: 'absolute', bottom: 8, left: 25 }} />} sx={{ padding: 1 }}>
<Tooltip arrow title='Show graph view options' enterDelay={500} enterNextDelay={500} placement='right'>
{options[graphView]}
<Tooltip arrow title='Show graph view options' enterDelay={500} enterNextDelay={500} placement='top'>
<ToolbarIcon />
</Tooltip>
</MenuButton>
<Menu sx={{ '--ListItemDecorator-size': '20px' }}>
<MenuItem selected={selectedIndex === 0} onClick={() => { handleSelect('full'); }}>
<ListItemDecorator>{options['full']}</ListItemDecorator>
</MenuItem>
<MenuItem selected={selectedIndex === 1} onClick={() => { handleSelect('data'); }} >
<ListItemDecorator>{options['data']}</ListItemDecorator>
</MenuItem>
<MenuItem selected={selectedIndex === 2} onClick={() => { handleSelect('action'); }} >
<ListItemDecorator>{options['action']}</ListItemDecorator>
</MenuItem>
{createTooltip('full', 0, options)}
{createTooltip('data', 1, options)}
{createTooltip('action', 2, options)}
</Menu>
</Dropdown>
)
Expand All @@ -103,7 +106,7 @@ function LayoutButton() {
className="controls"
style={styles}
>*/
return <Tooltip arrow title={layout === 'TB' ? 'switch to horizontal layout' : 'switch to vertical layout'} enterDelay={500} enterNextDelay={500} placement='right'>
return <Tooltip arrow title={layout === 'TB' ? 'switch to horizontal layout' : 'switch to vertical layout'} enterDelay={500} enterNextDelay={500} placement='top'>
<IconButton color={'neutral'} onClick={() => dispatch(setLayout(layout === 'TB' ? 'LR' : 'TB'))}>
{layout === 'TB' ? <AlignVerticalTop /> : <AlignHorizontalLeft />}
</IconButton>
Expand All @@ -114,7 +117,7 @@ function GraphExpansionButton() {
const dispatch = useAppDispatch();
const isExpanded = useAppSelector((state) => getExpansionState(state));

return <Tooltip arrow title={isExpanded ? 'Collapse graph' : 'Expand graph'} enterDelay={500} enterNextDelay={500} placement='right'>
return <Tooltip arrow title={isExpanded ? 'Collapse graph' : 'Expand graph'} enterDelay={500} enterNextDelay={500} placement='top'>
<IconButton
color='neutral'
onClick={() => dispatch(setExpansionState({ isExpanded: !isExpanded }))}
Expand All @@ -139,25 +142,41 @@ function DownloadLineageButton() {
};

return (
<Tooltip arrow title='Download image as PNG file' enterDelay={500} enterNextDelay={500} placement='right'>
<Tooltip arrow title='Download image as PNG file' enterDelay={500} enterNextDelay={500} placement='top'>
<IconButton sx={{ display: "flex", flexDirection: "column" }}
color='neutral'
onClick={download}>
<CloudDownloadIcon />
<CloudDownload />
{/* <Typography variant='plain' sx={{ fontSize: '0.55rem' }}>download</Typography> */}
</IconButton>
</Tooltip>
);
}

function CloseLineageButton() {
const dispatch = useAppDispatch();
const closeLineage = () => {
dispatch(setLineageTabOpen(false))
}
return (
<Tooltip arrow title='Close lineage' enterDelay={500} enterNextDelay={500} placement='top'>
<IconButton sx={{ display: "flex", flexDirection: "column"}}
color='neutral'
onClick={closeLineage}>
<Close />
</IconButton>
</Tooltip>
)
}

function ShowAllButton() {
const rfi: ReactFlowInstance = useAppSelector(state => getRFI(state));
const handleOnClick = () => {
resetViewPort(rfi);
}

return (
<Tooltip arrow title='Show all' enterDelay={500} enterNextDelay={500} placement='right'>
<Tooltip arrow title='Show all' enterDelay={500} enterNextDelay={500} placement='top'>
<IconButton onClick={handleOnClick}>
<FitScreen />
</IconButton>
Expand All @@ -172,7 +191,7 @@ function CenterFocusButton() {
resetViewPortCentered(rfi, nodes);
}
return (
<Tooltip arrow title='Focus on central node' enterDelay={500} enterNextDelay={500} placement='right'>
<Tooltip arrow title='Focus on central node' enterDelay={500} enterNextDelay={500} placement='top'>
<IconButton onClick={handleOnClick}>
<FilterCenterFocusIcon />
</IconButton>
Expand Down Expand Up @@ -204,7 +223,7 @@ function RecomputeLayoutButton() {
}

return (
<Tooltip arrow title='Recompute layout' enterDelay={500} enterNextDelay={500} placement='right'>
<Tooltip arrow title='Recompute layout' enterDelay={500} enterNextDelay={500} placement='top'>
<IconButton onClick={handleOnClick}>
<Apps />
</IconButton>
Expand Down Expand Up @@ -261,7 +280,7 @@ function GroupingButton() {
return (
<Dropdown open={open} onOpenChange={handleOpenChange}>
<MenuButton endDecorator={<ArrowDropDown sx={{ position: 'absolute', bottom: 8, left: 25 }} />} sx={{ padding: 1, outline: '0 !important' }}>
<Tooltip arrow title='EXPERIMENTAL: Show grouping options' enterDelay={500} enterNextDelay={500} placement='right'>
<Tooltip arrow title='EXPERIMENTAL: Show grouping options' enterDelay={500} enterNextDelay={500} placement='top'>
<WorkspacesIcon />
</Tooltip>
</MenuButton>
Expand Down Expand Up @@ -388,7 +407,7 @@ export const NodeSearchButton = () => {
return (
<Dropdown open={open} onOpenChange={handleOpenChange} >
<MenuButton endDecorator={<ArrowDropDown sx={{ position: 'absolute', bottom: 8, left: 25 }} />} sx={{ padding: 1, outline: '0 !important' }}>
<Tooltip arrow title={<>Search node. By default node name must contain search expr,<br/> but you can add 'prefix:' or 'suffix:' at the start to modify behaviour.</>} enterDelay={500} enterNextDelay={500} placement='right'>
<Tooltip arrow title={<>Search node. By default node name must contain search expr,<br/> but you can add 'prefix:' or 'suffix:' at the start to modify behaviour.</>} enterDelay={500} enterNextDelay={500} placement='top'>
<Search />
</Tooltip>
</MenuButton>
Expand Down Expand Up @@ -440,6 +459,7 @@ export default function LineageGraphToolbar() {
<Divider orientation="vertical" />
<ToggleButtonGroup variant="plain" spacing={0.1}>
<DownloadLineageButton />
<CloseLineageButton />
</ToggleButtonGroup>
</Box>
</Draggable>
Expand Down
Loading