From 226deb4d9861ed9e020ca2f0e866e4b95790c4be Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Sat, 27 Apr 2024 01:34:45 +0200
Subject: refactor(fronted): add visibility checkbox tooltips

---
 subprojects/frontend/src/graph/VisibilityPanel.tsx | 38 +++++++++++++---------
 1 file changed, 23 insertions(+), 15 deletions(-)

(limited to 'subprojects/frontend')

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';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
+import Tooltip from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import { useCallback } from 'react';
@@ -146,23 +147,30 @@ function VisibilityPanel({
     const row = (
       <tr key={metadata.name}>
         <td>
-          <Checkbox
-            checked={visibility !== 'none'}
-            aria-label={`Show true and error values of ${metadata.simpleName}`}
-            onClick={() =>
-              graph.setVisibility(name, visibility === 'none' ? 'must' : 'none')
-            }
-          />
+          <Tooltip title="Show true and error values" placement="top">
+            <Checkbox
+              checked={visibility !== 'none'}
+              aria-label={`Show true and error values of ${metadata.simpleName}`}
+              onClick={() =>
+                graph.setVisibility(
+                  name,
+                  visibility === 'none' ? 'must' : 'none',
+                )
+              }
+            />
+          </Tooltip>
         </td>
         <td>
-          <Checkbox
-            checked={visibility === 'all'}
-            disabled={!isVisibilityAllowed(metadata, 'all')}
-            aria-label={`Show all values of ${metadata.simpleName}`}
-            onClick={() =>
-              graph.setVisibility(name, visibility === 'all' ? 'must' : 'all')
-            }
-          />
+          <Tooltip title="Show all values" placement="top">
+            <Checkbox
+              checked={visibility === 'all'}
+              disabled={!isVisibilityAllowed(metadata, 'all')}
+              aria-label={`Show all values of ${metadata.simpleName}`}
+              onClick={() =>
+                graph.setVisibility(name, visibility === 'all' ? 'must' : 'all')
+              }
+            />
+          </Tooltip>
         </td>
         <td
           onClick={() => graph.cycleVisibility(name)}
-- 
cgit v1.2.3-54-g00ecf