Tools tab code refactor by bannaarisamy-shanmugham-kanini · Pull Request #950 · SEMOSS/semoss-ui

bannaarisamy-shanmugham-kanini · 2025-04-22T11:04:17Z

Description

Refactoring UpgradedVisualizationTool.tsx component to make it scalable across different charts in furture

Changes Made

Converted UpgradedVisualizationTool.tsx contents into different sub components to show tools section based on chart

How to Test

Drag and drop a new chart and then check for the tools section under block settings
tools listed under block settings should match to figma

Notes

…tab-code-refactor

github-actions · 2025-04-22T11:04:29Z

@CodiumAI-Agent /describe

QodoAI-Agent · 2025-04-22T11:05:03Z

Title

Tools tab code refactor

User description

Description

Refactoring UpgradedVisualizationTool.tsx component to make it scalable across different charts in furture

Changes Made

Converted UpgradedVisualizationTool.tsx contents into different sub components to show tools section based on chart

How to Test

Drag and drop a new chart and then check for the tools section under block settings
tools listed under block settings should match to figma

Notes

PR Type

Enhancement

Description

Modularize visualization tool code
Extract tools into reusable components
Streamline variation-specific tool rendering
Add default show: 'true' flag for menus

Changes walkthrough 📝

Relevant files

Enhancement

UpgradedVisualizationTool.tsx `Refactor visualization tool UI` libs/renderer/src/components/block-defaults/echart-visualization-block/variant/bar-chart/UpgradedVisualizationTool.tsx • Extracted chart tool menus into dedicated components • Introduced `ResizingTool`, `ColorpalatteTool`, and others • Replaced large inline conditionals with subcomponent rendering • Centralized variation-specific tool lists (Bar, Pie, Line, etc.)	+1345/-1056

Configuration changes

default-menu.ts `Set default menu visibility` packages/client/src/components/blocks-workspace/menus/default-menu.ts • Added default `show: 'true'` property in dev menus • Ensures blocks are visible by default in development	+2/-0

Need help?
Type /help how to ... in the comments thread for any questions about PR-Agent usage.
Check out the documentation for more information.

github-actions · 2025-04-22T11:05:15Z

@CodiumAI-Agent /review

github-actions · 2025-04-22T11:06:01Z

@CodiumAI-Agent /improve

