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