@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.1

package/src/components/ExpressionEditor/ExpressionFunctionDocumentation.js

@@ -1,26 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExpressionFunctionDocumentation = void 0;
-const tslib_1 = require("tslib");
-const rebass_1 = require("rebass");
-const React = tslib_1.__importStar(require("react"));
-const Tag_1 = require("../Tag");
-const ExpressionFunctionDocumentation = (props) => {
-    return props.expressionFunction ? (React.createElement(rebass_1.Box, { "data-name": "expression-editor-documentation", my: 2, p: 2, style: {
+import { Box } from 'rebass';
+import * as React from 'react';
+import { Tag } from '../Tag';
+export const ExpressionFunctionDocumentation = (props) => {
+    return props.expressionFunction ? (React.createElement(Box, { "data-name": "expression-editor-documentation", my: 2, p: 2, style: {
             background: 'var(--ab-color-primary)',
             borderRadius: 'var(--ab__border-radius)',
         } },
-        props.expressionFunction.description && (React.createElement(rebass_1.Box, { mb: 3, style: { fontWeight: 'bold', whiteSpace: 'pre-wrap' }, "data-name": "expression-editor-documentation-description" }, props.expressionFunction.description)),
-        props.expressionFunction.signatures && (React.createElement(rebass_1.Box, { "data-name": "expression-editor-documentation-signatures" },
+        props.expressionFunction.description && (React.createElement(Box, { mb: 3, style: { fontWeight: 'bold', whiteSpace: 'pre-wrap' }, "data-name": "expression-editor-documentation-description" }, props.expressionFunction.description)),
+        props.expressionFunction.signatures && (React.createElement(Box, { "data-name": "expression-editor-documentation-signatures" },
             React.createElement("b", null, "Signatures"),
             React.createElement("ul", null, props.expressionFunction.signatures.map((signature, index) => (React.createElement("li", { key: index },
                 React.createElement("pre", { style: { whiteSpace: 'pre-wrap', margin: 0 } }, signature))))))),
-        props.expressionFunction.examples && (React.createElement(rebass_1.Box, { "data-name": "expression-editor-documentation-examples" },
+        props.expressionFunction.examples && (React.createElement(Box, { "data-name": "expression-editor-documentation-examples" },
             React.createElement("b", null, "Examples"),
             React.createElement("ul", null, props.expressionFunction.examples.map((example, index) => (React.createElement("li", { key: index },
                 React.createElement("pre", { style: { whiteSpace: 'pre-wrap', margin: 0 } }, example))))))),
-        props.expressionFunction.returnType && (React.createElement(rebass_1.Box, { "data-name": "expression-editor-documentation-examples" },
+        props.expressionFunction.returnType && (React.createElement(Box, { "data-name": "expression-editor-documentation-examples" },
             React.createElement("b", null, "Return Type"),
-            React.createElement(Tag_1.Tag, null, props.expressionFunction.returnType))))) : null;
+            React.createElement(Tag, null, props.expressionFunction.returnType))))) : null;
 };
-exports.ExpressionFunctionDocumentation = ExpressionFunctionDocumentation;

package/src/components/ExpressionEditor/NamedQueryContext.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { NamedQuery } from '../../PredefinedConfig/QueryState';
-export declare type ExpressionEditorNamedQuery = false | NamedQuery;
+import { NamedQuery } from '../../types';
+export type ExpressionEditorNamedQuery = false | NamedQuery;
 export declare const NamedQueryContext: import("react").Context<{
     namedQuery: ExpressionEditorNamedQuery;
     setNamedQuery: (q: ExpressionEditorNamedQuery) => void;

package/src/components/ExpressionEditor/NamedQueryContext.js

@@ -1,13 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useNamedQueryContext = exports.NamedQueryContext = void 0;
-const react_1 = require("react");
-exports.NamedQueryContext = (0, react_1.createContext)({
+import { createContext, useContext } from 'react';
+export const NamedQueryContext = createContext({
     namedQuery: false,
     setNamedQuery: () => { },
     //  hasValidNamedQueryName: () => false,
 });
-const useNamedQueryContext = () => {
-    return (0, react_1.useContext)(exports.NamedQueryContext);
+export const useNamedQueryContext = () => {
+    return useContext(NamedQueryContext);
 };
-exports.useNamedQueryContext = useNamedQueryContext;

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilder.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { AdaptableColumnDataType, AdaptableModule, BooleanFunctionName } from '../../../types';
+interface QueryBuilderProps {
+    query: string;
+    getColumns: (type?: AdaptableColumnDataType) => {
+        label?: string;
+        value: string;
+        type: AdaptableColumnDataType;
+    }[];
+    onChange: (query: string) => void;
+    module: AdaptableModule;
+}
+export declare function useQueryBuilderContext(): {
+    getFields: (type?: AdaptableColumnDataType) => {
+        label?: string;
+        value: string;
+        type: AdaptableColumnDataType;
+    }[];
+    getExpressions: (columnType: AdaptableColumnDataType) => BooleanFunctionName[];
+};
+export declare const QueryBuilder: React.FunctionComponent<QueryBuilderProps>;
+export {};

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilder.js

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { DragDropContext } from 'react-beautiful-dnd';
+import { Box, Flex } from 'rebass';
+import { mapExpressionToQlPredicate, } from '../../../parser/src/predicate';
+import { mapQlPredicateToExpression } from '../../../parser/src/predicate/mapQlPredicateToExpression';
+import { useAdaptable } from '../../../View/AdaptableContext';
+import ErrorBox from '../../ErrorBox';
+import HelpBlock from '../../HelpBlock';
+import Panel from '../../Panel';
+import SimpleButton from '../../SimpleButton';
+import { WarningBox } from '../../WarningBox';
+import { QueryPredicateBuilder } from './QueryPredicateBuilder';
+import { getFunctionsForColumnType, getUnsuportedExpressionFromQlPredicate, reorder, } from './utils';
+const QUERY_BUILDER_CLASSNAME = 'ab-QueryBuilder';
+const QueryBuilderContext = React.createContext(null);
+export function useQueryBuilderContext() {
+    const context = React.useContext(QueryBuilderContext);
+    if (!context) {
+        throw new Error('useQueryBuilderContext must be used within a QueryBuilderContext');
+    }
+    return context;
+}
+export const QueryBuilder = (props) => {
+    var _a, _b;
+    const adaptable = useAdaptable();
+    const [qlPredicate, setQlPredicate] = React.useState(() => {
+        const qlPredicate = mapExpressionToQlPredicate(props.query);
+        return qlPredicate;
+    });
+    const [expressionStr, setExpressionStr] = React.useState(props.query);
+    const handleQlPredicateChange = (qlPredicate) => {
+        setQlPredicate(qlPredicate);
+        if (qlPredicate && !('errorMessage' in qlPredicate)) {
+            const newQuery = mapQlPredicateToExpression(qlPredicate);
+            props.onChange(newQuery);
+            setExpressionStr(newQuery);
+        }
+    };
+    const clearExpression = () => {
+        const predicate = mapExpressionToQlPredicate('');
+        setQlPredicate(predicate);
+        setExpressionStr('');
+        props.onChange('');
+    };
+    const booleanExpressions = React.useMemo(() => {
+        const expressionMap = adaptable.api.internalApi
+            .getQueryLanguageService()
+            .getModuleExpressionFunctionsMap(props.module);
+        const booleanExpressions = Object.assign({}, expressionMap.booleanFunctions);
+        const booleanExpressionsWithoutCombinators = booleanExpressions;
+        delete booleanExpressionsWithoutCombinators.AND;
+        delete booleanExpressionsWithoutCombinators.OR;
+        return booleanExpressionsWithoutCombinators;
+    }, []);
+    const context = React.useMemo(() => {
+        return {
+            getFields: props.getColumns,
+            getExpressions: (columnType) => {
+                return booleanExpressions
+                    ? getFunctionsForColumnType(columnType, Object.keys(booleanExpressions))
+                    : [];
+            },
+            onQlPredicateChange: handleQlPredicateChange,
+        };
+    }, []);
+    const clearExpressionButton = (React.createElement(SimpleButton, { onClick: () => {
+            clearExpression();
+        } }, "Clear Expression"));
+    const unsupportedExpressionFunction = getUnsuportedExpressionFromQlPredicate(qlPredicate);
+    let errorOrEditor = null;
+    if (qlPredicate && 'errorMessage' in qlPredicate) {
+        errorOrEditor = ((_b = (_a = props.query) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, 'QUERY')) ? (React.createElement(WarningBox, null,
+            React.createElement(Flex, { alignItems: "center" },
+                "Named Queries are not supported in the Query Builder",
+                React.createElement(Box, { flex: 1 }),
+                clearExpressionButton))) : (React.createElement(ErrorBox, null,
+            React.createElement(Flex, null,
+                qlPredicate.errorMessage,
+                React.createElement(Box, { flex: 1 }),
+                clearExpressionButton)));
+    }
+    else if (unsupportedExpressionFunction) {
+        errorOrEditor = React.createElement(WarningBox, null, unsupportedExpressionFunction);
+    }
+    else if (qlPredicate && !('errorMessage' in qlPredicate)) {
+        errorOrEditor = (React.createElement(QueryPredicateBuilder, { isRoot: true, index: 0, id: "0", predicate: qlPredicate, onNewPredicate: (type) => {
+                // add to its children
+                const newPredicate = {
+                    operator: type === 'filter' ? undefined : 'AND',
+                    args: [],
+                };
+                handleQlPredicateChange(Object.assign(Object.assign({}, qlPredicate), { args: [...qlPredicate.args, newPredicate] }));
+            }, onChange: (predicate) => {
+                handleQlPredicateChange(predicate);
+            } }));
+    }
+    return (React.createElement(DragDropContext, { onDragEnd: (result) => {
+            if (!result.destination) {
+                return;
+            }
+            const toPath = `${result.destination.droppableId}/${result.destination.index}`;
+            const fromPath = result.draggableId;
+            const predicate = reorder(qlPredicate, fromPath, toPath);
+            handleQlPredicateChange(predicate);
+        } },
+        React.createElement(QueryBuilderContext.Provider, { value: context },
+            React.createElement(Box, { className: QUERY_BUILDER_CLASSNAME },
+                React.createElement(HelpBlock, { mt: 2, mb: 2, p: 2, fontSize: 3 }, "Build the Grid Filter by adding Column Conditions and AND / OR Groups as required"),
+                errorOrEditor,
+                React.createElement(Panel, { variant: "default", header: "AdapTableQL Expression", mt: 3 },
+                    React.createElement(Box, { className: `${QUERY_BUILDER_CLASSNAME}__expression`, minHeight: 48, my: 2, p: 3 }, expressionStr || 'Outputted Expression will display here'))))));
+};

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilderInputs.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { QlLogicalOperator } from '../../../parser/src/predicate';
+import { ExpressionFunctionInputType } from '../../../parser/src/types';
+import { AdaptableColumn, AdaptableColumnDataType, BooleanFunctionName } from '../../../types';
+export declare const PrimitiveColumnSelector: (props: {
+    columnId: string;
+    type?: AdaptableColumnDataType;
+    onChange: (colId: string) => void;
+}) => JSX.Element;
+export declare const PrimiteValueInput: (props: {
+    inputType: ExpressionFunctionInputType;
+    value: any;
+    onChange(value: any): void;
+    /**
+     * We use this to retrieve values, we consider only the values
+     * of the column which is selected in lefthand of the expression
+     */
+    lefthandColumnIdParam: string;
+}) => JSX.Element;
+export declare const ExpressionSelector: (props: {
+    value: BooleanFunctionName;
+    dataType: AdaptableColumn['dataType'];
+    onExpressionChange(expression: BooleanFunctionName): void;
+}) => JSX.Element;
+export declare const CombinatorSelector: (props: {
+    value: QlLogicalOperator;
+    onChange(combinator: QlLogicalOperator): void;
+}) => JSX.Element;

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilderInputs.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import { Flex } from 'rebass';
+import { getQlPredicateSymbol } from '../../../parser/src/predicate/mapQlPredicateToExpression';
+import AdaptableInput from '../../../View/Components/AdaptableInput';
+import { ColumnSelector } from '../../../View/Components/Selectors/ColumnSelector';
+import { PermittedValuesSelector } from '../../../View/Components/Selectors/PermittedValuesSelector';
+import { CheckBox } from '../../CheckBox';
+import DropdownButton from '../../DropdownButton';
+import { Icon } from '../../icons';
+import { Select } from '../../Select';
+import { useQueryBuilderContext } from './QueryBuilder';
+import { mapExpressionFunctionTypeToColumnDataType } from './utils';
+export const PrimitiveColumnSelector = (props) => {
+    return (React.createElement(ColumnSelector, { value: props.columnId, type: props.type, onChange: (columnId) => {
+            props.onChange(`[${columnId}]`);
+        } }));
+};
+export const PrimiteValueInput = (props) => {
+    var _a, _b;
+    const [type, setType] = React.useState(() => {
+        var _a;
+        return typeof (props === null || props === void 0 ? void 0 : props.value) === 'string' && ((_a = props === null || props === void 0 ? void 0 : props.value) === null || _a === void 0 ? void 0 : _a.includes('['))
+            ? 'column-name'
+            : 'input-value';
+    });
+    const handleTypeChange = (newType) => {
+        if (type !== newType) {
+            // need to reset value
+            props.onChange(undefined);
+            setType(newType);
+        }
+    };
+    const getEditor = () => {
+        var _a, _b;
+        const common = {
+            'data-id': 'query-input',
+        };
+        switch (props.inputType) {
+            case 'boolean':
+                return (React.createElement(CheckBox, Object.assign({}, common, { checked: props.value, onChange: () => props.onChange(!props.value) })));
+            case 'number':
+                return (React.createElement(AdaptableInput, Object.assign({}, common, { type: "number", value: (_a = props.value) !== null && _a !== void 0 ? _a : '', onChange: (event) => {
+                        const value = event.target.value;
+                        if (value === '') {
+                            props.onChange(undefined);
+                        }
+                        else {
+                            props.onChange(parseFloat(value));
+                        }
+                    } })));
+            case 'text':
+                return (React.createElement(AdaptableInput, Object.assign({}, common, { type: "text", value: (_b = props.value) !== null && _b !== void 0 ? _b : '', onChange: (event) => {
+                        props.onChange(event.target.value);
+                    } })));
+            case 'date':
+                // date format = 'DATE(2020-01-01)'
+                const dateStr = typeof props.value === 'string' ? props.value.replace('DATE(', '').replace(')', '') : '';
+                return (React.createElement(AdaptableInput, Object.assign({}, common, { type: "date", value: dateStr !== null && dateStr !== void 0 ? dateStr : '', onChange: (event) => {
+                        const stringified = `DATE("${event.target.value}")`;
+                        props.onChange(stringified);
+                    } })));
+            default:
+                return React.createElement(React.Fragment, null);
+        }
+    };
+    let editor = null;
+    if (type === 'column-name') {
+        const columnId = props.value ? (_b = (_a = props === null || props === void 0 ? void 0 : props.value) === null || _a === void 0 ? void 0 : _a.replace) === null || _b === void 0 ? void 0 : _b.call(_a, '[', '').replace(']', '') : undefined;
+        const abColType = mapExpressionFunctionTypeToColumnDataType(props.inputType);
+        editor = (React.createElement(PrimitiveColumnSelector, { columnId: columnId, onChange: (col) => props.onChange(col), type: abColType }));
+    }
+    else if (!['date', 'boolean'].includes(props.inputType)) {
+        editor = (React.createElement(PermittedValuesSelector, { allowNewValues: true, value: props.value, columnId: props.lefthandColumnIdParam, onChange: (value) => {
+                props.onChange(value);
+            } }));
+    }
+    else {
+        editor = getEditor();
+    }
+    const options = [
+        {
+            label: 'Column',
+            icon: 'columns',
+            value: 'column-name',
+        },
+        {
+            label: 'Value',
+            icon: 'edit',
+            value: 'input-value',
+        },
+    ];
+    const typeOption = options.find((option) => option.value === type);
+    return (React.createElement(Flex, { "data-id": "query-input-wrapper", mr: 2 },
+        editor,
+        React.createElement(Flex, null,
+            React.createElement(Select, { rederSingleValue: (value) => {
+                    return (React.createElement(React.Fragment, null, typeOption.value === 'column-name' ? React.createElement(Icon, { name: "grid" }) : React.createElement(Icon, { name: "edit" })));
+                }, variant: "raised", value: typeOption.value, options: options, onChange: (value) => handleTypeChange(value) }))));
+};
+export const ExpressionSelector = (props) => {
+    var _a;
+    const { getExpressions } = useQueryBuilderContext();
+    const expressions = props.dataType ? getExpressions(props.dataType) : [];
+    return (React.createElement(DropdownButton, { "data-id": "expression-selector", "data-value": props.value, variant: "raised", columns: ['label'], items: expressions.map((expression) => ({
+            label: getQlPredicateSymbol(expression),
+            onClick: () => {
+                if (expression !== props.value) {
+                    props.onExpressionChange(expression);
+                }
+            },
+        })) }, (_a = getQlPredicateSymbol(props.value)) !== null && _a !== void 0 ? _a : 'Select Operator'));
+};
+export const CombinatorSelector = (props) => {
+    return (React.createElement(DropdownButton, { "data-id": "combinator-selector", "data-value": props.value, columns: ['label'], variant: "raised", tone: "accent", items: [
+            { label: 'AND', onClick: () => props.onChange('AND') },
+            { label: 'OR', onClick: () => props.onChange('OR') },
+        ] }, props.value));
+};

package/src/components/ExpressionEditor/QueryBuilder/QueryPredicateBuilder.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { QlPredicate } from '../../../parser/src/predicate';
+export type QueryPredicateProps = {
+    predicate: QlPredicate;
+    index?: number;
+    id: string;
+    onChange: (predicate: QlPredicate) => void;
+    onNewPredicate: (type: 'group' | 'filter') => void;
+    isRoot?: boolean;
+    lastChild?: boolean;
+};
+/**
+ * Two types:
+ * - combinatory operator
+ * - can contain both expressons and combinators
+ * [handle] [combinator-dropdown]
+ *   [children]
+ *
+ * - boolean function: ars do not contain other combinators
+ * [handle] [column] [operator-dropdown] [...args] [delete-button] [plus-button]
+ */
+export declare const QueryPredicateBuilder: React.FunctionComponent<QueryPredicateProps>;

package/src/components/ExpressionEditor/QueryBuilder/QueryPredicateBuilder.js

@@ -0,0 +1,172 @@
+import React from 'react';
+import { Draggable, Droppable } from 'react-beautiful-dnd';
+import { Box, Flex } from 'rebass';
+import { isQlLogicalOperator } from '../../../parser/src/predicate';
+import { booleanExpressionFunctions } from '../../../Utilities/ExpressionFunctions/booleanExpressionFunctions';
+import { useAdaptable } from '../../../View/AdaptableContext';
+import DropdownButton from '../../DropdownButton';
+import ErrorBox from '../../ErrorBox';
+import { Icon } from '../../icons';
+import SimpleButton from '../../SimpleButton';
+import { PrimitiveColumnSelector, CombinatorSelector, ExpressionSelector, PrimiteValueInput, } from './QueryBuilderInputs';
+import { getOperatorMatchingInputs as getFunctionMatchingInputTypes, mapColumnDataTypeToExpressionFunctionType, } from './utils';
+const ITEM_HEIGHT = 40;
+const BASE_CLASS_NAME = 'ab-QueryBuilder-predicate-editor';
+const Handle = (props) => (React.createElement(Flex, Object.assign({ className: `${BASE_CLASS_NAME}__handle`, height: ITEM_HEIGHT, alignItems: "center", mr: 1 }, props),
+    React.createElement(Icon, { name: "drag" })));
+const QueryPredicateButtons = (props) => {
+    return (React.createElement(React.Fragment, null,
+        !props.hideAdd && (React.createElement(DropdownButton, { listMinWidth: 150, columns: ['label'], items: [
+                { label: 'Add Column Condition', onClick: () => props.onNewPredicate('filter') },
+                { label: 'Add AND / OR Group', onClick: () => props.onNewPredicate('group') },
+            ], variant: "text" },
+            React.createElement(Icon, { name: "plus" }))),
+        !props.hideDelete && (React.createElement(SimpleButton, { icon: "delete", variant: "text", onClick: () => {
+                props.onChange(null);
+            } }))));
+};
+const LogicalFunctionEditor = (props) => {
+    const level = props.id.split('/').length - 1;
+    const className = `
+    ${BASE_CLASS_NAME}
+    ${BASE_CLASS_NAME}-level-${level}
+    ${BASE_CLASS_NAME}-combinator
+    ${props.lastChild ? `${BASE_CLASS_NAME}--last-child` : ''}
+    ${props.isRoot ? `${BASE_CLASS_NAME}--root` : `${BASE_CLASS_NAME}--child`}
+  `;
+    const getCombinatorEl = (handleProps, className) => (React.createElement(Droppable, { droppableId: props.id, type: props.id }, (provided, snapshot) => {
+        return (React.createElement("div", Object.assign({}, provided.droppableProps, { ref: provided.innerRef, className: className }),
+            React.createElement(Flex, null,
+                props.isRoot ? null : React.createElement(Handle, Object.assign({}, handleProps)),
+                React.createElement(Flex, { flex: 1, alignItems: "center", height: ITEM_HEIGHT },
+                    React.createElement(CombinatorSelector, { value: props.predicate.operator, onChange: (combinator) => {
+                            props.onChange(Object.assign(Object.assign({}, props.predicate), { operator: combinator }));
+                        } }),
+                    React.createElement(Box, { flex: 1 }),
+                    React.createElement(QueryPredicateButtons, Object.assign({ hideDelete: props.isRoot, hideAdd: true }, props)))),
+            React.createElement(Box, { className: `${BASE_CLASS_NAME}__children-wrapper` },
+                props.predicate.args.map((arg, index) => {
+                    const id = `${props.id}/${index}`;
+                    return (React.createElement(QueryPredicateBuilder, { key: id, lastChild: index === props.predicate.args.length - 1, index: index, id: id, predicate: arg, onNewPredicate: (type) => {
+                            const newPredicate = {
+                                operator: type === 'filter' ? undefined : 'AND',
+                                args: [],
+                            };
+                            if (typeof arg === 'object' &&
+                                'operator' in arg &&
+                                isQlLogicalOperator(arg.operator)) {
+                                // add as a child
+                                const newArg = Object.assign(Object.assign({}, arg), { args: [...arg.args, newPredicate] });
+                                const args = [...props.predicate.args];
+                                args[index] = newArg;
+                                props.onChange(Object.assign(Object.assign({}, props.predicate), { args }));
+                            }
+                            else {
+                                // add as a sibling
+                                const prevArgs = [...props.predicate.args];
+                                prevArgs.splice(index + 1, 0, newPredicate);
+                                props.onChange(Object.assign(Object.assign({}, props.predicate), { args: prevArgs }));
+                            }
+                        }, onChange: (predicate) => {
+                            const args = [...props.predicate.args];
+                            if (predicate) {
+                                args[index] = predicate;
+                            }
+                            else {
+                                args.splice(index, 1);
+                            }
+                            props.onChange(Object.assign(Object.assign({}, props.predicate), { args }));
+                        } }));
+                }),
+                provided.placeholder,
+                React.createElement("div", { className: `${BASE_CLASS_NAME}__root-actions` },
+                    React.createElement(QueryPredicateButtons, Object.assign({}, props, { hideDelete: true }))))));
+    }));
+    if (props.isRoot) {
+        return getCombinatorEl({ className: className });
+    }
+    else {
+        return (React.createElement(Draggable, { key: props.id, draggableId: props.id, index: props.index }, (provided, snapshot) => {
+            return (React.createElement("div", Object.assign({}, provided.draggableProps, { ref: provided.innerRef, className: className }), getCombinatorEl(provided.dragHandleProps)));
+        }));
+    }
+};
+const PrimitiveFunctionEditor = (props) => {
+    var _a;
+    // [handle] [column] [operator-dropdown] [...args] [delete-button] [plus-button]
+    const adaptable = useAdaptable();
+    const [columnExpression, ...restOfArgs] = props.predicate.args;
+    const col = columnExpression;
+    let columnId = null;
+    let columnDataType = null;
+    let columnInputDataType = null;
+    let functionInputInputDataTypes = null;
+    // Thsese are the type of inputs ommiting the column
+    // [[column-data-type], number, number]
+    let restOfFunctionInputDataTypes = [];
+    if (col) {
+        if (typeof col !== 'string' || !col.includes('[')) {
+            return React.createElement(ErrorBox, null, "Expression must start with a column!");
+        }
+        columnId = col.replace(/[\[\]]/g, '');
+        columnDataType = adaptable.api.columnApi.getColumnDataTypeForColumnId(columnId);
+        columnInputDataType = mapColumnDataTypeToExpressionFunctionType(columnDataType);
+        functionInputInputDataTypes = (_a = booleanExpressionFunctions[props.predicate.operator]) === null || _a === void 0 ? void 0 : _a.inputs;
+        restOfFunctionInputDataTypes = functionInputInputDataTypes
+            ? getFunctionMatchingInputTypes(columnInputDataType, functionInputInputDataTypes)
+            : [];
+    }
+    const level = props.id.split('/').length - 1;
+    return (React.createElement(Draggable, { key: props.id, draggableId: props.id, index: props.index }, (provided) => {
+        return (React.createElement(Flex, Object.assign({ className: `
+              ${BASE_CLASS_NAME} 
+              ${BASE_CLASS_NAME}-level-${level}
+              ${BASE_CLASS_NAME}-primitive
+              ${props.lastChild ? `${BASE_CLASS_NAME}--last-child` : ''}
+            `, pb: 2, ref: provided.innerRef }, provided.draggableProps, { style: Object.assign(Object.assign({}, provided.draggableProps.style), { minHeight: ITEM_HEIGHT }) }),
+            React.createElement(Handle, Object.assign({}, provided.dragHandleProps)),
+            React.createElement(Flex, { alignItems: "center", height: ITEM_HEIGHT },
+                React.createElement(Box, { mr: 2 },
+                    React.createElement(PrimitiveColumnSelector, { onChange: (colId) => {
+                            props.onChange(Object.assign(Object.assign({}, props.predicate), { args: [colId], operator: null }));
+                        }, columnId: columnId })),
+                columnId && columnDataType && (React.createElement(ExpressionSelector, { dataType: columnDataType, onExpressionChange: (operator) => {
+                        let args = [props.predicate.args[0]];
+                        if (columnDataType === 'Boolean' && operator !== 'NOT') {
+                            args = [props.predicate.args[0], 'TRUE'];
+                        }
+                        props.onChange(Object.assign(Object.assign({}, props.predicate), { operator,
+                            // discard arguments
+                            args }));
+                    }, value: props.predicate.operator })),
+                React.createElement(Flex, { flex: 1, ml: 2 }, restOfFunctionInputDataTypes.map((type, index) => {
+                    var _a;
+                    return (React.createElement(PrimiteValueInput, { key: type + index, inputType: type, lefthandColumnIdParam: columnId, value: (_a = restOfArgs[index]) !== null && _a !== void 0 ? _a : null, onChange: (value) => {
+                            const args = [...props.predicate.args];
+                            // +1 because col is the first argument
+                            args[index + 1] = value;
+                            props.onChange(Object.assign(Object.assign({}, props.predicate), { args }));
+                        } }));
+                }))),
+            React.createElement(Box, { flex: 1 }),
+            React.createElement(QueryPredicateButtons, Object.assign({}, props))));
+    }));
+};
+/**
+ * Two types:
+ * - combinatory operator
+ * - can contain both expressons and combinators
+ * [handle] [combinator-dropdown]
+ *   [children]
+ *
+ * - boolean function: ars do not contain other combinators
+ * [handle] [column] [operator-dropdown] [...args] [delete-button] [plus-button]
+ */
+export const QueryPredicateBuilder = (props) => {
+    if (isQlLogicalOperator(props.predicate.operator)) {
+        return React.createElement(LogicalFunctionEditor, Object.assign({}, props));
+    }
+    else {
+        return React.createElement(PrimitiveFunctionEditor, Object.assign({}, props));
+    }
+};

package/src/components/ExpressionEditor/QueryBuilder/booleanExpressions.d.ts

@@ -0,0 +1,2 @@
+import { BooleanFunctionName } from '../../../types';
+export declare const booleanExpressionsAvailableInQueryBuilder: BooleanFunctionName[];

package/src/components/ExpressionEditor/QueryBuilder/booleanExpressions.js

@@ -0,0 +1,14 @@
+export const booleanExpressionsAvailableInQueryBuilder = [
+    'EQ',
+    'NEQ',
+    'GT',
+    'LT',
+    'GTE',
+    'LTE',
+    'BETWEEN',
+    'CONTAINS',
+    'STARTS_WITH',
+    'ENDS_WITH',
+    'IS_HOLIDAY',
+    'IS_WORKDAY',
+];

package/src/components/ExpressionEditor/QueryBuilder/index.d.ts

@@ -0,0 +1 @@
+export * from './QueryBuilder';

package/src/components/ExpressionEditor/QueryBuilder/index.js

@@ -0,0 +1 @@
+export * from './QueryBuilder';

package/src/components/ExpressionEditor/QueryBuilder/utils.d.ts

@@ -0,0 +1,9 @@
+import { QlPredicate, QlPredicateError } from '../../../parser/src/predicate';
+import { ExpressionFunctionInputType } from '../../../parser/src/types';
+import { AdaptableColumnDataType, BooleanFunctionName } from '../../../types';
+export declare const reorder: (predicate: QlPredicate, from: string, to: string) => any;
+export declare const mapColumnDataTypeToExpressionFunctionType: (dataType: AdaptableColumnDataType) => ExpressionFunctionInputType;
+export declare const mapExpressionFunctionTypeToColumnDataType: (type: ExpressionFunctionInputType) => AdaptableColumnDataType;
+export declare const getOperatorMatchingInputs: (columnType: ExpressionFunctionInputType, inputs: ExpressionFunctionInputType[] | Array<ExpressionFunctionInputType>[]) => ExpressionFunctionInputType[];
+export declare const getFunctionsForColumnType: (dataType: AdaptableColumnDataType, availableBooleanFunctions: BooleanFunctionName[]) => BooleanFunctionName[];
+export declare const getUnsuportedExpressionFromQlPredicate: (predicate: QlPredicate | QlPredicateError) => string;