diff options
-rw-r--r-- | subprojects/frontend/src/graph/VisibilityDialog.tsx | 59 |
1 files changed, 40 insertions, 19 deletions
diff --git a/subprojects/frontend/src/graph/VisibilityDialog.tsx b/subprojects/frontend/src/graph/VisibilityDialog.tsx index b28ba31a..5c459fd1 100644 --- a/subprojects/frontend/src/graph/VisibilityDialog.tsx +++ b/subprojects/frontend/src/graph/VisibilityDialog.tsx | |||
@@ -15,8 +15,10 @@ import Checkbox from '@mui/material/Checkbox'; | |||
15 | import FormControlLabel from '@mui/material/FormControlLabel'; | 15 | import FormControlLabel from '@mui/material/FormControlLabel'; |
16 | import IconButton from '@mui/material/IconButton'; | 16 | import IconButton from '@mui/material/IconButton'; |
17 | import Switch from '@mui/material/Switch'; | 17 | import Switch from '@mui/material/Switch'; |
18 | import Typography from '@mui/material/Typography'; | ||
18 | import { styled } from '@mui/material/styles'; | 19 | import { styled } from '@mui/material/styles'; |
19 | import { observer } from 'mobx-react-lite'; | 20 | import { observer } from 'mobx-react-lite'; |
21 | import { useId } from 'react'; | ||
20 | 22 | ||
21 | import type GraphStore from './GraphStore'; | 23 | import type GraphStore from './GraphStore'; |
22 | import { isVisibilityAllowed } from './GraphStore'; | 24 | import { isVisibilityAllowed } from './GraphStore'; |
@@ -32,14 +34,15 @@ const VisibilityDialogRoot = styled('div', { | |||
32 | maxWidth: '100%', | 34 | maxWidth: '100%', |
33 | overflow: 'hidden', | 35 | overflow: 'hidden', |
34 | display: 'flex', | 36 | display: 'flex', |
35 | padding: theme.spacing(2), | ||
36 | flexDirection: 'column', | 37 | flexDirection: 'column', |
37 | '.VisibilityDialog-switch': { | 38 | '.VisibilityDialog-title': { |
38 | display: 'flex', | 39 | display: 'flex', |
39 | flexDirection: 'row', | 40 | flexDirection: 'row', |
40 | paddingLeft: theme.spacing(1), | 41 | alignItems: 'center', |
41 | marginBottom: theme.spacing(1), | 42 | padding: theme.spacing(1), |
42 | '.MuiFormControlLabel-root': { | 43 | paddingLeft: theme.spacing(2), |
44 | borderBottom: `1px solid ${theme.palette.divider}`, | ||
45 | '& h2': { | ||
43 | flexGrow: 1, | 46 | flexGrow: 1, |
44 | }, | 47 | }, |
45 | '.MuiIconButton-root': { | 48 | '.MuiIconButton-root': { |
@@ -48,12 +51,18 @@ const VisibilityDialogRoot = styled('div', { | |||
48 | marginLeft: theme.spacing(2), | 51 | marginLeft: theme.spacing(2), |
49 | }, | 52 | }, |
50 | }, | 53 | }, |
54 | '.MuiFormControlLabel-root': { | ||
55 | marginLeft: 0, | ||
56 | paddingTop: theme.spacing(1), | ||
57 | paddingLeft: theme.spacing(1), | ||
58 | }, | ||
51 | '.VisibilityDialog-scroll': { | 59 | '.VisibilityDialog-scroll': { |
52 | display: 'flex', | 60 | display: 'flex', |
53 | flexDirection: 'column', | 61 | flexDirection: 'column', |
54 | height: 'auto', | 62 | height: 'auto', |
55 | overflowX: 'hidden', | 63 | overflowX: 'hidden', |
56 | overflowY: 'auto', | 64 | overflowY: 'auto', |
65 | margin: `0 ${theme.spacing(2)}`, | ||
57 | '& table': { | 66 | '& table': { |
58 | // We use flexbox instead of `display: table` to get proper text-overflow | 67 | // We use flexbox instead of `display: table` to get proper text-overflow |
59 | // behavior for overly long relation names. | 68 | // behavior for overly long relation names. |
@@ -135,10 +144,16 @@ const VisibilityDialogRoot = styled('div', { | |||
135 | textOverflow: 'ellipsis', | 144 | textOverflow: 'ellipsis', |
136 | }, | 145 | }, |
137 | '.VisibilityDialog-buttons': { | 146 | '.VisibilityDialog-buttons': { |
138 | marginTop: theme.spacing(2), | 147 | padding: theme.spacing(1), |
139 | display: 'flex', | 148 | display: 'flex', |
140 | flexDirection: 'row', | 149 | flexDirection: 'row', |
141 | justifyContent: 'flex-end', | 150 | justifyContent: 'flex-end', |
151 | ...(dialog | ||
152 | ? { | ||
153 | marginTop: theme.spacing(1), | ||
154 | borderTop: `1px solid ${theme.palette.divider}`, | ||
155 | } | ||
156 | : {}), | ||
142 | }, | 157 | }, |
143 | '.VisibilityDialog-empty': { | 158 | '.VisibilityDialog-empty': { |
144 | display: 'flex', | 159 | display: 'flex', |
@@ -162,6 +177,8 @@ function VisibilityDialog({ | |||
162 | close: () => void; | 177 | close: () => void; |
163 | dialog?: boolean; | 178 | dialog?: boolean; |
164 | }): JSX.Element { | 179 | }): JSX.Element { |
180 | const titleId = useId(); | ||
181 | |||
165 | const builtinRows: JSX.Element[] = []; | 182 | const builtinRows: JSX.Element[] = []; |
166 | const rows: JSX.Element[] = []; | 183 | const rows: JSX.Element[] = []; |
167 | graph.relationMetadata.forEach((metadata, name) => { | 184 | graph.relationMetadata.forEach((metadata, name) => { |
@@ -209,23 +226,27 @@ function VisibilityDialog({ | |||
209 | return ( | 226 | return ( |
210 | <VisibilityDialogRoot | 227 | <VisibilityDialogRoot |
211 | dialog={dialog ?? VisibilityDialog.defaultProps.dialog} | 228 | dialog={dialog ?? VisibilityDialog.defaultProps.dialog} |
229 | aria-labelledby={dialog ? titleId : undefined} | ||
212 | > | 230 | > |
213 | <div className="VisibilityDialog-switch"> | 231 | {dialog && ( |
214 | <FormControlLabel | 232 | <div className="VisibilityDialog-title"> |
215 | control={ | 233 | <Typography variant="h6" component="h2" id={titleId}> |
216 | <Switch | 234 | Customize view |
217 | checked={!graph.abbreviate} | 235 | </Typography> |
218 | onClick={() => graph.toggleAbbrevaite()} | ||
219 | /> | ||
220 | } | ||
221 | label="Fully qualified names" | ||
222 | /> | ||
223 | {dialog && ( | ||
224 | <IconButton aria-label="Close" onClick={close}> | 236 | <IconButton aria-label="Close" onClick={close}> |
225 | <CloseIcon /> | 237 | <CloseIcon /> |
226 | </IconButton> | 238 | </IconButton> |
227 | )} | 239 | </div> |
228 | </div> | 240 | )} |
241 | <FormControlLabel | ||
242 | control={ | ||
243 | <Switch | ||
244 | checked={!graph.abbreviate} | ||
245 | onClick={() => graph.toggleAbbrevaite()} | ||
246 | /> | ||
247 | } | ||
248 | label="Fully qualified names" | ||
249 | /> | ||
229 | <div className="VisibilityDialog-scroll"> | 250 | <div className="VisibilityDialog-scroll"> |
230 | {hasRows ? ( | 251 | {hasRows ? ( |
231 | <table cellSpacing={0}> | 252 | <table cellSpacing={0}> |