From 68c1a5b1cf29a8191183a7dca2eb098af3c581b3 Mon Sep 17 00:00:00 2001
From: sBouzols <sylvain.bouzols@gmail.com>
Date: Thu, 29 Jan 2026 17:08:51 +0100
Subject: [PATCH 1/2] fix(Tooltips): console warning : "<div> cannot contain a
 nested <tr>" "<tr> cannot be a child of <table>"

Signed-off-by: sBouzols <sylvain.bouzols@gmail.com>
---
 .../generator-active-power-table.tsx          | 86 ++++++++++---------
 .../generator/generator-popover-content.tsx   | 44 ++++++----
 .../generator-voltage-regulation-table.tsx    | 28 +++---
 .../voltage-level-popover-bus-infos.tsx       |  1 +
 .../voltage-level-popover-infos.tsx           | 48 ++++++-----
 5 files changed, 110 insertions(+), 97 deletions(-)

diff --git a/src/components/tooltips/generator/generator-active-power-table.tsx b/src/components/tooltips/generator/generator-active-power-table.tsx
index 25f74c69e5..d6ce49960e 100644
--- a/src/components/tooltips/generator/generator-active-power-table.tsx
+++ b/src/components/tooltips/generator/generator-active-power-table.tsx
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Table, TableRow, TableContainer, Grid } from '@mui/material';
+import { Table, TableRow, TableContainer, Grid, TableBody } from '@mui/material';
 import { GeneratorEquipmentInfos } from '../equipment-popover-type';
 import { formatValue, styles } from '../generic-equipment-popover-utils';
 import { CellRender } from '../cell-render';
@@ -19,50 +19,52 @@ export const GeneratorActivePowerTable: React.FC<GeneratorActivePowerTableProps>
         <Grid item sx={styles.grid}>
             <TableContainer sx={styles.table}>
                 <Table size="small" sx={styles.layout}>
-                    <TableRow>
-                        <CellRender
-                            isLabel
-                            label="activePowerSetPointTooltip"
-                            colStyle={{ ...styles.cell, fontWeight: 'bold' }}
-                        />
-                        <CellRender
-                            value={formatValue(equipmentInfos.targetP && Math.round(equipmentInfos.targetP))}
-                            colStyle={styles.cell}
-                        />
-                    </TableRow>
+                    <TableBody>
+                        <TableRow>
+                            <CellRender
+                                isLabel
+                                label="activePowerSetPointTooltip"
+                                colStyle={{ ...styles.cell, fontWeight: 'bold' }}
+                            />
+                            <CellRender
+                                value={formatValue(equipmentInfos.targetP && Math.round(equipmentInfos.targetP))}
+                                colStyle={styles.cell}
+                            />
+                        </TableRow>
 
-                    <TableRow>
-                        <CellRender
-                            isLabel
-                            label="MinimumActivePowerTooltip"
-                            colStyle={{ ...styles.cell, fontWeight: 'bold' }}
-                        />
-                        <CellRender value={formatValue(Math.round(equipmentInfos.minP))} colStyle={styles.cell} />
-                    </TableRow>
+                        <TableRow>
+                            <CellRender
+                                isLabel
+                                label="MinimumActivePowerTooltip"
+                                colStyle={{ ...styles.cell, fontWeight: 'bold' }}
+                            />
+                            <CellRender value={formatValue(Math.round(equipmentInfos.minP))} colStyle={styles.cell} />
+                        </TableRow>
 
-                    <TableRow>
-                        <CellRender
-                            isLabel
-                            label="MaximumActivePowerTooltip"
-                            colStyle={{ ...styles.cell, fontWeight: 'bold' }}
-                        />
-                        <CellRender value={formatValue(Math.round(equipmentInfos.maxP))} colStyle={styles.cell} />
-                    </TableRow>
+                        <TableRow>
+                            <CellRender
+                                isLabel
+                                label="MaximumActivePowerTooltip"
+                                colStyle={{ ...styles.cell, fontWeight: 'bold' }}
+                            />
+                            <CellRender value={formatValue(Math.round(equipmentInfos.maxP))} colStyle={styles.cell} />
+                        </TableRow>
 
