# Checklist: Cosa Ispezionare nel DOM Live

Questa checklist guida l'ispezione del DOM quando un sintomo visivo di griglia è presente. L'obiettivo è raccogliere evidenze concrete per formulare un'ipotesi di fix, non fare diagnosi sommaria.

## A. Bounding Rect e Geometria

Esegui nel browser console, per ogni elemento chiave della griglia (container, scrollbar, header, righe, footer):

```javascript
// Esempio: container griglia
const gridContainer = document.querySelector('.grid-main-container');
const rect = gridContainer.getBoundingClientRect();
console.log({
  top: rect.top,
  left: rect.left,
  width: rect.width,
  height: rect.height,
  bottom: rect.bottom,
  right: rect.right,
  x: rect.x,
  y: rect.y
});
```

**Elementi da ispezionare**:
- Container principale della griglia
- Scrollbar (se visibile separatamente, es. `.grid-scrollbar` o similar)
- Header della griglia
- Primeira riga visibile nel viewport virtualizzato
- Última riga visibile nel viewport virtualizzato
- Footer/Summary della griglia
- Contenitore parent della griglia

**Cosa cercare**:
- Le dimensioni sono positive? (width > 0, height > 0)
- Il container è completamente dentro la viewport (top >= 0, left >= 0)?
- L'altezza totale è coerente con il numero di righe visualizzate (altura * numero_righe ≈ altezza_container)?
- La scrollbar ha larghezza positiva? È allineata al bordo destro del container?
- Il footer appare sotto l'ultima riga, non sovrapposto?

---

## B. Computed Style e Proprietà CSS Critiche

Per ogni elemento, esegui nel console:

```javascript
const el = document.querySelector('.grid-container');
const styles = getComputedStyle(el);
console.log({
  overflow: styles.overflow,
  overflowX: styles.overflowX,
  overflowY: styles.overflowY,
  position: styles.position,
  display: styles.display,
  zIndex: styles.zIndex,
  width: styles.width,
  height: styles.height,
  padding: styles.padding,
  border: styles.border,
  boxSizing: styles.boxSizing,
  willChange: styles.willChange,
  transform: styles.transform,
  visibility: styles.visibility,
  opacity: styles.opacity
});
```

**Proprietà prioritarie da verificare**:

- **`overflow`**: deve essere `auto` o `hidden` per il container griglia, non `visible`. Se è `visible`, la scrollbar potrebbe renderizzarsi oltre i confini.
- **`position`**: deve essere `relative` o `absolute` se il container usa calcoli di posizione figli, altrimenti `static` va bene. Se è `fixed`, controllare che sia intenzionale.
- **`display`**: deve essere `block`, `flex`, o `grid`, non `inline` o `inline-block`. Se è `none`, il componente non è renderizzato.
- **`box-sizing`**: deve essere `border-box` se il container include padding/border nel calcolo di width/height (best practice). Se è `content-box`, i calcoli di larghezza potrebbero essere sfalsati.
- **`z-index`**: se il container ha `z-index` esplicito (es. 1 o 10), verificare che non sia in conflitto con elementi overlay vicini (header sticky, tooltip, modal).
- **`transform`**: se è applicato (es. `translateY()`), ricordare che `getBoundingClientRect()` lo include. Se il componente usa virtualizzazione con transform, il calcolo di drag/scroll potrebbe essere complicato.
- **`will-change`**: se impostato (es. `will-change: scroll-position`), potrebbe forzare un layer di compositing separato; utile per performance ma potrebbe causare stacking context inattesi.

**Cosa cercare**:
- `overflow` è impostato correttamente?
- `box-sizing` è `border-box`?
- Ci sono conflitti di `z-index` con elementi vicini?
- `display` è un valore sensato (non `none`)?

---

## C. Classi CSS e Stato del Componente

Ispeziona le classi applicate all'elemento:

```javascript
const el = document.querySelector('.grid-container');
console.log('Classes:', el.className);
console.log('Class list:', Array.from(el.classList).join(', '));
// Se il componente espone state via attributi data:
console.log('Data attributes:', {
  isLoading: el.dataset.isLoading,
  isVirtualized: el.dataset.isVirtualized,
  rowCount: el.dataset.rowCount,
  selectedRow: el.dataset.selectedRow
});
```

**Cosa cercare**:
- Quali classi sono applicate? (es. `.grid-loading`, `.grid-virtualized`, `.grid-error`)
- Ci sono classi condizionali che applicano CSS nascosto o di fallback? (es. `.grid-loading { display: none; }`)
- Ci sono state flag via attributi `data-*` che indicano se il componente è pronto? (es. `data-initialized="false"`)
- Se una classe di "loading" è applicata, dovrebbe essere rimossa dopo il caricamento dei dati?

---

## D. Stato del Componente Griglia (API del Componente)

**Sezione opzionale e vendor-specific.** L'esempio sotto usa l'API DevExpress (`DXGrid`) perche' e' lo stack su cui questa skill e' stata validata la prima volta; se la griglia usa un'altra libreria (AG Grid, MUI DataGrid, Kendo/Telerik, react-window, ecc.), sostituisci con l'equivalente API di quella libreria, o salta questa sezione e usa solo il fallback generico in fondo (spesso sufficiente: bounding rect + computed style delle sezioni A-B coprono la maggior parte delle diagnosi senza bisogno dell'API interna del componente).