QodoAI-Agent · 2025-04-22T11:06:05Z

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 Naming Consistency The component and its settings sub‑components use “Colorpalatte” instead of “ColorPalette”, causing inconsistent naming. This typo may lead to confusion or import errors. Consider renaming to the correct spelling across files. const ColorpalatteTool = (({id})=>{ const [colorPalatteSelection, setColorPalatteSelection] = useState(''); const { data, setData } = useBlockSettings<EchartVisualizationBlockDef>(id); return ( <> <ListItem disablePadding> <ListItemButton onClick={(e) => Repetitive Code Each chart type tool list duplicates very similar ListItemButton and state‑toggle logic, resulting in a large, hard‑to‑maintain component. Consider abstracting common behaviour into a reusable hook or higher‑order component to reduce duplication. const ResizingTool = (({id})=>{ const [resizeSelection, setResizeSelection] = useState(''); const { data, setData } = useBlockSettings<EchartVisualizationBlockDef>(id); return ( <> <StyledListItem disablePadding> <ListItemButton onClick={(e) => setResizeSelection((prevList) => prevList === "resizing" ? "" : "resizing", ) } selected={resizeSelection === "resizing"} > <ListItemIcon> <ImageIcon fontSize="large" color={ resizeSelection === "resizing" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Resizing" /> <InfoOutlined /> </ListItemButton> {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 ( <> <ListItem disablePadding> <ListItemButton 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 /> </ListItemButton> </ListItem> {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> <ListItemButton 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 /> </ListItemButton> </StyledListItem> {ganttSelection === "fiscalaxis" && ( <GanttFiscal id={id} path={"option"} /> )} <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> </StyledListItem> {ganttSelection === "targetdate" && ( <GanttTargetLine id={id} path={"option"} /> )} <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> </StyledListItem> {ganttSelection === "customizesymbol" && ( <CustomizeSymbol id={id} path={"option"} /> )} <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> </StyledListItem> {ganttSelection === "togglelegendgantt" && ( <GanttLegend id={id} path={"option"} /> )} <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> </StyledListItem> {ganttSelection === "togglegroupview" && ( <> <GanttGroupView id={id} path={"option"} /> </> )} <ResizingTool id={id} /> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> </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> <ListItemButton 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 /> </ListItemButton> {stackChartSelection === "editxaxis" && ( <EditXAxisStackChart id={id} path={"option"} ></EditXAxisStackChart> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {stackChartSelection === "edityaxis" && ( <EditYAxisStackChart id={id} path={"option"} ></EditYAxisStackChart> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {stackChartSelection === "valuelabel" && ( <ValueLabelStackChart id={id} path={"option"} ></ValueLabelStackChart> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton onClick={(e) => setStackChartSelection((prevList) => prevList === "tooltips" ? "" : "tooltips", ) } selected={stackChartSelection === "tooltips"} > <ListItemIcon> <ImageIcon fontSize="large" color={ stackChartSelection === "tooltips" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Tooltips" /> <InfoOutlined /> </ListItemButton> { stackChartSelection === "tooltips" && ( <TooltipScatterPlot id={id} path="option" /> ) } </StyledListItem> <ResizingTool id={id}/> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> { stackChartSelection === "barstyle" && ( <StackChartBarStyle id={id} path="option" /> ) } </StyledListItem> <StyledListItem disablePadding> <ListItemButton onClick={(e) => setStackChartSelection((prevList) => prevList === "legend" ? "" : "legend", ) } selected={stackChartSelection === "legend"} > <ListItemIcon> <ImageIcon fontSize="large" color={ stackChartSelection === "legend" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Legend" /> <InfoOutlined /> </ListItemButton> { 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> <ListItemButton 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 /> </ListItemButton> {barSelection === "colourbyvalue" && ( <ColourByValue id={id} updateChart={updateChart} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {barSelection === "editxaxis" && ( <EditXAxis id={id} option={data.option} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {barSelection === "edityaxis" && ( <EditYAxis id={id} option={data.option} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {barSelection === "valuelabel" && ( <CustomizeValueLabels id={id} option={data.option} chartType={BAR_CHART_DATA.JSONVALUE[0]} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {barSelection === "barstyle" && ( <VisualizationStyles id={id} option={data.option} path="option" chartType={BAR_CHART_DATA.JSONVALUE[0]} updateChart={updateChart} /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {barSelection === "chartstyle" && ( <ChartStyling option={data.option} id={id} updateChart={updateChart} path="option" /> )} </StyledListItem> <ResizingTool id={id} /> <StyledListItem disablePadding> <ListItemButton onClick={(e) => setBarSelection((prevList) => prevList === "trendlines" ? "" : "trendlines", ) } selected={barSelection === "trendlines"} > <ListItemIcon> <ImageIcon fontSize="large" color={ barSelection === "trendlines" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Trendlines" /> <InfoOutlined /> </ListItemButton> {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" && ( <ListItemButton onClick={(e) => setBarSelection((prevList) => prevList === "barlegend" ? "" : "barlegend", ) } selected={barSelection === "barlegend"} > <ListItemIcon> <ImageIcon fontSize="large" color={ barSelection === "barlegend" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Legend" /> <InfoOutlined /> </ListItemButton> )} {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> <ListItemButton 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 /> </ListItemButton> { scatterSelection === "editxaxis" && ( <EditXAxisScatterPlot id={id} path={"option"} ></EditXAxisScatterPlot> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {scatterSelection === "edityaxis" && ( <EditYAxisScatterPlot id={id} path={"option"} ></EditYAxisScatterPlot> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {scatterSelection === "valuelabel" && ( <ValueLabelScatterPlot id={id} path={"option"} ></ValueLabelScatterPlot> )} </StyledListItem> <ResizingTool id={id} /> <StyledListItem disablePadding> <ListItemButton onClick={(e) => setScatterSelection((prevList) => prevList === "tooltips" ? "" : "tooltips", ) } selected={scatterSelection === "tooltips"} > <ListItemIcon> <ImageIcon fontSize="large" color={ scatterSelection === "tooltips" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Tooltips" /> <InfoOutlined /> </ListItemButton> {scatterSelection === "tooltips" && ( <TooltipScatterPlot id={id} path={"option"} ></TooltipScatterPlot> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton onClick={(e) => setScatterSelection((prevList) => prevList === "symbol" ? "" : "symbol", ) } selected={scatterSelection === "symbol"} > <ListItemIcon> <ImageIcon fontSize="large" color={ scatterSelection === "symbol" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Symbol" /> <InfoOutlined /> </ListItemButton> {scatterSelection === "symbol" && ( <ScatterPlotSymbol id={id} path={"option"} ></ScatterPlotSymbol> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {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> <ListItemButton 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 /> </ListItemButton> {lineSelection === "lineTitle" && ( <LineTitle id={id} path="option" /> )} </StyledListItem> <ResizingTool id={id} /> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {lineSelection === "lineLegend" && ( <LineLegend id={id} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {lineSelection === "lineTooltip" && ( <LineTooltip id={id} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {lineSelection === "lineValueLabel" && ( <LineValueLabels id={id} option={data.option} chartType={BAR_CHART_DATA.JSONVALUE[0]} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {lineSelection === "lineXAixsStyling" && ( <XAxisStyling id={id} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {lineSelection === "lineYAixsStyling" && ( <YAxisStyling id={id} path="option" /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {lineSelection === "lineStyling" && ( <LineStyling id={id} path="option" /> )} </StyledListItem> </> ) }); const MapChartTools = (({id})=>{ const [mapSelection, setMapSelection] = useState(''); return ( <> <ColorpalatteTool id={id} /> <StyledListItem disablePadding> <ListItemButton onClick={(e) => setMapSelection((prevList) => prevList === "tooltips" ? "" : "tooltips", ) } selected={mapSelection === "tooltips"} > <ListItemIcon> <ImageIcon fontSize="large" color={ mapSelection === "tooltips" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Tooltips" /> <InfoOutlined /> </ListItemButton> { mapSelection === "tooltips" && ( <TooltipMapChart id={id} path={"option"} /> )} </StyledListItem> <ResizingTool id={id} /> <StyledListItem disablePadding> <ListItemButton onClick={(e) => setMapSelection((prevList) => prevList === "legend" ? "" : "legend", ) } selected={mapSelection === "legend"} > <ListItemIcon> <ImageIcon fontSize="large" color={ mapSelection === "legend" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Legend" /> <InfoOutlined /> </ListItemButton> {mapSelection === "legend" && ( <LegendToggleMapChart id={id} path={"option"} /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {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> <ListItemButton onClick={(e) => setPieSelection((prevList) => prevList === "tooltip" ? "" : "tooltip", ) } selected={pieSelection === "tooltip"} > <ListItemIcon> <ImageIcon fontSize="large" color={ pieSelection === "tooltip" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Tooltip" /> <InfoOutlined /> </ListItemButton> {pieSelection === "tooltip" && ( <CustomTooltip id={id} path={"option"} /> )} </StyledListItem> <ResizingTool id={id} /> <StyledListItem disablePadding> <ListItemButton onClick={(e) => setPieSelection((prevList) => prevList === "legend" ? "" : "legend", ) } selected={pieSelection === "legend"} > <ListItemIcon> <ImageIcon fontSize="large" color={ pieSelection === "legend" ? "primary" : "disabled" } /> </ListItemIcon> <ListItemText primary="Legend" /> <InfoOutlined /> </ListItemButton> { pieSelection === "legend" && ( <PieLegend id={id} path={"option"} /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {pieSelection === "donutToggle" && ( <ToogleDonut id={id} path={"option"} /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {pieSelection === "title" && ( <PieTitle id={id} path={"option"} /> )} </StyledListItem> <StyledListItem disablePadding> <ListItemButton 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 /> </ListItemButton> {pieSelection === "valueLabel" && ( <PieValueLabel id={id} path={"option"} /> )} </StyledListItem> </> ); }); export const UpgradedVisualizationTool = Incorrect Type The `show` property is assigned as the string `'true'` instead of a boolean. This type mismatch may cause unexpected behaviour when rendering or serializing block settings. Use a boolean value for clarity and correctness. show: 'true', }, listeners: {},

QodoAI-Agent · 2025-04-22T11:07:15Z

PR Code Suggestions ✨

Latest suggestions up to 9951584

Category	Suggestion	Impact
Possible issue	Use boolean for show The `show` property is likely intended to be a boolean, not a string. Changing it to a boolean ensures the rendering logic that checks `data.show` behaves correctly. packages/client/src/components/blocks-workspace/menus/default-menu.ts [1995] -show: 'true', +show: true, Suggestion importance[1-10]: 8 __ Why: The `show` property is currently a string which could break boolean checks; changing it to a boolean ensures `data.show` logic works as intended.	Medium
Possible issue	Safely parse JSON option Parsing a JSON string without error handling can throw at runtime if the string is invalid. Wrap the `JSON.parse` in a `try/catch` to guard against malformed input. libs/renderer/src/components/block-defaults/echart-visualization-block/variant/bar-chart/UpgradedVisualizationTool.tsx [299-302] -const optionToSend = - typeof option === "string" - ? JSON.parse(option) - : option; +let optionToSend; +if (typeof option === "string") { + try { + optionToSend = JSON.parse(option); + } catch (e) { + console.error("Invalid option JSON:", e); + return; + } +} else { + optionToSend = option; +} Suggestion importance[1-10]: 6 __ Why: Adding a `try/catch` around `JSON.parse` prevents runtime crashes on malformed strings and enhances robustness.	Low
General	Fix palette spelling The word “Palette” is misspelled everywhere, making the API inconsistent. Rename the component and state variables to use the correct spelling “Palette”. libs/renderer/src/components/block-defaults/echart-visualization-block/variant/bar-chart/UpgradedVisualizationTool.tsx [262-263] -const ColorpalatteTool = (({id})=>{ - const [colorPalatteSelection, setColorPalatteSelection] = useState(''); +const ColorPaletteTool = ({id}) => { + const [colorPaletteSelection, setColorPaletteSelection] = useState(''); Suggestion importance[1-10]: 5 __ Why: Correcting “palatte” to “palette” improves API consistency and avoids confusion without impacting functionality.	Low

Previous suggestions

Suggestions up to commit d582e5d

Category	Suggestion	Impact
Possible issue	Use boolean for show property Use a boolean value instead of a string for the `show` property. packages/client/src/components/blocks-workspace/menus/default-menu.ts [973] -show: 'true', +show: true, Suggestion importance[1-10]: 8 __ Why: Using a string for a boolean flag is a type mismatch and could lead to logic errors; changing to a real boolean ensures correct behavior and type safety.	Medium
Possible issue	Implement updateChart functionality Implement or remove the empty `updateChart` stub so chart updates propagate via `setData`. libs/renderer/src/components/block-defaults/echart-visualization-block/variant/bar-chart/UpgradedVisualizationTool.tsx [589] -function updateChart(){} +const updateChart = (path, value) => setData(path, value); Suggestion importance[1-10]: 7 __ Why: The empty `updateChart` stub prevents chart controls from updating data; providing a simple implementation that delegates to `setData` enables the intended update flow.	Medium
General	Fix palette spelling inconsistency Correct the spelling of “Palette” in the component, state names, and selection key to avoid inconsistencies. libs/renderer/src/components/block-defaults/echart-visualization-block/variant/bar-chart/UpgradedVisualizationTool.tsx [138-139] -const ColorpalatteTool = (({id})=>{ - const [colorPalatteSelection, setColorPalatteSelection] = useState(''); +const ColorPaletteTool = (({id})=>{ + const [colorPaletteSelection, setColorPaletteSelection] = useState(''); Suggestion importance[1-10]: 6 __ Why: Correcting the spelling of “palette” across component and state names improves code readability and prevents potential bugs due to naming inconsistencies.	Low

…tab-code-refactor

ehynd · 2025-05-14T19:46:59Z

@bannaarisamy-shanmugham-kanini please see comment on #967!

…tab-code-refactor

neelneelneel

Can you split each component into its own file?

bannaarisamy-shanmugham-kanini · 2025-07-21T10:25:33Z

@neelneelneel , this PR changes are already got merged with following PR : #728
and all changes are now in Dev.
Following is the reference link for merging with 728 PR: #728 (comment)

Created with a new task, for reference : #1561

I will keep things updated, on this task progress.

bannaarisamy-shanmugham-kanini added 2 commits April 16, 2025 19:59

build(toolspage): echart tools page refactor and bug fixes

1542f22

Merge branch 'dev' of https://github.com/SEMOSS/semoss-ui into tools-…

d582e5d

…tab-code-refactor

bannaarisamy-shanmugham-kanini requested a review from a team as a code owner April 22, 2025 11:04

bannaarisamy-shanmugham-kanini linked an issue Apr 22, 2025 that may be closed by this pull request

Code Refactoring in Tools tab for echarts #899

Closed

bannaarisamy-shanmugham-kanini added 5 commits April 24, 2025 00:47

Merge branch 'dev' of https://github.com/SEMOSS/semoss-ui into tools-…

6c3b7e2

…tab-code-refactor

Merge branch 'dev' of https://github.com/SEMOSS/semoss-ui into tools-…

824c0b4

…tab-code-refactor

build(toolstab): code refactor with update from dev branch

d766157

Merge branch 'dev' of https://github.com/SEMOSS/semoss-ui into tools-…

b6e61fc

…tab-code-refactor

Merge branch 'dev' of https://github.com/SEMOSS/semoss-ui into tools-…

9951584

…tab-code-refactor

ehynd mentioned this pull request May 12, 2025

Brush Event Bugs #1117

Closed

4 tasks

ehynd mentioned this pull request May 14, 2025

Enhancement of Data tab Styling #967

Merged

Gowrishankar-Palanisamy mentioned this pull request May 16, 2025

Update Data Tab in Charts #728

Closed

2 tasks

bannaarisamy-shanmugham-kanini added 2 commits May 16, 2025 12:47

Merge branch 'dev' of https://github.com/SEMOSS/semoss-ui into tools-…

94b8e2c

…tab-code-refactor

build(toolstab): tools file changes

cd64918

neelneelneel force-pushed the dev branch from 4328fb0 to 6eebd69 Compare May 30, 2025 22:46

Merge branch 'dev' of https://github.com/SEMOSS/semoss-ui into tools-…

d73a05f

…tab-code-refactor

neelneelneel requested changes Jul 18, 2025

View reviewed changes

bannaarisamy-shanmugham-kanini closed this Jul 21, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tools tab code refactor#950

Tools tab code refactor#950
bannaarisamy-shanmugham-kanini wants to merge 10 commits intodevfrom
tools-tab-code-refactor

bannaarisamy-shanmugham-kanini commented Apr 22, 2025

Uh oh!

github-actions bot commented Apr 22, 2025

Uh oh!

QodoAI-Agent commented Apr 22, 2025

Uh oh!

github-actions bot commented Apr 22, 2025

Uh oh!

github-actions bot commented Apr 22, 2025

Uh oh!

QodoAI-Agent commented Apr 22, 2025

Uh oh!

QodoAI-Agent commented Apr 22, 2025 •

edited

Loading

Uh oh!

ehynd commented May 14, 2025 •

edited

Loading

Uh oh!

neelneelneel left a comment

Uh oh!

bannaarisamy-shanmugham-kanini commented Jul 21, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

bannaarisamy-shanmugham-kanini commented Apr 22, 2025

Description

Changes Made

How to Test

Notes

Uh oh!

github-actions bot commented Apr 22, 2025

Uh oh!

QodoAI-Agent commented Apr 22, 2025

Title

User description

Description

Changes Made

How to Test

Notes

PR Type

Description

Changes walkthrough 📝

Uh oh!

github-actions bot commented Apr 22, 2025

Uh oh!

github-actions bot commented Apr 22, 2025

Uh oh!

QodoAI-Agent commented Apr 22, 2025

PR Reviewer Guide 🔍

Uh oh!

QodoAI-Agent commented Apr 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Code Suggestions ✨

Previous suggestions

Uh oh!

ehynd commented May 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

neelneelneel left a comment

Choose a reason for hiding this comment

Uh oh!

bannaarisamy-shanmugham-kanini commented Jul 21, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

QodoAI-Agent commented Apr 22, 2025 •

edited

Loading

ehynd commented May 14, 2025 •

edited

Loading