1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
/*
* SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
*
* SPDX-License-Identifier: EPL-2.0
*/
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import TuneIcon from '@mui/icons-material/Tune';
import Badge from '@mui/material/Badge';
import Dialog from '@mui/material/Dialog';
import IconButton from '@mui/material/IconButton';
import Paper from '@mui/material/Paper';
import Slide from '@mui/material/Slide';
import { styled } from '@mui/material/styles';
import { observer } from 'mobx-react-lite';
import { useCallback, useId, useState } from 'react';
import type GraphStore from './GraphStore';
import VisibilityDialog from './VisibilityDialog';
const VisibilityPanelRoot = styled('div', {
name: 'VisibilityPanel-Root',
})(({ theme }) => ({
position: 'absolute',
padding: theme.spacing(1),
top: 0,
left: 0,
maxHeight: '100%',
maxWidth: '100%',
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
alignItems: 'start',
'.VisibilityPanel-drawer': {
overflow: 'hidden',
display: 'flex',
maxWidth: '100%',
margin: theme.spacing(1),
},
}));
function VisibilityPanel({
graph,
dialog,
}: {
graph: GraphStore;
dialog: boolean;
}): JSX.Element {
const id = useId();
const [showFilter, setShowFilter] = useState(false);
const close = useCallback(() => setShowFilter(false), []);
return (
<VisibilityPanelRoot>
<IconButton
role="switch"
aria-checked={showFilter}
aria-controls={dialog ? undefined : id}
aria-label="Show filter panel"
onClick={() => setShowFilter(!showFilter)}
>
<Badge
color="primary"
variant="dot"
invisible={graph.visibility.size === 0}
>
{showFilter && !dialog ? <ChevronLeftIcon /> : <TuneIcon />}
</Badge>
</IconButton>
{dialog ? (
<Dialog open={showFilter} onClose={close} maxWidth="xl">
<VisibilityDialog graph={graph} close={close} dialog />
</Dialog>
) : (
<Slide
direction="right"
in={showFilter}
id={id}
mountOnEnter
unmountOnExit
>
<Paper className="VisibilityPanel-drawer" elevation={4}>
<VisibilityDialog graph={graph} close={close} />
</Paper>
</Slide>
)}
</VisibilityPanelRoot>
);
}
export default observer(VisibilityPanel);
|
