1662 run autofix on dev to reduce merging issues by neelneelneel · Pull Request #1663 · SEMOSS/semoss-ui

neelneelneel · 2025-08-06T18:55:22Z

Description

Changes Made

How to Test

Steps to reproduce/test the behavior
Expected outcomes

Notes

…autofix

github-actions · 2025-08-06T18:55:31Z

@CodiumAI-Agent /describe

github-actions · 2025-08-06T18:56:17Z

@CodiumAI-Agent /review

QodoAI-Agent · 2025-08-06T18:56:42Z

Title

1662 run autofix on dev to reduce merging issues

User description

Description

Changes Made

How to Test

Steps to reproduce/test the behavior
Expected outcomes

Notes

PR Type

Enhancement

Description

Reformatted code and reorganized imports
Applied Biome/ESLint auto-fix adjustments
Standardized indentation and styling across components
Updated block settings config import ordering

File Walkthrough

	Relevant files

github-actions · 2025-08-06T18:57:03Z

@CodiumAI-Agent /improve

QodoAI-Agent · 2025-08-06T18:57:43Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 5 🔵🔵🔵🔵🔵
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review Large File The UpgradedVisualizationTool file is extremely large with multiple embedded components, which makes it hard to navigate and maintain. Consider splitting it into smaller, focused modules. import { InfoOutlined } from "@mui/icons-material"; import ImageIcon from "@mui/icons-material/Image"; import { observer } from "mobx-react-lite"; import { useState } from "react"; import { BlockDef, EchartVisualizationBlockConfig, type EchartVisualizationBlockDef, getValueByPath, PathValue, useBlocksPixel, useFrameHeaders, } from "@semoss/renderer"; import { AutocompleteTwo, List, ListItemButtonTwo, ListItemIcon, ListItemText, ListItemTwo, Stack, styled, TextField, } from "@semoss/ui"; import { useBlockSettings } from "@/hooks"; import { getShowFieldOptions } from "../../../../../block-settings/block-defaults.shared"; import { SelectInputSettings } from "../../../../../settings"; import { ResizeSetting, SizeSettings } from "../../../../shared"; import { ColorPalatteSettings } from "../../../../shared/ColorPalatteSettings"; import { ColorPickerSettings } from "../../../../shared/ColorPickerSettings"; import { BAR_CHART_DATA } from "../../Visualization.constants"; import { ChangeOrientation } from "../dendrogram/ChangeOrientation"; import { CustomizeDendrogramSymbol } from "../dendrogram/CustomizeDendrogramSymbol"; import { LabelsDendrogram } from "../dendrogram/LabelsDendrogram"; import { LegendDendrogram } from "../dendrogram/LegendDendrogram"; import { CustomizeSymbol } from "../Gantt/CustomizeSymbol"; import { GanttDisplayValueLabels } from "../Gantt/GanttDisplayValueLabels"; //upgraded visualization tool propsimport { EditXAxisScatterPlot } from '../scatter-plot/EditXAxisScatterPlot'; import { GanttFiscal } from "../Gantt/GanttFiscal"; import { GanttGroupView } from "../Gantt/GanttGroupView"; import { GanttLegend } from "../Gantt/GanttLegend"; import { GanttTargetLine } from "../Gantt/GanttTargetLine"; import { LineLegend } from "../line-chart/LineLegend"; import { LineStyling } from "../line-chart/LineStyling"; import { LineTitle } from "../line-chart/LineTitle"; import { LineTooltip } from "../line-chart/LineTooltip"; import { LineValueLabels } from "../line-chart/LineValueLabel"; import { XAxisStyling } from "../line-chart/XAxisStyling"; import { YAxisStyling } from "../line-chart/YAxisStyling"; import { LegendToggleMapChart } from "../map-chart/LegendToggleMapChart"; import { MapMarkerSize } from "../map-chart/MapMarkerSize"; import { TooltipMapChart } from "../map-chart/TooltipMapChart"; import { CustomTooltip } from "../pie-chart/CustomTooltip"; import { PieLegend } from "../pie-chart/PieLegend"; import { PieTitle } from "../pie-chart/PieTitle"; import { PieValueLabel } from "../pie-chart/PieValueLabel"; import { ToogleDonut } from "../pie-chart/ToggleDonut"; import { EditXAxisScatterPlot } from "../scatter-plot/EditXAxisScatterPlot"; import { EditYAxisScatterPlot } from "../scatter-plot/EditYAxisScatterPlot"; import { ScatterPlotChartTitle } from "../scatter-plot/ScatterPlotChartTitle"; import { ScatterPlotSymbol } from "../scatter-plot/ScatterPlotSymbol"; import { TooltipScatterPlot } from "../scatter-plot/TooltipScatterPlot"; import { ValueLabelScatterPlot } from "../scatter-plot/ValueLabelScatterPlot"; import { updateSeriesColor } from "../shared/chart-utility"; import { EditXAxisStackChart } from "../stack-chart/EditXAxisStackChart"; import { EditYAxisStackChart } from "../stack-chart/EditYAxisStackChart"; import { LegendStackChart } from "../stack-chart/LegendStackChart"; import { StackChartBarStyle } from "../stack-chart/StackChartBarStyle"; import { ValueLabelStackChart } from "../stack-chart/ValueLabelStackChart"; import { ChartStyling } from "./ChartStyling"; import ColourByValue from "./ColourByValue"; import { CustomizeValueLabels } from "./CustomizeValueLabels"; import { EditXAxis } from "./Edit-X-Axis"; import { EditYAxis } from "./Edit-Y-Axis"; import { Legend } from "./Legend"; import { ToggleTrendline } from "./ToggleTrendline"; import { VisualizationStyles } from "./VisualizationStyles"; //upgraded visualization tool propsimport { EditXAxisScatterPlot } from '../ScatterPlot/EditXAxisScatterPlot'; interface UpgradedVisualizationToolProps { id: string; } //Styled list item with contents type display const StyledListItem = styled(ListItemTwo)(({}) => ({ display: "contents !important", })); const StyledItem = styled("div")(() => ({ display: "block", width: "100%", padding: "0.5rem", })); const DendrogramToolsList = ({ id }) => { const [dendrogramSelection, setDendrogramSelection] = useState(""); return ( <> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setDendrogramSelection((prevList) => prevList === "customizeDendrogramSymbol" ? "" : "customizeDendrogramSymbol", ) } selected={ dendrogramSelection === "customizeDendrogramSymbol" } > <ListItemIcon> <ImageIcon fontSize="large" color={ dendrogramSelection === "customizeDendrogramSymbol" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Customize Symbol" /> <InfoOutlined /> </ListItemButtonTwo> {dendrogramSelection === "customizeDendrogramSymbol" && ( <CustomizeDendrogramSymbol id={id} /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setDendrogramSelection((prevList) => prevList === "changeOrientation" ? "" : "changeOrientation", ) } selected={dendrogramSelection === "changeOrientation"} > <ListItemIcon> <ImageIcon fontSize="large" color={ dendrogramSelection === "changeOrientation" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Change Orientation" /> <InfoOutlined /> </ListItemButtonTwo> {dendrogramSelection === "changeOrientation" && ( <ChangeOrientation id={id} /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setDendrogramSelection((prevList) => prevList === "legendDendrogram" ? "" : "legendDendrogram", ) } selected={dendrogramSelection === "legendDendrogram"} > <ListItemIcon> <ImageIcon fontSize="large" color={ dendrogramSelection === "legendDendrogram" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Legend" /> <InfoOutlined /> </ListItemButtonTwo> {dendrogramSelection === "legendDendrogram" && ( <LegendDendrogram id={id} /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setDendrogramSelection((prevList) => prevList === "showLabelsDendrogram" ? "" : "showLabelsDendrogram", ) } selected={dendrogramSelection === "showLabelsDendrogram"} > <ListItemIcon> <ImageIcon fontSize="large" color={ dendrogramSelection === "showLabelsDendrogram" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Labels" /> <InfoOutlined /> </ListItemButtonTwo> {dendrogramSelection === "showLabelsDendrogram" && ( <LabelsDendrogram id={id} path={"option"} /> )} </StyledListItem> </> ); }; const ResizingTool = ({ id }) => { const [resizeSelection, setResizeSelection] = useState(""); const { data, setData } = useBlockSettings<EchartVisualizationBlockDef>(id); return ( <> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setResizeSelection((prevList) => prevList === "resizing" ? "" : "resizing", ) } selected={resizeSelection === "resizing"} > <ListItemIcon> <ImageIcon fontSize="large" color={ resizeSelection === "resizing" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Resizing" /> <InfoOutlined /> </ListItemButtonTwo> {resizeSelection === "resizing" && ( <Stack> <ResizeSetting id={id} label={"Height"} path={"style.height"} ></ResizeSetting> <ResizeSetting id={id} label={"Width"} path={"style.width"} ></ResizeSetting> </Stack> )} </StyledListItem> </> ); }; const ColorpalatteTool = ({ id }) => { const [colorPalatteSelection, setColorPalatteSelection] = useState(""); const { data, setData } = useBlockSettings<EchartVisualizationBlockDef>(id); return ( <> <ListItemTwo disablePadding> <ListItemButtonTwo onClick={(e) => setColorPalatteSelection((prevList) => prevList === "colourpalette" ? "" : "colourpalette", ) } selected={colorPalatteSelection === "colourpalette"} > <ListItemIcon> <ImageIcon fontSize="large" color={ colorPalatteSelection === "colourpalette" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Color Palette" /> <InfoOutlined /> </ListItemButtonTwo> </ListItemTwo> {colorPalatteSelection === "colourpalette" && ( <ColorPalatteSettings id={id} path="option.color" onColorPalatteSelected={(option, color) => { if (data.variation === "echart-bar-graph") { const optionToSend = typeof option === "string" ? JSON.parse(option) : option; const colorParent = "itemStyle"; const updatedOption = updateSeriesColor( optionToSend, color, colorParent, ); setData("option", updatedOption); } }} /> )} </> ); }; const GanttToolsList = ({ id }) => { const [ganttSelection, setGanttSelection] = useState(""); return ( <> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setGanttSelection((prevList) => prevList === "fiscalaxis" ? "" : "fiscalaxis", ) } selected={ganttSelection === "fiscalaxis"} > <ListItemIcon> <ImageIcon fontSize="large" color={ ganttSelection === "fiscalaxis" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Fiscal Axis" style={{ flex: "0.5 1 auto" }} /> <InfoOutlined /> </ListItemButtonTwo> </StyledListItem> {ganttSelection === "fiscalaxis" && ( <GanttFiscal id={id} path={"option"} /> )} <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setGanttSelection((prevList) => prevList === "targetdate" ? "" : "targetdate", ) } selected={ganttSelection === "targetdate"} > <ListItemIcon> <ImageIcon fontSize="large" color={ ganttSelection === "targetdate" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Target Date" style={{ flex: "0.5 1 auto" }} /> <InfoOutlined /> </ListItemButtonTwo> </StyledListItem> {ganttSelection === "targetdate" && ( <GanttTargetLine id={id} path={"option"} /> )} <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setGanttSelection((prevList) => prevList === "customizesymbol" ? "" : "customizesymbol", ) } selected={ganttSelection === "customizesymbol"} > <ListItemIcon> <ImageIcon fontSize="large" color={ ganttSelection === "customizesymbol" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Customize Symbol" style={{ flex: "0.5 1 auto" }} /> <InfoOutlined /> </ListItemButtonTwo> </StyledListItem> {ganttSelection === "customizesymbol" && ( <CustomizeSymbol id={id} path={"option"} /> )} <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setGanttSelection((prevList) => prevList === "togglelegendgantt" ? "" : "togglelegendgantt", ) } selected={ganttSelection === "togglelegendgantt"} > <ListItemIcon> <ImageIcon fontSize="large" color={ ganttSelection === "togglelegendgantt" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Legend" style={{ flex: "0.5 1 auto" }} /> <InfoOutlined /> </ListItemButtonTwo> </StyledListItem> {ganttSelection === "togglelegendgantt" && ( <GanttLegend id={id} path={"option"} /> )} <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setGanttSelection((prevList) => prevList === "togglegroupview" ? "" : "togglegroupview", ) } selected={ganttSelection === "togglegroupview"} > <ListItemIcon> <ImageIcon fontSize="large" color={ ganttSelection === "togglegroupview" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Group View" style={{ flex: "0.5 1 auto" }} /> <InfoOutlined /> </ListItemButtonTwo> </StyledListItem> {ganttSelection === "togglegroupview" && ( <> <GanttGroupView id={id} path={"option"} /> </> )} <ResizingTool id={id} /> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setGanttSelection((prevList) => prevList === "displayvaluelabels" ? "" : "displayvaluelabels", ) } selected={ganttSelection === "displayvaluelabels"} > <ListItemIcon> <ImageIcon fontSize="large" color={ ganttSelection === "displayvaluelabels" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Display Value Labels" style={{ flex: "0.5 1 auto" }} /> <InfoOutlined /> </ListItemButtonTwo> </StyledListItem> {ganttSelection === "displayvaluelabels" && ( <> <GanttDisplayValueLabels id={id} path="option" /> </> )} </> ); }; const StackChartTool = ({ id }) => { const [stackChartSelection, setStackChartSelection] = useState(""); const { data, setData } = useBlockSettings<EchartVisualizationBlockDef>(id); return ( <> <ColorpalatteTool id={id} /> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setStackChartSelection((prevList) => prevList === "editxaxis" ? "" : "editxaxis", ) } selected={stackChartSelection === "editxaxis"} > <ListItemIcon> <ImageIcon fontSize="large" color={ stackChartSelection === "editxaxis" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Edit X Axis" /> <InfoOutlined /> </ListItemButtonTwo> {stackChartSelection === "editxaxis" && ( <EditXAxisStackChart id={id} path={"option"} ></EditXAxisStackChart> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setStackChartSelection((prevList) => prevList === "edityaxis" ? "" : "edityaxis", ) } selected={stackChartSelection === "edityaxis"} > <ListItemIcon> <ImageIcon fontSize="large" color={ stackChartSelection === "edityaxis" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Edit Y Axis" /> <InfoOutlined /> </ListItemButtonTwo> {stackChartSelection === "edityaxis" && ( <EditYAxisStackChart id={id} path={"option"} ></EditYAxisStackChart> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setStackChartSelection((prevList) => prevList === "valuelabel" ? "" : "valuelabel", ) } selected={stackChartSelection === "valuelabel"} > <ListItemIcon> <ImageIcon fontSize="large" color={ stackChartSelection === "valuelabel" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Value Label" /> <InfoOutlined /> </ListItemButtonTwo> {stackChartSelection === "valuelabel" && ( <ValueLabelStackChart id={id} path={"option"} ></ValueLabelStackChart> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setStackChartSelection((prevList) => prevList === "tooltips" ? "" : "tooltips", ) } selected={stackChartSelection === "tooltips"} > <ListItemIcon> <ImageIcon fontSize="large" color={ stackChartSelection === "tooltips" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Tooltips" /> <InfoOutlined /> </ListItemButtonTwo> {stackChartSelection === "tooltips" && ( <TooltipScatterPlot id={id} path="option" /> )} </StyledListItem> <ResizingTool id={id} /> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setStackChartSelection((prevList) => prevList === "barstyle" ? "" : "barstyle", ) } selected={stackChartSelection === "barstyle"} > <ListItemIcon> <ImageIcon fontSize="large" color={ stackChartSelection === "barstyle" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Bar Style" /> <InfoOutlined /> </ListItemButtonTwo> {stackChartSelection === "barstyle" && ( <StackChartBarStyle id={id} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setStackChartSelection((prevList) => prevList === "legend" ? "" : "legend", ) } selected={stackChartSelection === "legend"} > <ListItemIcon> <ImageIcon fontSize="large" color={ stackChartSelection === "legend" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Legend" /> <InfoOutlined /> </ListItemButtonTwo> {stackChartSelection === "legend" && ( <LegendStackChart id={id} path={"option"} /> )} </StyledListItem> </> ); }; const BarToolsList = ({ id }) => { const [barSelection, setBarSelection] = useState(""); const { data, setData } = useBlockSettings(id); function updateChart() {} return ( <> <ColorpalatteTool id={id} /> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setBarSelection((prevList) => prevList === "colourbyvalue" ? "" : "colourbyvalue", ) } selected={barSelection === "colourbyvalue"} > <ListItemIcon> <ImageIcon fontSize="large" color={ barSelection === "colourbyvalue" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Colour By Value" /> <InfoOutlined /> </ListItemButtonTwo> {barSelection === "colourbyvalue" && ( <ColourByValue id={id} updateChart={updateChart} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setBarSelection((prevList) => prevList === "editxaxis" ? "" : "editxaxis", ) } selected={barSelection === "editxaxis"} > <ListItemIcon> <ImageIcon fontSize="large" color={ barSelection === "editxaxis" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Edit X Axis" /> <InfoOutlined /> </ListItemButtonTwo> {barSelection === "editxaxis" && ( <EditXAxis id={id} option={data.option} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setBarSelection((prevList) => prevList === "edityaxis" ? "" : "edityaxis", ) } selected={barSelection === "edityaxis"} > <ListItemIcon> <ImageIcon fontSize="large" color={ barSelection === "edityaxis" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Edit Y Axis" /> <InfoOutlined /> </ListItemButtonTwo> {barSelection === "edityaxis" && ( <EditYAxis id={id} option={data.option} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setBarSelection((prevList) => prevList === "valuelabel" ? "" : "valuelabel", ) } selected={barSelection === "valuelabel"} > <ListItemIcon> <ImageIcon fontSize="large" color={ barSelection === "valuelabel" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Value Label" /> <InfoOutlined /> </ListItemButtonTwo> {barSelection === "valuelabel" && ( <CustomizeValueLabels id={id} option={data.option} chartType={BAR_CHART_DATA.JSONVALUE[0]} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setBarSelection((prevList) => prevList === "barstyle" ? "" : "barstyle", ) } selected={barSelection === "barstyle"} > <ListItemIcon> <ImageIcon fontSize="large" color={ barSelection === "barstyle" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Bar Style" /> <InfoOutlined /> </ListItemButtonTwo> {barSelection === "barstyle" && ( <VisualizationStyles id={id} option={data.option} path="option" chartType={BAR_CHART_DATA.JSONVALUE[0]} updateChart={updateChart} /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setBarSelection((prevList) => prevList === "chartstyle" ? "" : "chartstyle", ) } selected={barSelection === "chartstyle"} > <ListItemIcon> <ImageIcon fontSize="large" color={ barSelection === "chartstyle" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Chart Style" /> <InfoOutlined /> </ListItemButtonTwo> {barSelection === "chartstyle" && ( <ChartStyling option={data.option} id={id} updateChart={updateChart} path="option" /> )} </StyledListItem> <ResizingTool id={id} /> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setBarSelection((prevList) => prevList === "trendlines" ? "" : "trendlines", ) } selected={barSelection === "trendlines"} > <ListItemIcon> <ImageIcon fontSize="large" color={ barSelection === "trendlines" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Trendlines" /> <InfoOutlined /> </ListItemButtonTwo> {barSelection === "trendlines" && ( <ToggleTrendline id={id} options={data.option} updateChart={updateChart} chartType={BAR_CHART_DATA.JSONVALUE[0]} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> {data.variation === "echart-bar-graph" && ( <ListItemButtonTwo onClick={(e) => setBarSelection((prevList) => prevList === "barlegend" ? "" : "barlegend", ) } selected={barSelection === "barlegend"} > <ListItemIcon> <ImageIcon fontSize="large" color={ barSelection === "barlegend" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Legend" /> <InfoOutlined /> </ListItemButtonTwo> )} {barSelection === "barlegend" && ( <Legend id={id} path="option" /> )} </StyledListItem> </> ); }; const ScatterToolsList = ({ id }) => { const [scatterSelection, setScatterSelection] = useState(""); const { data, setData } = useBlockSettings<EchartVisualizationBlockDef>(id); return ( <> <ColorpalatteTool id={id} /> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setScatterSelection((prevList) => prevList === "editxaxis" ? "" : "editxaxis", ) } selected={scatterSelection === "editxaxis"} > <ListItemIcon> <ImageIcon fontSize="large" color={ scatterSelection === "editxaxis" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Edit X Axis" /> <InfoOutlined /> </ListItemButtonTwo> {scatterSelection === "editxaxis" && ( <EditXAxisScatterPlot id={id} path={"option"} ></EditXAxisScatterPlot> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setScatterSelection((prevList) => prevList === "edityaxis" ? "" : "edityaxis", ) } selected={scatterSelection === "edityaxis"} > <ListItemIcon> <ImageIcon fontSize="large" color={ scatterSelection === "edityaxis" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Edit Y Axis" /> <InfoOutlined /> </ListItemButtonTwo> {scatterSelection === "edityaxis" && ( <EditYAxisScatterPlot id={id} path={"option"} ></EditYAxisScatterPlot> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setScatterSelection((prevList) => prevList === "valuelabel" ? "" : "valuelabel", ) } selected={scatterSelection === "valuelabel"} > <ListItemIcon> <ImageIcon fontSize="large" color={ scatterSelection === "valuelabel" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Value Label" /> <InfoOutlined /> </ListItemButtonTwo> {scatterSelection === "valuelabel" && ( <ValueLabelScatterPlot id={id} path={"option"} ></ValueLabelScatterPlot> )} </StyledListItem> <ResizingTool id={id} /> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setScatterSelection((prevList) => prevList === "tooltips" ? "" : "tooltips", ) } selected={scatterSelection === "tooltips"} > <ListItemIcon> <ImageIcon fontSize="large" color={ scatterSelection === "tooltips" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Tooltips" /> <InfoOutlined /> </ListItemButtonTwo> {scatterSelection === "tooltips" && ( <TooltipScatterPlot id={id} path={"option"} ></TooltipScatterPlot> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setScatterSelection((prevList) => prevList === "symbol" ? "" : "symbol", ) } selected={scatterSelection === "symbol"} > <ListItemIcon> <ImageIcon fontSize="large" color={ scatterSelection === "symbol" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Symbol" /> <InfoOutlined /> </ListItemButtonTwo> {scatterSelection === "symbol" && ( <ScatterPlotSymbol id={id} path={"option"} ></ScatterPlotSymbol> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setScatterSelection((prevList) => prevList === "scatter-plots-title" ? "" : "scatter-plots-title", ) } selected={scatterSelection === "scatter-plots-title"} > <ListItemIcon> <ImageIcon fontSize="large" color={ scatterSelection === "scatter-plots-title" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Chart Title" /> <InfoOutlined /> </ListItemButtonTwo> {scatterSelection === "scatter-plots-title" && ( <ScatterPlotChartTitle id={id} path={"option"} ></ScatterPlotChartTitle> )} </StyledListItem> </> ); }; const LineChartTools = ({ id }) => { const [lineSelection, setLineSelection] = useState(""); const { data, setData } = useBlockSettings<EchartVisualizationBlockDef>(id); return ( <> <ColorpalatteTool id={id} /> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setLineSelection((prevList) => prevList === "lineTitle" ? "" : "lineTitle", ) } selected={lineSelection === "lineTitle"} > <ListItemIcon> <ImageIcon fontSize="large" color={ lineSelection === "lineTitle" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Chart Title" /> <InfoOutlined /> </ListItemButtonTwo> {lineSelection === "lineTitle" && ( <LineTitle id={id} path="option" /> )} </StyledListItem> <ResizingTool id={id} /> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setLineSelection((prevList) => prevList === "lineLegend" ? "" : "lineLegend", ) } selected={lineSelection === "lineLegend"} > <ListItemIcon> <ImageIcon fontSize="large" color={ lineSelection === "lineLegend" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Line Legend" /> <InfoOutlined /> </ListItemButtonTwo> {lineSelection === "lineLegend" && ( <LineLegend id={id} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setLineSelection((prevList) => prevList === "lineTooltip" ? "" : "lineTooltip", ) } selected={lineSelection === "lineTooltip"} > <ListItemIcon> <ImageIcon fontSize="large" color={ lineSelection === "lineTooltip" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Line Tooltip" /> <InfoOutlined /> </ListItemButtonTwo> {lineSelection === "lineTooltip" && ( <LineTooltip id={id} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setLineSelection((prevList) => prevList === "lineValueLabel" ? "" : "lineValueLabel", ) } selected={lineSelection === "lineValueLabel"} > <ListItemIcon> <ImageIcon fontSize="large" color={ lineSelection === "lineValueLabel" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Value Labels" /> <InfoOutlined /> </ListItemButtonTwo> {lineSelection === "lineValueLabel" && ( <LineValueLabels id={id} option={data.option} chartType={BAR_CHART_DATA.JSONVALUE[0]} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setLineSelection((prevList) => prevList === "lineXAixsStyling" ? "" : "lineXAixsStyling", ) } selected={lineSelection === "lineXAixsStyling"} > <ListItemIcon> <ImageIcon fontSize="large" color={ lineSelection === "lineXAixsStyling" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="X Axis Styling" /> <InfoOutlined /> </ListItemButtonTwo> {lineSelection === "lineXAixsStyling" && ( <XAxisStyling id={id} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setLineSelection((prevList) => prevList === "lineYAixsStyling" ? "" : "lineYAixsStyling", ) } selected={lineSelection === "lineYAixsStyling"} > <ListItemIcon> <ImageIcon fontSize="large" color={ lineSelection === "lineYAixsStyling" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Y Axis Styling" /> <InfoOutlined /> </ListItemButtonTwo> {lineSelection === "lineYAixsStyling" && ( <YAxisStyling id={id} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setLineSelection((prevList) => prevList === "lineStyling" ? "" : "lineStyling", ) } selected={lineSelection === "lineStyling"} > <ListItemIcon> <ImageIcon fontSize="large" color={ lineSelection === "lineStyling" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Line Styling" /> <InfoOutlined /> </ListItemButtonTwo> {lineSelection === "lineStyling" && ( <LineStyling id={id} path="option" /> )} </StyledListItem> </> ); }; const MapChartTools = ({ id }) => { const [mapSelection, setMapSelection] = useState(""); return ( <> <ColorpalatteTool id={id} /> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setMapSelection((prevList) => prevList === "tooltips" ? "" : "tooltips", ) } selected={mapSelection === "tooltips"} > <ListItemIcon> <ImageIcon fontSize="large" color={ mapSelection === "tooltips" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Tooltips" /> <InfoOutlined /> </ListItemButtonTwo> {mapSelection === "tooltips" && ( <TooltipMapChart id={id} path={"option"} /> )} </StyledListItem> <ResizingTool id={id} /> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setMapSelection((prevList) => prevList === "legend" ? "" : "legend", ) } selected={mapSelection === "legend"} > <ListItemIcon> <ImageIcon fontSize="large" color={ mapSelection === "legend" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Legend" /> <InfoOutlined /> </ListItemButtonTwo> {mapSelection === "legend" && ( <LegendToggleMapChart id={id} path={"option"} /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setMapSelection((prevList) => prevList === "symbol" ? "" : "symbol", ) } selected={mapSelection === "symbol"} > <ListItemIcon> <ImageIcon fontSize="large" color={ mapSelection === "symbol" ? "primary" : "disabled" } ></ImageIcon> </ListItemIcon> <ListItemText primary="Map Marker Size" /> <InfoOutlined /> </ListItemButtonTwo> {mapSelection === "symbol" && ( <MapMarkerSize id={id} path={"option"}></MapMarkerSize> )} </StyledListItem> </> ); }; const PieChartTools = ({ id }) => { const [pieSelection, setPieSelection] = useState(""); const { data, setData } = useBlockSettings<EchartVisualizationBlockDef>(id); return ( <> <ColorpalatteTool id={id} /> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setPieSelection((prevList) => prevList === "tooltip" ? "" : "tooltip", ) } selected={pieSelection === "tooltip"} > <ListItemIcon> <ImageIcon fontSize="large" color={ pieSelection === "tooltip" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Tooltip" /> <InfoOutlined /> </ListItemButtonTwo> {pieSelection === "tooltip" && ( <CustomTooltip id={id} path={"option"} /> )} </StyledListItem> <ResizingTool id={id} /> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setPieSelection((prevList) => prevList === "legend" ? "" : "legend", ) } selected={pieSelection === "legend"} > <ListItemIcon> <ImageIcon fontSize="large" color={ pieSelection === "legend" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Legend" /> <InfoOutlined /> </ListItemButtonTwo> {pieSelection === "legend" && ( <PieLegend id={id} path={"option"} /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setPieSelection((prevList) => prevList === "donutToggle" ? "" : "donutToggle", ) } selected={pieSelection === "donutToggle"} > <ListItemIcon> <ImageIcon fontSize="large" color={ pieSelection === "donutToggle" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Donut - Toggle" /> <InfoOutlined /> </ListItemButtonTwo> {pieSelection === "donutToggle" && ( <ToogleDonut id={id} path={"option"} /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setPieSelection((prevList) => prevList === "title" ? "" : "title", ) } selected={pieSelection === "title"} > <ListItemIcon> <ImageIcon fontSize="large" color={ pieSelection === "title" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Chart Title" /> <InfoOutlined /> </ListItemButtonTwo> {pieSelection === "title" && ( <PieTitle id={id} path={"option"} /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setPieSelection((prevList) => prevList === "valueLabel" ? "" : "valueLabel", ) } selected={pieSelection === "valueLabel"} > <ListItemIcon> <ImageIcon fontSize="large" color={ pieSelection === "valueLabel" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Value Label" /> <InfoOutlined /> </ListItemButtonTwo> {pieSelection === "valueLabel" && ( <PieValueLabel id={id} path={"option"} /> )} </StyledListItem> </> ); }; export const UpgradedVisualizationTool = observer<UpgradedVisualizationToolProps>(({ id }) => { const { data, setData } = useBlockSettings<EchartVisualizationBlockDef>(id); const [selectedList, setSelectedList] = useState(""); // maintain the current selected list, for expansion and collapsing const [generalSettings, setGeneralSettings] = useState({ showBlock: data.show, }); const queriesList = getShowFieldOptions(id); const [chartType, setChartType] = useState(data.variation); return ( <> <List style={{ width: "100%" }}> {/* Custom section to handle bar chart components for respective menu section BAR Chart Menu for tools start here /} <ListItemTwo disablePadding style={{ display: "block" }}> <ListItemButtonTwo onClick={(e) => setSelectedList((prevList) => prevList === "generalchartsettings" ? "" : "generalchartsettings", ) } selected={selectedList === "generalchartsettings"} > <ListItemIcon> <ImageIcon fontSize="large" color={ selectedList === "generalchartsettings" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Conditional" /> <InfoOutlined /> </ListItemButtonTwo> {selectedList === "generalchartsettings" && ( <StyledItem> <SelectInputSettings id={id} path={"show"} label={"Show Block"} options={[...getShowFieldOptions(id)]} /> </StyledItem> )} </ListItemTwo> {data.variation === "echart-world-map-chart" && ( <> <MapChartTools id={id} /> </> )} {data.variation === "echart-pie-chart" && ( <PieChartTools id={id} /> )} {data.variation === "echart-line-graph" && ( <LineChartTools id={id} /> )} {data.variation === "echart-bar-graph" && ( <BarToolsList id={id} /> )} {data.variation === "echart-scatter-plots" && ( <ScatterToolsList id={id} /> )} {data.variation === "echart-stack-chart" && ( <StackChartTool id={id} /> )} {data.variation === "echart-gantt-chart" && ( <GanttToolsList id={id} /> )} {data.variation === "echart-dendrogram-chart" && ( <DendrogramToolsList id={id} /> )} </List> </> ); }); Duplication* There is repeated state management and ListItemButtonTwo toggle logic across many ToolsList components. Extract a generic toggleable list item component or custom hook to reduce boilerplate. interface UpgradedVisualizationToolProps { id: string; } //Styled list item with contents type display const StyledListItem = styled(ListItemTwo)(({}) => ({ display: "contents !important", })); const StyledItem = styled("div")(() => ({ display: "block", width: "100%", padding: "0.5rem", })); const DendrogramToolsList = ({ id }) => { const [dendrogramSelection, setDendrogramSelection] = useState(""); return ( <> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setDendrogramSelection((prevList) => prevList === "customizeDendrogramSymbol" ? "" : "customizeDendrogramSymbol", ) } selected={ dendrogramSelection === "customizeDendrogramSymbol" } > <ListItemIcon> <ImageIcon fontSize="large" color={ dendrogramSelection === "customizeDendrogramSymbol" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Customize Symbol" /> <InfoOutlined /> </ListItemButtonTwo> {dendrogramSelection === "customizeDendrogramSymbol" && ( <CustomizeDendrogramSymbol id={id} /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setDendrogramSelection((prevList) => prevList === "changeOrientation" ? "" : "changeOrientation", ) } selected={dendrogramSelection === "changeOrientation"} > <ListItemIcon> <ImageIcon fontSize="large" color={ dendrogramSelection === "changeOrientation" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Change Orientation" /> <InfoOutlined /> </ListItemButtonTwo> {dendrogramSelection === "changeOrientation" && ( <ChangeOrientation id={id} /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setDendrogramSelection((prevList) => prevList === "legendDendrogram" ? "" : "legendDendrogram", ) } selected={dendrogramSelection === "legendDendrogram"} > <ListItemIcon> <ImageIcon fontSize="large" color={ dendrogramSelection === "legendDendrogram" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Legend" /> <InfoOutlined /> </ListItemButtonTwo> {dendrogramSelection === "legendDendrogram" && ( <LegendDendrogram id={id} /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButtonTwo onClick={(e) => setDendrogramSelection((prevList) => prevList === "showLabelsDendrogram" ? "" : "showLabelsDendrogram", ) } selected={dendrogramSelection === "showLabelsDendrogram"} > <ListItemIcon> <ImageIcon fontSize="large" color={ dendrogramSelection === "showLabelsDendrogram" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Labels" /> <InfoOutlined /> </ListItemButtonTwo> {dendrogramSelection === "showLabelsDendrogram" && ( <LabelsDendrogram id={id} path={"option"} /> )} </StyledListItem> </> ); }; Spelling Error The component is named `ColorpalatteTool` (and related settings use `ColorPalatteSettings`), but "palette" is misspelled. Rename consistently to `ColorPaletteTool` and `ColorPaletteSettings`. const ColorpalatteTool = ({ id }) => { const [colorPalatteSelection, setColorPalatteSelection] = useState(""); const { data, setData } = useBlockSettings<EchartVisualizationBlockDef>(id); return ( <> <ListItemTwo disablePadding> <ListItemButtonTwo onClick={(e) => setColorPalatteSelection((prevList) => prevList === "colourpalette" ? "" : "colourpalette", ) } selected={colorPalatteSelection === "colourpalette"} > <ListItemIcon> <ImageIcon fontSize="large" color={ colorPalatteSelection === "colourpalette" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Color Palette" /> <InfoOutlined /> </ListItemButtonTwo> </ListItemTwo> {colorPalatteSelection === "colourpalette" && ( <ColorPalatteSettings id={id} path="option.color" onColorPalatteSelected={(option, color) => { if (data.variation === "echart-bar-graph") { const optionToSend = typeof option === "string" ? JSON.parse(option) : option; const colorParent = "itemStyle"; const updatedOption = updateSeriesColor( optionToSend, color, colorParent, ); setData("option", updatedOption); } }} /> )} </>

