@vuu-ui/vuu-table-extras 2.1.18 → 2.1.19-beta.2

package/src/column-expression-input/useColumnAutoComplete.js

@@ -0,0 +1,307 @@
+import { booleanJoinSuggestions, getNamedParentNode, getPreviousNode, getValue, syntaxTree } from "@vuu-ui/vuu-codemirror";
+import { useCallback } from "react";
+import { ColumnNamedTerms, isCompleteExpression, isCompleteRelationalExpression, lastNamedChild } from "./column-language-parser/index.js";
+const applyPrefix = (completions, prefix)=>prefix ? completions.map((completion)=>({
+            ...completion,
+            apply: "function" == typeof completion.apply ? completion.apply : `${prefix}${completion.apply ?? completion.label}`
+        })) : completions;
+const isOperator = (node)=>void 0 === node ? false : [
+        "Times",
+        "Divide",
+        "Plus",
+        "Minus"
+    ].includes(node.name);
+const completionDone = (onSubmit)=>({
+        apply: ()=>{
+            onSubmit?.();
+        },
+        label: "Done",
+        boost: 10
+    });
+const getLastChild = (node, context)=>{
+    let { lastChild: childNode } = node;
+    const { pos } = context;
+    while(childNode){
+        const isBeforeCursor = childNode.from < pos;
+        if (isBeforeCursor && ColumnNamedTerms.includes(childNode.name)) {
+            if ("ParenthesizedExpression" === childNode.name) {
+                const expression = childNode.firstChild?.nextSibling;
+                if (expression) childNode = expression;
+            }
+            return childNode;
+        }
+        childNode = childNode.prevSibling;
+    }
+};
+const getFunctionName = (node, state)=>{
+    if ("ArgList" === node.name) {
+        const functionNode = node.prevSibling;
+        if (functionNode) return getValue(functionNode, state);
+    } else if ("OpenBrace" === node.name) {
+        const maybeFunction = node.parent?.prevSibling;
+        if (maybeFunction?.name === "Function") return getValue(maybeFunction, state);
+    }
+};
+const getRelationalOperator = (node, state)=>{
+    if ("RelationalExpression" === node.name) {
+        const lastNode = lastNamedChild(node);
+        if (lastNode?.name === "RelationalOperator") return getValue(lastNode, state);
+    } else {
+        const prevNode = node.prevSibling;
+        if (prevNode?.name === "RelationalOperator") return getValue(prevNode, state);
+    }
+};
+const getColumnName = (node, state)=>{
+    if ("RelationalExpression" === node.name) {
+        if (node.firstChild?.name === "Column") return getValue(node.firstChild, state);
+    } else {
+        const prevNode = node.prevSibling;
+        if (prevNode?.name === "Column") return getValue(prevNode, state);
+        if (prevNode?.name === "RelationalOperator") return getColumnName(prevNode, state);
+    }
+};
+const useColumnAutoComplete_makeSuggestions = async (context, suggestionProvider, suggestionType, optionalArgs = {})=>{
+    const options = await suggestionProvider.getSuggestions(suggestionType, optionalArgs);
+    const { startsWith = "" } = optionalArgs;
+    return {
+        from: context.pos - startsWith.length,
+        options
+    };
+};
+const handleConditionalExpression = (node, context, suggestionProvider, maybeComplete, onSubmit)=>{
+    const lastChild = getLastChild(node, context);
+    switch(lastChild?.name){
+        case "If":
+            return useColumnAutoComplete_makeSuggestions(context, suggestionProvider, "expression", {
+                prefix: "( "
+            });
+        case "OpenBrace":
+            return useColumnAutoComplete_makeSuggestions(context, suggestionProvider, "expression");
+        case "Condition":
+            return useColumnAutoComplete_makeSuggestions(context, suggestionProvider, "expression", {
+                prefix: ", "
+            });
+        case "CloseBrace":
+            if (maybeComplete) {
+                const options = [
+                    completionDone(onSubmit)
+                ];
+                return {
+                    from: context.pos,
+                    options
+                };
+            }
+    }
+};
+const promptToSave = (context, onSubmit)=>{
+    const options = [
+        completionDone(onSubmit)
+    ];
+    return {
+        from: context.pos,
+        options
+    };
+};
+const useColumnAutoComplete = (suggestionProvider, onSubmit)=>{
+    const makeSuggestions = useCallback(async (context, suggestionType, optionalArgs = {})=>{
+        const options = await suggestionProvider.getSuggestions(suggestionType, optionalArgs);
+        const { startsWith = "" } = optionalArgs;
+        return {
+            from: context.pos - startsWith.length,
+            options
+        };
+    }, [
+        suggestionProvider
+    ]);
+    return useCallback(async (context)=>{
+        const { state, pos } = context;
+        const word = context.matchBefore(/\w*/) ?? {
+            from: 0,
+            to: 0,
+            text: void 0
+        };
+        const tree = syntaxTree(state);
+        const nodeBefore = tree.resolveInner(pos, -1);
+        const text = state.doc.toString();
+        const maybeComplete = isCompleteExpression(text);
+        switch(nodeBefore.name){
+            case "If":
+                return makeSuggestions(context, "expression", {
+                    prefix: "( "
+                });
+            case "Condition":
+                {
+                    const lastChild = getLastChild(nodeBefore, context);
+                    if (lastChild?.name === "Column") {
+                        const prevChild = getPreviousNode(lastChild);
+                        if (prevChild?.name !== "RelationalOperator") return makeSuggestions(context, "condition-operator", {
+                            columnName: getValue(lastChild, state)
+                        });
+                    } else if (lastChild?.name === "RelationalOperator") return makeSuggestions(context, "expression");
+                }
+                break;
+            case "ConditionalExpression":
+                return handleConditionalExpression(nodeBefore, context, suggestionProvider);
+            case "RelationalExpression":
+                if (isCompleteRelationalExpression(nodeBefore)) return {
+                    from: context.pos,
+                    options: booleanJoinSuggestions.concat({
+                        label: ", <truthy expression>, <falsy expression>",
+                        apply: ", "
+                    })
+                };
+                {
+                    const operator = getRelationalOperator(nodeBefore, state);
+                    const columnName = getColumnName(nodeBefore, state);
+                    if (operator) return makeSuggestions(context, "expression");
+                    {
+                        const options = await suggestionProvider.getSuggestions("condition-operator", {
+                            columnName
+                        });
+                        return {
+                            from: context.pos,
+                            options
+                        };
+                    }
+                }
+            case "RelationalOperator":
+                return makeSuggestions(context, "expression");
+            case "String":
+                {
+                    const operator = getRelationalOperator(nodeBefore, state);
+                    const columnName = getColumnName(nodeBefore, state);
+                    const { from, to } = nodeBefore;
+                    if (to - from === 2 && context.pos === from + 1) {
+                        if (columnName && operator) return makeSuggestions(context, "columnValue", {
+                            columnName,
+                            operator,
+                            startsWith: word.text
+                        });
+                    } else if (to - from > 2 && context.pos === to) return makeSuggestions(context, "expression", {
+                        prefix: ", "
+                    });
+                }
+                break;
+            case "ArithmeticExpression":
+                {
+                    const lastChild = getLastChild(nodeBefore, context);
+                    if (lastChild?.name === "Column") return makeSuggestions(context, "expression");
+                    if (isOperator(lastChild)) {
+                        const operator = lastChild.name;
+                        return makeSuggestions(context, "column", {
+                            operator
+                        });
+                    }
+                }
+                break;
+            case "OpenBrace":
+                {
+                    const functionName = getFunctionName(nodeBefore, state);
+                    return makeSuggestions(context, "expression", {
+                        functionName
+                    });
+                }
+            case "ArgList":
+                {
+                    const functionName = getFunctionName(nodeBefore, state);
+                    const lastArgument = getLastChild(nodeBefore, context);
+                    const prefix = lastArgument?.name === "OpenBrace" || lastArgument?.name === "Comma" ? void 0 : ",";
+                    let options = await suggestionProvider.getSuggestions("expression", {
+                        functionName
+                    });
+                    options = prefix ? applyPrefix(options, ", ") : options;
+                    if (lastArgument?.name !== "OpenBrace" && lastArgument?.name !== "Comma") options = [
+                        {
+                            apply: ") ",
+                            boost: 10,
+                            label: "Done - no more arguments"
+                        }
+                    ].concat(options);
+                    return {
+                        from: context.pos,
+                        options
+                    };
+                }
+            case "Equal":
+                if ("=" === text.trim()) return makeSuggestions(context, "expression");
+                break;
+            case "ParenthesizedExpression":
+            case "ColumnDefinitionExpression":
+                if (0 === context.pos) return makeSuggestions(context, "expression");
+                {
+                    const lastChild = getLastChild(nodeBefore, context);
+                    if (lastChild?.name === "Column") {
+                        if (maybeComplete) {
+                            const options = [
+                                completionDone(onSubmit.current)
+                            ];
+                            const columnName = getValue(lastChild, state);
+                            const columnOptions = await suggestionProvider.getSuggestions("operator", {
+                                columnName
+                            });
+                            return {
+                                from: context.pos,
+                                options: options.concat(columnOptions)
+                            };
+                        }
+                    } else if (lastChild?.name === "CallExpression") {
+                        if (maybeComplete) return {
+                            from: context.pos,
+                            options: [
+                                completionDone(onSubmit.current)
+                            ]
+                        };
+                    } else if (lastChild?.name === "ArithmeticExpression") {
+                        if (maybeComplete) {
+                            let options = [
+                                completionDone(onSubmit.current)
+                            ];
+                            const lastExpressionChild = getLastChild(lastChild, context);
+                            if (lastExpressionChild?.name === "Column") {
+                                const columnName = getValue(lastExpressionChild, state);
+                                const suggestions = await suggestionProvider.getSuggestions("operator", {
+                                    columnName
+                                });
+                                options = options.concat(suggestions);
+                            }
+                            return {
+                                from: context.pos,
+                                options
+                            };
+                        }
+                    } else if (lastChild?.name === "ConditionalExpression") return handleConditionalExpression(lastChild, context, suggestionProvider, maybeComplete, onSubmit.current);
+                    break;
+                }
+            case "Column":
+                {
+                    const isPartialMatch = await suggestionProvider.isPartialMatch("expression", void 0, word.text);
+                    if (isPartialMatch) return makeSuggestions(context, "expression", {
+                        startsWith: word.text
+                    });
+                }
+                break;
+            case "Comma":
+                {
+                    const parentNode = getNamedParentNode(nodeBefore);
+                    if (parentNode?.name === "ConditionalExpression") return makeSuggestions(context, "expression");
+                }
+                break;
+            case "CloseBrace":
+                {
+                    const parentNode = getNamedParentNode(nodeBefore);
+                    if (parentNode?.name === "ConditionalExpression") return handleConditionalExpression(parentNode, context, suggestionProvider, maybeComplete, onSubmit.current);
+                    if (parentNode?.name === "ArgList") {
+                        if (maybeComplete) return promptToSave(context, onSubmit.current);
+                    }
+                }
+                break;
+            default:
+                if (nodeBefore?.prevSibling?.name === "FilterClause") console.log("looks like we ight be a or|and operator");
+        }
+    }, [
+        makeSuggestions,
+        onSubmit,
+        suggestionProvider
+    ]);
+};
+export { useColumnAutoComplete };

