Add grid overlay feature with configurable cell size and labels

css/app.css

@@ -1642,4 +1642,323 @@ thumbnail-slider img {
     min-width: 30px;
     padding: 0px;
     font-weight: bold;
-}
+}
+/* ========================================
+   Grid Control Panel
+   ======================================== */
+.ol-grid {
+    top: .5em;
+    left: 14.5em;
+}
+/* Hide the grid collapse button by default, show it when the grid control is enabled */
+.ol-control .grid-collapse-btn {
+    display: none;
+}
+.ol-control.enabled .grid-collapse-btn {
+    display: block;
+}
+
+.grid-toggle-btn {
+    flex: 1;
+    background-color: white;
+    border: 1px solid #ccc;
+    padding: 4px 8px;
+    cursor: pointer;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: normal;
+    color: #333;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+}
+
+.grid-toggle-btn:hover {
+    background-color: #f0f0f0;
+    border-color: #007bff;
+    color: #007bff;
+}
+
+/* Collapse Button */
+
+.grid-collapse-btn:hover {
+    background-color: #f0f0f0;
+    border-color: #007bff;
+    color: #007bff;
+}
+
+.ol-control .grid-collapse-btn {
+    width: 30px;
+    height: 30px;
+    font-size: 14px;
+    left: -1px;  /* collapse left border */
+    position: relative;
+}
+/* rotate to toggle up/down arrow */
+.panel-open .grid-collapse-btn {
+    transform: rotate(180deg);
+}
+
+.grid-controls {
+    position: absolute;
+    top: 35px;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+    animation: slideDown 0.2s ease;
+    min-width: 220px;
+    background-color: white;
+    display: none;
+}
+
+.panel-open.enabled .grid-controls {
+    display: block;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        max-height: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        max-height: 500px;
+        transform: translateY(0);
+    }
+}
+
+.grid-control-item {
+    margin-bottom: 12px;
+}
+
+.grid-control-item:last-child {
+    margin-bottom: 0;
+}
+
+.grid-control-item label {
+    display: block;
+    font-size: 11px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 4px;
+}
+
+/* Grid Input Group */
+.grid-input-group {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin-bottom: 4px;
+}
+
+.grid-number-input {
+    width: 70px;
+    padding: 4px 6px;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    font-size: 11px;
+    text-align: center;
+    font-weight: bold;
+}
+
+.grid-number-input:focus {
+    outline: none;
+    border-color: #007bff;
+    box-shadow: 0 0 0 2px rgba(0,123,255,0.1);
+}
+
+.grid-number-input::-webkit-inner-spin-button,
+.grid-number-input::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.grid-number-input {
+    -moz-appearance: textfield;
+}
+
+.grid-slider {
+    flex: 1;
+    height: 4px;
+    border-radius: 2px;
+    background: #ddd;
+    outline: none;
+    cursor: pointer;
+    -webkit-appearance: none;
+}
+
+.grid-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #007bff;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.grid-slider::-webkit-slider-thumb:hover {
+    background: #0056b3;
+    transform: scale(1.1);
+}
+
+.grid-slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #007bff;
+    cursor: pointer;
+    border: none;
+    transition: all 0.2s ease;
+}
+
+.grid-slider::-moz-range-thumb:hover {
+    background: #0056b3;
+    transform: scale(1.1);
+}
+
+.grid-control-item input[type="checkbox"] {
+    margin-right: 6px;
+    cursor: pointer;
+    width: 14px;
+    height: 14px;
+    vertical-align: middle;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .grid-control-panel {
+        min-width: 180px;
+        top: 5px;
+        left: 200px;
+    }
+
+    .grid-toggle-btn {
+        font-size: 10px;
+        padding: 3px 6px;
+    }
+
+    .grid-control-item label {
+        font-size: 10px;
+    }
+}
+/* ========================================
+   Disable Grid Interaction (Allow clicks through)
+   ======================================== */
+.grid-overlay-layer,
+.grid-label-layer {
+    pointer-events: none !important;
+}
+
+.grid-overlay-layer canvas,
+.grid-label-layer canvas {
+    pointer-events: none !important;
+}
+
+/* Ensure viewer remains interactive */
+.viewer {
+    pointer-events: auto;
+}
+
+.viewer-container {
+    pointer-events: auto;
+}
+
+/* Ensure control panel IS clickable */
+.grid-control-panel {
+    pointer-events: auto !important;
+}
+
+.grid-control-panel * {
+    pointer-events: auto !important;
+}
+
+.grid-preset-buttons {
+    display: flex;
+    gap: 5px;
+}
+
+.grid-preset-btn {
+    flex: 1;
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    background: white;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: all 0.2s;
+}
+
+.grid-preset-btn:hover {
+    background: #f0f0f0;
+}
+
+.grid-preset-btn.active {
+    background: #007bff;
+    color: white;
+    border-color: #007bff;
+}
+
+/* Grid Input Group */
+.grid-input-group {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    margin-bottom: 5px;
+}
+
+.grid-number-input {
+    width: 80px;
+    padding: 5px 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 13px;
+    text-align: center;
+    font-weight: bold;
+}
+
+.grid-number-input:focus {
+    outline: none;
+    border-color: #007bff;
+    box-shadow: 0 0 0 2px rgba(0,123,255,0.1);
+}
+
+/* Remove spinner arrows in number input */
+.grid-number-input::-webkit-inner-spin-button,
+.grid-number-input::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.grid-number-input {
+    -moz-appearance: textfield;
+}
+
+.grid-slider {
+    flex: 1;
+}
+
+.grid-linewidth-group {
+    display: flex;
+    gap: 4px;
+}
+.grid-linewidth-group input[type="radio"] {
+    display: none;
+}
+.grid-linewidth-group label {
+    flex: 1;
+    padding: 4px 0;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    background: white;
+    font-size: 11px;
+    text-align: center;
+    cursor: pointer;
+}
+.grid-linewidth-group label:has(input:checked) {
+    border-color: #007bff;
+    color: #007bff;
+    background: #eaf3ff;
+}

src/model/image_config.js

@@ -94,7 +94,7 @@ export default class ImageConfig extends History {
      * @memberof ImageConfig
      * @type {Object}
      */
-    size = {width: '435px', height: '435px'};
+    size = {width: '500px', height: '500px'};
 
     /**
      * show histogram flag

src/viewers/viewer/Viewer.js

@@ -67,6 +67,7 @@ import OmeroImage from './source/Image';
 import Regions from './source/Regions';
 import Mask from './geom/Mask';
 import Mirror from './controls/Mirror';
+import Grid from './controls/Grid';
 import { REQUEST_PARAMS } from '../../utils/constants';
 
 /**
@@ -624,6 +625,9 @@ class Viewer extends OlObject {
                 flipY: initialFlipY
             })
         }
+
+        // link the grid control to the viewer if requested
+        this.addControl('grid');
 
         // tweak source element for fullscreen to include dim sliders (iviewer only)
         var targetId = this.getTargetId();