Copilot commented on code in PR #15901:
URL: https://github.com/apache/pinot/pull/15901#discussion_r2107492413
##########
pinot-controller/src/main/resources/app/components/Query/VisualizeQueryStageStats.tsx:
##########
@@ -27,7 +35,8 @@ import isEmpty from "lodash/isEmpty";
* Main component to visualize query stage stats as a flowchart.
*/
export const VisualizeQueryStageStats = ({ stageStats }) => {
- const { nodes, edges } = generateFlowElements(stageStats); // Generate nodes
and edges from input data
+ const [simpleMode, setSimpleMode] = useState(true);
+ const { nodes, edges } = generateFlowElements(stageStats, simpleMode); //
Generate nodes and edges from input data
Review Comment:
Running `generateFlowElements` on every render can be expensive; wrap this
call in `useMemo` keyed on `[stageStats, simpleMode]` to avoid unnecessary
recomputation.
```suggestion
const { nodes, edges } = useMemo(() => generateFlowElements(stageStats,
simpleMode), [stageStats, simpleMode]); // Generate nodes and edges from input
data
```
##########
pinot-controller/src/main/resources/app/components/Query/VisualizeQueryStageStats.tsx:
##########
@@ -38,17 +47,22 @@ export const VisualizeQueryStageStats = ({ stageStats }) =>
{
}
return (
- <div style={{ height: 500 }}>
+ <div style={{ height: 1000 }}>
Review Comment:
[nitpick] Using a fixed height of `1000` may not adapt well to different
screen sizes; consider making this configurable or using responsive CSS rules.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