package/src/column-expression-input/useColumnExpressionEditor.js

@@ -0,0 +1,133 @@
+import { EditorState, EditorView, autocompletion, defaultKeymap, ensureSyntaxTree, keymap, minimalSetup, startCompletion } from "@vuu-ui/vuu-codemirror";
+import { createEl } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { columnExpressionLanguageSupport } from "./column-language-parser/index.js";
+import { walkTree } from "./column-language-parser/ColumnExpressionTreeWalker.js";
+import { vuuHighlighting } from "./highlighting.js";
+import { vuuTheme } from "./theme.js";
+import { useColumnAutoComplete } from "./useColumnAutoComplete.js";
+const getView = (ref)=>{
+    if (void 0 == ref.current) throw Error("EditorView not defined");
+    return ref.current;
+};
+const getOptionClass = ()=>"vuuSuggestion";
+const noop = ()=>console.log("noooop");
+const hasExpressionType = (completion)=>"expressionType" in completion;
+const injectOptionContent = (completion)=>{
+    if (!hasExpressionType(completion)) return null;
+    {
+        const div = createEl("div", "expression-type-container");
+        const span = createEl("span", "expression-type", completion.expressionType);
+        div.appendChild(span);
+        return div;
+    }
+};
+const useColumnExpressionEditor = ({ onChange, onSubmitExpression, source, suggestionProvider })=>{
+    const editorRef = useRef(null);
+    const onSubmitRef = useRef(noop);
+    const viewRef = useRef(void 0);
+    const completionFn = useColumnAutoComplete(suggestionProvider, onSubmitRef);
+    const [createState, clearInput, submit] = useMemo(()=>{
+        const parseExpression = ()=>{
+            const view = getView(viewRef);
+            const source = view.state.doc.toString();
+            const tree = ensureSyntaxTree(view.state, view.state.doc.length, 5000);
+            if (!tree) return [
+                "",
+                void 0
+            ];
+            {
+                const expression = walkTree(tree, source);
+                return [
+                    source,
+                    expression
+                ];
+            }
+        };
+        const clearInput = ()=>{
+            getView(viewRef).setState(createState());
+        };
+        const submitExpression = ()=>{
+            const [source, expression] = parseExpression();
+            onSubmitExpression?.(source, expression);
+        };
+        const showSuggestions = (key)=>keymap.of([
+                {
+                    key,
+                    run () {
+                        startCompletion(getView(viewRef));
+                        return true;
+                    }
+                }
+            ]);
+        const createState = ()=>EditorState.create({
+                doc: source,
+                extensions: [
+                    minimalSetup,
+                    autocompletion({
+                        addToOptions: [
+                            {
+                                render: injectOptionContent,
+                                position: 70
+                            }
+                        ],
+                        override: [
+                            completionFn
+                        ],
+                        optionClass: getOptionClass
+                    }),
+                    columnExpressionLanguageSupport(),
+                    keymap.of(defaultKeymap),
+                    showSuggestions("ArrowDown"),
+                    EditorView.updateListener.of((v)=>{
+                        const view = getView(viewRef);
+                        if (v.docChanged) {
+                            startCompletion(view);
+                            const source = view.state.doc.toString();
+                            onChange?.(source);
+                        }
+                    }),
+                    EditorState.transactionFilter.of((tr)=>tr.newDoc.lines > 1 ? [] : tr),
+                    vuuTheme,
+                    vuuHighlighting
+                ]
+            });
+        onSubmitRef.current = ()=>{
+            submitExpression();
+        };
+        return [
+            createState,
+            clearInput,
+            submitExpression
+        ];
+    }, [
+        completionFn,
+        onChange,
+        onSubmitExpression,
+        source
+    ]);
+    useEffect(()=>{
+        if (!editorRef.current) throw Error("editor not in dom");
+        viewRef.current = new EditorView({
+            state: createState(),
+            parent: editorRef.current
+        });
+        return ()=>{
+            viewRef.current?.destroy();
+        };
+    }, [
+        completionFn,
+        createState
+    ]);
+    const handleBlur = useCallback(()=>{
+        submit();
+    }, [
+        submit
+    ]);
+    return {
+        editorRef,
+        clearInput,
+        onBlur: handleBlur
+    };
+};
+export { useColumnExpressionEditor };