Se il componente espone metodi o proprietà, prova a ispezionare lo stato:

```javascript
// Esempio per griglie Blazor con DevExpress:
const grid = document.querySelector('[data-grid-instance]');
if (window.DXGrid && window.DXGrid.GetGridInstance) {
  const gridInstance = window.DXGrid.GetGridInstance(grid);
  console.log({
    isInitialized: gridInstance.isInitialized,
    selectedRows: gridInstance.selection.GetSelectedRowKeys(),
    visibleRowCount: gridInstance.GetVisibleRowsCount(),
    totalRowCount: gridInstance.GetRowsCount(),
    verticalScrollPosition: gridInstance.GetVerticalScrollPosition(),
    // ... altre proprietà dipendenti dalla API specifica
  });
}

// Generico: verifica se il componente ha una proprietà di stato
console.log('Grid instance:', grid.__vue__ || grid.__reactInternals || window.gridInstance);
```

**Cosa cercare**:
- Il componente è inizializzato? (flag `isInitialized`, `isReady`, o simile)
- I dati sono stati caricati? (numero di righe > 0, nessun loading flag attivo)
- La virtualizzazione è attiva? (flag `isVirtualized`, numero di righe visibili vs totali)
- Qual è la posizione di scroll attuale? (in relazione al numero totale di righe)
- Ci sono row selezionate? (potrebbe influenzare il CSS di highlight)

---

## E. Timing di Mount vs Disponibilità Dati

Raccogli evidenze sul timing di rendering:

```javascript
// Crea un listener per capire l'ordine di mount
const gridContainer = document.querySelector('.grid-container');
const observer = new MutationObserver((mutations) => {
  console.log('DOM changed:', mutations[0]);
});
observer.observe(gridContainer, { childList: true, subtree: true });

// Esegui un full reload della pagina, osserva i log della console
// Rileva l'ordine di: 1) apparizione container, 2) caricamento dati, 3) rendering righe

// Se il componente ha log/debug, abilita
console.log('Timeline:', performance.getEntriesByType('measure'));
```

**Cosa cercare**:
- Il container griglia appare prima dei dati? (potrebbe causare glitch di sizing)
- Il footer viene renderizzato prima che le righe siano caricate? (potrebbe causare flicker)
- Ci sono delay significativi tra il mount del container e il rendering del primo contenuto?
- Il componente dispara un evento di "ready" o "initialized" dopo il mount completo?

---

## F. Scrollbar Internals (se virtualizzata)

Se la griglia usa virtualizzazione interna (es. react-window, ag-Grid virtualized):

```javascript
const scrollContainer = document.querySelector('.grid-virtual-scroll-container');
if (scrollContainer) {
  console.log({
    scrollHeight: scrollContainer.scrollHeight,   // altezza totale scrollabile
    clientHeight: scrollContainer.clientHeight,   // altezza visibile
    scrollTop: scrollContainer.scrollTop,         // posizione scroll attuale
    scrollLeft: scrollContainer.scrollLeft,
    // Se la virtualizzazione è implementata manualmente:
    scrollOffset: scrollContainer.dataset.scrollOffset,
    estimatedRowHeight: scrollContainer.dataset.rowHeight
  });
}
```

**Cosa cercare**:
- `scrollHeight > clientHeight`? (deve esserci spazio scrollabile)
- La posizione di scroll (`scrollTop`) è valida? (0 <= scrollTop <= scrollHeight - clientHeight)
- L'altezza stimata di riga è realistica? (confronta con altezza effettiva di una riga via `getBoundingClientRect()`)
- Ci sono elementi di virtual spacer (placeholder per righe non renderizzate)? Hanno altezza positiva?

---

## G. Overlay e Pointer Events

Se il sintomo riguarda drag, click, o interazione in generale:

```javascript
const elements = document.elementsFromPoint(mouseX, mouseY);
console.log('Elements at mouse position:', elements);
elements.forEach((el, i) => {
  console.log(`[${i}]`, el.tagName, el.className, getComputedStyle(el).pointerEvents, getComputedStyle(el).zIndex);
});
```

**Cosa cercare**:
- Esiste un overlay (loader, tooltip, modal) sopra la griglia?
- L'overlay ha `pointer-events: none`? (se sì, il drag dovrebbe passare attraverso)
- C'è un ordine di z-index coerente fra gli elementi?
- Ci sono elementi con `pointer-events: none` che dovrebbero avere `pointer-events: auto`?

---

## Checklist di Esecuzione

1. **Riproduci il sintomo**: naviga alla pagina, attendi il primo render, cattura screenshot.
2. **Apri console browser** e esegui i blocchi A-G sopra per l'elemento principale interessato dal sintomo.
3. **Confronta con valori attesi**:
   - Se è un flicker di footer: il footer ha `top`/`bottom` corretto e non è sovrapposto a righe?
   - Se è un glitch di layout: i container hanno width/height > 0?
   - Se è una scrollbar storta: il container ha `overflow: auto` e altezza coerente?
   - Se è drag rotto: esiste un overlay? Gli elementi hanno `pointer-events` corretto?
4. **Raccogli screenshot aggiuntivi** se necessario (es. prima e dopo hover, prima e dopo un'azione del mouse).
5. **Documenta le evidenze** nel tuo documento di "genesi e tentativi", con copia/incolla dei valori del DOM ispezionati.