Skip to content

Commit 9c118eb

Browse files
Manishnemade12Manishnemade12
committed
fix(smi-table): memoize rows and localize collapse state
Signed-off-by: Manishnemade12 <mnemade140@gmail.com>
1 parent 8cc7ead commit 9c118eb

File tree

1 file changed

+105
-98
lines changed

1 file changed

+105
-98
lines changed

‎src/components/SMI-Table/index.js‎

Lines changed: 105 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,110 @@ import ServiceMeshIcon from "../../assets/images/service-mesh-icons/service-mesh
1717
// const failingMark = "../../assets/images/landscape/failing.svg";
1818
// const ServiceMeshIcon = "../../assets/images/service-mesh-icons/service-mesh.svg";
1919

20+
const TableRow = React.memo(({ row, rowIndex, prepareRow }) => {
21+
const [isCollapsed, setIsCollapsed] = useState(false);
22+
23+
prepareRow(row);
24+
25+
return (
26+
<React.Fragment key={`row-${rowIndex}`}>
27+
<tr
28+
id={`row${rowIndex}`}
29+
className="primaryRow"
30+
{...row.getRowProps()}
31+
onClick={() => setIsCollapsed((prevState) => !prevState)}
32+
>
33+
<td>
34+
{
35+
(non_functional.find(ele => ele.name.includes(row.original.mesh_name))) ?
36+
<>
37+
<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" />
38+
<Tooltip
39+
id="react-tooltip"
40+
place="bottom"
41+
style={{ backgroundColor: "rgb(60,73,79)" }}
42+
className="smi-tooltip"
43+
/>
44+
</>
45+
: <>
46+
<img data-tooltip-id="react-tooltip" data-tooltip-content={"Service Mesh"} className="smiMark" src={ServiceMeshIcon} alt="Service Mesh" />
47+
<Tooltip
48+
id="react-tooltip"
49+
place="bottom"
50+
style={{ backgroundColor: "rgb(60,73,79)" }}
51+
className="smi-tooltip"
52+
/>
53+
</>
54+
}
55+
</td>
56+
<td>{row.original.mesh_version}</td>
57+
{row.original.more_details.map((spec, index) => {
58+
if (spec["capability"] === "FULL") {
59+
return <td key={`spec${index}`}>
60+
<div className="tooltip-div" data-tooltip-id="react-tooltip" data-tooltip-content={`${spec["result"]}`}>
61+
<img className="smiMark" src={passingMark} alt="Pass Mark" />
62+
</div>
63+
</td>;
64+
} else if (spec["capability"] === "HALF") {
65+
return <td key={`spec${index}`}>
66+
<div className="tooltip-div" data-tooltip-id="react-tooltip" data-tooltip-content={`${spec["reason"]}<br>${spec["result"]}`}>
67+
<img className="smiMark" src={halfMark} alt="Half Mark" />
68+
</div>
69+
</td>;
70+
} else if (spec["capability"] === "NONE") {
71+
return <td key={`spec${index}`}>
72+
<div className="tooltip-div" data-tooltip-id="react-tooltip" data-tooltip-content={`${spec["reason"]}<br>${spec["result"]}`}>
73+
<img className="smiMark" src={failingMark} alt="Fail Mark" />
74+
</div>
75+
</td>;
76+
} else {
77+
return <td key={`spec${index}`}>
78+
<IconContext.Provider value={{ color: "gray", size: "20px" }}>
79+
<IoMdHelpCircle />
80+
</IconContext.Provider>
81+
</td>;
82+
}
83+
})
84+
}
85+
<td>{row.original.passing_percentage}</td>
86+
</tr>
87+
88+
{
89+
row.original.previous_versions && row.original.previous_versions.map((prevResult, index) => {
90+
return (
91+
<tr key={`collapse-row-${rowIndex}-${index}`} className={isCollapsed ? "secondaryRow" : "secondaryRow-hidden"} >
92+
<td></td>
93+
<td>{prevResult.mesh_version}</td>
94+
{prevResult.more_details.map((spec, prevIndex) => {
95+
if (spec["capability"] === "Full") {
96+
return <td key={`spec${prevIndex}`}>
97+
<img className="smiMark" src={passingMark} alt="Passing Mark" />
98+
</td>;
99+
} else if (spec["capability"] === "None") {
100+
return <td key={`spec${prevIndex}`}>
101+
<img className="smiMark" src={failingMark} alt="Fail Mark" />
102+
</td>;
103+
} else if (spec["capability"] === "Half") {
104+
return <td key={`spec${prevIndex}`}>
105+
<img className="smiMark" src={halfMark} alt="Half Mark" />
106+
</td>;
107+
} else {
108+
return <td key={`spec${prevIndex}`}>
109+
<IconContext.Provider value={{ color: "gray", size: "20px" }}>
110+
<IoMdHelpCircle />
111+
</IconContext.Provider>
112+
</td>;
113+
}
114+
})}
115+
<td>{prevResult.passing_percentage}</td>
116+
</tr>
117+
);
118+
})
119+
}
120+
</React.Fragment>
121+
);
122+
});
123+
20124
const Table = ({ columns, data, spec }) => {
21125
// Use the state and functions returned from useTable to build the UI
22126
const {
@@ -31,7 +135,6 @@ const Table = ({ columns, data, spec }) => {
31135
});
32136

33137
// Render the UI for the table
34-
const [isCollapsed, setCollapse] = useState(new Array(rows.length).fill(false));
35138
return (
36139
<TableWrapper>
37140
<table {...getTableProps()}>
@@ -51,103 +154,7 @@ const Table = ({ columns, data, spec }) => {
51154
</thead>
52155
<tbody {...getTableBodyProps()}>
53156
{rows.map((row, i) => {
54-
prepareRow(row);
55-
return (
56-
<React.Fragment key={`row${i}`}>
57-
<tr key={`row${i}`} id={`row${i}`} className="primaryRow" {...row.getRowProps()} onClick={() => {
58-
let e = isCollapsed; e[i] = !isCollapsed[i]; setCollapse([...e]);
59-
}}
60-
>
61-
<td>
62-
{
63-
(non_functional.find(ele => ele.name.includes(row.original.mesh_name))) ?
64-
<>
65-
<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" />
66-
<Tooltip
67-
id="react-tooltip"
68-
place="bottom"
69-
style={{ backgroundColor: "rgb(60,73,79)" }}
70-
className="smi-tooltip"
71-
/>
72-
</>
73-
: <>
74-
<img data-tooltip-id="react-tooltip" data-tooltip-content={"Service Mesh"} className="smiMark" src={ServiceMeshIcon} alt="Service Mesh" />
75-
<Tooltip
76-
id="react-tooltip"
77-
place="bottom"
78-
style={{ backgroundColor: "rgb(60,73,79)" }}
79-
className="smi-tooltip"
80-
/>
81-
</>
82-
}
83-
</td>
84-
<td>{row.original.mesh_version}</td>
85-
{row.original.more_details.map((spec,i) => {
86-
if (spec["capability"] === "FULL"){
87-
return <td key={`spec${i}`}>
88-
<div className="tooltip-div" data-tooltip-id="react-tooltip" data-tooltip-content={`${spec["result"]}`}>
89-
<img className="smiMark" src={passingMark} alt="Pass Mark" />
90-
</div>
91-
</td>;
92-
} else if (spec["capability"] === "HALF"){
93-
return <td key={`spec${i}`}>
94-
<div className="tooltip-div" data-tooltip-id="react-tooltip" data-tooltip-content={`${spec["reason"]}<br>${spec["result"]}`}>
95-
<img className="smiMark" src={halfMark} alt="Half Mark" />
96-
</div>
97-
</td>;
98-
} else if (spec["capability"] === "NONE") {
99-
return <td key={`spec${i}`}>
100-
<div className="tooltip-div" data-tooltip-id="react-tooltip" data-tooltip-content={`${spec["reason"]}<br>${spec["result"]}`}>
101-
<img className="smiMark" src={failingMark} alt="Fail Mark" />
102-
</div>
103-
</td>;
104-
} else {
105-
return <td key={`spec${i}`}>
106-
<IconContext.Provider value={{ color: "gray", size: "20px" }}>
107-
<IoMdHelpCircle />
108-
</IconContext.Provider>
109-
</td>;
110-
}
111-
})
112-
}
113-
<td>{row.original.passing_percentage}</td>
114-
</tr>
115-
116-
{
117-
row.original.previous_versions && row.original.previous_versions.map(prevResult => {
118-
return (
119-
<tr key={`collapse-row${i}`} className={isCollapsed[i] ? "secondaryRow" : "secondaryRow-hidden"} >
120-
<td></td>
121-
<td>{prevResult.mesh_version}</td>
122-
{prevResult.more_details.map((spec,i) => {
123-
if (spec["capability"] === "Full"){
124-
return <td key={`spec${i}`}>
125-
<img className="smiMark" src={passingMark} alt="Passing Mark" />
126-
</td>;
127-
} else if (spec["capability"] === "None"){
128-
return <td key={`spec${i}`}>
129-
<img className="smiMark" src={failingMark} alt="Fail Mark" />
130-
</td>;
131-
} else if (spec["capability"] === "Half"){
132-
return <td key={`spec${i}`}>
133-
<img className="smiMark" src={halfMark} alt="Half Mark" />
134-
</td>;
135-
} else {
136-
return <td key={`spec${i}`}>
137-
<IconContext.Provider value={{ color: "gray", size: "20px" }}>
138-
<IoMdHelpCircle />
139-
</IconContext.Provider>
140-
</td>;
141-
}
142-
})}
143-
<td>{prevResult.passing_percentage}</td>
144-
</tr>
145-
);
146-
})
147-
}
148-
149-
</React.Fragment>
150-
);
157+
return <TableRow key={`row${i}`} row={row} rowIndex={i} prepareRow={prepareRow} />;
151158
})}
152159
</tbody>
153160
</table>

0 commit comments

Comments
 (0)