@adaptabletools/adaptable 23.0.4 → 23.0.5-canary.1

package/src/View/GridInfo/GridInfoPopup/GridInfoPopup.js

@@ -70,9 +70,6 @@ export const GridInfoPopup = (props) => {
         Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
         Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
     };
-    // Variant used by the Grid Options tab — the Value column allows newlines
-    // in the rendered string (preserved via `white-space: pre-line`), so a
-    // nested *Options object can show one `"key": value` per line.
     const optionsColumnsMap = {
         Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
         Value: {
@@ -90,16 +87,10 @@ export const GridInfoPopup = (props) => {
                 }, children: String(value ?? '') })),
         },
     };
-    // ---- Grid Options tab: build one InfiniteTableGrid section per non-empty
-    // ---- options group on the AdaptableOptions object.
     const titleCase = (camel) => camel
         .replace(/([a-z])([A-Z])/g, '$1 $2')
         .replace(/^./, (c) => c.toUpperCase())
         .replace(/\s./g, (c) => c.toUpperCase());
-    // Renders a single primitive / function / array / nested-object value
-    // (used for the inner key:value pairs when expanding a nested options
-    // object). Short objects/arrays stay on one line; longer ones get
-    // pretty-printed across multiple lines so they don't blow past the cell.
     const ONE_LINE_MAX = 60;
     const fnReplacer = (_k, val) => typeof val === 'function' ? '[Function]' : val;
     const formatValuePart = (v) => {
@@ -132,14 +123,9 @@ export const GridInfoPopup = (props) => {
         if (v === null)
             return '(null)';
         if (Array.isArray(v)) {
-            // Top-level array values (e.g. `colorPalette`, `systemFilterPredicates`).
-            // Short arrays stay on one line; longer ones get pretty-printed across
-            // multiple lines so they don't blow past the cell.
             return formatValuePart(v);
         }
         if (typeof v === 'object') {
-            // Nested options-style object → render as one `key: value` per line.
-            // `undefined` entries are filtered out so empty defaults don't show up.
             const entries = Object.entries(v).filter(([, val]) => val !== undefined);
             if (entries.length === 0)
                 return '{}';
@@ -152,11 +138,6 @@ export const GridInfoPopup = (props) => {
         const defaults = getDefaultAdaptableOptions();
         const baseRows = [];
         const groupSections = [];
-        // A function value should only be displayed when it has been explicitly
-        // provided by the user. AdapTable ships a handful of identity-function
-        // defaults (e.g. `stateOptions.applyState`) that are not interesting to
-        // surface here — we suppress those by reference-comparing against the
-        // values returned from `getDefaultAdaptableOptions()`.
         const isUserProvidedFunction = (groupKey, propKey, fn) => {
             if (typeof fn !== 'function')
                 return false;
@@ -175,11 +156,8 @@ export const GridInfoPopup = (props) => {
                 const rows = Object.keys(value)
                     .filter((sk) => {
                     const sv = value[sk];
-                    // skip empties (undefined / null)
                     if (sv == null)
                         return false;
-                    // suppress AdapTable's default callback implementations — keep
-                    // only user-provided overrides
                     if (typeof sv === 'function' && !isUserProvidedFunction(key, sk, sv)) {
                         return false;
                     }
@@ -191,8 +169,6 @@ export const GridInfoPopup = (props) => {
                 groupSections.push({ title: titleCase(key), rows });
             }
             else {
-                // top-level function defaults aren't a concern (none exist on the
-                // root of `AdaptableOptions`), but apply the same rule for safety
                 if (typeof value === 'function' && defaults[key] === value)
                     return;
                 baseRows.push({ Key: key, Value: displayValue(value) });
@@ -204,10 +180,7 @@ export const GridInfoPopup = (props) => {
         sections.push(...groupSections);
         return sections;
     })();
-    // Variable row height for Grid Options sections — counts the number of
-    // lines in the formatted value string (including visual wraps for very
-    // long unbroken lines) and grows the row to fit.
-    const VALUE_CHARS_PER_LINE = 70; // rough estimate at the Value column width
+    const VALUE_CHARS_PER_LINE = 70;
     const visualLineCount = (text) => {
         if (!text)
             return 1;
@@ -223,11 +196,8 @@ export const GridInfoPopup = (props) => {
     };
     const sectionHeight = (rows) => {
         const total = rows.reduce((acc, r) => acc + calculateRowHeight(r), 0);
-        // 40px header, capped so a single huge group can't dominate the popup
         return Math.min(total + 40, 400);
     };
-    // Which tabs the user has opted in to. Falls back to all three (matching
-    // the default in `DefaultAdaptableOptions`) when the option isn't set.
     const enabledTabs = api.optionsApi.getSettingsPanelOptions()?.gridInfoTabs ??
         ['Grid Options', 'Grid Summary', 'Grid State'];
     const showSummary = enabledTabs.includes('Grid Summary');

package/src/View/Layout/LayoutViewPanel.js

@@ -16,7 +16,6 @@ import { NewDropdownButton } from '../../components/DropdownButton';
 import { Icon } from '../../components/icons';
 import { Flex } from '../../components/Flex';
 import { SingleSelect } from '../../components/NewSelect';
-// import { SingleCombobox } from '../../components/Combobox';
 export const COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 const LayoutViewPanelComponent = (props) => {
     const { Layouts, CurrentLayoutName, accessLevel, viewType, api, onSelectLayout, showMissingLayoutsError, } = props;
@@ -27,7 +26,6 @@ const LayoutViewPanelComponent = (props) => {
         }
     }, [isErrorLayout]);
     const layoutEntity = Layouts.find((x) => x.Name === CurrentLayoutName || x.Uuid === CurrentLayoutName);
-    // the global access level (Layout Entitlement)
     const cloneAccessLevel = accessLevel;
     const newAccessLevel = accessLevel;
     const entityAccessLevel = AdaptableHelper.getAccessLevelForObject(layoutEntity, accessLevel);

package/src/View/Layout/PivotDetailsPopoup.js

@@ -39,8 +39,6 @@ export const PivotDetailsPopoup = (props) => {
             [primaryKey]: { field: primaryKey, header: getFriendlyName(primaryKey) },
         };
         if (hasPivotValue) {
-            // pivot_license_MIT License_stargazers_count
-            // splitting by _ does not work
             columns = {
                 ...columns,
                 [aggColumn]: { field: aggColumn, header: getFriendlyName(aggColumn) },

package/src/View/Layout/TransposedPopup.js

@@ -11,9 +11,7 @@ import { ExportModuleId } from '../../Utilities/Constants/ModuleConstants';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 const ADAPTABLE_CONTAINER_ID = 'transposed-adaptable-container';
 const AG_GRID_CONTAINER_ID = 'transposed-adaptable-ag-grid-container';
-/** Field used for the first column in transposed grid (hidden, holds column id). */
 const TRANSPOSED_FIRST_COLUMN_FIELD = '_transposed_column_value';
-/** Header used for the first visible column in transposed grid (shows friendly name). */
 const TRANSPOSED_FIRST_COLUMN_HEADER = '_transposed_column_header';
 function buildTransposedAdaptableOptions({ hostOptions, transposedRowsAndColumns, currentTheme, }) {
     return {
@@ -129,11 +127,6 @@ export const TransposedPopup = (props) => {
             .map((c) => adaptable.api.columnApi.getColumnWithColumnId(c))
             .filter((col) => col != null);
     }, [transposeConfig.columnsToTranspose, adaptable.api]);
-    /**
-     * Build transposed structure: original rows become columns (colId = primaryKey value),
-     * original columns become rows. Each transposed row has the column id/header plus
-     * one cell per original row keyed by primaryKey value.
-     */
     const transposedRowsAndColumns = React.useMemo(() => {
         const transposedColumns = [];
         const transposedRows = [];

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -197,7 +197,6 @@ export const LayoutWizard = (props) => {
                 isValid: (data) => isAggregationsSectionValid(data),
                 render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(AggregationsSection, { layoutWizardMode: layoutWizardMode, onChange: (layout) => {
                             let newLayout = cloneObject(layout);
-                            // if we do not have an weighted avg col, we need to clear the row summary if one exists
                             if (newLayout.RowSummaries) {
                                 const aggColsMap = (newLayout.TableAggregationColumns || []).reduce((acc, { ColumnId, AggFunc }) => {
                                     acc[ColumnId] = AggFunc;
@@ -207,14 +206,10 @@ export const LayoutWizard = (props) => {
                                     return {
                                         ...rowSummary,
                                         ColumnsMap: Object.entries(rowSummary.ColumnsMap).reduce((acc, [columnId, aggFunc]) => {
-                                            if (
-                                            // see if it is weighted avg
-                                            aggFunc === WEIGHTED_AVERAGE_AGGREGATED_FUNCTION &&
-                                                // see if we have a weight in the agg columns
+                                            if (aggFunc === WEIGHTED_AVERAGE_AGGREGATED_FUNCTION &&
                                                 aggColsMap[columnId] &&
                                                 (typeof aggColsMap[columnId] !== 'object' ||
                                                     aggColsMap[columnId].weightColumnId)) {
-                                                // need to remove the row summary
                                                 return acc;
                                             }
                                             acc[columnId] = aggFunc;

package/src/View/Layout/Wizard/sections/AggregationsSection.js

@@ -163,8 +163,6 @@ export const AggregationsSection = (props) => {
     const numberColumns = adaptable.api.columnApi.getNumericColumns();
     const allAggregatableColumnIds = allAggregableColumns.map((col) => col.columnId);
     (layout.TableAggregationColumns || []).forEach((agg) => {
-        // we need to also display the columns currently aggregated,
-        // even if they are not aggregatable
         if (!allAggregatableColumnIds.includes(agg.ColumnId)) {
             allAggregatableColumnIds.push(agg.ColumnId);
         }

package/src/View/Layout/Wizard/sections/ColumnsSection.js

@@ -32,7 +32,6 @@ export const ColumnsSectionSummary = (props) => {
     const { data: contextLayout } = useOnePageAdaptableWizardContext();
     const layout = props.layout ?? contextLayout;
     const groups = getTableColumnsSummaryGroups(layout, adaptable.api, TABLE_COLUMNS_WIZARD_SUBSECTION_LABELS);
-    // Wizard summary lists every column — no truncation (settings panel uses truncateColumnSummaryValues).
     return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-3", children: groups.map(({ label, values, emptyLabel }) => (_jsxs(Box, { children: [_jsx(Box, { className: "twa:text-xs twa:font-medium twa:mb-1", children: label }), values.length ? renderSummaryStringTags(values) : _jsx(Tag, { children: emptyLabel })] }, label))) }));
 };
 const isSelectionColumn = (columnId) => columnId === AG_GRID_SELECTION_COLUMN;
@@ -66,24 +65,15 @@ export const ColumnsSection = (props) => {
     const { data: layout } = useOnePageAdaptableWizardContext();
     const [searchInputValue, setSearchInputValue] = React.useState('');
     const [selectedColumnId, setSelectedColumnId] = React.useState(null);
-    // the selection column is a special column managed by AG Grid - it is not
-    // returned by `getUIAvailableColumns`, but we still want to expose it in the
-    // column list (similar to auto row group columns) so users can reorder/pin it
     const hasSelectionColumn = adaptable.api.columnApi
         .getColumns()
         .some((col) => col.isGeneratedSelectionColumn);
     const allColumns = adaptable.api.columnApi
         .getUIAvailableColumns()
         .filter((col) => {
-        // since the "Row Groups" section of the editor can determine a change
-        // which is not reflected into AG Grid until we hit finish
-        // so we only rely on non-generated columns, which are the same
         return !col.isGeneratedRowGroupColumn;
     })
-        // if the current Layout is a PivotLayout, then we also filter out current Pivot Result Columns
         .filter((col) => !col.isGeneratedPivotResultColumn)
-        // selection columns are not returned by `getUIAvailableColumns` but guard
-        // against any future change
         .filter((col) => !col.isGeneratedSelectionColumn);
     const onChange = (data) => {
         if (hasSelectionColumn &&
@@ -93,9 +83,6 @@ export const ColumnsSection = (props) => {
         }
         props.onChange(data);
     };
-    // however, changes in RowGroupedColumns done in the previous step
-    // are reflected into the layout, so we use the latest layout.RowGroupedColumns
-    // to create new columns
     if (layout.RowGroupedColumns && layout.RowGroupedColumns.length > 0) {
         if (layout.RowGroupDisplayType === 'single') {
             allColumns.unshift(generateAutoRowGroupSingleColumn());
@@ -121,9 +108,6 @@ export const ColumnsSection = (props) => {
         return acc;
     }, {});
     let TableColumns = layout.TableColumns;
-    // when the selection column exists but is not explicitly listed in
-    // TableColumns, `sortArrayWithOrder` would push it to the end - instead we
-    // want it at the start (consistent with AG Grid's default position for it)
     if (hasSelectionColumn && !TableColumns.includes(AG_GRID_SELECTION_COLUMN)) {
         TableColumns = [AG_GRID_SELECTION_COLUMN, ...TableColumns];
     }
@@ -136,16 +120,7 @@ export const ColumnsSection = (props) => {
     const currentOrderIds = currentOrder.map((col) => col.columnId);
     const handleColumnsChange = (newColumns) => {
         if (searchInputValue) {
-            // there's a search in-place
-            // so the current `newColumns` does not actually contain all the columns
-            // so we need to recompute it
-            const newOrder = sortColumnIdsByOrder(
-            // given those are all the columns
-            ColumnOrderAllColumns.map((col) => col.columnId), 
-            // we want to sort them to have this new order
-            // - this sorting will leave all ids not found in this new order untouched
-            newColumns.map((col) => col.columnId));
-            // so basically we now have the correct order, with all columns
+            const newOrder = sortColumnIdsByOrder(ColumnOrderAllColumns.map((col) => col.columnId), newColumns.map((col) => col.columnId));
             newColumns = newOrder.map((colId) => colIdToCol[colId]);
         }
         const oldColumns = ColumnOrderAllColumns;
@@ -192,15 +167,9 @@ export const ColumnsSection = (props) => {
                 if (isCurrent) {
                     return true;
                 }
-                // include all columns past the current column order
-                // that reach until the index of the currently checked column
                 const shouldInclude = idsToIndexes.get(colId) <= biggestIndex;
                 if (shouldInclude) {
                     if (!columnIdSet.has(colId) && visible) {
-                        // this is a column that's between the current column order limit
-                        // and the currently checked column
-                        // so we need to include it in order
-                        // but make it invisible
                         ColumnVisibility[colId] = false;
                     }
                 }

package/src/View/Layout/Wizard/sections/RowSummarySection.js

@@ -47,7 +47,6 @@ const getAvailableExpressionsForColumnType = (columnType, availableScalarExpress
     const expressions = Object.keys(availableScalarExpressions)
         .filter((availableExpression) => {
         if (!aggregatedExpressionFunctions.includes(availableExpression)) {
-            // is custom
             return true;
         }
         return Boolean(summarySupportedExpressions.includes(availableExpression));
@@ -55,12 +54,10 @@ const getAvailableExpressionsForColumnType = (columnType, availableScalarExpress
         .map((expression) => {
         const expressionDef = availableScalarExpressions[expression];
         let firstArg = null;
-        // filter out expressions without inputs defined
         if (!expressionDef?.inputs) {
             return null;
         }
         if (Array.isArray(expressionDef?.inputs?.[0])) {
-            // @ts-ignore
             firstArg = expressionDef.inputs.find((input) => input.includes(columnInputType))?.[0];
         }
         else {

package/src/View/Layout/Wizard/sections/columnLayoutHelpers.js

@@ -14,7 +14,6 @@ export function getLayoutPinnedColumnIds(layout, side) {
         .filter(([, pin]) => pin === side)
         .map(([columnId]) => columnId);
 }
-/** Whether this column has sizing stored in the Layout that differs from grid defaults. */
 export function hasExplicitLayoutSizing(columnId, sizing, resolveDefaultWidth) {
     if (!sizing) {
         return false;
@@ -57,7 +56,6 @@ export function formatColumnSizingBrief(columnId, sizing, resolveDefaultWidth) {
     }
     return parts.join(', ');
 }
-/** Width/flex values to show in the sizing editor (default grid widths are omitted). */
 export function getExplicitSizingDisplayValues(columnId, sizing, resolveDefaultWidth) {
     if (!sizing) {
         return {

package/src/View/Layout/Wizard/sections/layoutWizardColumns.js

@@ -2,13 +2,9 @@ import { generateAutoRowGroupColumnForColumn, generateAutoRowGroupSingleColumn,
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { AG_GRID_GROUPED_COLUMN, AG_GRID_SELECTION_COLUMN } from '../../../../Utilities/Constants/GeneralConstants';
 import { WIZARD_COLUMN_LIST_HEADER_CLASS, WIZARD_COLUMN_LIST_OPTION_CLASS, WIZARD_COLUMN_LIST_SEARCH_CLASS, } from '../../../Components/wizardColumnListStyles';
-/** ValueSelector row sizing — matches Visibility and Order list rows. */
 export const LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS = WIZARD_COLUMN_LIST_OPTION_CLASS;
-/** Compact list header — spacing between Select All, Show Selected Only, and search. */
 export const LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS = WIZARD_COLUMN_LIST_HEADER_CLASS;
-/** Narrow search field (matches Visibility list column width, not full card width). */
 export const LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS = WIZARD_COLUMN_LIST_SEARCH_CLASS;
-/** Columns shown in Layout wizard column steps, in layout table order. */
 export function getLayoutWizardOrderedColumns(adaptable, layout) {
     const hasSelectionColumn = adaptable.api.columnApi
         .getColumns()

package/src/View/Note/NotePopup.js

@@ -13,7 +13,6 @@ const tableDOMProps = {
     style: {
         height: '100%',
         minWidth: '10rem',
-        // minHeight: 600,
     },
 };
 const columnTypes = {

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -32,7 +32,6 @@ function mapStateToProps(state, ownProps) {
         QuickSearchText: quickSearch.QuickSearchText,
         QuickSearchTextMatchStyle: resolveQuickSearchTextMatchStyle(quickSearch),
         QuickSearchCurrentTextMatchStyle: resolveQuickSearchCurrentTextMatchStyle(quickSearch),
-        // Cell match: show only what is in state — defaults are not applied until explicitly set
         QuickSearchCellMatchStyle: isQuickSearchStyleUnset(quickSearch.CellMatchStyle)
             ? {}
             : quickSearch.CellMatchStyle,

package/src/View/StatusBar/AdaptableStatusBar.js

@@ -23,14 +23,10 @@ export const AdaptableStatusBar = (props) => {
             if (!module?.isModuleVisible()) {
                 return _jsx(React.Fragment, {}, subPanel);
             }
-            /**
-             * Both view properties and status panel are optional.
-             */
             const statusBarPanelProps = module.getViewProperties?.()?.getStatusBarPanelProps?.() ?? {};
             const moduleInfo = module.moduleInfo;
             const onAction = statusBarPanelProps.onAction ??
                 (() => {
-                    // #by-default-open-settings-panel-for-module
                     const menuItem = allMenuItems.find((menuItem) => menuItem.category === subPanel);
                     if (menuItem?.reduxAction) {
                         dispatch(menuItem.reduxAction);

package/src/View/StatusBar/StatusBarPanel.js

@@ -5,12 +5,6 @@ import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
 import { AdaptablePopover } from '../AdaptablePopover';
 import { Flex, Box } from '../../components/Flex';
 import { cn } from '../../lib/utils';
-/**
- * Statusbar sub panel are similar to vs code:
- * - text
- * - action
- * - icon
- */
 export const StatusBarPanel = (props) => {
     const { icon, content, popover, popoverMinWidth, view, onAction, extraActions, triggerActionOnWrapperClick = true, tooltip, ...flexProps } = props;
     const handleAction = () => onAction();
@@ -24,12 +18,10 @@ export const StatusBarPanel = (props) => {
     }, []);
     const shouldTriggerActionOnWrapperClick = triggerActionOnWrapperClick && !popover;
     const handleWrapperClick = React.useCallback(() => {
-        // handle action only if there is no popover
         if (shouldTriggerActionOnWrapperClick) {
             handleAction();
         }
     }, [popover, triggerActionOnWrapperClick]);
-    // popover
     const popoverContent = typeof popover === 'function'
         ? React.createElement(popover)
         : popover;

package/src/View/StatusBar/StatusBarPopup.js

@@ -47,8 +47,6 @@ export const StatusBarPopup = (props) => {
                 moduleShortcutIds.push(item.Id);
             }
         });
-        // Roughly balance the two boxes by item count (~10 panels vs ~17 shortcuts)
-        // so the wider list gets the extra room and they feel more even.
         return [
             {
                 listId: 'UNUSED-PANELS',

package/src/View/StyledColumn/Wizard/BadgePillStyleEditor.js

@@ -6,15 +6,6 @@ import { Toggle, ToggleGroup } from '../../../components/Toggle';
 import { renderSummaryLabelValueTags } from '../../Wizard/SummaryColorTag';
 const LABEL_COLUMN = { name: 'label', style: { textAlign: 'start' } };
 const CHILD_COLUMN = { name: 'children' };
-/**
- * Compact editor for the cut-down {@link BadgePillStyle}.
- *
- * Intentionally narrower than `StyleComponent`:
- * - **No** `BorderRadius` — corner radius is owned by `Shape`.
- * - **No** `Alignment` — badge-row alignment is column-level (`BadgeStyle.Font`).
- * - **No** `ClassName` — pill `ClassName` had no effect at runtime; gone.
- * - **No** `FontSize` — pills inherit cell font sizing.
- */
 export const BadgePillStyleEditor = (props) => {
     const pill = props.value ?? {};
     const { disabled } = props;
@@ -40,7 +31,6 @@ export const BadgePillStyleEditor = (props) => {
     }
     return (_jsx(Box, { className: "twa:mt-2 twa:rounded-standard twa:border twa:border-border twa:overflow-hidden twa:shadow-sm", children: _jsx(Box, { className: "twa:p-3", children: form }) }));
 };
-/** Descriptive pill properties for summary panels (`Label: value` strings). */
 export const getBadgePillStyleSummaryItems = (pill) => {
     if (!pill) {
         return [];
@@ -66,7 +56,6 @@ export const getBadgePillStyleSummaryItems = (pill) => {
     }
     return items;
 };
-/** Compact summary tags for a {@link BadgePillStyle}; used by wizard summaries. */
 export const renderBadgePillStyleSummaryTags = (pill) => {
     const items = getBadgePillStyleSummaryItems(pill);
     if (!items.length) {

package/src/View/StyledColumn/Wizard/StyledColumnSliceStyleEditors.js

@@ -16,14 +16,6 @@ const FONT_SIZE_ITEMS = [
     { value: 'Large', label: 'Large' },
     { value: 'XLarge', label: 'XLarge' },
 ];
-/**
- * Compact editor for the `Font` slice (`CellFontStyle`).
- *
- * Used by Styled Column wizards (Gradient, Percent Bar, Bullet Chart) that
- * own a `Font?` slot. Any change emits a new `CellFontStyle` (or
- * `undefined` once every key is unset) which the host wizard merges back
- * into its `*Style` patch.
- */
 const disabledClassName = (disabled) => disabled ? 'twa:opacity-50 twa:pointer-events-none' : '';
 export const StyledColumnFontStyleEditor = (props) => {
     const font = props.value ?? {};
@@ -31,7 +23,6 @@ export const StyledColumnFontStyleEditor = (props) => {
     const disabledClass = disabledClassName(disabled);
     const update = (patch) => {
         const next = { ...font, ...patch };
-        // strip empty/undefined keys
         Object.keys(next).forEach((k) => {
             const v = next[k];
             if (v === undefined || v === null || v === '') {
@@ -55,13 +46,6 @@ export const StyledColumnFontStyleEditor = (props) => {
                                             FontSize: (value || undefined),
                                         }) }) })] }) }) }), !hideAlignment && (_jsx(FormRow, { label: "Alignment:", children: _jsx(Box, { className: disabledClass, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: font.Alignment === 'Left', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Left' : undefined) }), _jsx(Toggle, { icon: "align-center", pressed: font.Alignment === 'Center', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Center' : undefined) }), _jsx(Toggle, { icon: "align-right", pressed: font.Alignment === 'Right', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Right' : undefined) })] }) }) }) }))] }) }));
 };
-/**
- * Compact editor for the `Cell` slice (`CellBoxStyle`).
- *
- * Used by Styled Column wizards (Rating, Sparkline) that own a `Cell?`
- * slot. Any change emits a new `CellBoxStyle` (or `undefined` once every
- * key is unset) which the host wizard merges back into its `*Style` patch.
- */
 export const StyledColumnCellStyleEditor = (props) => {
     const cell = props.value ?? {};
     const cellRef = React.useRef(cell);
@@ -84,9 +68,6 @@ export const StyledColumnCellStyleEditor = (props) => {
     };
     return (_jsx(Box, { children: _jsxs(FormLayout, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [_jsx(FormRow, { label: "Background:", children: _jsx(OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: cell.BackColor, defaultColor: "#ffffff", onChange: (c) => update({ BackColor: c }) }) }), _jsx(FormRow, { label: "Border colour:", children: _jsx(OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: cell.BorderColor, defaultColor: "#000000", onChange: (c) => update({ BorderColor: c }) }) }), _jsx(FormRow, { label: "Border radius:", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [_jsx(NumberInput, { disabled: disabled, className: "twa:w-20", value: cell.BorderRadius, min: 0, max: 64, step: 1, onChange: (v) => update({ BorderRadius: v === undefined || isNaN(Number(v)) ? undefined : v }) }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "px" })] }) })] }) }));
 };
-/**
- * Descriptive font properties for summary panels (`Label: value` strings).
- */
 export const getCellFontStyleSummaryItems = (font) => {
     if (!font) {
         return [];
@@ -112,9 +93,6 @@ export const getCellFontStyleSummaryItems = (font) => {
     }
     return items;
 };
-/**
- * Compact summary tags for the Font slice; used by wizard summary panels.
- */
 export const renderFontStyleSummaryTags = (font) => {
     const items = getCellFontStyleSummaryItems(font);
     if (!items.length) {
@@ -122,9 +100,6 @@ export const renderFontStyleSummaryTags = (font) => {
     }
     return renderSummaryLabelValueTags(items);
 };
-/**
- * Descriptive cell box properties for summary panels (`Label: value` strings).
- */
 export const getCellBoxStyleSummaryItems = (cell) => {
     if (!cell) {
         return [];
@@ -141,9 +116,6 @@ export const getCellBoxStyleSummaryItems = (cell) => {
     }
     return items;
 };
-/**
- * Compact summary tags for the Cell slice; used by wizard summary panels.
- */
 export const renderCellStyleSummaryTags = (cell) => {
     const items = getCellBoxStyleSummaryItems(cell);
     if (!items.length) {

package/src/View/StyledColumn/Wizard/StyledColumnSparklineSettingsSection.js

@@ -13,7 +13,6 @@ import { getCellBoxStyleSummaryItems, StyledColumnCellStyleEditor, } from './Sty
 import { Card } from '../../../components/Card';
 import ErrorBox from '../../../components/ErrorBox';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
-/** Sentinel for the theme dropdown — persisted options omit `theme` when this is chosen. */
 const SPARKLINE_CUSTOM_COLOURS_THEME = '__custom__';
 const SparklineTypes = {
     LINE: 'line',
@@ -84,9 +83,6 @@ export const getStyledColumnSparklineStyleViewValues = (data) => {
         includeEmptyFeatures: false,
     });
 };
-/**
- * Wizard-step summary for the Sparkline Settings step.
- */
 export const renderSparklineSummary = (data) => {
     const sparkline = data.SparklineStyle;
     if (!sparkline?.options) {
@@ -97,11 +93,6 @@ export const renderSparklineSummary = (data) => {
     });
     return renderSummaryStringTags(items);
 };
-/**
- * Validation for the Sparkline Settings wizard step.
- * - Sparkline type must be set (defaulted to `line` so this is mostly a safety net).
- * - When Min and Max overrides are both provided, Min must be strictly less than Max.
- */
 export const isValidSparklineSettings = (data) => {
     const opts = data.SparklineStyle?.options;
     if (!opts?.type) {
@@ -114,8 +105,6 @@ export const isValidSparklineSettings = (data) => {
 };
 export const StyledColumnSparklineSettingsSection = ({ onChange }) => {
     const { data, api } = useOnePageAdaptableWizardContext();
-    // Compute defaults non-destructively — never mutate persisted state during
-    // render. The chart `type` is required so default it to `line` if absent.
     const persistedOptions = data.SparklineStyle?.options;
     const sparklineOptions = persistedOptions
         ? { ...persistedOptions, type: persistedOptions.type ?? SparklineTypes.LINE }
@@ -252,8 +241,6 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
 };
 const SparklineAxisOptions = ({ options, onChange, }) => {
     const { api } = useOnePageAdaptableWizardContext();
-    // Non-destructive default for the axis sub-tree so we never mutate the
-    // persisted options object during render.
     const sparklineOptions = {
         ...(options ?? {}),
         axis: {

package/src/View/StyledColumn/Wizard/StyledColumnWizard.js

@@ -25,11 +25,6 @@ import { StyledColumnIconPreview } from './StyledColumnWizardStyleSection/Compon
 import { StyledColumnBulletPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview';
 import { StyledColumnRangeBarPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview';
 import { StyledColumnSparklinePreview } from './StyledColumnWizardStyleSection/Components/StyledColumnSparklinePreview';
-/**
- * Mirrors the migration default in `VersionUpgrade23.patchStyledColumnName` and
- * the auto-fill logic in `StyledColumnWizardTypeSection` so users opening the
- * wizard immediately see a sensible Name (e.g. `Badge-tradeId`).
- */
 const computeDefaultStyledColumnName = (sc) => {
     let typeKey = '';
     if (sc.GradientStyle)
@@ -53,7 +48,6 @@ const computeDefaultStyledColumnName = (sc) => {
     }
     return `${typeKey}-${sc.ColumnId || 'column'}`;
 };
-/** First wizard step to open when editing an existing Styled Column (column menu, settings list, etc.). */
 export const getStyledColumnEditDefaultSectionName = (styledColumn) => {
     if (styledColumn.BadgeStyle) {
         return 'Badges';
@@ -84,10 +78,6 @@ export const StyledColumnWizard = (props) => {
     const [styledColumn, setStyledColumn] = useState(() => {
         if (data) {
             const cloned = cloneObject(data);
-            // For *Edit* (existing object loaded from state) we fall back to the
-            // migration default if the Name is somehow missing. For *New* we leave
-            // the Name blank so the user enters one themselves — same pattern as
-            // Format Column / Alert / Custom Sort etc.
             const isNew = props.popupParams?.action === 'New';
             if (!isNew && !cloned.Name) {
                 cloned.Name = computeDefaultStyledColumnName(cloned);
@@ -95,16 +85,11 @@ export const StyledColumnWizard = (props) => {
             return cloned;
         }
         const newData = ObjectFactory.CreateEmptyStyledColumn();
-        // Default new Styled Columns to a Badge — applicable to every data type
-        // and the most-used styled column overall, so it makes a sensible
-        // initial pick in the Type wizard step.
         newData.BadgeStyle = {
             Badges: [ObjectFactory.CreateDefaultStyledColumnBadge()],
         };
         if (props.popupParams?.column && props.popupParams?.action === 'New') {
             newData.ColumnId = props.popupParams.column.columnId;
-            // For numeric-array columns the natural pick is a Sparkline; flip the
-            // default rather than open a Badge over an array column.
             if (props.popupParams.column.dataType.includes('Array')) {
                 newData.SparklineStyle = {};
                 delete newData.BadgeStyle;
@@ -265,10 +250,6 @@ export const StyledColumnWizard = (props) => {
             render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnBadgeStyleSection, { onChange: setStyledColumn }) })),
         });
     }
-    // Persistent live preview shown at the top of the section content on
-    // every step. We render the bare preview (no Card chrome) so it sits
-    // flush above the form. Only one of these can apply at a time — the
-    // styled column owns exactly one of these style buckets.
     let headerPreview = null;
     if (styledColumn.GradientStyle) {
         headerPreview = _jsx(StyledColumnGradientPreview, { data: styledColumn });
@@ -294,12 +275,7 @@ export const StyledColumnWizard = (props) => {
     else if (styledColumn.SparklineStyle) {
         headerPreview = _jsx(StyledColumnSparklinePreview, { data: styledColumn });
     }
-    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, 
-        // Display the picked type in the header (e.g. "Gradient Column",
-        // "Percent Bar Column") so the user always knows which kind of
-        // column they're configuring. Falls back to "Styled Column"
-        // before a type has been selected.
-        moduleName: getStyledColumnWizardTitle(styledColumn), data: styledColumn, headerPreview: headerPreview, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
+    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, moduleName: getStyledColumnWizardTitle(styledColumn), data: styledColumn, headerPreview: headerPreview, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
             {
                 details: 'Enter a Name and select a Styled Column Type',
                 isValid: (data) => {