QodoAI-Agent · 2025-08-06T18:58:46Z

PR Code Suggestions ✨

Category	Suggestion	Impact
Possible issue	Fix Azure OpenAI import path The `AZURE_OPEN_AI` import points to the `OPEN_AI.png` asset, which is likely incorrect. Update the path to the dedicated `AZURE_OPEN_AI.png` file to ensure the right icon is loaded. packages/client/src/pages/import/import.constants.ts [66] -import AZURE_OPEN_AI from "@/assets/img/OPEN_AI.png"; +import AZURE_OPEN_AI from "@/assets/img/AZURE_OPEN_AI.png"; Suggestion importance[1-10]: 8 __ Why: Updating `AZURE_OPEN_AI` to point to `AZURE_OPEN_AI.png` prevents loading the incorrect OpenAI asset and ensures the correct Azure icon is used.	Medium
Possible issue	Restore root store constructor The class no longer has a constructor or a reference to the root store, but methods still use `this._root`. Re-add a constructor that accepts and assigns the `RootStore` instance and calls `makeAutoObservable` to prevent runtime errors. packages/client/src/stores/monolith/monolith.store.ts [14] export class MonolithStore { + private _root: RootStore; + constructor(root: RootStore) { + this._root = root; + makeAutoObservable(this); + } + Suggestion importance[1-10]: 8 __ Why: The PR removed the `constructor` and `_root` reference but methods still rely on `this._root`, causing potential runtime errors; restoring the constructor and `makeAutoObservable` is essential for correct initialization.	Medium
General	Use uppercase import constant The import constant `Amazon_Titan` does not follow the uppercase naming convention used for all other icon imports. Rename it to `AMAZON_TITAN` for consistency and to avoid confusion when referencing it elsewhere. packages/client/src/pages/import/import.constants.ts [5] -import Amazon_Titan from "@/assets/img/Amazon_Titan.png"; +import AMAZON_TITAN from "@/assets/img/Amazon_Titan.png"; Suggestion importance[1-10]: 4 __ Why: The constant `Amazon_Titan` should be uppercase to match other icon imports and maintain naming consistency.	Low

…v-to-reduce-merging-issues

github-actions · 2025-08-07T17:09:50Z

@CodiumAI-Agent /update_changelog

QodoAI-Agent · 2025-08-07T17:11:07Z

Changelog updates: 🔄

2025-08-07 *

Changed

Switch to pnpm with updated Node/Biome rules, refactor shared imports, and apply automated autofix to improve consistency and reduce merge conflicts

to commit the new content to the CHANGELOG.md file, please type:
'/update_changelog --pr_update_changelog.push_changelog_changes=true'

neelneelneel added 2 commits August 6, 2025 14:04

chore(vscode-extension): removing eslint and adding pnpm / node engines

56e5577

chore: updating biome rules to recommended and turning off useEffect …

a66f418

…autofix

neelneelneel requested a review from a team as a code owner August 6, 2025 18:55

neelneelneel linked an issue Aug 6, 2025 that may be closed by this pull request

Run autofix on dev to reduce merging issues #1662

Closed

1 task

neelneelneel force-pushed the 1662-run-autofix-on-dev-to-reduce-merging-issues branch from 218430d to a66f418 Compare August 6, 2025 19:14

neelneelneel added 4 commits August 6, 2025 15:15

chore: fixing pnpm lock

f8deeca

Merge remote-tracking branch 'origin/dev' into 1662-run-autofix-on-de…

84ca084

…v-to-reduce-merging-issues

chore(shared): refactoring structure

9f066e0

chore: running autofix

600d8ca

neelneelneel merged commit d7929e5 into dev Aug 7, 2025
3 checks passed

neelneelneel deleted the 1662-run-autofix-on-dev-to-reduce-merging-issues branch August 7, 2025 17:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

1662 run autofix on dev to reduce merging issues#1663

1662 run autofix on dev to reduce merging issues#1663
neelneelneel merged 6 commits intodevfrom
1662-run-autofix-on-dev-to-reduce-merging-issues

neelneelneel commented Aug 6, 2025

Uh oh!

github-actions bot commented Aug 6, 2025

Uh oh!

github-actions bot commented Aug 6, 2025

Uh oh!

QodoAI-Agent commented Aug 6, 2025

File Walkthrough

Uh oh!

github-actions bot commented Aug 6, 2025

Uh oh!

QodoAI-Agent commented Aug 6, 2025

Uh oh!

QodoAI-Agent commented Aug 6, 2025

Uh oh!

Uh oh!

github-actions bot commented Aug 7, 2025

Uh oh!

QodoAI-Agent commented Aug 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

neelneelneel commented Aug 6, 2025

Description

Changes Made

How to Test

Notes

Uh oh!

github-actions bot commented Aug 6, 2025

Uh oh!

github-actions bot commented Aug 6, 2025

Uh oh!

QodoAI-Agent commented Aug 6, 2025

Title

User description

Description

Changes Made

How to Test

Notes

PR Type

Description

File Walkthrough

Uh oh!

github-actions bot commented Aug 6, 2025

Uh oh!

QodoAI-Agent commented Aug 6, 2025

PR Reviewer Guide 🔍

Uh oh!

QodoAI-Agent commented Aug 6, 2025

PR Code Suggestions ✨

Uh oh!

Uh oh!

github-actions bot commented Aug 7, 2025

Uh oh!

QodoAI-Agent commented Aug 7, 2025

2025-08-07 *

Changed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants