@adaptabletools/adaptable 23.0.4 → 23.0.5-canary.1

package/src/View/Components/ColumnFilter/useAdaptableFilterWrapper.js

@@ -14,7 +14,6 @@ export const useAdaptableFilterWrapper = (columnId, filterComponent, handleOnCha
     const column = api.columnApi.getColumnWithColumnId(columnId);
     const columnFilterOptions = api.optionsApi.getFilterOptions().columnFilterOptions;
     const qlPredicateDefs = React.useMemo(() => {
-        // this is NOT the ideal place to do this, but it is what it is: autoGroupCol should NOT have the 'Blanks'/'NonBlanks' predicates
         const predicateDefs = api.filterApi.columnFilterApi
             .getFilterPredicateDefsForColumn(column)
             .filter((predDef) => {
@@ -34,7 +33,6 @@ export const useAdaptableFilterWrapper = (columnId, filterComponent, handleOnCha
         ? mapColumnFilterToQlPredicate(columnFilter, column, qlPredicateDefs, columnFilterOptions, filterComponent, api)
         : null;
     const handleOnChange = (adaptablePredicate, logic = 'AND') => {
-        // make sure we always have the latest columnFiler
         const columnFilter = adaptable.api.filterApi.columnFilterApi.getColumnFilterForColumn(columnId);
         const newFilter = {
             ...columnFilter,
@@ -52,9 +50,6 @@ export const useAdaptableFilterWrapper = (columnId, filterComponent, handleOnCha
         }
     };
     const handleClear = React.useCallback(() => dispatch(LayoutRedux.LayoutColumnFilterClear(columnId)), [columnId]);
-    /**
-     * Converts a QlPredicate to an AdaptablePredicate and dispatches the change.
-     */
     const handlePredicateChange = React.useCallback((newPredicate) => {
         if (!newPredicate) {
             handleClear();

package/src/View/Components/ColumnFilter/utils.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import { isAdaptableIcon } from '../../../components/Icon';
 import { AdaptableIconComponent } from '../AdaptableIconComponent';
-export const mapAdaptablePredicateDefToQlPredicateDef = (adaptablePredicateDef, 
-// used to determine values type
-dataType) => {
+export const mapAdaptablePredicateDefToQlPredicateDef = (adaptablePredicateDef, dataType) => {
     let icon = null;
     if (isAdaptableIcon(adaptablePredicateDef.icon)) {
         icon = React.createElement(AdaptableIconComponent, { icon: adaptablePredicateDef.icon });
@@ -16,11 +14,9 @@ dataType) => {
     });
     if (adaptablePredicateDef.id === 'In' || adaptablePredicateDef.id === 'NotIn') {
         if (['text', 'number', 'date'].includes(dataType)) {
-            // add array type
             inputs.push(`${dataType}[]`);
         }
         if (['text[]', 'number[]'].includes(dataType)) {
-            // add array type
             inputs.push(dataType);
         }
     }
@@ -38,7 +34,7 @@ dataType) => {
 };
 export const mapAdaptablePredicateToQlPredicate = (adaptablePredicate) => {
     return {
-        operator: adaptablePredicate.PredicateId, // make sure all predicates are in qal
+        operator: adaptablePredicate.PredicateId,
         args: adaptablePredicate.Inputs,
     };
 };
@@ -52,7 +48,6 @@ export const qlPredicateToString = (qlPredicate, predicateDefs) => {
     if (typeof qlPredicate === 'object' &&
         'operator' in qlPredicate &&
         (qlPredicate.operator === 'AND' || qlPredicate.operator === 'OR')) {
-        // save to join args because there is no extra nesting
         return qlPredicate.args
             .filter((str) => str)
             .map((arg) => qlPredicateToString(arg, predicateDefs))
@@ -89,7 +84,6 @@ export const mapColumnFilterToQlPredicate = (columnFilter, abColumn, qlPredicate
         args: (columnFilter?.Predicates ?? []).map?.(mapAdaptablePredicateToQlPredicate),
     };
     if (qlPredicate.args.length === 0) {
-        // used when none is defined
         let defaultQlPredicate = null;
         switch (abColumn.dataType) {
             case 'number':
@@ -178,7 +172,6 @@ export const mapColumnFilterToQlPredicate = (columnFilter, abColumn, qlPredicate
                 break;
         }
         if (defaultQlPredicate === null) {
-            // take the firstavailable one
             if (qlPredicateDefs.length > 0) {
                 defaultQlPredicate = { operator: qlPredicateDefs[0].operator, args: [] };
             }

package/src/View/Components/EntityRulesEditor/EntityRulePredicatesEditor/EntityRulePredicateEditor.js

@@ -35,7 +35,6 @@ export const EntityRulePredicateEditor = (props) => {
             });
         }
         else {
-            // no previous predicate, e.g. it was cleared
             newPredicates = [newPredicateDef];
         }
         props.onChange({
@@ -61,7 +60,6 @@ export const EntityRulePredicateEditor = (props) => {
         label: col.label,
         value: col.value,
     }));
-    // use global scope or custom scope
     let predicateColumnId = null;
     if (predicate?.ColumnId && predicate.ColumnId !== '') {
         predicateColumnId = predicate.ColumnId;

package/src/View/Components/EntityRulesEditor/EntityRulePredicatesEditor/EntityRulePredicatesEditor.js

@@ -14,7 +14,6 @@ export const EntityRulePredicatesEditor = (props) => {
     const { api } = useAdaptable();
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
     const columnPredicateEnabled = props.data.Rule.Predicates.some((predicate) => predicate.ColumnId !== undefined);
-    // filter out predicates that are already in use
     const defaultPredicateDefs = props.predicateDefs.filter((predicateDef) => {
         return props.data.Rule?.Predicates?.every((rulePrediate) => rulePrediate.PredicateId !== predicateDef.id);
     });

package/src/View/Components/EntityRulesEditor/index.js

@@ -14,7 +14,6 @@ const QueryTab = (props) => {
     const text = (_jsxs(Flex, { flexDirection: "column", children: [label, " ", _jsx(Box, { className: "twa:text-2", children: "query" })] }));
     return (_jsx(Tabs.Tab, { style: { flex: 1 }, ...tabProps, children: !disabled && props.showRadio ? (_jsx(Radio, { tabIndex: -1, className: "twa:m-0 twa:align-baseline", checked: type === props.value, children: text })) : (text) }));
 };
-// needed here to be considered a child Tab component, inside the Tabs component
 SupportedTabMenuComps.add(QueryTab);
 export const EntityRulesSummary = (props) => {
     const { data } = props;
@@ -25,16 +24,7 @@ export const EntityRulesSummary = (props) => {
         !data?.Rule?.AggregatedBooleanExpression) {
         return _jsx(Box, { className: "twa:text-2", children: "No Rule defined" });
     }
-    return (_jsx(
-        Box,
-        { className: "twa:text-2", children: data.Rule.Predicates ? (_jsx(_Fragment, { children: data.Rule?.Predicates?.map?.((predicate, index) => (
-                // predicate id is not unique
-                (_jsx(
-                    React.Fragment,
-                    { children: props.renderPredicate(predicateApi.predicateToString(predicate)) },
-                    index
-                )))) })) : (_jsx(_Fragment, { children: props.renderQueryExpression(internalApi.getAdaptableQueryExpressionText(data.Rule)) })) }
-    ));
+    return (_jsx(Box, { className: "twa:text-2", children: data.Rule.Predicates ? (_jsx(_Fragment, { children: data.Rule?.Predicates?.map?.((predicate, index) => (_jsx(React.Fragment, { children: props.renderPredicate(predicateApi.predicateToString(predicate)) }, index))) })) : (_jsx(_Fragment, { children: props.renderQueryExpression(internalApi.getAdaptableQueryExpressionText(data.Rule)) })) }));
 };
 const RuleTabTitle = (props) => {
     return props.showRadio ? (_jsx(Radio, { className: "twa:m-0", tabIndex: -1, checked: props.checked, children: props.children })) : (_jsx(_Fragment, { children: "props.children" }));

package/src/View/Components/ExternalRenderer.js

@@ -29,9 +29,7 @@ export const ExternalRenderer = ({ render, frameworkComponent, componentName = '
             }
             else if (frameworkComponent) {
                 onDestroy?.();
-                adaptableApi.internalApi.destroyFrameworkComponent(element, frameworkComponent, 
-                // @ts-ignore
-                componentName);
+                adaptableApi.internalApi.destroyFrameworkComponent(element, frameworkComponent, componentName);
             }
         };
     }, []);

package/src/View/Components/FilterForm/ListBoxFilterForm.js

@@ -12,7 +12,6 @@ import { isEmbeddedColumnFilterLocation } from '../ColumnFilter/columnFilterLoca
 import { useColumnFilterLocation } from '../ColumnFilter/AdaptableColumnFilter';
 import { GridFilterTreeDropdown } from '../../../components/Tree/TreeDropdown';
 const baseClassName = 'ab-ListBoxFilterForm';
-// used for displaying the date values in the input
 function toDateDisplayValue(values) {
     values = values.map((v) => {
         if (!Array.isArray(v)) {
@@ -23,20 +22,6 @@ function toDateDisplayValue(values) {
     return toDisplayValueDefault(values);
 }
 const dateOnChangeParser = (value) => {
-    /**
-     * the value looks like this:
-     * [
-     *  ["2021","2021-01","2021-01-01"],
-     *  ["2024","2024-02","2024-02-15T12:34:00"],
-     * ]
-     */
-    // so first need to transfor the above to this:
-    /**
-     * [
-     *  [2023, 12, 1, 1640668800000],
-     *  [2023, 12, 3, 1738377600000]
-     * ]
-     */
     return value.map((v) => {
         return v[v.length - 1];
     });
@@ -47,7 +32,6 @@ export const ColumnValuesSelect = (props) => {
     const column = props.column;
     let selectedColumnValues = props.value || EMPTY_ARRAY;
     const rawOptionsFromProps = Array.isArray(props.options) ? props.options : EMPTY_ARRAY;
-    // Drop empty entries for all column types; Memoise them because Date cols can leak them when using `customInFilterValues` + `orderedValues`
     const optionsFromProps = useMemo(() => {
         if (rawOptionsFromProps === EMPTY_ARRAY) {
             return rawOptionsFromProps;
@@ -65,20 +49,6 @@ export const ColumnValuesSelect = (props) => {
         return rawOptionsFromProps.filter((option) => !StringExtensions.IsNullOrEmpty(option?.value));
     }, [rawOptionsFromProps]);
     const value = [];
-    // For `customInFilterValues` + `orderedValues` on a date column, the
-    // options arrive with raw `Date` objects as `value`. `GridFilterTreeDropdown`
-    // round-trips path keys via `JSON.stringify`/`JSON.parse`, which converts
-    // `Date` -> ISO string. The stored selection paths therefore become
-    // strings while the option/treePath values are still `Date` references —
-    // and `TreeSelectionState`'s internal DeepMap uses strict reference
-    // equality, so a clicked item never matches its tree path on the next
-    // render (no checkbox, click looks like a no-op).
-    //
-    // Normalise `Date` option values to ISO strings up front so every layer
-    // (treePaths, items, selectionMap, value, onChange output) speaks the
-    // same primitive. Tree-shaped date options (the default-values flow) use
-    // string values like "2024" / "2024-01" / "2024-01-01" already and pass
-    // through unchanged.
     const dateOptions = useMemo(() => {
         if (column.dataType !== 'date') {
             return optionsFromProps;
@@ -97,14 +67,6 @@ export const ColumnValuesSelect = (props) => {
         return optionsFromProps.map(convert);
     }, [column.dataType, optionsFromProps]);
     if (column.dataType === 'date') {
-        // we might have a use-case where users might want to get rid of a tree level
-        // because it may contain only one child. currently,
-        // the value is an array of strings that have this form (ISOish)
-        // ["2021-01-01", "2021-10-02", "2021-01-03T12:00:00"]
-        // but we want the full path to each value
-        // but we can't compute that by simply splitting the strings by '-' or 'T',
-        // as if we do that, then we won't support removing a tree level
-        // so we have to compute the paths based on the options
         const valueToPath = useMemo(() => {
             const valueToPath = new Map();
             const withOption = (option, parentPath = []) => {
@@ -119,9 +81,6 @@ export const ColumnValuesSelect = (props) => {
         }, [dateOptions]);
         selectedColumnValues = selectedColumnValues
             .map((v) => {
-            // Saved selections may be raw `Date` objects from older
-            // `orderedValues` snapshots; coerce to the same ISO string we use
-            // for option keys so the lookup still hits.
             const key = v instanceof Date ? v.toISOString() : v;
             return valueToPath.get(key);
         })
@@ -131,7 +90,6 @@ export const ColumnValuesSelect = (props) => {
         ? dateOptions
         : optionsFromProps.filter((distinctValue) => {
             let isActive = selectedColumnValues.indexOf(distinctValue.value) >= 0;
-            // special case for date objects, need to check against string values
             if (!isActive && distinctValue.value && distinctValue.value instanceof Date) {
                 isActive = selectedColumnValues.some((dateStr) => isEqual(parseDateValue(dateStr), parseDateValue(distinctValue.value)));
             }
@@ -159,23 +117,14 @@ export const ColumnValuesSelect = (props) => {
         : undefined;
     const component = column.dataType === 'date' || column.columnId === AG_GRID_GROUPED_COLUMN ? (_jsx(GridFilterTreeDropdown, { toDisplayValue: treeDropdownToDisplayValue, resizable: true, onValueChange: column.dataType === 'date'
             ? (value) => props.onChange(dateOnChangeParser(value))
-            : props.onChange, items: options, 
-        // for dates, the treeDateOptions have ids that are numbers
-        // so we have to add the `toDateValue` function to convert the values to the correct format
-        value: selectedColumnValues, "data-name": "Select Values", primaryKey: 'value', isLoading: props.isLoading, onOpenChange: onOpenChange, showClear: isEmbeddedColumnFilterLocation(location) })) : (_jsx(GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, isLoading: props.isLoading, onValueChange: props.onChange, showClear: isEmbeddedColumnFilterLocation(location) }, "select"));
+            : props.onChange, items: options, value: selectedColumnValues, "data-name": "Select Values", primaryKey: 'value', isLoading: props.isLoading, onOpenChange: onOpenChange, showClear: isEmbeddedColumnFilterLocation(location) })) : (_jsx(GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, isLoading: props.isLoading, onValueChange: props.onChange, showClear: isEmbeddedColumnFilterLocation(location) }, "select"));
     return (_jsx("div", { className: join(baseClassName, 'twa:relative', props.isLoading && `${baseClassName}--loading`, !value.length && `${baseClassName}--empty`), onKeyDownCapture: (e) => {
             if (e.key === 'Tab') {
-                // Prevent AG Grid from hijacking Tab; keep browser default focus navigation.
                 e.stopPropagation();
                 return;
             }
             const event = e.nativeEvent || e;
             event.stopPropagation = () => {
-                // see #ensure-keyboard-navigation-works-in-column-values-filter
-                // we want to prevent ag grid from stopping the propagation of the event
-                // so that the event can be handled by the select component and thus makes keyboard navigation work
-                //
-                // the solution is to reassign the stopPropagation method to a function that does nothing
             };
         }, children: component }));
 };

package/src/View/Components/ModuleValueSelector/index.js

@@ -28,8 +28,6 @@ export const ModuleValueSelector = (props) => {
         return ArrayExtensions.sortArrayWithOrder(options, value, { sortUnorderedItems: true });
     }, [allowReorder, options, value]);
     const moduleFilter = useCallback((module, searchText) => {
-        // the module name is camelCased so I want to split it
-        // so we can also use spaces in the search text
         const parts = module.split(/(?=[A-Z])/);
         const withSpaces = parts.join(' ');
         return (module.toLowerCase().includes(searchText.toLowerCase()) ||

package/src/View/Components/Panels/PanelWithImage.js

@@ -5,9 +5,6 @@ import { allIcons } from '../../../components/icons';
 import { ButtonInfo } from '../Buttons/ButtonInfo';
 import { twMerge } from '../../../twMerge';
 import { Box, Flex } from '../../../components/Flex';
-//We cannot destructure this.props using the react way in typescript which is a real pain as you
-//need to transfer props individually as a consequence
-//let { buttonContent, ...other } = this.props
 class PanelWithImageCmp extends React.Component {
     render() {
         const IconCmp = allIcons[(this.props.icon || this.props.glyphicon)];
@@ -16,8 +13,7 @@ class PanelWithImageCmp extends React.Component {
             headerStyle.color = this.props.headerColor;
             headerStyle.fill = this.props.headerColor;
         }
-        let headerRow = (_jsx(Flex, { className: "twa:flex-1", children: _jsxs(Flex, { alignItems: "center", children: [_jsxs(Flex, { className: "twa:min-h-[15px]", alignItems: "center", style: headerStyle, children: [IconCmp ? _jsx(IconCmp, {}) : null, _jsx(Box, { className: "twa:mr-2" }), this.props.header ?? '', _jsx(Box, { className: "twa:mr-2", "data-name": "space-after" }), this.props.infoLink != null && !this.props.infoLinkDisabled && (_jsx(ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
-                                ) }))] }), _jsx(Flex, { className: "twa:flex-1" }), this.props.button && React.cloneElement(this.props.button)] }) }));
+        let headerRow = (_jsx(Flex, { className: "twa:flex-1", children: _jsxs(Flex, { alignItems: "center", children: [_jsxs(Flex, { className: "twa:min-h-[15px]", alignItems: "center", style: headerStyle, children: [IconCmp ? _jsx(IconCmp, {}) : null, _jsx(Box, { className: "twa:mr-2" }), this.props.header ?? '', _jsx(Box, { className: "twa:mr-2", "data-name": "space-after" }), this.props.infoLink != null && !this.props.infoLinkDisabled && (_jsx(ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank') }))] }), _jsx(Flex, { className: "twa:flex-1" }), this.props.button && React.cloneElement(this.props.button)] }) }));
         return (_jsx(NewPanel, { header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, className: twMerge('twa:rounded-none twa:border-none', this.props.className), bodyProps: {
                 ...this.props.bodyProps,
                 className: twMerge('twa:p-0', this.props.bodyProps?.className),

package/src/View/Components/Panels/PanelWithRow.js

@@ -2,9 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import Panel from '../../../components/Panel';
 import { Flex, Box } from '../../../components/Flex';
-// We cannot destructure this.props using the react way in typescript which is a real pain as you
-// need to transfer props individually as a consequence
-// let { buttonContent, ...other } = this.props
 export class PanelWithRow extends React.Component {
     render() {
         const headerItems = this.props.colItems.map((colItem, index) => (_jsx(Box, { className: "twa:font-bold twa:text-3 twa:px-1", style: {

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopup.js

@@ -21,11 +21,6 @@ export const AdaptablePopup = (props) => {
     const isWindowModal = settingsPanelOptions.popupType === 'window';
     const modalContainer = resolveContainerElement(adaptable.adaptableOptions?.containerOptions?.modalContainer, props.api.internalApi.buildBaseContext());
     let friendlyName = null;
-    /**
-     * This means that it is not rendered in the context of Settings Panel
-     * - no topbar
-     * - no navigation
-     */
     let isStandalone = false;
     let moduleViewContent = null;
     let activeItem = null;
@@ -34,7 +29,6 @@ export const AdaptablePopup = (props) => {
     const firstMenuModule = firstMenuItem?.category;
     let componentModule = props.componentModule;
     let componentName = props.componentName;
-    // ts forces to check for General, there is no menu item General
     const useFirstItem = !props.componentName;
     if (useFirstItem &&
         firstMenuModule !== 'General' &&

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupBody.js

@@ -15,7 +15,6 @@ export const AdaptablePopupBody = (props) => {
                 props.onHide();
             }
         },
-        // show share button if TeamSharing is active & user has edit rights
         teamSharingActivated: props.api.teamSharingApi.isTeamSharingAvailable() &&
             props.api.teamSharingApi.hasTeamSharingFullRights(),
         modalContainer: modalContainer,
@@ -24,7 +23,5 @@ export const AdaptablePopupBody = (props) => {
         moduleInfo,
     };
     const BodyComponent = AdaptableViewFactory?.[props?.componentName ?? moduleInfo.Popup] || AdaptablePopupModuleView;
-    // key is to make sure state is reset between views
-    // most of the views use the `AdaptablePopupModuleView` component
     return _jsx(BodyComponent, { module: props.module, ...moduleProps }, props?.componentName);
 };

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -18,10 +18,6 @@ import Panel from '../../../../components/Panel';
 import { Tabs } from '../../../../components/Tabs';
 import { NewDropdownButton } from '../../../../components/DropdownButton';
 export const AdaptablePopupModuleView = (props) => {
-    /**
-     * This triggers a render for each state change.
-     * NOT sure this is still needed... It is here for historical reasons.
-     */
     const adaptable = useAdaptable();
     const rerender = useRerender();
     useEffect(() => {
@@ -66,8 +62,6 @@ export const AdaptablePopupModuleView = (props) => {
         emptyContent = emptyView;
     }
     const toolTipText = moduleViewProperties.newTooltipText ?? `Create ${moduleInfo.FriendlyName}`;
-    // Some modules do not have new button
-    // e.g. filter
     let newButton = null;
     if (moduleViewProperties?.abObjectTypes?.length) {
         const items = moduleViewProperties?.abObjectTypes.map((abObjectType) => {

package/src/View/Components/Popups/AdaptablePopup/PopupPanel.js

@@ -4,6 +4,5 @@ import { Box, Flex } from '../../../../components/Flex';
 import { cn } from '../../../../lib/utils';
 export const PopupPanel = (props) => {
     const baseClassName = 'ab-Adaptable-Popup__Panel';
-    return (_jsxs(Box, { className: cn('twa:flex-1 twa:flex twa:flex-col twa:gap-3 twa:p-1', props.className, baseClassName, props.scrollable === false ? 'twa:overflow-hidden' : 'twa:overflow-auto'), children: [_jsxs("div", { className: `${baseClassName}__Header twa:flex`, children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-0", "data-name": "space-before" }), _jsx("div", { className: `${baseClassName}__Header__Title`, children: props.headerText }), _jsx(Box, { className: "twa:mr-2", "data-name": "space-after" }), props.infoLink != null && !props.infoLinkDisabled && (_jsx(ButtonInfo, { tone: "none", variant: "text", iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
-                                ) }))] }), _jsx(Box, { className: "twa:flex-1" }), props.button] }), _jsx(Box, { className: cn('twa:w-full twa:flex twa:flex-col twa:flex-1 twa:min-h-0', `${baseClassName}__Body`, props.bodyClassName), children: props.children })] }));
+    return (_jsxs(Box, { className: cn('twa:flex-1 twa:flex twa:flex-col twa:gap-3 twa:p-1', props.className, baseClassName, props.scrollable === false ? 'twa:overflow-hidden' : 'twa:overflow-auto'), children: [_jsxs("div", { className: `${baseClassName}__Header twa:flex`, children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-0", "data-name": "space-before" }), _jsx("div", { className: `${baseClassName}__Header__Title`, children: props.headerText }), _jsx(Box, { className: "twa:mr-2", "data-name": "space-after" }), props.infoLink != null && !props.infoLinkDisabled && (_jsx(ButtonInfo, { tone: "none", variant: "text", iconSize: 24, onClick: () => window.open(props.infoLink, '_blank') }))] }), _jsx(Box, { className: "twa:flex-1" }), props.button] }), _jsx(Box, { className: cn('twa:w-full twa:flex twa:flex-col twa:flex-1 twa:min-h-0', `${baseClassName}__Body`, props.bodyClassName), children: props.children })] }));
 };

package/src/View/Components/Popups/AdaptablePopup/useMenuItems.js

@@ -19,7 +19,6 @@ export const useMenuItems = () => {
         const resolveNavigationItem = (moduleName) => {
             const customSettingsPanel = settingsPanelOptions?.customSettingsPanels?.find?.((panel) => panel.name === moduleName);
             if (customSettingsPanel) {
-                // @ts-ignore custom settings panel menu items are not part of the standard menu name union
                 return {
                     category: 'CustomSettingsPanel',
                     label: customSettingsPanel.name,

package/src/View/Components/Popups/AdaptablePopupAlert.js

@@ -19,7 +19,6 @@ export const AdaptablePopupAlert = (props) => {
         header = `${header}: ${props.adaptableAlert.header}`;
     }
     let glyph = UIHelper.getGlyphByMessageType(messageType);
-    // we still need the defauld
     const defaultForm = React.useMemo(() => {
         return api.alertApi.internalApi.getDefaultAlertNotificationForm();
     }, []);
@@ -51,8 +50,6 @@ export const AdaptablePopupAlert = (props) => {
                             })
                             : msg] }), _jsx(Box, { className: "twa:m-2", children: adaptableForm ? (_jsx(AdaptableFormComponent, { focusFirstButton: props.focusFirstButton, data: formData, formDef: adaptableForm, displayTitle: true, onChange: setFormData, api: api, context: context, onButtonClick: (button) => {
                             props.onClose();
-                            // we want to give the current popup time to close
-                            // and we reopen with a delay in case this button action causes another popup
                             setTimeout(() => {
                                 button.onClick?.(button, context);
                             }, 20);

package/src/View/Components/Popups/AdaptableToaster.js

@@ -3,8 +3,6 @@ import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { AdaptablePopupAlert } from './AdaptablePopupAlert';
 import { toast } from '../../../components/Toastify';
 export const showToast = (props) => {
-    // we're doing this hack and not simply using props.api in order not to have a memory
-    // leak where the api is still kept around in memory by the toaster
     let api = props.api;
     const off = api.eventApi.on('AdaptableDestroy', () => {
         toast.dismiss();

package/src/View/Components/Popups/WindowPopups/WindowPopups.js

@@ -14,14 +14,8 @@ const NoopComponent = () => {
     return _jsx(_Fragment, {});
 };
 export const CUSTOM_WINDOW_FACTORY_ID = 'CUSTOM_WINDOW_FACTORY_ID';
-/**
- * Portals children into a target container element.
- * Monitors the container with a MutationObserver — if the container is removed
- * from the DOM, `onContainerRemoved` is called so callers can clean up React/Redux state.
- */
 const ContainerPortal = ({ container, onContainerRemoved, children }) => {
     React.useEffect(() => {
-        // If the container is already detached, clean up immediately
         if (!document.contains(container)) {
             onContainerRemoved();
             return;
@@ -32,7 +26,6 @@ const ContainerPortal = ({ container, onContainerRemoved, children }) => {
                 observer.disconnect();
             }
         });
-        // Observe the entire document body for subtree removals
         observer.observe(document.body, { childList: true, subtree: true });
         return () => {
             observer.disconnect();
@@ -66,7 +59,6 @@ export const WindowPopups = () => {
                 Component = Component ?? NoopComponent;
                 componentNode = (_jsx(Component, { api: adaptable.api, onDismiss: handleDismiss, popupProps: restPopupProps }));
             }
-            // Transposed View: portal into custom container if configured
             if (windowItem.FactoryId === WINDOW_SHOW_TRANSPOSED_VIEW) {
                 const transposedContainer = resolveContainerElement(adaptable.adaptableOptions?.containerOptions?.transposedViewContainer, adaptable.api.internalApi.buildBaseContext());
                 if (transposedContainer) {

package/src/View/Components/RangesComponent.js

@@ -21,16 +21,6 @@ const DEFAULT_ZERO_CENTRED_COLORS = {
     PositiveColor: 'rgba(40, 167, 69, 0.55)',
 };
 const hasConfiguredRanges = (ranges) => (ranges?.length ?? 0) > 0;
-/**
- * Decide which range tab should be active given the current props.
- *
- * Precedence:
- *  1. `columnComparison` set       → Column Comparison tab
- *  2. Zero Centred set + supported → Zero Centred tab
- *  3. `allowEmptyRanges` + no bands → No Ranges tab
- *  4. `rangeValueType === 'Percentage'` → Percentage Range tab
- *  5. otherwise                    → Number Range tab (default for new styles)
- */
 function deriveInitialRangesType(props) {
     if (props.columnComparison) {
         return 'ColumnComparison';
@@ -43,14 +33,6 @@ function deriveInitialRangesType(props) {
     }
     return props.rangeValueType === 'Percentage' ? 'PercentageRange' : 'NumberRange';
 }
-/**
- * A single Column Comparison bound (Min or Max). The user picks whether the
- * bound is a fixed `Value` (a number applied to every row) or a `Column`
- * (read from another column and evaluated per row). The underlying
- * `ColumnComparison.MinValue`/`MaxValue` stays a `number | string` — number =>
- * fixed value, non-numeric string => columnId — so the type is derived from the
- * stored value via `isNaN`, mirroring how the runtime resolver discriminates it.
- */
 const ColumnComparisonBoundInput = ({ value, disabled, onChange }) => {
     const [type, setType] = React.useState(value != null && value !== '' && isNaN(Number(value)) ? 'column' : 'value');
     const typeOptions = [
@@ -64,22 +46,12 @@ const ColumnComparisonBoundInput = ({ value, disabled, onChange }) => {
         },
     ];
     const editor = type === 'value' ? (_jsx(NumberInput, { className: "twa:w-full", disabled: disabled, type: "number", value: value != null && !isNaN(Number(value)) ? Number(value) : '', onChange: (v) => onChange(v) })) : (_jsx(ColumnSelector, { disabled: disabled, type: "number", value: value != null && isNaN(Number(value)) ? String(value) : undefined, onChange: (columnId) => onChange(columnId || undefined) }));
-    // The select trigger, the `NumberInput` (`.ab-Input`) and the `ColumnSelector`
-    // (a Combobox that does NOT forward `className`, rendering its border on a
-    // `[data-slot="input-group"]` wrapper) all hard-code `rounded-input`, so the
-    // InputGroup CSS-variable joining has no effect. We flatten the touching
-    // corners directly (important, to beat `rounded-input`) and overlap the shared
-    // border via `-ml-px` so the two controls read as a single block. The editor
-    // side targets both inner border elements through descendant arbitrary
-    // variants and forces them to fill the flex item.
     const editorWrapperClassName = [
         'twa:flex-1 twa:basis-0 twa:min-w-0 twa:-ml-px',
         'twa:[&_.ab-Input]:w-full twa:[&_.ab-Input]:rounded-l-none!',
         'twa:[&_[data-slot=input-group]]:w-full! twa:[&_[data-slot=input-group]]:rounded-l-none!',
     ].join(' ');
     return (_jsxs(InputGroup, { Component: Flex, className: "twa:items-stretch twa:max-w-[20rem]", children: [_jsx(SingleSelect, { className: "twa:w-[120px] twa:max-w-none twa:shrink-0 twa:box-border twa:rounded-r-none!", disabled: disabled, value: type, items: typeOptions, onValueChange: (next) => {
-                    // Switching type clears the stale bound so a fixed number can never
-                    // be misread as a columnId (or vice versa).
                     onChange(undefined);
                     setType(next);
                 } }), _jsx(Box, { className: editorWrapperClassName, children: editor })] }));
@@ -93,14 +65,8 @@ export class RangesComponent extends React.Component {
         let comparisonColor = this.props.columnComparison != null && this.props.columnComparison.Color != null
             ? this.props.columnComparison.Color
             : undefined;
-        // Number / Percentage is now expressed at the tab level (Number Range tab
-        // vs Percentage Range tab) instead of an inline radio. The inner content
-        // is shared between the two range tabs and parameterised on this flag.
         const isRangeValueTypeNumber = this.state.rangesType === 'NumberRange';
         const renderNoneContent = () => (_jsx(Box, { className: "twa:text-2 twa:opacity-70 twa:py-2 twa:max-w-[520px]", children: "No coloured bands configured" }));
-        // Columns: Min, Max, Colour, [Reverse Gradient], Delete. Using one shared
-        // grid (rows are `display: contents`) keeps every band's cells aligned and
-        // spacing uniform via grid gaps, even with a single row.
         const rangeGridTemplateColumns = [
             'max-content',
             'max-content',
@@ -152,20 +118,14 @@ export class RangesComponent extends React.Component {
         const isComparison = !!this.props.columnComparison;
         const wasZc = !!prevProps.zeroCentred;
         const isZc = !!this.props.zeroCentred;
-        // External mutations to columnComparison drive the tab.
         if (wasComparison !== isComparison) {
             this.setState({ rangesType: deriveInitialRangesType(this.props) });
             return;
         }
-        // External mutations to zeroCentred drive the tab (when not in CC mode).
         if (!isComparison && wasZc !== isZc) {
             this.setState({ rangesType: deriveInitialRangesType(this.props) });
             return;
         }
-        // External flips of RangeValueType while the user is sitting on a range
-        // tab — keep the active tab in sync. We deliberately do NOT react when the
-        // user is on Zero Centred / Column Comparison tabs (parent code can still
-        // set RangeValueType: 'Number' as part of those flows).
         if ((this.state.rangesType === 'NumberRange' || this.state.rangesType === 'PercentageRange') &&
             prevProps.rangeValueType !== this.props.rangeValueType) {
             this.setState({
@@ -210,9 +170,6 @@ export class RangesComponent extends React.Component {
             this.props.onApplyZeroCentred?.(this.props.zeroCentred ?? DEFAULT_ZERO_CENTRED_COLORS);
             return;
         }
-        // Switching to a range tab — let the parent reseed CellRanges + the right
-        // RangeValueType (and clear ColumnComparison / ZeroCentred). Tab switches
-        // wipe any previously configured ranges by design.
         this.props.onRangeValueTypeChange(value === 'PercentageRange' ? 'Percentage' : 'Number');
     }
     changeRangeMin(index, value) {
@@ -252,7 +209,6 @@ export class RangesComponent extends React.Component {
     removeRange(index) {
         let ranges = [...this.props.ranges];
         ranges.splice(index, 1);
-        // Max 100 is always disabled, this prevents from having a Max range lower than 100
         if (this.props.rangeValueType === 'Percentage' && ranges.length === 1) {
             ranges[0] = {
                 ...ranges[0],
@@ -288,13 +244,6 @@ export class RangesComponent extends React.Component {
         this.props.updateRanges(newRanges);
     }
     addRange() {
-        // Most callers seed `ranges` with at least one entry, but Range Bar
-        // legitimately leaves `CellRanges` undefined (bands are optional). Handle
-        // both cases so the "Add Range" button always works.
-        //
-        // When starting from empty we seed TWO bands split at the midpoint — a
-        // single full-width band would just look like a back colour and wouldn't
-        // communicate the "qualitative scale" idea bands are intended for.
         const existingRanges = this.props.ranges ?? [];
         if (existingRanges.length === 0) {
             const isPercentage = this.props.rangeValueType === 'Percentage';
@@ -326,8 +275,6 @@ export class RangesComponent extends React.Component {
             this.props.updateRanges(seedRanges);
             return;
         }
-        // Splitting a single full-width band at the midpoint is easier to reason
-        // about than anchoring the break at the column maximum (e.g. tradeId 1–200 → 100).
         if (existingRanges.length === 1) {
             const splitAtMidpoint = this.splitFullSpanRangeAtMidpoint(existingRanges[0]);
             if (splitAtMidpoint) {
@@ -356,10 +303,6 @@ export class RangesComponent extends React.Component {
         const newRanges = [...existingRanges.slice(0, -1), previousRange, newRange];
         this.props.updateRanges(newRanges);
     }
-    /**
-     * When there is exactly one band spanning the full scale (Col-Min→Col-Max or
-     * 0→100), split at the midpoint instead of at the column maximum.
-     */
     splitFullSpanRangeAtMidpoint(onlyRange) {
         const isPercentage = this.props.rangeValueType === 'Percentage';
         if (isPercentage) {

package/src/View/Components/Selectors/BulkUpdateValueSelector.js

@@ -16,9 +16,6 @@ export const BulkUpdateValueSelector = (props) => {
     const columnDataType = props.selectedColumn?.dataType;
     const isDateType = props.selectedColumn && columnDataType === 'date';
     const columnId = props.selectedColumn?.columnId;
-    // TODO = this seems to be called whenever we edit a cell
-    // which is then triggering a get all values
-    // not sure that we need to
     const permittedValueSelector = (_jsx(Box, { className: 'twa:flex-1', children: _jsx(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: columnId, placeholder: 'Select value', loadValues: useCallback(({ currentSearchValue }) => {
                 if (!columnId || !props.selectedGridCells.length) {
                     return Promise.resolve([]);

package/src/View/Components/Selectors/PermittedValuesSelector.js

@@ -37,9 +37,7 @@ export const PermittedValuesSelector = function (props) {
                         return currentSearchValue;
                     },
                 });
-            const distinctColumnValues = await runIfNotResolvedIn(
-            // we are here ALWAYS getting Filter values but sometimes we want to get other things!!!
-            p, () => {
+            const distinctColumnValues = await runIfNotResolvedIn(p, () => {
                 setIsLoading(true);
             });
             setSearchValueWasUsedWhenFiltering(searchValueUsedInFilterValue);
@@ -50,7 +48,6 @@ export const PermittedValuesSelector = function (props) {
     const isCreatable = (props.allowNewValues && !dataType) || ['text', 'number'].includes(dataType);
     const handleSingleValueChange = (value) => {
         if (isCreatable) {
-            // try to convert to correct type, when there is not type, e.g. field
             if (!dataType && typeof value === 'string' && !isNaN(parseFloat(value))) {
                 props.onChange(parseFloat(value));
             }
@@ -82,7 +79,6 @@ export const PermittedValuesSelector = function (props) {
         }
     };
     const handleOnChange = (value) => {
-        // convert numbers
         if (props.isMulti) {
             handleMultiValueChange(value);
         }
@@ -120,7 +116,6 @@ export const PermittedValuesSelector = function (props) {
         virtualized: true,
         resizable: true,
         showClear: true,
-        // showClear: false,
         onFocus: props.onFocus,
         onBlur: props.onBlur,
     };