diff options
author | Kristóf Marussy <kristof@marussy.com> | 2024-04-27 01:34:45 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2024-04-27 01:34:45 +0200 |
commit | 226deb4d9861ed9e020ca2f0e866e4b95790c4be (patch) | |
tree | ea74d132412c2b4cf4a90cbda4e9bc8c0a723135 | |
parent | refactor(frontend): improve key bindings (diff) | |
download | refinery-226deb4d9861ed9e020ca2f0e866e4b95790c4be.tar.gz refinery-226deb4d9861ed9e020ca2f0e866e4b95790c4be.tar.zst refinery-226deb4d9861ed9e020ca2f0e866e4b95790c4be.zip |
refactor(fronted): add visibility checkbox tooltips
-rw-r--r-- | subprojects/frontend/src/graph/VisibilityPanel.tsx | 38 |
1 files changed, 23 insertions, 15 deletions
diff --git a/subprojects/frontend/src/graph/VisibilityPanel.tsx b/subprojects/frontend/src/graph/VisibilityPanel.tsx index 8474b7be..9d81e906 100644 --- a/subprojects/frontend/src/graph/VisibilityPanel.tsx +++ b/subprojects/frontend/src/graph/VisibilityPanel.tsx | |||
@@ -16,6 +16,7 @@ import Button from '@mui/material/Button'; | |||
16 | import Checkbox from '@mui/material/Checkbox'; | 16 | import Checkbox from '@mui/material/Checkbox'; |
17 | import FormControlLabel from '@mui/material/FormControlLabel'; | 17 | import FormControlLabel from '@mui/material/FormControlLabel'; |
18 | import Switch from '@mui/material/Switch'; | 18 | import Switch from '@mui/material/Switch'; |
19 | import Tooltip from '@mui/material/Tooltip'; | ||
19 | import { styled } from '@mui/material/styles'; | 20 | import { styled } from '@mui/material/styles'; |
20 | import { observer } from 'mobx-react-lite'; | 21 | import { observer } from 'mobx-react-lite'; |
21 | import { useCallback } from 'react'; | 22 | import { useCallback } from 'react'; |
@@ -146,23 +147,30 @@ function VisibilityPanel({ | |||
146 | const row = ( | 147 | const row = ( |
147 | <tr key={metadata.name}> | 148 | <tr key={metadata.name}> |
148 | <td> | 149 | <td> |
149 | <Checkbox | 150 | <Tooltip title="Show true and error values" placement="top"> |
150 | checked={visibility !== 'none'} | 151 | <Checkbox |
151 | aria-label={`Show true and error values of ${metadata.simpleName}`} | 152 | checked={visibility !== 'none'} |
152 | onClick={() => | 153 | aria-label={`Show true and error values of ${metadata.simpleName}`} |
153 | graph.setVisibility(name, visibility === 'none' ? 'must' : 'none') | 154 | onClick={() => |
154 | } | 155 | graph.setVisibility( |
155 | /> | 156 | name, |
157 | visibility === 'none' ? 'must' : 'none', | ||
158 | ) | ||
159 | } | ||
160 | /> | ||
161 | </Tooltip> | ||
156 | </td> | 162 | </td> |
157 | <td> | 163 | <td> |
158 | <Checkbox | 164 | <Tooltip title="Show all values" placement="top"> |
159 | checked={visibility === 'all'} | 165 | <Checkbox |
160 | disabled={!isVisibilityAllowed(metadata, 'all')} | 166 | checked={visibility === 'all'} |
161 | aria-label={`Show all values of ${metadata.simpleName}`} | 167 | disabled={!isVisibilityAllowed(metadata, 'all')} |
162 | onClick={() => | 168 | aria-label={`Show all values of ${metadata.simpleName}`} |
163 | graph.setVisibility(name, visibility === 'all' ? 'must' : 'all') | 169 | onClick={() => |
164 | } | 170 | graph.setVisibility(name, visibility === 'all' ? 'must' : 'all') |
165 | /> | 171 | } |
172 | /> | ||
173 | </Tooltip> | ||
166 | </td> | 174 | </td> |
167 | <td | 175 | <td |
168 | onClick={() => graph.cycleVisibility(name)} | 176 | onClick={() => graph.cycleVisibility(name)} |