@mwater/visualization 5.0.0

package/lib/quickfilter/QuickfiltersComponent.js

@@ -0,0 +1,257 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const prop_types_1 = __importDefault(require("prop-types"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const react_select_1 = __importDefault(require("react-select"));
+const expressions_1 = require("@mwater/expressions");
+const expressions_2 = require("@mwater/expressions");
+const TextLiteralComponent_1 = __importDefault(require("./TextLiteralComponent"));
+const DateExprComponent_1 = __importDefault(require("./DateExprComponent"));
+const QuickfilterCompiler_1 = __importDefault(require("./QuickfilterCompiler"));
+const IdArrayQuickfilterComponent_1 = __importDefault(require("./IdArrayQuickfilterComponent"));
+/** Displays quick filters and allows their value to be modified */
+class QuickfiltersComponent extends react_1.default.Component {
+    renderQuickfilter(item, index) {
+        // Skip if merged
+        let onValueChange;
+        if (item.merged) {
+            return null;
+        }
+        let values = this.props.values || [];
+        let itemValue = values[index];
+        // Clean expression first
+        const expr = new expressions_2.ExprCleaner(this.props.schema).cleanExpr(item.expr);
+        // Do not render if nothing
+        if (!expr) {
+            return null;
+        }
+        // Get type of expr
+        const type = new expressions_1.ExprUtils(this.props.schema).getExprType(expr);
+        if (!type) {
+            return null;
+        }
+        // Determine if locked
+        const lock = lodash_1.default.find(this.props.locks || [], (lock) => lodash_1.default.isEqual(lock.expr, expr));
+        if (lock) {
+            // Overrides item value
+            itemValue = lock.value;
+            onValueChange = undefined;
+        }
+        else {
+            // Can change value if not locked
+            onValueChange = (v) => {
+                values = (this.props.values || []).slice();
+                values[index] = v;
+                // Also set any subsequent merged ones
+                for (let i = index + 1; i < this.props.design.length; i++) {
+                    if (this.props.design[i].merged) {
+                        values[i] = v;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                return this.props.onValuesChange(values);
+            };
+        }
+        // Determine additional filters that come from other quickfilters. This is to make sure that each quickfilter is filtered
+        // by any other active quickfilters (excluding self)
+        const compiler = new QuickfilterCompiler_1.default(this.props.schema);
+        const otherDesign = (this.props.design || []).slice();
+        const otherValues = (this.props.values || []).slice();
+        const otherLocks = (this.props.locks || []).slice();
+        otherDesign.splice(index, 1);
+        otherValues.splice(index, 1);
+        otherLocks.splice(index, 1);
+        const otherQuickfilterFilters = compiler.compile(otherDesign, otherValues, otherLocks);
+        const filters = (this.props.filters || []).concat(otherQuickfilterFilters);
+        if (["enum", "enumset"].includes(type)) {
+            return R(EnumQuickfilterComponent, {
+                key: JSON.stringify(item),
+                label: item.label,
+                schema: this.props.schema,
+                options: new expressions_1.ExprUtils(this.props.schema).getExprEnumValues(expr),
+                value: itemValue,
+                onValueChange,
+                multi: item.multi
+            });
+        }
+        if (type === "text") {
+            return R(TextQuickfilterComponent, {
+                key: JSON.stringify(item),
+                index,
+                label: item.label,
+                expr,
+                schema: this.props.schema,
+                quickfiltersDataSource: this.props.quickfiltersDataSource,
+                value: itemValue,
+                onValueChange,
+                filters,
+                multi: item.multi
+            });
+        }
+        if (["date", "datetime"].includes(type)) {
+            return R(DateQuickfilterComponent, {
+                key: JSON.stringify(item),
+                label: item.label,
+                expr,
+                schema: this.props.schema,
+                value: itemValue,
+                onValueChange
+            });
+        }
+        if (type === "id[]") {
+            return R(IdArrayQuickfilterComponent_1.default, {
+                key: JSON.stringify(item),
+                index,
+                label: item.label,
+                expr,
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                value: itemValue,
+                onValueChange,
+                filters,
+                multi: item.multi
+            });
+        }
+        if (type === "text[]") {
+            return R(TextArrayQuickfilterComponent, {
+                key: JSON.stringify(item),
+                index,
+                label: item.label,
+                expr,
+                schema: this.props.schema,
+                quickfiltersDataSource: this.props.quickfiltersDataSource,
+                value: itemValue,
+                onValueChange,
+                filters,
+                multi: item.multi
+            });
+        }
+        return null;
+    }
+    render() {
+        if (!this.props.design || this.props.design.length === 0) {
+            return null;
+        }
+        return R("div", {
+            style: {
+                borderTop: !this.props.hideTopBorder ? "solid 1px #E8E8E8" : undefined,
+                borderBottom: "solid 1px #E8E8E8",
+                padding: 5
+            }
+        }, lodash_1.default.map(this.props.design, (item, i) => this.renderQuickfilter(item, i)), this.props.onHide
+            ? R("button", { className: "btn btn-sm btn-link", onClick: this.props.onHide }, R("i", { className: "fa fa-angle-double-up" }))
+            : undefined);
+    }
+}
+exports.default = QuickfiltersComponent;
+/** Quickfilter for an enum */
+class EnumQuickfilterComponent extends react_1.default.Component {
+    static contextTypes = { locale: prop_types_1.default.string };
+    handleSingleChange = (val) => {
+        if (val) {
+            return this.props.onValueChange(val);
+        }
+        else {
+            return this.props.onValueChange(null);
+        }
+    };
+    handleMultiChange = (val) => {
+        if (val?.length > 0) {
+            return this.props.onValueChange(lodash_1.default.pluck(val, "value"));
+        }
+        else {
+            return this.props.onValueChange(null);
+        }
+    };
+    renderSingleSelect(options) {
+        return R(react_select_1.default, {
+            placeholder: "All",
+            value: lodash_1.default.findWhere(options, { value: this.props.value }) || null,
+            options,
+            isClearable: true,
+            onChange: (value) => {
+                if (this.props.onValueChange) {
+                    return this.handleSingleChange(value?.value);
+                }
+            },
+            isDisabled: this.props.onValueChange == null,
+            styles: {
+                // Keep menu above fixed data table headers
+                menu: (style) => lodash_1.default.extend({}, style, { zIndex: 2000 })
+            }
+        });
+    }
+    renderMultiSelect(options) {
+        return R(react_select_1.default, {
+            placeholder: "All",
+            value: lodash_1.default.map(this.props.value, (v) => lodash_1.default.find(options, (o) => o.value === v)),
+            isClearable: true,
+            isMulti: true,
+            options,
+            onChange: this.props.onValueChange ? this.handleMultiChange : undefined,
+            isDisabled: this.props.onValueChange == null,
+            styles: {
+                // Keep menu above fixed data table headers
+                menu: (style) => lodash_1.default.extend({}, style, { zIndex: 2000 })
+            }
+        });
+    }
+    render() {
+        const options = lodash_1.default.map(this.props.options, (opt) => ({
+            value: opt.id,
+            label: expressions_1.ExprUtils.localizeString(opt.name, this.context.locale)
+        }));
+        // Determine width, estimating about 8 px per letter with 120px padding
+        let width = lodash_1.default.max(options, (o) => o.label.length)?.label?.length;
+        width = width ? width * 8 + 120 : 280;
+        const minWidth = width > 280 || this.props.multi ? "280px" : `${width}px`;
+        return R("div", { style: { display: "inline-block", paddingRight: 10 } }, this.props.label ? R("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined, R("div", { style: { display: "inline-block", minWidth, verticalAlign: "middle" } }, this.props.multi ? this.renderMultiSelect(options) : this.renderSingleSelect(options)), !this.props.onValueChange ? R("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined);
+    }
+}
+// Quickfilter for a text value
+class TextQuickfilterComponent extends react_1.default.Component {
+    render() {
+        return R("div", { style: { display: "inline-block", paddingRight: 10 } }, this.props.label ? R("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined, R("div", { style: { display: "inline-block", minWidth: "280px", verticalAlign: "middle" } }, R(TextLiteralComponent_1.default, {
+            value: this.props.value,
+            onChange: this.props.onValueChange,
+            schema: this.props.schema,
+            expr: this.props.expr,
+            index: this.props.index,
+            multi: this.props.multi,
+            quickfiltersDataSource: this.props.quickfiltersDataSource,
+            filters: this.props.filters
+        })), !this.props.onValueChange ? R("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined);
+    }
+}
+// Quickfilter for a date value
+class DateQuickfilterComponent extends react_1.default.Component {
+    render() {
+        return R("div", { style: { display: "inline-block", paddingRight: 10 } }, this.props.label ? R("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined, R("div", { style: { display: "inline-block", minWidth: "280px", verticalAlign: "middle" } }, R(DateExprComponent_1.default, {
+            datetime: new expressions_1.ExprUtils(this.props.schema).getExprType(this.props.expr) === "datetime",
+            value: this.props.value,
+            onChange: this.props.onValueChange
+        })), !this.props.onValueChange ? R("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined);
+    }
+}
+/** Quickfilter for a text value */
+class TextArrayQuickfilterComponent extends react_1.default.Component {
+    render() {
+        return R("div", { style: { display: "inline-block", paddingRight: 10 } }, this.props.label ? R("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined, R("div", { style: { display: "inline-block", minWidth: "280px", verticalAlign: "middle" } }, R(TextLiteralComponent_1.default, {
+            value: this.props.value,
+            onChange: this.props.onValueChange,
+            schema: this.props.schema,
+            expr: this.props.expr,
+            index: this.props.index,
+            multi: this.props.multi,
+            quickfiltersDataSource: this.props.quickfiltersDataSource,
+            filters: this.props.filters
+        })), !this.props.onValueChange ? R("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined);
+    }
+}

package/lib/quickfilter/QuickfiltersDataSource.d.ts

@@ -0,0 +1,7 @@
+import { JsonQLFilter } from "../JsonQLFilter";
+import { Expr } from "@mwater/expressions";
+/** Data source that returns values for text-based and id-based quickfilters. Allows client-server model that supports sharing */
+export interface QuickfiltersDataSource {
+    /** Gets the values of the quickfilter at index */
+    getValues(index: number, expr: Expr, filters: JsonQLFilter[], offset: number | null, limit: number, callback: (error: any, values?: any[]) => void): void;
+}

package/lib/quickfilter/QuickfiltersDataSource.js

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

package/lib/quickfilter/QuickfiltersDesignComponent.d.ts

@@ -0,0 +1,46 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+import { Quickfilter } from "./Quickfilter";
+export interface QuickfiltersDesignComponentProps {
+    /** Design of quickfilters. See README.md */
+    design: Quickfilter[];
+    /** Called when design changes */
+    onDesignChange: (design: Quickfilter[]) => void;
+    schema: Schema;
+    dataSource: DataSource;
+    /** List of possible table ids to use */
+    tables: string[];
+}
+export default class QuickfiltersDesignComponent extends React.Component<QuickfiltersDesignComponentProps> {
+    handleDesignChange: (design: any) => void;
+    isMergeable(design: any, index: any): boolean;
+    renderQuickfilter: (item: any, index: any) => React.CElement<any, QuickfilterDesignComponent>;
+    handleAdd: () => void;
+    handleRemove: (index: any) => void;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}
+interface QuickfilterDesignComponentProps {
+    /** Design of a single quickfilters. See README.md */
+    design: Quickfilter;
+    onChange: (design: Quickfilter) => void;
+    onRemove: () => void;
+    /** True if can be merged */
+    mergeable?: boolean;
+    schema: Schema;
+    dataSource: DataSource;
+    tables: string[];
+}
+interface QuickfilterDesignComponentState {
+    table: any;
+}
+/** Single quickfilter design component */
+declare class QuickfilterDesignComponent extends React.Component<QuickfilterDesignComponentProps, QuickfilterDesignComponentState> {
+    constructor(props: any);
+    handleTableChange: (table: any) => void;
+    handleExprChange: (expr: any) => void;
+    handleLabelChange: (ev: any) => void;
+    handleMergedChange: (merged: any) => void;
+    handleMultiChange: (multi: any) => void;
+    render(): React.DetailedReactHTMLElement<{}, HTMLElement>;
+}
+export {};

package/lib/quickfilter/QuickfiltersDesignComponent.js

@@ -0,0 +1,176 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const update_object_1 = __importDefault(require("update-object"));
+const expressions_ui_1 = require("@mwater/expressions-ui");
+const expressions_1 = require("@mwater/expressions");
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const ListEditorComponent_1 = require("@mwater/react-library/lib/ListEditorComponent");
+// Displays quick filters and allows their value to be modified
+class QuickfiltersDesignComponent extends react_1.default.Component {
+    handleDesignChange = (design) => {
+        design = design.slice();
+        // Update merged, clearing if not mergeable
+        for (let index = 0, end = design.length, asc = 0 <= end; asc ? index < end : index > end; asc ? index++ : index--) {
+            if (design[index].merged && !this.isMergeable(design, index)) {
+                design[index] = lodash_1.default.extend({}, design[index], { merged: false });
+            }
+        }
+        return this.props.onDesignChange(design);
+    };
+    // Determine if quickfilter at index is mergeable with previous (same type, id table and enum values)
+    isMergeable(design, index) {
+        if (index === 0) {
+            return false;
+        }
+        const exprUtils = new expressions_1.ExprUtils(this.props.schema);
+        const type = exprUtils.getExprType(design[index].expr);
+        const prevType = exprUtils.getExprType(design[index - 1].expr);
+        const idTable = exprUtils.getExprIdTable(design[index].expr);
+        const prevIdTable = exprUtils.getExprIdTable(design[index - 1].expr);
+        const enumValues = exprUtils.getExprEnumValues(design[index].expr);
+        const prevEnumValues = exprUtils.getExprEnumValues(design[index - 1].expr);
+        const multi = design[index].multi || false;
+        const prevMulti = design[index - 1].multi || false;
+        if (multi !== prevMulti) {
+            return false;
+        }
+        if (!type || type !== prevType) {
+            return false;
+        }
+        if (idTable !== prevIdTable) {
+            return false;
+        }
+        if (enumValues && !lodash_1.default.isEqual(lodash_1.default.pluck(enumValues, "id"), lodash_1.default.pluck(prevEnumValues || [], "id"))) {
+            return false;
+        }
+        return true;
+    }
+    renderQuickfilter = (item, index) => {
+        return R(QuickfilterDesignComponent, {
+            key: index,
+            design: item,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            tables: this.props.tables,
+            mergeable: this.isMergeable(this.props.design, index),
+            onChange: (newItem) => {
+                const design = this.props.design.slice();
+                design[index] = newItem;
+                return this.handleDesignChange(design);
+            },
+            onRemove: this.handleRemove.bind(null, index)
+        });
+    };
+    handleAdd = () => {
+        // Add blank to end
+        const design = this.props.design.concat([{ expr: null }]);
+        return this.props.onDesignChange(design);
+    };
+    handleRemove = (index) => {
+        const design = this.props.design.slice();
+        design.splice(index, 1);
+        return this.props.onDesignChange(design);
+    };
+    render() {
+        return R("div", null, react_1.default.createElement(ListEditorComponent_1.ListEditorComponent, { items: this.props.design, onItemsChange: this.handleDesignChange, renderItem: this.renderQuickfilter, getReorderableKey: (item, index) => index }), this.props.tables.length > 0
+            ? R("button", { type: "button", className: "btn btn-sm btn-link", onClick: this.handleAdd }, R("span", { className: "fas fa-plus" }), " Add Quick Filter")
+            : undefined);
+    }
+}
+exports.default = QuickfiltersDesignComponent;
+/** Single quickfilter design component */
+class QuickfilterDesignComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        // Store table to allow selecting table first, then expression
+        this.state = {
+            table: props.design.expr?.table || props.tables[0]
+        };
+    }
+    handleTableChange = (table) => {
+        this.setState({ table });
+        const design = {
+            expr: null
+        };
+        return this.props.onChange(design);
+    };
+    handleExprChange = (expr) => {
+        return this.props.onChange((0, update_object_1.default)(this.props.design, { expr: { $set: expr } }));
+    };
+    handleLabelChange = (ev) => {
+        return this.props.onChange((0, update_object_1.default)(this.props.design, { label: { $set: ev.target.value } }));
+    };
+    handleMergedChange = (merged) => {
+        return this.props.onChange((0, update_object_1.default)(this.props.design, { merged: { $set: merged } }));
+    };
+    handleMultiChange = (multi) => {
+        return this.props.onChange((0, update_object_1.default)(this.props.design, { multi: { $set: multi } }));
+    };
+    render() {
+        // Determine type of expression
+        const exprType = new expressions_1.ExprUtils(this.props.schema).getExprType(this.props.design.expr);
+        return R("div", {}, R("div", { className: "mb-3 mt-1", key: "table" }, R("label", { className: "text-muted" }, "Data Source"), R(ui.Select, {
+            value: this.state.table,
+            options: lodash_1.default.map(this.props.tables, (table) => ({
+                value: table,
+                label: expressions_1.ExprUtils.localizeString(this.props.schema.getTable(table).name)
+            })),
+            onChange: this.handleTableChange,
+            nullLabel: "Select..."
+        })), R("div", { className: "mb-3", key: "expr" }, R("label", { className: "text-muted" }, "Filter By"), R("div", null, R(expressions_ui_1.ExprComponent, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            table: this.state.table,
+            value: this.props.design.expr,
+            onChange: this.handleExprChange,
+            types: ["enum", "text", "enumset", "date", "datetime", "id[]", "text[]"]
+        }))), this.props.design.expr
+            ? R("div", { className: "mb-3", key: "label" }, R("label", { className: "text-muted" }, "Label"), R("input", {
+                type: "text",
+                className: "form-control form-control-sm",
+                value: this.props.design.label || "",
+                onChange: this.handleLabelChange,
+                placeholder: "Optional Label"
+            }))
+            : undefined, this.props.mergeable
+            ? R(ui.Checkbox, {
+                value: this.props.design.merged,
+                onChange: this.handleMergedChange
+            }, "Merge with previous quickfilter ", R("span", { className: "text-muted" }, "- displays as one single control that filters both"))
+            : undefined, ["enum", "text", "enumset", "id[]", "text[]"].includes(exprType)
+            ? R(ui.Checkbox, {
+                value: this.props.design.multi,
+                onChange: this.handleMultiChange
+            }, "Allow multiple selections")
+            : undefined);
+    }
+}

package/lib/quickfilter/README.md

@@ -0,0 +1,8 @@
+# Quickfilters
+
+See Quickfilter.d.ts
+
+values are:
+For text and enum and enumset, a plain string, unless multi is true, then array
+For date and datetime, { op: some op, exprs: array of exprs. The date will be added as first expr when compiled and `table` will be set }
+For id[], primary key or array of primary keys if multi