Changes to GridForm styling

using data attributes to override bootstrap css added tooltip for Show/Hide button changed color for hidden grids make hidden grid's text italic
mxcube · Nov 6, 2024 · 9d87de0 · 9d87de0
1 parent 0bfb6ef
commit 9d87de0
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 25 deletions.
diff --git a/poetry.lock b/poetry.lock
diff --git a/pyproject.toml b/pyproject.toml
@@ -41,7 +41,7 @@ pydantic = ">=2.8.2,<2.9.0"
 PyDispatcher = "^2.0.6"
 pytz = "^2022.6"
 tzlocal = "^4.2"
-mxcubecore = ">=1.183.0"
+mxcubecore = ">=1.188.0"
 mxcube-video-streamer = ">=1.5.0"
 
 [tool.poetry.group.dev.dependencies]

diff --git a/requirements.txt b/requirements.txt
@@ -857,9 +857,9 @@ mock==4.0.3 ; python_version >= "3.8" and python_version < "3.12" \
 mxcube-video-streamer==1.5.0 ; python_version >= "3.8" and python_version < "3.12" \
     --hash=sha256:998a8a909e9b69a55bb3776e56ae7725479ec3b196990bf15f6849c3fb824f37 \
     --hash=sha256:fd9d337aad522f60b69182050f9ddfe81d3d2490c2bc8e86ccc669f3e5855718
-mxcubecore==1.183.0 ; python_version >= "3.8" and python_version < "3.12" \
-    --hash=sha256:a82383fc4b3059313c1e58b46f282c0b7ab134e2ebc433d99cdff0157f9beaa0 \
-    --hash=sha256:c2ad371d361608e4273b7c9060541dd5608b94030789f066eab3266c50ed63d3
+mxcubecore==1.188.0 ; python_version >= "3.8" and python_version < "3.12" \
+    --hash=sha256:3898180aeb55a70e65e4f5be6524e2a884f3aadc8a4eb955b656af15f7194eec \
+    --hash=sha256:5cb10c808719e0817ba7c1bcd04c2f07343cd30bbe7d411c2bdfbad7fb95c74a
 numpy==1.24.4 ; python_version >= "3.8" and python_version < "3.12" \
     --hash=sha256:04640dab83f7c6c85abf9cd729c5b65f1ebd0ccf9de90b270cd61935eef0197f \
     --hash=sha256:1452241c290f3e2a312c137a9999cdbf63f78864d63c79039bda65ee86943f61 \

diff --git a/ui/src/components/SampleView/GridForm.jsx b/ui/src/components/SampleView/GridForm.jsx
@@ -5,10 +5,27 @@ import Draggable from 'react-draggable';
 
 import './SampleView.css';
 import { useSelector } from 'react-redux';
+import TooltipTrigger from '../TooltipTrigger';
 
 function handleContextMenu(e) {
   e.stopPropagation();
 }
+/**
+ * Returns the tooltip content for the hide button
+ *
+ * @param {boolean} userHidden - if the grid is hidden by the user
+ * @param {boolean} autoHidden - if the grid is hidden automatically (out of view)
+ * @returns {string} - the tooltip content
+ */
+function getHideButtonTooltip(userHidden, autoHidden) {
+  if (userHidden) {
+    return 'Grid is hidden by user';
+  }
+  if (autoHidden) {
+    return 'Grid is out of view';
+  }
+  return 'Hide grid';
+}
 
 export default function GridForm(props) {
   const {
@@ -57,14 +74,15 @@ export default function GridForm(props) {
     const gridControlList = [];
 
     for (const grid of Object.values(gridList)) {
-      const selectedStyle = selectedGrids.includes(grid.id) ? 'selected' : '';
-      const hiddenStyle = grid.userState === 'HIDDEN' ? 'hid-by-user' : '';
       const vdim = grid.numRows * (grid.cellHeight + grid.cellVSpace);
       const hdim = grid.numCols * (grid.cellWidth + grid.cellHSpace);
-
+      const selected = selectedGrids.includes(grid.id);
+      const userHidden = grid.userState === 'HIDDEN';
+      const autoHidden = grid.state === 'HIDDEN' && !userHidden;
       gridControlList.push(
         <tr
-          className={`${selectedStyle} ${hiddenStyle}`}
+          data-selected={selected}
+          data-user-hidden={userHidden}
           key={grid.name}
           onClick={(e) => selectGrid([grid], e.ctrlKey)}
         >
@@ -94,16 +112,21 @@ export default function GridForm(props) {
             </Button>
           </td>
           <td>
-            <Button
-              size="sm"
-              variant="outline-secondary"
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleVisibility(grid.id);
-              }}
+            <TooltipTrigger
+              id={`grid-${grid.id}-visibility`}
+              tooltipContent={getHideButtonTooltip(userHidden, autoHidden)}
             >
-              {grid.state === 'HIDDEN' ? 'Show' : 'Hide '}
-            </Button>
+              <Button
+                size="sm"
+                variant="outline-secondary"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleVisibility(grid.id);
+                }}
+              >
+                {grid.state === 'HIDDEN' ? 'Show' : 'Hide '}
+              </Button>
+            </TooltipTrigger>
           </td>
           <td>
             <Button

diff --git a/ui/src/components/SampleView/SampleView.css b/ui/src/components/SampleView/SampleView.css
@@ -164,12 +164,13 @@
   border-radius: 4px;
 }
 
-.selected {
-  background-color: #dff0d8 !important;
+table.table-striped > tbody > tr[data-selected='true'] {
+  background-color: #dff0d8;
   color: #000;
   font-weight: bold;
 }
 
-.hid-by-user {
-  background-color: #aaa !important;
+table.table-striped > tbody > tr[data-user-hidden='true'] {
+  background-color: #a3ceff;
+  font-style: italic;
 }