-                    <TableRow>
-                        <CellRender
-                            isLabel
-                            label="plannedActivePowerSetPointTooltip"
-                            colStyle={{ ...styles.cell, fontWeight: 'bold' }}
-                        />
-                        <CellRender
-                            value={formatValue(
-                                equipmentInfos.plannedActivePowerSetPoint &&
-                                    Math.round(equipmentInfos.plannedActivePowerSetPoint)
-                            )}
-                            colStyle={styles.cell}
-                        />
-                    </TableRow>
+                        <TableRow>
+                            <CellRender
+                                isLabel
+                                label="plannedActivePowerSetPointTooltip"
+                                colStyle={{ ...styles.cell, fontWeight: 'bold' }}
+                            />
+                            <CellRender
+                                value={formatValue(
+                                    equipmentInfos.plannedActivePowerSetPoint &&
+                                        Math.round(equipmentInfos.plannedActivePowerSetPoint)
+                                )}
+                                colStyle={styles.cell}
+                            />
+                        </TableRow>
+                    </TableBody>
                 </Table>
             </TableContainer>
         </Grid>
diff --git a/src/components/tooltips/generator/generator-popover-content.tsx b/src/components/tooltips/generator/generator-popover-content.tsx
index 2eb7b0b359..5b7b99c4ba 100644
--- a/src/components/tooltips/generator/generator-popover-content.tsx
+++ b/src/components/tooltips/generator/generator-popover-content.tsx
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Grid, Table, TableContainer, TableRow } from '@mui/material';
+import { Grid, Table, TableBody, TableContainer, TableRow } from '@mui/material';
 import { cellWithStatus, formatValue, styles } from '../generic-equipment-popover-utils';
 import { CellRender } from '../cell-render';
 import { GeneratorEquipmentInfos } from '../equipment-popover-type';
@@ -23,25 +23,31 @@ export const GeneratorPopoverContent: React.FC<GeneratorPopoverContentProps> = (
             <Grid item sx={styles.grid}>
                 <TableContainer sx={styles.table}>
                     <Table size="small" sx={styles.layout}>
-                        <TableRow>
-                            <CellRender isLabel label="ActivePower" colStyle={{ ...styles.cell, fontWeight: 'bold' }} />
-                            <CellRender
-                                value={formatValue(equipmentInfos.p && Math.round(equipmentInfos.p))}
-                                colStyle={cellWithStatus(loadFlowStatus)}
-                            />
-                        </TableRow>
+                        <TableBody>
+                            <TableRow>
+                                <CellRender
+                                    isLabel
+                                    label="ActivePower"
+                                    colStyle={{ ...styles.cell, fontWeight: 'bold' }}
+                                />
+                                <CellRender
+                                    value={formatValue(equipmentInfos.p && Math.round(equipmentInfos.p))}
+                                    colStyle={cellWithStatus(loadFlowStatus)}
+                                />
+                            </TableRow>
 
-                        <TableRow>
-                            <CellRender
-                                isLabel
-                                label="reactivePowerTooltip"
-                                colStyle={{ ...styles.cell, fontWeight: 'bold' }}
-                            />
-                            <CellRender
-                                value={formatValue(equipmentInfos.q && Math.round(equipmentInfos.q))}
-                                colStyle={cellWithStatus(loadFlowStatus)}
-                            />
-                        </TableRow>
+                            <TableRow>
+                                <CellRender
+                                    isLabel
+                                    label="reactivePowerTooltip"
+                                    colStyle={{ ...styles.cell, fontWeight: 'bold' }}
+                                />
+                                <CellRender
+                                    value={formatValue(equipmentInfos.q && Math.round(equipmentInfos.q))}
+                                    colStyle={cellWithStatus(loadFlowStatus)}
+                                />
+                            </TableRow>
+                        </TableBody>
                     </Table>
                 </TableContainer>
             </Grid>
diff --git a/src/components/tooltips/generator/generator-voltage-regulation-table.tsx b/src/components/tooltips/generator/generator-voltage-regulation-table.tsx
index 7913794008..19b2d83f89 100644
--- a/src/components/tooltips/generator/generator-voltage-regulation-table.tsx
+++ b/src/components/tooltips/generator/generator-voltage-regulation-table.tsx
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Table, TableRow, TableContainer, Grid } from '@mui/material';
+import { Table, TableRow, TableContainer, Grid, TableBody } from '@mui/material';
 import { GeneratorEquipmentInfos } from '../equipment-popover-type';
 import { styles } from '../generic-equipment-popover-utils';
 import { CellRender } from '../cell-render';
@@ -19,18 +19,20 @@ export const GeneratorVoltageRegulationTable: React.FC<GeneratorVoltageRegulatio
         <Grid item sx={styles.grid}>
             <TableContainer sx={styles.table}>
                 <Table size="small" sx={styles.layout}>