package/src/column-expression-input/useColumnExpressionSuggestionProvider.js

@@ -0,0 +1,211 @@
+import { AnnotationType, getRelationalOperators, numericOperators, stringOperators, toSuggestions } from "@vuu-ui/vuu-codemirror";
+import { getTypeaheadParams, useTypeaheadSuggestions } from "@vuu-ui/vuu-data-react";
+import { isNumericColumn, isTextColumn } from "@vuu-ui/vuu-utils";
+import { useCallback, useRef } from "react";
+import { columnFunctionDescriptors } from "./column-function-descriptors.js";
+import { functionDocInfo } from "./functionDocInfo.js";
+const NO_OPERATORS = [];
+const withApplySpace = (suggestions)=>suggestions.map((suggestion)=>({
+            ...suggestion,
+            apply: (suggestion.apply ?? suggestion.label) + " "
+        }));
+const getValidColumns = (columns, { functionName, operator })=>{
+    if (operator) return columns.filter(isNumericColumn);
+    if (functionName) {
+        const fn = columnFunctionDescriptors.find((f)=>f.name === functionName);
+        if (fn) switch(fn.accepts){
+            case "string":
+                return columns.filter(isTextColumn);
+            case "number":
+                return columns.filter(isNumericColumn);
+            default:
+                break;
+        }
+    }
+    return columns;
+};
+const getColumns = (columns, options)=>{
+    const validColumns = getValidColumns(columns, options);
+    return validColumns.map((column)=>{
+        const label = column.label ?? column.name;
+        return {
+            apply: options.prefix ? `${options.prefix}${column.name}` : column.name,
+            label,
+            boost: 5,
+            type: "column",
+            expressionType: column.serverDataType
+        };
+    });
+};
+const arithmeticOperators = [
+    {
+        apply: "* ",
+        boost: 2,
+        label: "*",
+        type: "operator"
+    },
+    {
+        apply: "/ ",
+        boost: 2,
+        label: "/",
+        type: "operator"
+    },
+    {
+        apply: "+ ",
+        boost: 2,
+        label: "+",
+        type: "operator"
+    },
+    {
+        apply: "- ",
+        boost: 2,
+        label: "-",
+        type: "operator"
+    }
+];
+const getOperators = (column)=>{
+    if (void 0 === column || isNumericColumn(column)) return arithmeticOperators;
+    return NO_OPERATORS;
+};
+const getConditionOperators = (column)=>{
+    switch(column.serverDataType){
+        case "string":
+        case "char":
+            return withApplySpace(stringOperators);
+        case "int":
+        case "long":
+        case "double":
+            return withApplySpace(numericOperators);
+    }
+};
+const toFunctionCompletion = (functionDescriptor)=>({
+        apply: `${functionDescriptor.name}( `,
+        boost: 2,
+        expressionType: functionDescriptor.type,
+        info: ()=>functionDocInfo(functionDescriptor),
+        label: functionDescriptor.name,
+        type: "function"
+    });
+const getAcceptedTypes = (fn)=>{
+    if (fn) {
+        if ("string" == typeof fn.accepts) return fn.accepts;
+        else if (Array.isArray(fn.accepts)) {
+            if (fn.accepts.every((s)=>"string" === s)) return "string";
+        }
+    }
+    return "any";
+};
+const functions = columnFunctionDescriptors.map(toFunctionCompletion);
+const getFunctions = ({ functionName })=>{
+    if (functionName) {
+        const fn = columnFunctionDescriptors.find((f)=>f.name === functionName);
+        const acceptedTypes = getAcceptedTypes(fn);
+        if (fn) switch(acceptedTypes){
+            case "string":
+                return columnFunctionDescriptors.filter((f)=>"string" === f.type || "variable" === f.type).map(toFunctionCompletion);
+            case "number":
+                return columnFunctionDescriptors.filter((f)=>"number" === f.type || "variable" === f.type).map(toFunctionCompletion);
+            default:
+        }
+    }
+    return functions;
+};
+const NONE = {};
+const useColumnExpressionSuggestionProvider = ({ columns, table })=>{
+    const findColumn = useCallback((name)=>name ? columns.find((col)=>col.name === name) : void 0, [
+        columns
+    ]);
+    const latestSuggestionsRef = useRef(void 0);
+    const getTypeaheadSuggestions = useTypeaheadSuggestions();
+    const getSuggestions = useCallback(async (suggestionType, options = NONE)=>{
+        const { columnName, functionName, operator, prefix } = options;
+        switch(suggestionType){
+            case "expression":
+                {
+                    const suggestions = await withApplySpace(getColumns(columns, {
+                        functionName,
+                        prefix
+                    })).concat(getFunctions(options));
+                    return latestSuggestionsRef.current = suggestions;
+                }
+            case "column":
+                {
+                    const suggestions = await getColumns(columns, options);
+                    return latestSuggestionsRef.current = withApplySpace(suggestions);
+                }
+            case "operator":
+                {
+                    const suggestions = await getOperators(findColumn(columnName));
+                    return latestSuggestionsRef.current = withApplySpace(suggestions);
+                }
+            case "relational-operator":
+                {
+                    const suggestions = await getRelationalOperators(findColumn(columnName));
+                    return latestSuggestionsRef.current = withApplySpace(suggestions);
+                }
+            case "condition-operator":
+                {
+                    const column = findColumn(columnName);
+                    if (column) {
+                        const suggestions = await getConditionOperators(column);
+                        if (suggestions) return latestSuggestionsRef.current = withApplySpace(suggestions);
+                    }
+                }
+                break;
+            case "columnValue":
+                if (columnName && operator) {
+                    const params = getTypeaheadParams(table, columnName);
+                    const suggestions = await getTypeaheadSuggestions(params);
+                    if (suggestions) {
+                        latestSuggestionsRef.current = toSuggestions(suggestions, {
+                            suffix: ""
+                        });
+                        latestSuggestionsRef.current.forEach((suggestion)=>{
+                            suggestion.apply = (view, completion, from)=>{
+                                const annotation = new AnnotationType();
+                                const cursorPos = from + completion.label.length + 1;
+                                view.dispatch({
+                                    changes: {
+                                        from,
+                                        insert: completion.label
+                                    },
+                                    selection: {
+                                        anchor: cursorPos,
+                                        head: cursorPos
+                                    },
+                                    annotations: annotation.of(completion)
+                                });
+                            };
+                        });
+                    }
+                    return latestSuggestionsRef.current || [];
+                }
+                break;
+        }
+        return [];
+    }, [
+        columns,
+        findColumn,
+        getTypeaheadSuggestions,
+        table
+    ]);
+    const isPartialMatch = useCallback(async (valueType, columnName, pattern)=>{
+        const { current: latestSuggestions } = latestSuggestionsRef;
+        let maybe = false;
+        const suggestions = latestSuggestions || await getSuggestions(valueType, {
+            columnName
+        });
+        if (pattern && suggestions) {
+            for (const option of suggestions)if (option.label === pattern) return false;
+            else if (option.label.startsWith(pattern)) maybe = true;
+        }
+        return maybe;
+    }, [
+        getSuggestions
+    ]);
+    return {
+        getSuggestions,
+        isPartialMatch
+    };
+};
+export { useColumnExpressionSuggestionProvider };