@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.1

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

@@ -0,0 +1,113 @@
+import { isQlLogicalOperator } from '../../../parser/src/predicate';
+import { booleanExpressionFunctions } from '../../../Utilities/ExpressionFunctions/booleanExpressionFunctions';
+import { deepClone } from '../../../Utilities/Extensions/ObjectExtensions';
+import { booleanExpressionsAvailableInQueryBuilder } from './booleanExpressions';
+export const reorder = (predicate, from, to) => {
+    const predicateCopy = deepClone(predicate);
+    // we start from the root so no need to traverse first level
+    const [_, ...fromPath] = from.split('/');
+    const [__, ...toPath] = to.split('/');
+    // remove from old position and get the item
+    // path = '0/1/2'
+    let itemToMove = predicateCopy;
+    let prev = null;
+    for (const index of fromPath) {
+        prev = itemToMove;
+        itemToMove = itemToMove.args[parseInt(index)];
+    }
+    prev.args.splice(parseInt(fromPath[fromPath.length - 1]), 1);
+    // find the parent into wich we want to insert the item
+    let cursor = predicateCopy;
+    let parent = null;
+    for (const index of toPath) {
+        parent = cursor;
+        cursor = cursor.args[parseInt(index)];
+    }
+    parent.args.splice(parseInt(toPath[toPath.length - 1]), 0, itemToMove);
+    return predicateCopy;
+};
+export const mapColumnDataTypeToExpressionFunctionType = (dataType) => {
+    if (dataType === 'Number') {
+        return 'number';
+    }
+    if (dataType === 'Boolean') {
+        return 'boolean';
+    }
+    if (dataType === 'String') {
+        return 'text';
+    }
+    if (dataType === 'Date') {
+        return 'date';
+    }
+};
+export const mapExpressionFunctionTypeToColumnDataType = (type) => {
+    if (type === 'number') {
+        return 'Number';
+    }
+    if (type === 'boolean') {
+        return 'Boolean';
+    }
+    if (type === 'text') {
+        return 'String';
+    }
+    if (type === 'date') {
+        return 'Date';
+    }
+    return undefined;
+};
+export const getOperatorMatchingInputs = (columnType, inputs) => {
+    if (Array.isArray(inputs[0])) {
+        const matchingInput = inputs.find((input) => input[0] === columnType);
+        const [_, ...restOfArgs] = matchingInput;
+        return restOfArgs;
+    }
+    const [_, ...restOfArgs] = inputs;
+    return restOfArgs;
+};
+export const getFunctionsForColumnType = (dataType, availableBooleanFunctions) => {
+    const columnType = mapColumnDataTypeToExpressionFunctionType(dataType);
+    return booleanExpressionsAvailableInQueryBuilder.filter((boolFnName) => {
+        if (!availableBooleanFunctions.includes(boolFnName)) {
+            return false;
+        }
+        const functionDef = booleanExpressionFunctions[boolFnName];
+        const inputs = functionDef.inputs;
+        let matchingInputTypes = [];
+        if (Array.isArray(inputs[0])) {
+            matchingInputTypes = inputs.find((input) => input[0] === columnType);
+        }
+        else {
+            matchingInputTypes = inputs;
+        }
+        return (matchingInputTypes === null || matchingInputTypes === void 0 ? void 0 : matchingInputTypes[0]) === columnType;
+    });
+};
+export const getUnsuportedExpressionFromQlPredicate = (predicate) => {
+    if (!predicate) {
+        return null;
+    }
+    if (typeof predicate === 'object' && 'errorMessage' in predicate) {
+        return null;
+    }
+    if (typeof predicate !== 'object' || !('operator' in predicate) || !predicate.operator) {
+        return null;
+    }
+    if (!isQlLogicalOperator(predicate.operator) &&
+        !booleanExpressionsAvailableInQueryBuilder.includes(predicate.operator)) {
+        return `${predicate.operator} is not supported in the Query Builder`;
+    }
+    if (predicate.args.length === 0) {
+        return null;
+    }
+    let firstInvalidArg = null;
+    for (let arg of predicate.args) {
+        firstInvalidArg = getUnsuportedExpressionFromQlPredicate(arg);
+        if (firstInvalidArg) {
+            break;
+        }
+    }
+    if (firstInvalidArg) {
+        return firstInvalidArg;
+    }
+    return null;
+};

