From 9c118eb139e74205a9f45534a27fe18229ba3130 Mon Sep 17 00:00:00 2001
From: Manishnemade12 <mnemade140@gmail.com>
Date: Sat, 11 Apr 2026 08:45:36 +0530
Subject: [PATCH] fix(smi-table): memoize rows and localize collapse state

Signed-off-by: Manishnemade12 <mnemade140@gmail.com>
---
 src/components/SMI-Table/index.js | 203 +++++++++++++++---------------
 1 file changed, 105 insertions(+), 98 deletions(-)

diff --git a/src/components/SMI-Table/index.js b/src/components/SMI-Table/index.js
index 8e9b62f9176db..15abf76b1d205 100644
--- a/src/components/SMI-Table/index.js
+++ b/src/components/SMI-Table/index.js
@@ -17,6 +17,110 @@ import ServiceMeshIcon from "../../assets/images/service-mesh-icons/service-mesh
 // const failingMark = "../../assets/images/landscape/failing.svg";
 // const ServiceMeshIcon = "../../assets/images/service-mesh-icons/service-mesh.svg";
 
+const TableRow = React.memo(({ row, rowIndex, prepareRow }) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  prepareRow(row);
+
+  return (
+    <React.Fragment key={`row-${rowIndex}`}>
+      <tr
+        id={`row${rowIndex}`}
+        className="primaryRow"
+        {...row.getRowProps()}
+        onClick={() => setIsCollapsed((prevState) => !prevState)}
+      >
+        <td>
+          {
+            (non_functional.find(ele => ele.name.includes(row.original.mesh_name))) ?
+              <>
+                <img data-tooltip-id="react-tooltip" data-tooltip-content={row.original.mesh_name} className="smiMark" src={non_functional.find(ele => ele.name.includes(row.original.mesh_name)).icon} alt="Mesh Icon" />
+                <Tooltip
+                  id="react-tooltip"
+                  place="bottom"
+                  style={{ backgroundColor: "rgb(60,73,79)" }}
+                  className="smi-tooltip"
+                />
+              </>
+              : <>
+                <img data-tooltip-id="react-tooltip" data-tooltip-content={"Service Mesh"} className="smiMark" src={ServiceMeshIcon} alt="Service Mesh" />
+                <Tooltip
+                  id="react-tooltip"
+                  place="bottom"
+                  style={{ backgroundColor: "rgb(60,73,79)" }}
+                  className="smi-tooltip"
+                />
+              </>
+          }
+        </td>
+        <td>{row.original.mesh_version}</td>
+        {row.original.more_details.map((spec, index) => {
+          if (spec["capability"] === "FULL") {
+            return <td key={`spec${index}`}>
+              <div className="tooltip-div" data-tooltip-id="react-tooltip" data-tooltip-content={`${spec["result"]}`}>
+                <img className="smiMark" src={passingMark} alt="Pass Mark" />
+              </div>
+            </td>;
+          } else if (spec["capability"] === "HALF") {
+            return <td key={`spec${index}`}>
+              <div className="tooltip-div" data-tooltip-id="react-tooltip" data-tooltip-content={`${spec["reason"]}<br>${spec["result"]}`}>
+                <img className="smiMark" src={halfMark} alt="Half Mark" />
+              </div>
+            </td>;
+          } else if (spec["capability"] === "NONE") {
+            return <td key={`spec${index}`}>
+              <div className="tooltip-div" data-tooltip-id="react-tooltip" data-tooltip-content={`${spec["reason"]}<br>${spec["result"]}`}>
+                <img className="smiMark" src={failingMark} alt="Fail Mark" />
+              </div>
+            </td>;
+          } else {
+            return <td key={`spec${index}`}>
+              <IconContext.Provider value={{ color: "gray", size: "20px" }}>
+                <IoMdHelpCircle />
+              </IconContext.Provider>
+            </td>;
+          }
+        })
+        }
+        <td>{row.original.passing_percentage}</td>
+      </tr>
+
+      {
+        row.original.previous_versions && row.original.previous_versions.map((prevResult, index) => {
+          return (
+            <tr key={`collapse-row-${rowIndex}-${index}`} className={isCollapsed ? "secondaryRow" : "secondaryRow-hidden"} >
+              <td></td>
+              <td>{prevResult.mesh_version}</td>
+              {prevResult.more_details.map((spec, prevIndex) => {
+                if (spec["capability"] === "Full") {
+                  return <td key={`spec${prevIndex}`}>
+                    <img className="smiMark" src={passingMark} alt="Passing Mark" />
+                  </td>;
+                } else if (spec["capability"] === "None") {
+                  return <td key={`spec${prevIndex}`}>
+                    <img className="smiMark" src={failingMark} alt="Fail Mark" />
+                  </td>;
+                } else if (spec["capability"] === "Half") {
+                  return <td key={`spec${prevIndex}`}>
+                    <img className="smiMark" src={halfMark} alt="Half Mark" />
+                  </td>;
+                } else {
+                  return <td key={`spec${prevIndex}`}>
+                    <IconContext.Provider value={{ color: "gray", size: "20px" }}>
+                      <IoMdHelpCircle />
+                    </IconContext.Provider>
+                  </td>;
+                }
+              })}
+              <td>{prevResult.passing_percentage}</td>
+            </tr>
+          );
+        })
+      }
+    </React.Fragment>
+  );
+});
+
 const Table = ({ columns, data, spec }) => {
   // Use the state and functions returned from useTable to build the UI
   const {
@@ -31,7 +135,6 @@ const Table = ({ columns, data, spec }) => {
   });
 
   // Render the UI for the table
-  const [isCollapsed, setCollapse] = useState(new Array(rows.length).fill(false));
   return (
     <TableWrapper>
       <table {...getTableProps()}>
@@ -51,103 +154,7 @@ const Table = ({ columns, data, spec }) => {
         </thead>
         <tbody {...getTableBodyProps()}>
           {rows.map((row, i) => {
-            prepareRow(row);
-            return (
-              <React.Fragment key={`row${i}`}>
-                <tr key={`row${i}`} id={`row${i}`} className="primaryRow" {...row.getRowProps()} onClick={() => {
-                  let e = isCollapsed; e[i] = !isCollapsed[i]; setCollapse([...e]);
-                }}
-                >
-                  <td>
-                    {
-                      (non_functional.find(ele => ele.name.includes(row.original.mesh_name))) ?
-                        <>
-                          <img data-tooltip-id="react-tooltip" data-tooltip-content={row.original.mesh_name} className="smiMark" src={non_functional.find(ele => ele.name.includes(row.original.mesh_name)).icon} alt="Mesh Icon" />
-                          <Tooltip
-                            id="react-tooltip"
-                            place="bottom"
-                            style={{ backgroundColor: "rgb(60,73,79)" }}
-                            className="smi-tooltip"
-                          />
-                        </>
-                        : <>
-                          <img data-tooltip-id="react-tooltip" data-tooltip-content={"Service Mesh"} className="smiMark" src={ServiceMeshIcon} alt="Service Mesh" />
-                          <Tooltip
-                            id="react-tooltip"
-                            place="bottom"
-                            style={{ backgroundColor: "rgb(60,73,79)" }}
-                            className="smi-tooltip"
-                          />
-                        </>
-                    }
-                  </td>
-                  <td>{row.original.mesh_version}</td>
-                  {row.original.more_details.map((spec,i) => {
-                    if (spec["capability"] === "FULL"){
-                      return <td key={`spec${i}`}>
-                        <div className="tooltip-div" data-tooltip-id="react-tooltip" data-tooltip-content={`${spec["result"]}`}>
-                          <img className="smiMark" src={passingMark} alt="Pass Mark" />
-                        </div>
-                      </td>;
-                    } else if (spec["capability"] === "HALF"){
-                      return <td key={`spec${i}`}>
-                        <div className="tooltip-div" data-tooltip-id="react-tooltip" data-tooltip-content={`${spec["reason"]}<br>${spec["result"]}`}>
-                          <img className="smiMark" src={halfMark} alt="Half Mark" />
-                        </div>
-                      </td>;
-                    } else if (spec["capability"] === "NONE") {
-                      return <td key={`spec${i}`}>
-                        <div className="tooltip-div" data-tooltip-id="react-tooltip" data-tooltip-content={`${spec["reason"]}<br>${spec["result"]}`}>
-                          <img className="smiMark" src={failingMark} alt="Fail Mark" />
-                        </div>
-                      </td>;
-                    } else {
-                      return <td key={`spec${i}`}>
-                        <IconContext.Provider value={{ color: "gray", size: "20px" }}>
-                          <IoMdHelpCircle />
-                        </IconContext.Provider>
-                      </td>;
-                    }
-                  })
-                  }
-                  <td>{row.original.passing_percentage}</td>
-                </tr>
-
-                {
-                  row.original.previous_versions && row.original.previous_versions.map(prevResult => {
-                    return (
-                      <tr key={`collapse-row${i}`} className={isCollapsed[i] ? "secondaryRow" : "secondaryRow-hidden"} >
-                        <td></td>
-                        <td>{prevResult.mesh_version}</td>
-                        {prevResult.more_details.map((spec,i) => {
-                          if (spec["capability"] === "Full"){
-                            return <td key={`spec${i}`}>
-                              <img className="smiMark" src={passingMark} alt="Passing Mark" />
-                            </td>;
-                          } else if (spec["capability"] === "None"){
-                            return <td key={`spec${i}`}>
-                              <img className="smiMark" src={failingMark} alt="Fail Mark" />
-                            </td>;
-                          } else if (spec["capability"] === "Half"){
-                            return <td key={`spec${i}`}>
-                              <img className="smiMark" src={halfMark} alt="Half Mark" />
-                            </td>;
-                          } else {
-                            return <td key={`spec${i}`}>
-                              <IconContext.Provider value={{ color: "gray", size: "20px" }}>
-                                <IoMdHelpCircle />
-                              </IconContext.Provider>
-                            </td>;
-                          }
-                        })}
-                        <td>{prevResult.passing_percentage}</td>
-                      </tr>
-                    );
-                  })
-                }
-
-              </React.Fragment>
-            );
+            return <TableRow key={`row${i}`} row={row} rowIndex={i} prepareRow={prepareRow} />;
           })}
         </tbody>
       </table>