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

package/src/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js

@@ -0,0 +1,381 @@
+class LiteralExpressionImpl {
+    type;
+    value;
+    constructor(value){
+        this.value = value;
+        switch(typeof value){
+            case "boolean":
+                this.type = "booleanLiteralExpression";
+                break;
+            case "number":
+                this.type = "numericLiteralExpression";
+                break;
+            default:
+                this.type = "stringLiteralExpression";
+        }
+    }
+    toJSON() {
+        return {
+            type: this.type,
+            value: this.value
+        };
+    }
+}
+class ColumnExpressionImpl {
+    type = "colExpression";
+    column;
+    constructor(columnName){
+        this.column = columnName;
+    }
+    toJSON() {
+        return {
+            type: this.type,
+            column: this.column
+        };
+    }
+}
+class ArithmeticExpressionImpl {
+    #expressions = [
+        {
+            type: "unknown"
+        },
+        {
+            type: "unknown"
+        }
+    ];
+    #op;
+    type = "arithmeticExpression";
+    constructor(op = "unknown"){
+        this.#op = op;
+    }
+    get op() {
+        return this.#op;
+    }
+    set op(op) {
+        this.#op = op;
+    }
+    get expressions() {
+        return this.#expressions;
+    }
+    toJSON() {
+        return {
+            type: this.type,
+            op: this.#op,
+            expressions: this.#expressions
+        };
+    }
+}
+class CallExpressionImpl {
+    #expressions = [];
+    functionName;
+    type = "callExpression";
+    constructor(functionName){
+        this.functionName = functionName;
+    }
+    get expressions() {
+        return this.#expressions;
+    }
+    get arguments() {
+        return this.#expressions;
+    }
+    toJSON() {
+        return {
+            type: this.type,
+            functionName: this.functionName,
+            arguments: this.#expressions.map((e)=>e.toJSON?.())
+        };
+    }
+}
+class RelationalExpressionImpl {
+    #expressions = [
+        {
+            type: "unknown"
+        },
+        {
+            type: "unknown"
+        }
+    ];
+    #op = "unknown";
+    type = "relationalExpression";
+    get op() {
+        return this.#op;
+    }
+    set op(op) {
+        this.#op = op;
+    }
+    get expressions() {
+        return this.#expressions;
+    }
+    toJSON() {
+        return {
+            type: this.type,
+            op: this.#op,
+            expressions: this.#expressions
+        };
+    }
+}
+class BooleanConditionImp {
+    #expressions = [
+        {
+            type: "unknown"
+        },
+        {
+            type: "unknown"
+        }
+    ];
+    #op;
+    type = "booleanCondition";
+    constructor(booleanOperator){
+        this.#op = booleanOperator;
+    }
+    get op() {
+        return this.#op;
+    }
+    get expressions() {
+        return this.#expressions;
+    }
+    toJSON() {
+        return {
+            type: this.type,
+            op: this.#op,
+            expressions: this.#expressions.map((e)=>e.toJSON?.())
+        };
+    }
+}
+class ConditionalExpressionImpl {
+    #expressions;
+    type = "conditionalExpression";
+    constructor(booleanOperator){
+        this.#expressions = [
+            booleanOperator ? new BooleanConditionImp(booleanOperator) : new RelationalExpressionImpl(),
+            {
+                type: "unknown"
+            },
+            {
+                type: "unknown"
+            }
+        ];
+    }
+    get expressions() {
+        return this.#expressions;
+    }
+    get condition() {
+        return this.#expressions[0];
+    }
+    get truthyExpression() {
+        return this.#expressions[1];
+    }
+    set truthyExpression(expression) {
+        this.#expressions[1] = expression;
+    }
+    get falsyExpression() {
+        return this.#expressions[2];
+    }
+    set falsyExpression(expression) {
+        this.#expressions[2] = expression;
+    }
+    toJSON() {
+        return {
+            type: this.type,
+            condition: this.condition.toJSON?.(),
+            truthyExpression: this.truthyExpression,
+            falsyExpression: this.falsyExpression?.toJSON?.() ?? this.falsyExpression
+        };
+    }
+}
+const isUnknown = (e)=>"unknown" === e.type;
+const isArithmeticExpression = (expression)=>"arithmeticExpression" === expression.type;
+const isCallExpression = (expression)=>"callExpression" === expression.type;
+const isConditionalExpression = (expression)=>"conditionalExpression" === expression.type;
+const isCondition = (expression)=>"relationalExpression" === expression.type || "booleanCondition" === expression.type;
+const booleanConditionIsIncomplete = (condition)=>condition.expressions.length < 2 || condition.expressions.some((e)=>conditionIsIncomplete(e));
+const isBooleanCondition = (expression)=>"booleanCondition" === expression.type;
+const isRelationalExpression = (expression)=>expression?.type === "relationalExpression";
+const conditionIsIncomplete = (condition)=>isBooleanCondition(condition) && booleanConditionIsIncomplete(condition) || isRelationalExpression(condition) && condition.expressions.length < 2;
+const firstIncompleteExpression = (expression)=>{
+    if (isUnknown(expression)) return expression;
+    if (isRelationalExpression(expression)) {
+        const [operand1, operand2] = expression.expressions;
+        if (expressionIsIncomplete(operand1)) return firstIncompleteExpression(operand1);
+        if ("unknown" === expression.op) return expression;
+        if (expressionIsIncomplete(operand2)) return firstIncompleteExpression(operand2);
+    } else if (isCondition(expression)) {
+        const { expressions = [] } = expression;
+        for (const e of expressions)if (expressionIsIncomplete(e)) return firstIncompleteExpression(e);
+    } else if (isConditionalExpression(expression)) {
+        const { condition, truthyExpression, falsyExpression } = expression;
+        if (expressionIsIncomplete(condition)) return firstIncompleteExpression(condition);
+        if (expressionIsIncomplete(truthyExpression)) return firstIncompleteExpression(truthyExpression);
+        if (expressionIsIncomplete(falsyExpression)) return firstIncompleteExpression(falsyExpression);
+    } else if (isArithmeticExpression(expression)) {
+        const { expressions = [] } = expression;
+        for (const e of expressions)if (expressionIsIncomplete(e)) return firstIncompleteExpression(e);
+    }
+};
+const replaceUnknownExpression = (incompleteExpression, unknownExpression, expression)=>{
+    const { expressions = [] } = incompleteExpression;
+    if (expressions.includes(unknownExpression)) {
+        const pos = expressions.indexOf(unknownExpression);
+        expressions.splice(pos, 1, expression);
+        return true;
+    }
+    for (const e of expressions)if (replaceUnknownExpression(e, unknownExpression, expression)) return true;
+    return false;
+};
+const expressionIsIncomplete = (expression)=>{
+    if (isUnknown(expression)) return true;
+    if (isConditionalExpression(expression)) return expressionIsIncomplete(expression.condition) || expressionIsIncomplete(expression.truthyExpression) || expressionIsIncomplete(expression.falsyExpression);
+    if (isRelationalExpression(expression) || isBooleanCondition(expression)) return void 0 === expression.op || expression.expressions.some((e)=>expressionIsIncomplete(e));
+    return false;
+};
+const addExpression = (expression, subExpression)=>{
+    const targetExpression = firstIncompleteExpression(expression);
+    if (targetExpression) if (targetExpression.expressions) targetExpression.expressions.push(subExpression);
+    else console.warn("don't know how to treat targetExpression");
+    else console.error("no target expression found");
+};
+class ColumnExpression {
+    #expression;
+    #callStack = [];
+    setCondition(booleanOperator) {
+        if (void 0 === this.#expression) this.addExpression(new ConditionalExpressionImpl(booleanOperator));
+        else if (isConditionalExpression(this.#expression)) {
+            if (expressionIsIncomplete(this.#expression.condition)) {
+                const condition = booleanOperator ? new BooleanConditionImp(booleanOperator) : new RelationalExpressionImpl();
+                this.addExpression(condition);
+            } else if (isUnknown(this.#expression.truthyExpression)) this.#expression.truthyExpression = new ConditionalExpressionImpl(booleanOperator);
+            else if (expressionIsIncomplete(this.#expression.truthyExpression)) {
+                const condition = booleanOperator ? new BooleanConditionImp(booleanOperator) : new RelationalExpressionImpl();
+                this.addExpression(condition);
+            } else if (isUnknown(this.#expression.falsyExpression)) this.#expression.falsyExpression = new ConditionalExpressionImpl(booleanOperator);
+            else if (expressionIsIncomplete(this.#expression.falsyExpression)) {
+                const condition = booleanOperator ? new BooleanConditionImp(booleanOperator) : new RelationalExpressionImpl();
+                this.addExpression(condition);
+            }
+        } else console.error("setCondition called unexpectedly");
+    }
+    addExpression(expression) {
+        if (this.#callStack.length > 0) {
+            const currentCallExpression = this.#callStack.at(-1);
+            currentCallExpression?.arguments.push(expression);
+        } else if (void 0 === this.#expression) this.#expression = expression;
+        else if (isArithmeticExpression(this.#expression)) {
+            const targetExpression = firstIncompleteExpression(this.#expression);
+            if (targetExpression && isUnknown(targetExpression)) replaceUnknownExpression(this.#expression, targetExpression, expression);
+        } else if (isConditionalExpression(this.#expression)) {
+            if (expressionIsIncomplete(this.#expression)) {
+                const targetExpression = firstIncompleteExpression(this.#expression);
+                if (targetExpression && isUnknown(targetExpression)) replaceUnknownExpression(this.#expression, targetExpression, expression);
+                else if (targetExpression) addExpression(targetExpression, expression);
+            }
+        }
+    }
+    setFunction(functionName) {
+        const callExpression = new CallExpressionImpl(functionName);
+        this.addExpression(callExpression);
+        this.#callStack.push(callExpression);
+    }
+    setColumn(columnName) {
+        this.addExpression(new ColumnExpressionImpl(columnName));
+    }
+    setArithmeticOp(value) {
+        const op = value;
+        const expression = this.#expression;
+        if (isArithmeticExpression(expression)) expression.op = op;
+    }
+    setRelationalOperator(value) {
+        const op = value;
+        if (this.#expression && isConditionalExpression(this.#expression)) {
+            const targetExpression = firstIncompleteExpression(this.#expression);
+            if (isRelationalExpression(targetExpression)) targetExpression.op = op;
+            else console.error(`no target expression found (op = ${value})`);
+        }
+    }
+    setValue(value) {
+        const literalExpression = new LiteralExpressionImpl(value);
+        if (void 0 === this.#expression) this.#expression = literalExpression;
+        else if (isArithmeticExpression(this.#expression)) this.addExpression(literalExpression);
+        else if (isCallExpression(this.#expression)) this.#expression.arguments.push(literalExpression);
+        else if (isConditionalExpression(this.#expression)) if (expressionIsIncomplete(this.#expression)) {
+            const targetExpression = firstIncompleteExpression(this.#expression);
+            if (targetExpression && isUnknown(targetExpression)) replaceUnknownExpression(this.#expression, targetExpression, literalExpression);
+            else if (targetExpression) addExpression(targetExpression, literalExpression);
+        } else console.log("what do we do with value, in a complete expression");
+    }
+    closeBrace() {
+        this.#callStack.pop();
+    }
+    get expression() {
+        return this.#expression;
+    }
+    toJSON() {
+        return this.#expression?.toJSON();
+    }
+}
+const walkTree = (tree, source)=>{
+    const columnExpression = new ColumnExpression();
+    const cursor = tree.cursor();
+    do {
+        const { name, from, to } = cursor;
+        switch(name){
+            case "AndCondition":
+                columnExpression.setCondition("and");
+                break;
+            case "OrCondition":
+                columnExpression.setCondition("or");
+                break;
+            case "RelationalExpression":
+                columnExpression.setCondition();
+                break;
+            case "ArithmeticExpression":
+                columnExpression.addExpression(new ArithmeticExpressionImpl());
+                break;
+            case "Column":
+                {
+                    const columnName = source.substring(from, to);
+                    columnExpression.setColumn(columnName);
+                }
+                break;
+            case "Function":
+                {
+                    const functionName = source.substring(from, to);
+                    columnExpression.setFunction(functionName);
+                }
+                break;
+            case "Times":
+            case "Divide":
+            case "Plus":
+            case "Minus":
+                {
+                    const op = source.substring(from, to);
+                    columnExpression.setArithmeticOp(op);
+                }
+                break;
+            case "RelationalOperator":
+                {
+                    const op = source.substring(from, to);
+                    columnExpression.setRelationalOperator(op);
+                }
+                break;
+            case "False":
+            case "True":
+                {
+                    const value = source.substring(from, to);
+                    columnExpression.setValue("true" === value);
+                }
+                break;
+            case "String":
+                columnExpression.setValue(source.substring(from + 1, to - 1));
+                break;
+            case "Number":
+                columnExpression.setValue(parseFloat(source.substring(from, to)));
+                break;
+            case "CloseBrace":
+                columnExpression.closeBrace();
+                break;
+            default:
+        }
+    }while (cursor.next())
+    return columnExpression.toJSON();
+};
+export { walkTree };

package/src/column-expression-input/column-language-parser/column-expression-parse-utils.js

@@ -0,0 +1,56 @@
+import { parser } from "./generated/column-parser.js";
+const strictParser = parser.configure({
+    strict: true
+});
+const RelationalOperands = [
+    "Number",
+    "String"
+];
+const ColumnNamedTerms = [
+    ...RelationalOperands,
+    "AndCondition",
+    "ArithmeticExpression",
+    "BooleanOperator",
+    "RelationalOperatorOperator",
+    "CallExpression",
+    "CloseBrace",
+    "Column",
+    "Comma",
+    "ConditionalExpression",
+    "Divide",
+    "Equal",
+    "If",
+    "Minus",
+    "OpenBrace",
+    "OrCondition",
+    "ParenthesizedExpression",
+    "Plus",
+    "RelationalExpression",
+    "RelationalOperator",
+    "Times"
+];
+const isCompleteExpression = (src)=>{
+    try {
+        strictParser.parse(src);
+        return true;
+    } catch (err) {
+        return false;
+    }
+};
+const lastNamedChild = (node)=>{
+    let { lastChild } = node;
+    while(lastChild && !ColumnNamedTerms.includes(lastChild.name)){
+        lastChild = lastChild.prevSibling;
+        console.log(lastChild?.name);
+    }
+    return lastChild;
+};
+const isCompleteRelationalExpression = (node)=>{
+    if (node?.name === "RelationalExpression") {
+        const { firstChild } = node;
+        const lastChild = lastNamedChild(node);
+        if (firstChild?.name === "Column" && "string" == typeof lastChild?.name && RelationalOperands.includes(lastChild.name)) return true;
+    }
+    return false;
+};
+export { ColumnNamedTerms, isCompleteExpression, isCompleteRelationalExpression, lastNamedChild };

package/src/column-expression-input/column-language-parser/index.js

@@ -0,0 +1,3 @@
+export * from "./ColumnExpressionLanguage.js";
+export * from "./ColumnExpressionTreeWalker.js";
+export * from "./column-expression-parse-utils.js";

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

@@ -0,0 +1,24 @@
+import { createEl } from "@vuu-ui/vuu-utils";
+const functionDocInfo = ({ name, description, example, params, type })=>{
+    const rootElement = createEl("div", "vuuFunctionDoc");
+    const headingElement = createEl("div", "function-heading");
+    const nameElement = createEl("span", "function-name", name);
+    const paramElement = createEl("span", "param-list", params.description);
+    const typeElement = createEl("span", "function-type", type);
+    headingElement.appendChild(nameElement);
+    headingElement.appendChild(paramElement);
+    headingElement.appendChild(typeElement);
+    const child2 = createEl("p", void 0, description);
+    rootElement.appendChild(headingElement);
+    rootElement.appendChild(child2);
+    if (example) {
+        const exampleElement = createEl("div", "example-container");
+        const expressionElement = createEl("div", "example-expression", example.expression);
+        const resultElement = createEl("div", "example-result", example.result);
+        exampleElement.appendChild(expressionElement);
+        rootElement.appendChild(exampleElement);
+        rootElement.appendChild(resultElement);
+    }
+    return rootElement;
+};
+export { functionDocInfo };

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

@@ -0,0 +1,18 @@
+import { HighlightStyle, syntaxHighlighting, tags } from "@vuu-ui/vuu-codemirror";
+const myHighlightStyle = HighlightStyle.define([
+    {
+        tag: tags.attributeValue,
+        color: "var(--vuuFilterEditor-variableColor);font-weight: bold"
+    },
+    {
+        tag: tags.variableName,
+        color: "var(--vuuFilterEditor-variableColor)"
+    },
+    {
+        tag: tags.comment,
+        color: "green",
+        fontStyle: "italic"
+    }
+]);
+const vuuHighlighting = syntaxHighlighting(myHighlightStyle);
+export { vuuHighlighting };

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

@@ -0,0 +1,4 @@
+export * from "./ColumnExpressionInput.js";
+export * from "./column-language-parser/index.js";
+export * from "./useColumnExpressionEditor.js";
+export * from "./useColumnExpressionSuggestionProvider.js";

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

@@ -0,0 +1,57 @@
+import { EditorView } from "@vuu-ui/vuu-codemirror";
+const vuuTheme = EditorView.theme({
+    "&": {
+        border: "solid 1px var(--salt-container-primary-borderColor)",
+        color: "var(--vuuFilterEditor-color)",
+        backgroundColor: "var(--vuuFilterEditor-background)"
+    },
+    ".cm-content": {
+        caretColor: "var(--vuuFilterEditor-cursorColor)"
+    },
+    "&.cm-focused .cm-cursor": {
+        borderLeftColor: "var(--vuuFilterEditor-cursorColor)"
+    },
+    "&.cm-focused .cm-selectionBackground, ::selection": {
+        backgroundColor: "var(--vuuFilterEditor-selectionBackground)"
+    },
+    ".cm-selectionBackground, ::selection": {
+        backgroundColor: "var(--vuuFilterEditor-selectionBackground)"
+    },
+    ".cm-scroller": {
+        fontFamily: "var(--vuuFilterEditor-fontFamily)"
+    },
+    ".cm-completionLabel": {
+        color: "var(--vuu-color-gray-50)"
+    },
+    ".cm-completionMatchedText": {
+        color: "var(--vuu-color-gray-80)",
+        fontWeight: 700,
+        textDecoration: "none"
+    },
+    ".cm-tooltip": {
+        background: "var(--vuuFilterEditor-tooltipBackground)",
+        border: "var(--vuuFilterEditor-tooltipBorder)",
+        borderRadius: "4px",
+        boxShadow: "var(--vuuFilterEditor-tooltipElevation)",
+        "&.cm-tooltip-autocomplete > ul": {
+            fontFamily: "var(--vuuFilterEditor-fontFamily)",
+            fontSize: "var(--vuuFilterEditor-fontSize)",
+            maxHeight: "240px"
+        },
+        "&.cm-tooltip-autocomplete > ul > li": {
+            height: "var(--vuuFilterEditor-suggestion-height)",
+            padding: "0 3px",
+            lineHeight: "var(--vuuFilterEditor-suggestion-height)"
+        },
+        "&.cm-tooltip-autocomplete li[aria-selected]": {
+            background: "var(--vuuFilterEditor-suggestion-selectedBackground)",
+            color: "var(--vuuFilterEditor-suggestion-selectedColor)"
+        },
+        "&.cm-tooltip-autocomplete li .cm-completionDetail": {
+            color: "var(--vuuFilterEditor-suggestion-detailColor)"
+        }
+    }
+}, {
+    dark: false
+});
+export { vuuTheme };