package/src/components/ExpressionEditor/editorButtonsAggregatedBoolean.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.editorButtonsAggregatedBoolean = void 0;
-exports.editorButtonsAggregatedBoolean = [
+export const editorButtonsAggregatedBoolean = [
     {
         functionName: 'SUM',
         data: 'SUM()',

package/src/components/ExpressionEditor/editorButtonsAggregatedScalar.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.editorButtonsAggregatedScalar = void 0;
-exports.editorButtonsAggregatedScalar = [
+export const editorButtonsAggregatedScalar = [
     {
         functionName: 'SUM',
         data: 'SUM()',

package/src/components/ExpressionEditor/editorButtonsCumulativeAggregatedScalar.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.editorButtonsCumulativeAggregatedScalar = void 0;
-exports.editorButtonsCumulativeAggregatedScalar = [
+export const editorButtonsCumulativeAggregatedScalar = [
     {
         functionName: 'CUMUL',
         data: 'CUMUL()',

package/src/components/ExpressionEditor/editorButtonsObservable.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.editorButtonsObservable = void 0;
-exports.editorButtonsObservable = [
+export const editorButtonsObservable = [
     {
         functionName: 'ROW_CHANGE',
         data: 'ROW_CHANGE()',

package/src/components/ExpressionEditor/editorButtonsQuantileAggregatedScalar.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.editorButtonsQuantileAggregatedScalar = void 0;
-exports.editorButtonsQuantileAggregatedScalar = [
+export const editorButtonsQuantileAggregatedScalar = [
     {
         functionName: 'QUANT',
         data: 'QUANT()',

package/src/components/ExpressionEditor/editorButtonsSearch.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.editorButtonsSearch = void 0;
-exports.editorButtonsSearch = [
+export const editorButtonsSearch = [
     {
         functionName: 'AND',
         data: 'AND',

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { AdaptableApi, AdaptableColumn, AdaptableModule } from '../../types';
-import { NamedQuery } from '../../PredefinedConfig/QueryState';
-export declare type ExpressionEditorType = 'boolean' | 'scalar' | 'observable' | 'aggregatedBoolean' | 'aggregatedScalar' | 'cumulativeAggregatedScalar' | 'quantileAggregatedScalar';
+import { AdaptableApi, AdaptableColumn, AdaptableModule, NamedQuery } from '../../types';
+export type ExpressionEditorType = 'boolean' | 'scalar' | 'observable' | 'aggregatedBoolean' | 'aggregatedScalar' | 'cumulativeAggregatedScalar' | 'quantileAggregatedScalar';
 interface ExpressionEditorProps {
     value: string;
     onChange: (value: string) => void;
@@ -16,6 +15,8 @@ interface ExpressionEditorProps {
     style?: React.CSSProperties;
     isFullExpression?: boolean;
     api: AdaptableApi;
+    showQueryBuilder?: boolean;
+    showExpressionEditor?: boolean;
 }
 export declare function ExpressionEditor(props: ExpressionEditorProps): JSX.Element;
 export {};

package/src/components/ExpressionEditor/index.js

@@ -1,51 +1,52 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExpressionEditor = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const rebass_1 = require("rebass");
-const CheckBox_1 = require("../CheckBox");
-const FormLayout_1 = tslib_1.__importStar(require("../FormLayout"));
-const HelpBlock_1 = tslib_1.__importDefault(require("../HelpBlock"));
-const Input_1 = tslib_1.__importDefault(require("../Input"));
-const EditorButton_1 = tslib_1.__importDefault(require("./EditorButton"));
-const AdaptableInput_1 = tslib_1.__importDefault(require("../../View/Components/AdaptableInput"));
-const Radio_1 = tslib_1.__importDefault(require("../Radio"));
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
-const EditorInputWithWhereClause_1 = tslib_1.__importDefault(require("./EditorInputWithWhereClause"));
-const EditorInput_1 = tslib_1.__importDefault(require("./EditorInput"));
-const EditorContext_1 = require("./EditorContext");
-const ExpressionFunctionDocumentation_1 = require("./ExpressionFunctionDocumentation");
-const DocumentationLinkConstants_1 = require("../../Utilities/Constants/DocumentationLinkConstants");
-const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
-const ButtonInfo_1 = require("../../View/Components/Buttons/ButtonInfo");
-const CodeBlock_1 = require("../CodeBlock");
-const NamedQueryContext_1 = require("./NamedQueryContext");
-const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
-const DateHelper_1 = require("../../Utilities/Helpers/DateHelper");
-const AdaptableFormControlTextClear_1 = require("../../View/Components/Forms/AdaptableFormControlTextClear");
-function ExpressionEditor(props) {
-    var _a;
+import * as React from 'react';
+import { useState, useRef } from 'react';
+import { Box, Flex, Text } from 'rebass';
+import { CheckBox } from '../CheckBox';
+import FormLayout, { FormRow } from '../FormLayout';
+import HelpBlock from '../HelpBlock';
+import Input from '../Input';
+import EditorButton from './EditorButton';
+import AdaptableInput from '../../View/Components/AdaptableInput';
+import Radio from '../Radio';
+import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
+import EditorInputWithWhereClause from './EditorInputWithWhereClause';
+import EditorInput from './EditorInput';
+import { ExpressionEditorContext } from './EditorContext';
+import { ExpressionFunctionDocumentation } from './ExpressionFunctionDocumentation';
+import { AggregatedBooleanQueryDocsLink, AggregatedScalarQueryDocsLink, BooleanQueryDocsLink, CumulativeAggregatedScalarQueryDocsLink, ObservableQueryDocsLink, QuantileAggregatedScalarQueryDocsLink, ScalarQueryDocsLink, } from '../../Utilities/Constants/DocumentationLinkConstants';
+import StringExtensions from '../../Utilities/Extensions/StringExtensions';
+import { ButtonInfo } from '../../View/Components/Buttons/ButtonInfo';
+import { CodeBlock } from '../CodeBlock';
+import { useNamedQueryContext } from './NamedQueryContext';
+import { NamedQueryModuleId } from '../../Utilities/Constants/ModuleConstants';
+import { isValueValidDate } from '../../Utilities/Helpers/DateHelper';
+import { AdaptableFormControlTextClear } from '../../View/Components/Forms/AdaptableFormControlTextClear';
+import { Tabs } from '../Tabs';
+import { QueryBuilder } from './QueryBuilder';
+export function ExpressionEditor(props) {
+    var _a, _b, _c;
     const { type, module } = props;
-    const [data, setData] = (0, react_1.useState)(props.initialData);
-    const [showColumnIds, setShowColumnIds] = (0, react_1.useState)(false);
-    const [showNamedQueries, setShowNamedQueries] = (0, react_1.useState)(false);
+    const [data, setData] = useState(props.initialData);
+    const [showColumnIds, setShowColumnIds] = useState(false);
+    const [showNamedQueries, setShowNamedQueries] = useState(false);
     const baseClassName = `ab-ExpressionEditor`;
-    const [selectedFunction, setSelectedFunction] = (0, react_1.useState)(null);
-    const [expressionText, setExpressionText] = (0, react_1.useState)('');
-    const { namedQuery, setNamedQuery } = (0, NamedQueryContext_1.useNamedQueryContext)();
-    const textAreaRef = (0, react_1.useRef)(null);
+    const [selectedFunction, setSelectedFunction] = useState(null);
+    const [expressionText, setExpressionText] = useState(props.value);
+    const { namedQuery, setNamedQuery } = useNamedQueryContext();
+    const textAreaRef = useRef(null);
     const allowSaveNamedQuery = (_a = props.allowSaveNamedQuery) !== null && _a !== void 0 ? _a : type === 'boolean';
-    const editorInput = type === 'observable' || type === 'aggregatedBoolean' ? (React.createElement(EditorInputWithWhereClause_1.default, { type: type, module: module, value: props.value, onChange: (value) => {
+    const editorInput = type === 'observable' || type === 'aggregatedBoolean' ? (React.createElement(EditorInputWithWhereClause, { type: type, module: module, value: props.value, onChange: (value) => {
             setExpressionText(value);
             props.onChange(value);
         }, testData: data, api: props.api })) : (
     // 'boolean','scalar','aggregatedScalar'/'cumulativeAggregatedScalar'/'quantileAggregatedScalar'
-    React.createElement(EditorInput_1.default, { type: type, module: module, value: props.value, onChange: (value) => {
-            setExpressionText(value);
-            props.onChange(value);
-        }, testData: data, isFullExpression: props.isFullExpression, api: props.api }));
+    (React.createElement(
+        EditorInput,
+        { type: type, module: module, value: props.value, onChange: (value) => {
+                setExpressionText(value);
+                props.onChange(value);
+            }, testData: data, isFullExpression: props.isFullExpression, api: props.api }
+    )));
     // currently only boolean and scalar expressions support nested calculated columns (calc cols which reference other calc cols)
     const queryableColumns = type === 'scalar' || type === 'boolean' || type === 'aggregatedScalar'
         ? props.columns
@@ -61,21 +62,21 @@ function ExpressionEditor(props) {
     };
     const getColDateValue = (column) => {
         const colValue = getColValue(column);
-        return colValue && (0, DateHelper_1.isValueValidDate)(colValue)
+        return colValue && isValueValidDate(colValue)
             ? new Date(colValue).toISOString().substr(0, 10)
             : '';
     };
     const [searchInputValue, setSearchInputValue] = React.useState('');
     const dataTableEditor = (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { className: `${baseClassName}__columns-list`, flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
-            React.createElement(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked), style: {
+        React.createElement(Flex, { className: `${baseClassName}__columns-list`, flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
+            React.createElement(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked), style: {
                     float: 'right',
                     margin: 0,
                     paddingTop: 'var(--ab-space-1)',
                     paddingBottom: 'var(--ab-space-1)',
                 } }, 'Show Column IDs'),
-            React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Filter columns...", style: { flex: 1, marginBottom: 3 } })),
-        React.createElement(FormLayout_1.default, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-space-1)", gridRowGap: "var(--ab-space-1)", sizes: ['auto', '100px'], style: { alignItems: 'stretch' } }, queryableColumns
+            React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Filter columns...", style: { flex: 1, marginBottom: 3 } })),
+        React.createElement(FormLayout, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-space-1)", gridRowGap: "var(--ab-space-1)", sizes: ['auto', '100px'], style: { alignItems: 'stretch' } }, queryableColumns
             .filter((column) => {
             if (!searchInputValue) {
                 return true;
@@ -83,93 +84,141 @@ function ExpressionEditor(props) {
             return (column.columnId.includes(searchInputValue) ||
                 column.friendlyName.includes(searchInputValue));
         })
-            .map((column) => (React.createElement(FormLayout_1.FormRow, { key: column.columnId, label: React.createElement(EditorButton_1.default, { width: "100%", height: "100%", style: {
+            .map((column) => (React.createElement(FormRow, { key: column.columnId, label: React.createElement(EditorButton, { width: "100%", height: "100%", style: {
                     background: 'var(--ab-color-primary)',
                     cursor: 'grab',
                     marginRight: 'var(--ab-space-1)',
                 }, data: `[${column.columnId}]`, "data-name": "column", icon: "drag" },
-                React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start" }, showColumnIds ? `[${column.columnId}]` : column.friendlyName)) }, column.dataType === 'Number' ? (React.createElement(Input_1.default, { type: "number", "data-name": "column-input", "data-value": column.columnId, value: getColValue(column), onChange: (e) => setData(updateColValue(data, column, Number(e.target.value))), width: "100%", disabled: column.readOnly })) : column.dataType === 'String' ? (React.createElement(Input_1.default, { type: "text", "data-name": "column-input", "data-value": column.columnId, value: getColValue(column), onChange: (e) => setData(updateColValue(data, column, e.target.value)), width: "100%", disabled: column.readOnly })) : column.dataType === 'Date' ? (React.createElement(AdaptableInput_1.default, { type: "date", "data-name": "column-input", "data-value": column.columnId, value: getColDateValue(column), onChange: (e) => {
+                React.createElement(Flex, { flexDirection: "column", alignItems: "start" }, showColumnIds ? `[${column.columnId}]` : column.friendlyName)) }, column.dataType === 'Number' ? (React.createElement(Input, { type: "number", "data-name": "column-input", "data-value": column.columnId, value: getColValue(column), onChange: (e) => setData(updateColValue(data, column, Number(e.target.value))), width: "100%", disabled: column.readOnly })) : column.dataType === 'String' ? (React.createElement(Input, { type: "text", "data-name": "column-input", "data-value": column.columnId, value: getColValue(column), onChange: (e) => setData(updateColValue(data, column, e.target.value)), width: "100%", disabled: column.readOnly })) : column.dataType === 'Date' ? (React.createElement(AdaptableInput, { type: "date", "data-name": "column-input", "data-value": column.columnId, value: getColDateValue(column), onChange: (e) => {
                 setData(updateColValue(data, column, new Date(e.target.value)));
-            }, style: { width: '100%' }, disabled: column.readOnly })) : column.dataType === 'Boolean' ? (React.createElement(CheckBox_1.CheckBox, { "data-name": "column-input", "data-value": column.columnId, checked: getColValue(column), onChange: (checked) => setData(updateColValue(data, column, checked)), disabled: column.readOnly })) : null))))));
-    const namedQueries = (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
-        React.createElement(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked), style: {
+            }, style: { width: '100%' }, disabled: column.readOnly })) : column.dataType === 'Boolean' ? (React.createElement(CheckBox, { "data-name": "column-input", "data-value": column.columnId, checked: getColValue(column), onChange: (checked) => setData(updateColValue(data, column, checked)), disabled: column.readOnly })) : null))))));
+    const namedQueries = (React.createElement(Flex, { flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
+        React.createElement(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked), style: {
                 float: 'right',
                 margin: 0,
                 paddingTop: 'var(--ab-space-1)',
                 paddingBottom: 'var(--ab-space-1)',
             } }, 'Show Column IDs'),
-        props.namedQueries.map((namedQuery) => (React.createElement(rebass_1.Flex, { key: namedQuery.Uuid, flexDirection: "column", alignItems: "start", style: {
+        props.namedQueries.map((namedQuery) => (React.createElement(Flex, { key: namedQuery.Uuid, flexDirection: "column", alignItems: "start", style: {
                 padding: 3,
                 marginTop: 'var(--ab-space-2)',
                 marginBottom: 'var(--ab-space-2)',
                 width: '100%',
             }, backgroundColor: "primarylight" },
             ' ',
-            React.createElement(EditorButton_1.default, { width: "100%", height: "100%", style: {
+            React.createElement(EditorButton, { width: "100%", height: "100%", style: {
                     background: 'var(--ab-color-primary)',
                     cursor: 'grab',
                 }, data: `QUERY("${namedQuery.Name}")`, "data-name": "column", icon: "drag" },
-                React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start" }, namedQuery.Name)),
-            React.createElement(rebass_1.Flex, { alignItems: "start", style: {
+                React.createElement(Flex, { flexDirection: "column", alignItems: "start" }, namedQuery.Name)),
+            React.createElement(Flex, { alignItems: "start", style: {
                     padding: 5,
                 } }, showColumnIds
                 ? namedQuery.BooleanExpression
                 : props.api.expressionApi.getAdaptableQueryExpressionWithColumnFriendlyNames(namedQuery)))))));
     const showDocumentationLinks = props.api.internalApi.isDocumentationLinksDisplayed();
+    // @Bogdan i did this to be sure but i think we can get rid of this as the button does the same (and better IMO)
+    const showNamedQueryStuff = false;
     const queryDocumentationLink = queryDocumentationLinks[type];
-    return (React.createElement(EditorContext_1.ExpressionEditorContext.Provider, { value: {
+    const saveAsNamedQueryElement = allowSaveNamedQuery &&
+        props.api.internalApi
+            .getModuleService()
+            .getModuleById(NamedQueryModuleId)
+            .isModuleEditable() && (React.createElement(Flex, { flexDirection: "row", mb: 2, fontSize: 3 },
+        React.createElement(CheckBox, { checked: !!namedQuery, onChange: (checked) => {
+                if (checked) {
+                    setNamedQuery({
+                        Name: '',
+                        BooleanExpression: expressionText,
+                    });
+                }
+                else {
+                    setNamedQuery(false);
+                }
+            }, mr: 2, style: { alignItems: 'center' } }, "Save as new Named Query"),
+        namedQuery ? (React.createElement(AdaptableInput, { style: { flex: 1 }, onChange: (event) => {
+                const { target: { value }, } = event;
+                setNamedQuery({
+                    Name: value,
+                    BooleanExpression: expressionText,
+                });
+            } })) : null));
+    const editorElement = (React.createElement(Flex, { className: baseClassName, flex: 1, "data-name": "expression-editor-wrapper", pl: 2, style: props.style },
+        React.createElement(Flex, { flex: 1, style: { minHeight: 0 }, flexDirection: "column", onFocus: (event) => {
+                if (event.target.tagName === 'TEXTAREA') {
+                    textAreaRef.current = event.target;
+                }
+            } },
+            React.createElement(Flex, { flex: 1, flexDirection: "row", "data-name": "expression-editor", fontSize: 2, style: { minHeight: 0 } },
+                React.createElement(Flex, { flex: 1, paddingRight: 2, style: { overflow: 'auto' }, "data-name": "expression-builder", flexDirection: "column" },
+                    editorInput,
+                    StringExtensions.IsNotNullOrEmpty(expressionText === null || expressionText === void 0 ? void 0 : expressionText.trim()) && (React.createElement(ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })),
+                    /* displayed for advanced queries (observable&Aggregation) to give the users a starting point */
+                    StringExtensions.IsNullOrEmpty(expressionText === null || expressionText === void 0 ? void 0 : expressionText.trim()) && renderQueryHints(type),
+                    showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "query-documentation", mt: 2, mb: 2, fontSize: 3 },
+                        React.createElement(ButtonInfo, { mr: 2, onClick: () => window.open(queryDocumentationLink, '_blank') }),
+                        "See ",
+                        StringExtensions.CapitaliseFirstLetter(type),
+                        " Query documentation for more details and examples")),
+                    React.createElement(Box, { flex: 1 }),
+                    showNamedQueryStuff && saveAsNamedQueryElement),
+                React.createElement(Box, { className: `${baseClassName}__column-picker`, "data-name": "expression-column-picker", pb: 2, paddingLeft: 2, pr: 2 },
+                    ArrayExtensions.IsNotNullOrEmpty(props.namedQueries) && (React.createElement(Flex, { flexDirection: "row", alignItems: "start", p: 1, mt: 2, backgroundColor: "primarylight" },
+                        React.createElement(Radio, { checked: !showNamedQueries, onChange: (checked) => setShowNamedQueries(!checked), style: { marginRight: 10 } }, "Columns"),
+                        React.createElement(Radio, { checked: showNamedQueries, onChange: (checked) => setShowNamedQueries(checked), style: { marginLeft: 10, whiteSpace: 'nowrap' } }, "Named Queries"))),
+                    showNamedQueries ? React.createElement("div", null, namedQueries) : React.createElement("div", null, dataTableEditor))))));
+    const queryBuilderElement = (React.createElement(QueryBuilder, { module: module, query: expressionText, onChange: (query) => {
+            setExpressionText(query);
+            props.onChange(query);
+        }, getColumns: (type) => {
+            return props.columns
+                .filter((column) => {
+                if (!type) {
+                    return (column.dataType === 'String' ||
+                        column.dataType === 'Number' ||
+                        column.dataType === 'Boolean' ||
+                        column.dataType === 'Date');
+                }
+                else {
+                    return column.dataType === type;
+                }
+            })
+                .map((col) => {
+                var _a;
+                return ({
+                    value: col.columnId,
+                    label: (_a = col.friendlyName) !== null && _a !== void 0 ? _a : col.columnId,
+                    type: col.dataType,
+                });
+            });
+        } }));
+    const showQueryBuilder = (_b = props.showQueryBuilder) !== null && _b !== void 0 ? _b : false;
+    const showExpressionEditor = (_c = props.showExpressionEditor) !== null && _c !== void 0 ? _c : true;
+    return (React.createElement(ExpressionEditorContext.Provider, { value: {
             selectedFunction,
             setSelectedFunction,
             textAreaRef,
-        } },
-        React.createElement(rebass_1.Flex, { className: baseClassName, flex: 1, "data-name": "expression-editor-wrapper", pl: 2, style: props.style },
-            React.createElement(rebass_1.Flex, { flex: 1, style: { minHeight: 0 }, flexDirection: "column", onFocus: (event) => {
-                    if (event.target.tagName === 'TEXTAREA') {
-                        textAreaRef.current = event.target;
-                    }
-                } },
-                React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "row", "data-name": "expression-editor", fontSize: 2, style: { minHeight: 0 } },
-                    React.createElement(rebass_1.Flex, { flex: 1, paddingRight: 2, style: { overflow: 'auto' }, "data-name": "expression-builder", flexDirection: "column" },
-                        editorInput,
-                        StringExtensions_1.default.IsNotNullOrEmpty(expressionText === null || expressionText === void 0 ? void 0 : expressionText.trim()) && (React.createElement(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })),
-                        /* displayed for advanced queries (observable&Aggregation) to give the users a starting point */
-                        StringExtensions_1.default.IsNullOrEmpty(expressionText === null || expressionText === void 0 ? void 0 : expressionText.trim()) && renderQueryHints(type),
-                        showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 2, mb: 2, fontSize: 3 },
-                            React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(queryDocumentationLink, '_blank') }),
-                            "See ",
-                            StringExtensions_1.default.CapitaliseFirstLetter(type),
-                            " Query documentation for more details and examples")),
-                        React.createElement(rebass_1.Box, { flex: 1 }),
-                        allowSaveNamedQuery &&
-                            props.api.internalApi
-                                .getModuleService()
-                                .getModuleById(ModuleConstants_1.QueryModuleId)
-                                .isModuleEditable() && (React.createElement(rebass_1.Flex, { flexDirection: "row", mb: 2, fontSize: 3 },
-                            React.createElement(CheckBox_1.CheckBox, { checked: !!namedQuery, onChange: (checked) => {
-                                    if (checked) {
-                                        setNamedQuery({
-                                            Name: '',
-                                            BooleanExpression: expressionText,
-                                        });
-                                    }
-                                    else {
-                                        setNamedQuery(false);
-                                    }
-                                }, mr: 2, style: { alignItems: 'center' } }, "Save as new Named Query"),
-                            namedQuery ? (React.createElement(AdaptableInput_1.default, { style: { flex: 1 }, onChange: (event) => {
-                                    const { target: { value }, } = event;
-                                    setNamedQuery({
-                                        Name: value,
-                                        BooleanExpression: expressionText,
-                                    });
-                                } })) : null))),
-                    React.createElement(rebass_1.Box, { className: `${baseClassName}__column-picker`, "data-name": "expression-column-picker", pb: 2, paddingLeft: 2, pr: 2 },
-                        ArrayExtensions_1.default.IsNotNullOrEmpty(props.namedQueries) && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "start", p: 1, mt: 2, backgroundColor: "primarylight" },
-                            React.createElement(Radio_1.default, { checked: !showNamedQueries, onChange: (checked) => setShowNamedQueries(!checked), style: { marginRight: 10 } }, "Columns"),
-                            React.createElement(Radio_1.default, { checked: showNamedQueries, onChange: (checked) => setShowNamedQueries(checked), style: { marginLeft: 10, whiteSpace: 'nowrap' } }, "Named Queries"))),
-                        showNamedQueries ? React.createElement("div", null, namedQueries) : React.createElement("div", null, dataTableEditor)))))));
+        } }, (() => {
+        switch (true) {
+            case showQueryBuilder && showExpressionEditor:
+                return (React.createElement(Tabs, { mb: 2, p: 2, minHeight: 0, flex: 1 },
+                    React.createElement(Tabs.Tab, { value: "editor" }, "Expression Editor"),
+                    React.createElement(Tabs.Tab, { value: "ui" }, "Query Builder"),
+                    React.createElement(Tabs.Content, null, editorElement),
+                    React.createElement(Tabs.Content, null,
+                        React.createElement(Flex, { flexDirection: "column", height: "100%" },
+                            queryBuilderElement,
+                            React.createElement(Box, { flex: 1 }),
+                            showNamedQueryStuff && saveAsNamedQueryElement))));
+            case showQueryBuilder:
+                return (React.createElement(Flex, { flexDirection: "column", p: 2, height: "100%" }, queryBuilderElement));
+            case showExpressionEditor:
+                return (React.createElement(Flex, { flexDirection: "column", p: 2, height: "100%" }, editorElement));
+            default:
+                return null;
+        }
+    })()));
 }
-exports.ExpressionEditor = ExpressionEditor;
 const renderQueryHints = (type) => {
     const examples = [];
     if (type === 'observable') {
@@ -210,29 +259,29 @@ const renderQueryHints = (type) => {
             description: "The cumulative sum of all 'PnL' columns in the order given by the 'TradeDate' column",
         });
     }
-    return examples.length ? (React.createElement(rebass_1.Box, { "data-name": "expression-hints", my: 2, p: 2, style: {
+    return examples.length ? (React.createElement(Box, { "data-name": "expression-hints", my: 2, p: 2, style: {
             background: 'var(--ab-color-primary)',
             borderRadius: 'var(--ab__border-radius)',
         } },
-        React.createElement(rebass_1.Box, null,
-            React.createElement(rebass_1.Text, { marginBottom: 2 },
+        React.createElement(Box, null,
+            React.createElement(Text, { marginBottom: 2 },
                 React.createElement("b", null, "Examples"),
                 " (click on each to see its explanation):"),
             examples.map((example, index) => (React.createElement("details", { key: index, style: { marginBottom: 'var(--ab-space-2)' } },
-                React.createElement(rebass_1.Flex, { style: {
+                React.createElement(Flex, { style: {
                         borderRadius: 'var(--ab__border-radius)',
                     }, marginRight: 2, marginBottom: 1, color: 'text-on-secondary', fontSize: 'var( --ab-font-size-2)', alignItems: "center", as: "summary" },
-                    React.createElement(CodeBlock_1.CodeBlock, null,
+                    React.createElement(CodeBlock, null,
                         " ",
                         example.code)),
-                React.createElement(rebass_1.Text, { fontSize: 2, marginLeft: 3, style: { fontStyle: 'italic' } }, example.description))))))) : null;
+                React.createElement(Text, { fontSize: 2, marginLeft: 3, style: { fontStyle: 'italic' } }, example.description))))))) : null;
 };
 const queryDocumentationLinks = {
-    boolean: DocumentationLinkConstants_1.BooleanQueryDocsLink,
-    scalar: DocumentationLinkConstants_1.ScalarQueryDocsLink,
-    observable: DocumentationLinkConstants_1.ObservableQueryDocsLink,
-    aggregatedBoolean: DocumentationLinkConstants_1.AggregatedBooleanQueryDocsLink,
-    aggregatedScalar: DocumentationLinkConstants_1.AggregatedScalarQueryDocsLink,
-    cumulativeAggregatedScalar: DocumentationLinkConstants_1.CumulativeAggregatedScalarQueryDocsLink,
-    quantileAggregatedScalar: DocumentationLinkConstants_1.QuantileAggregatedScalarQueryDocsLink,
+    boolean: BooleanQueryDocsLink,
+    scalar: ScalarQueryDocsLink,
+    observable: ObservableQueryDocsLink,
+    aggregatedBoolean: AggregatedBooleanQueryDocsLink,
+    aggregatedScalar: AggregatedScalarQueryDocsLink,
+    cumulativeAggregatedScalar: CumulativeAggregatedScalarQueryDocsLink,
+    quantileAggregatedScalar: QuantileAggregatedScalarQueryDocsLink,
 };

package/src/components/FieldWrap/index.js

@@ -1,14 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
+import * as React from 'react';
+import { Flex } from 'rebass';
+import join from '../utils/join';
 const FieldWrap = (props) => {
-    return React.createElement(rebass_1.Flex, Object.assign({}, props, { className: (0, join_1.default)(props.className, 'ab-FieldWrap') }));
+    return React.createElement(Flex, Object.assign({}, props, { className: join(props.className, 'ab-FieldWrap') }));
 };
 FieldWrap.defaultProps = {
     flexDirection: 'row',
     alignItems: 'center',
 };
-exports.default = FieldWrap;
+export default FieldWrap;

package/src/components/FileDroppable/FileDroppableState.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};