-                    <TableRow>
-                        <CellRender
-                            isLabel
-                            label="VoltageRegulation"
-                            colStyle={{ ...styles.cell, fontWeight: 'bold' }}
-                        />
-                        <CellRender
-                            isLabel
-                            label={equipmentInfos.voltageRegulatorOn ? 'yes' : 'no'}
-                            colStyle={styles.cell}
-                        />
-                    </TableRow>
+                    <TableBody>
+                        <TableRow>
+                            <CellRender
+                                isLabel
+                                label="VoltageRegulation"
+                                colStyle={{ ...styles.cell, fontWeight: 'bold' }}
+                            />
+                            <CellRender
+                                isLabel
+                                label={equipmentInfos.voltageRegulatorOn ? 'yes' : 'no'}
+                                colStyle={styles.cell}
+                            />
+                        </TableRow>
+                    </TableBody>
                 </Table>
             </TableContainer>
         </Grid>
diff --git a/src/components/tooltips/voltage-level/voltage-level-popover-bus-infos.tsx b/src/components/tooltips/voltage-level/voltage-level-popover-bus-infos.tsx
index f43ea0a895..bc49961171 100644
--- a/src/components/tooltips/voltage-level/voltage-level-popover-bus-infos.tsx
+++ b/src/components/tooltips/voltage-level/voltage-level-popover-bus-infos.tsx
@@ -51,6 +51,7 @@ export const VoltageLevelPopoverBusInfos = ({ buses }: { buses?: VoltageLevelToo
 
     return (
         <Grid item sx={genericStyles.grid}>
+            {/* Add TableContainer, Table and TableBody components here ? */}
             <TableRow>
                 <CellRender isLabel={true} label="" colStyle={{ ...genericStyles.cell, fontWeight: 'bold' }} />
                 {buses?.map((b) => (
diff --git a/src/components/tooltips/voltage-level/voltage-level-popover-infos.tsx b/src/components/tooltips/voltage-level/voltage-level-popover-infos.tsx
index 894a29609e..c1b7c51817 100644
--- a/src/components/tooltips/voltage-level/voltage-level-popover-infos.tsx
+++ b/src/components/tooltips/voltage-level/voltage-level-popover-infos.tsx
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Grid, Table, TableContainer, TableRow } from '@mui/material';
+import { Grid, Table, TableBody, TableContainer, TableRow } from '@mui/material';
 import { CellRender } from '../cell-render';
 import { formatValue, styles } from '../generic-equipment-popover-utils';
 import { VoltageLevelTooltipInfos } from '../equipment-popover-type';
@@ -15,28 +15,30 @@ export const VoltageLevelPopoverInfos = ({ equipmentInfos }: { equipmentInfos?:
         <Grid item sx={styles.grid}>
             <TableContainer>
                 <Table size="small" sx={styles.layout}>
-                    <TableRow>
-                        <CellRender
-                            isLabel={true}
-                            label="tooltip.umin"
-                            colStyle={{ ...styles.cell, fontWeight: 'bold' }}
-                        />
-                        <CellRender
-                            value={formatValue(equipmentInfos?.umin, 2)}
-                            colStyle={{ ...styles.cell, fontWeight: 'bold' }}
-                        />
-                    </TableRow>
-                    <TableRow>
-                        <CellRender
-                            isLabel={true}
-                            label="tooltip.umax"
-                            colStyle={{ ...styles.cell, fontWeight: 'bold' }}
-                        />
-                        <CellRender
-                            value={formatValue(equipmentInfos?.umax, 2)}
-                            colStyle={{ ...styles.cell, fontWeight: 'bold' }}
-                        />
-                    </TableRow>
+                    <TableBody>
+                        <TableRow>
+                            <CellRender
+                                isLabel={true}
+                                label="tooltip.umin"
+                                colStyle={{ ...styles.cell, fontWeight: 'bold' }}
+                            />
+                            <CellRender
+                                value={formatValue(equipmentInfos?.umin, 2)}
+                                colStyle={{ ...styles.cell, fontWeight: 'bold' }}
+                            />
+                        </TableRow>
+                        <TableRow>
+                            <CellRender
+                                isLabel={true}
+                                label="tooltip.umax"
+                                colStyle={{ ...styles.cell, fontWeight: 'bold' }}
+                            />
+                            <CellRender
+                                value={formatValue(equipmentInfos?.umax, 2)}
+                                colStyle={{ ...styles.cell, fontWeight: 'bold' }}
+                            />
+                        </TableRow>
+                    </TableBody>
                 </Table>
             </TableContainer>
         </Grid>

From 718ade71e2c7959d7ad2a89ac164ab6665b6e3c3 Mon Sep 17 00:00:00 2001
From: sBouzols <sylvain.bouzols@gmail.com>
Date: Fri, 30 Jan 2026 09:29:06 +0100
Subject: [PATCH 2/2] for vl popover bus infos as well

Signed-off-by: sBouzols <sylvain.bouzols@gmail.com>
---
 .../voltage-level-popover-bus-infos.tsx       | 85 +++++++++++--------
 1 file changed, 51 insertions(+), 34 deletions(-)

diff --git a/src/components/tooltips/voltage-level/voltage-level-popover-bus-infos.tsx b/src/components/tooltips/voltage-level/voltage-level-popover-bus-infos.tsx
index bc49961171..f0bb709a61 100644
--- a/src/components/tooltips/voltage-level/voltage-level-popover-bus-infos.tsx
+++ b/src/components/tooltips/voltage-level/voltage-level-popover-bus-infos.tsx
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Grid, TableRow } from '@mui/material';
+import { Grid, Table, TableBody, TableContainer, TableRow } from '@mui/material';
 import { VoltageLevelTooltipBusInfos } from '../equipment-popover-type';
 import { CellRender } from '../cell-render';
 import { formatValue, styles as genericStyles } from '../generic-equipment-popover-utils';
@@ -51,40 +51,57 @@ export const VoltageLevelPopoverBusInfos = ({ buses }: { buses?: VoltageLevelToo
 
     return (
         <Grid item sx={genericStyles.grid}>
-            {/* Add TableContainer, Table and TableBody components here ? */}
-            <TableRow>
-                <CellRender isLabel={true} label="" colStyle={{ ...genericStyles.cell, fontWeight: 'bold' }} />
-                {buses?.map((b) => (
-                    <CellRender key={b.id} value={`${b.id}`} colStyle={{ ...genericStyles.cell, fontWeight: 'bold' }} />
-                ))}
-            </TableRow>
+            <TableContainer>
+                <Table>
+                    <TableBody>
+                        <TableRow>
+                            <CellRender
+                                isLabel={true}
+                                label=""
+                                colStyle={{ ...genericStyles.cell, fontWeight: 'bold' }}
+                            />
+                            {buses?.map((b) => (
+                                <CellRender
+                                    key={b.id}
+                                    value={`${b.id}`}
+                                    colStyle={{ ...genericStyles.cell, fontWeight: 'bold' }}
+                                />
+                            ))}
+                        </TableRow>
 
-            {renderSpecificRow('tooltip.u', (bus) => bus.u, isLoadflowInvalid ? styles.invalidComputation : undefined)}
-            {renderSpecificRow(
-                'tooltip.angle',
-                (bus) => bus.angle,
-                isLoadflowInvalid ? styles.invalidComputation : undefined
-            )}
-            {renderSpecificRow(
-                'tooltip.generation',
-                (bus) => bus.generation,
-                isLoadflowInvalid ? styles.invalidComputation : undefined
-            )}
-            {renderSpecificRow(
-                'tooltip.load',
-                (bus) => bus.load,
-                isLoadflowInvalid ? styles.invalidComputation : undefined
-            )}
-            {renderSpecificRow(
-                'tooltip.balance',
-                (bus) => bus.balance,
-                isLoadflowInvalid ? styles.invalidComputation : undefined
-            )}
-            {renderSpecificRow(
-                'tooltip.icc',
-                (bus) => bus.icc / 1000,
-                isShortcircuitInvalid ? styles.invalidComputation : undefined
-            )}
+                        {renderSpecificRow(
+                            'tooltip.u',
+                            (bus) => bus.u,
+                            isLoadflowInvalid ? styles.invalidComputation : undefined
+                        )}
+                        {renderSpecificRow(
+                            'tooltip.angle',
+                            (bus) => bus.angle,
+                            isLoadflowInvalid ? styles.invalidComputation : undefined
+                        )}
+                        {renderSpecificRow(
+                            'tooltip.generation',
+                            (bus) => bus.generation,
+                            isLoadflowInvalid ? styles.invalidComputation : undefined
+                        )}
+                        {renderSpecificRow(
+                            'tooltip.load',
+                            (bus) => bus.load,
+                            isLoadflowInvalid ? styles.invalidComputation : undefined
+                        )}
+                        {renderSpecificRow(
+                            'tooltip.balance',
+                            (bus) => bus.balance,
+                            isLoadflowInvalid ? styles.invalidComputation : undefined
+                        )}
+                        {renderSpecificRow(
+                            'tooltip.icc',
+                            (bus) => bus.icc / 1000,
+                            isShortcircuitInvalid ? styles.invalidComputation : undefined
+                        )}
+                    </TableBody>
+                </Table>
+            </TableContainer>
         </Grid>
     );
 };