@mwater/visualization 5.0.0

package/lib/dashboards/WidgetComponent.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import { Schema, DataSource } from "@mwater/expressions";
+import { JsonQLFilter } from "../JsonQLFilter";
+import { WidgetScope } from "../WidgetScope";
+import DashboardDataSource from "./DashboardDataSource";
+/**
+ * Component which renders a widget and ensures that props do not change
+ * unnecessarily.
+ */
+export declare function WidgetComponent(props: {
+    /** Widget id */
+    id: string;
+    /** Widget type */
+    type: string;
+    /** Widget design */
+    design: any;
+    /** Called with new widget design. null/undefined for readonly **/
+    onDesignChange?: {
+        (design: object): void;
+    } | null;
+    /** Data source for dashboard */
+    dashboardDataSource: DashboardDataSource;
+    /** schema to use **/
+    schema: Schema;
+    /** data source to use. Only used when designing, for display uses widgetDataSource **/
+    dataSource: DataSource;
+    /** scope of the widget (when the widget self-selects a particular scope) **/
+    scope?: WidgetScope | null;
+    /** array of filters to apply.**/
+    filters: JsonQLFilter[];
+    /** called with scope of widget **/
+    onScopeChange: (scope: WidgetScope | null) => void;
+    /** width in pixels on screen **/
+    width?: number;
+    /** height in pixels on screen **/
+    height?: number;
+    /** optional table name of table that will be filtered to have a single row present. Widget designer should optionally account for this **/
+    singleRowTable?: string;
+    /** Called with (tableId, rowId) when item is clicked **/
+    onRowClick?: (tableId: string, rowId: any) => void;
+    /** Optional lookup of string name to value. Used for {{branding}} and other replacement strings in text widget */
+    namedStrings?: {
+        [key: string]: string;
+    };
+    /** Entries in the table of content */
+    tocEntries?: string[];
+    /** the widget callback ref */
+    widgetRef: (widget: any) => void;
+    /** called with (widgetId, tocEntryId) to scroll to TOC entry */
+    onScrollToTOCEntry?: (widgetId: string, tocEntryId: string) => void;
+    /** Change to force a refresh */
+    refreshKey?: any;
+}): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/lib/dashboards/WidgetComponent.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetComponent = void 0;
+const react_1 = require("react");
+const WidgetFactory_1 = __importDefault(require("../widgets/WidgetFactory"));
+/**
+ * Component which renders a widget and ensures that props do not change
+ * unnecessarily.
+ */
+function WidgetComponent(props) {
+    // Get and stabilize widget data source
+    // TODO!!! There is a global problem with DashboardDataSources being re-created on each render.
+    // TODO!!! This now only uses the type of the dashboard data source. They should be more stable in the future.
+    const widgetDataSource = (0, react_1.useMemo)(() => props.dashboardDataSource.getWidgetDataSource(props.type, props.id), [props.dashboardDataSource.constructor, props.type, props.id, props.schema, props.dataSource, props.refreshKey]);
+    const widget = WidgetFactory_1.default.createWidget(props.type);
+    // Stabilize functions
+    const onDesignChange = useStabilizeFunction(props.onDesignChange);
+    const onRowClick = useStabilizeFunction(props.onRowClick) || undefined;
+    const onScopeChange = useStabilizeFunction(props.onScopeChange);
+    const widgetRef = useStabilizeFunction(props.widgetRef);
+    // Stabilize values
+    const filters = useStabilizeValue(props.filters);
+    const scope = useStabilizeValue(props.scope);
+    return widget.createViewElement({
+        schema: props.schema,
+        dataSource: props.dataSource,
+        widgetDataSource,
+        design: props.design,
+        scope,
+        filters,
+        onScopeChange,
+        onDesignChange,
+        width: props.width,
+        height: props.height,
+        singleRowTable: props.singleRowTable,
+        onRowClick,
+        namedStrings: props.namedStrings,
+        tocEntries: props.tocEntries,
+        onScrollToTOCEntry: props.onScrollToTOCEntry,
+        widgetRef
+    });
+}
+exports.WidgetComponent = WidgetComponent;
+/** Always returns the same function to prevent unnecessary re-rendering. Forwards to the real function */
+function useStabilizeFunction(func) {
+    // Create ref for changing func
+    const variableRef = (0, react_1.useRef)();
+    variableRef.current = func;
+    // Create stable function to always use as callback
+    function stableCallback(...args) {
+        return variableRef.current.apply(null, args);
+    }
+    const stableRef = (0, react_1.useRef)(stableCallback);
+    return func ? stableRef.current : undefined;
+}
+/** Always returns the same value of stringifies the same to prevent unnecessary re-rendering */
+function useStabilizeValue(value) {
+    const stableRef = (0, react_1.useRef)(value);
+    if (JSON.stringify(value) != JSON.stringify(stableRef.current)) {
+        stableRef.current = value;
+    }
+    return stableRef.current;
+}

package/lib/dashboards/layoutOptions.d.ts

@@ -0,0 +1,19 @@
+import { DashboardDesign } from "./DashboardDesign";
+export type DashboardTheme = "default" | "greybg" | "story";
+/** Width buckets for dashboards */
+export type WidthBucket = "sm" | "md" | "lg" | "xl";
+export interface BlocksLayoutOptions {
+    /** Width at which to collapse columns. Null to not collapse */
+    collapseColumnsWidth: number | null;
+    /** Width below which scales or scrolls */
+    minimumWidth: number | null;
+    /** What to do when below minimum width */
+    belowMinimumWidth: "scale" | "scroll";
+    /** Width above which pads */
+    maximumWidth: number | null;
+    /** Width at which to hide quickfilters. Null for never */
+    hideQuickfiltersWidth: number | null;
+}
+/** Get default layout options for a theme */
+export declare function getDefaultLayoutOptions(theme?: DashboardTheme | undefined): BlocksLayoutOptions;
+export declare function getLayoutOptions(design: DashboardDesign): BlocksLayoutOptions;

package/lib/dashboards/layoutOptions.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLayoutOptions = exports.getDefaultLayoutOptions = void 0;
+/** Get default layout options for a theme */
+function getDefaultLayoutOptions(theme) {
+    theme = theme || "default";
+    return {
+        collapseColumnsWidth: 600,
+        minimumWidth: theme == "story" ? 400 : 600,
+        belowMinimumWidth: "scale",
+        maximumWidth: theme == "story" ? 1000 : 1600,
+        hideQuickfiltersWidth: 600
+    };
+}
+exports.getDefaultLayoutOptions = getDefaultLayoutOptions;
+function getLayoutOptions(design) {
+    return design.layoutOptions || getDefaultLayoutOptions(design.style);
+}
+exports.getLayoutOptions = getLayoutOptions;

package/lib/datagrids/DatagridComponent.d.ts

@@ -0,0 +1,122 @@
+import React, { ReactNode } from "react";
+import { DataSource, Expr, Schema } from "@mwater/expressions";
+import DatagridViewComponent, { RowUpdate } from "./DatagridViewComponent";
+import FindReplaceModalComponent from "./FindReplaceModalComponent";
+import DatagridDataSource from "./DatagridDataSource";
+import { DatagridDesign, JsonQLFilter } from "..";
+export interface DatagridComponentProps {
+    /** schema to use */
+    schema: Schema;
+    /** dataSource to use */
+    dataSource: DataSource;
+    /** datagrid dataSource to use */
+    datagridDataSource: DatagridDataSource;
+    design: DatagridDesign;
+    /** Called when design changes */
+    onDesignChange?: (design: DatagridDesign) => void;
+    /** Extra element to include in title at left */
+    titleElem?: ReactNode;
+    /** Extra elements to add to right */
+    extraTitleButtonsElem?: ReactNode;
+    /** Check if a value is editable by testing if underlying expression is editable */
+    canEditExpr?: (tableId: string, rowId: any, expr: Expr) => Promise<boolean>;
+    /** Update cell values by updating set of expressions and values */
+    updateExprValues?: (tableId: string, rowUpdates: RowUpdate[]) => Promise<void>;
+    /** Called when row is clicked with (tableId, rowId) */
+    onRowClick?: (tableId: string, rowId: any) => void;
+    /** Called when row is double-clicked with (tableId, rowId) */
+    onRowDoubleClick?: (tableId: string, rowId: any) => void;
+    /** Locked quickfilter values. See README in quickfilters */
+    quickfilterLocks?: any[];
+    filters?: JsonQLFilter[];
+}
+export default class DatagridComponent extends React.Component<DatagridComponentProps, {
+    /** is design being edited */
+    editingDesign: boolean;
+    /** True if cells can be edited directly */
+    cellEditingEnabled: boolean;
+    /** Height of quickfilters */
+    quickfiltersHeight: number | null;
+    quickfiltersValues: null | any[];
+}> {
+    datagridView?: DatagridViewComponent | null;
+    quickfilters?: HTMLElement | null;
+    findReplaceModal: FindReplaceModalComponent | null;
+    constructor(props: DatagridComponentProps);
+    reload(): void | undefined;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    updateHeight(): void;
+    getQuickfilterValues: () => any[];
+    getQuickfilterFilters: () => JsonQLFilter[];
+    handleCellEditingToggle: () => void;
+    handleEdit: () => void;
+    getCompiledFilters(): JsonQLFilter[];
+    renderCellEdit(): React.DetailedReactHTMLElement<{
+        key: string;
+        className: string;
+        onClick: () => void;
+    }, HTMLElement> | null;
+    renderEditButton(): React.DetailedReactHTMLElement<{
+        type: string;
+        className: string;
+        onClick: () => void;
+    }, HTMLElement> | null;
+    renderFindReplace(): React.DetailedReactHTMLElement<{
+        key: string;
+        className: string;
+        onClick: () => void;
+    }, HTMLElement> | null;
+    renderTitleBar(): React.DetailedReactHTMLElement<{
+        style: {
+            position: "absolute";
+            top: number;
+            left: number;
+            right: number;
+            height: number;
+            padding: number;
+        };
+    }, HTMLElement>;
+    renderQuickfilter(): React.DetailedReactHTMLElement<{
+        style: {
+            position: "absolute";
+            top: number;
+            left: number;
+            right: number;
+        };
+        ref: (c: HTMLElement | null) => void;
+    }, HTMLElement>;
+    renderEditor(): React.CElement<DatagridEditorComponentProps, DatagridEditorComponent> | undefined;
+    renderFindReplaceModal(filters: any): React.CElement<any, FindReplaceModalComponent>;
+    render(): React.DetailedReactHTMLElement<{
+        style: {
+            width: string;
+            height: string;
+            position: "relative";
+            paddingTop: number;
+        };
+    }, HTMLElement>;
+}
+interface DatagridEditorComponentProps {
+    schema: Schema;
+    dataSource: DataSource;
+    design: DatagridDesign;
+    onDesignChange: (design: DatagridDesign) => void;
+    onCancel: () => void;
+}
+/** Popup editor */
+declare class DatagridEditorComponent extends React.Component<DatagridEditorComponentProps, {
+    design: DatagridDesign;
+}> {
+    constructor(props: DatagridEditorComponentProps);
+    render(): React.CElement<{
+        onAction: () => void;
+        onCancel: () => void;
+        size: string;
+    }, React.Component<{
+        onAction: () => void;
+        onCancel: () => void;
+        size: string;
+    }, any, any>>;
+}
+export {};

package/lib/datagrids/DatagridComponent.js

@@ -0,0 +1,285 @@
+"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 react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const AutoSizeComponent_1 = __importDefault(require("@mwater/react-library/lib/AutoSizeComponent"));
+const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
+const expressions_1 = require("@mwater/expressions");
+const expressions_2 = require("@mwater/expressions");
+const expressions_3 = require("@mwater/expressions");
+const DatagridViewComponent_1 = __importDefault(require("./DatagridViewComponent"));
+const DatagridDesignerComponent_1 = __importDefault(require("./DatagridDesignerComponent"));
+const DatagridUtils_1 = __importDefault(require("./DatagridUtils"));
+const QuickfiltersComponent_1 = __importDefault(require("../quickfilter/QuickfiltersComponent"));
+const QuickfilterCompiler_1 = __importDefault(require("../quickfilter/QuickfilterCompiler"));
+const FindReplaceModalComponent_1 = __importDefault(require("./FindReplaceModalComponent"));
+// Datagrid with decorations
+// See README.md for description of datagrid format
+// Design should be cleaned already before being passed in (see DatagridUtils)
+class DatagridComponent extends react_1.default.Component {
+    datagridView;
+    quickfilters;
+    findReplaceModal;
+    constructor(props) {
+        super(props);
+        this.state = {
+            editingDesign: false,
+            cellEditingEnabled: false,
+            quickfiltersHeight: null,
+            quickfiltersValues: null
+        };
+    }
+    reload() {
+        return this.datagridView?.reload();
+    }
+    componentDidMount() {
+        return this.updateHeight();
+    }
+    componentDidUpdate() {
+        return this.updateHeight();
+    }
+    updateHeight() {
+        // Calculate quickfilters height
+        if (this.quickfilters) {
+            if (this.state.quickfiltersHeight !== this.quickfilters.offsetHeight) {
+                return this.setState({ quickfiltersHeight: this.quickfilters.offsetHeight });
+            }
+        }
+        else {
+            return this.setState({ quickfiltersHeight: 0 });
+        }
+    }
+    // Get the values of the quick filters
+    getQuickfilterValues = () => {
+        return this.state.quickfiltersValues || [];
+    };
+    // Get filters that are applied by the quickfilters
+    getQuickfilterFilters = () => {
+        return new QuickfilterCompiler_1.default(this.props.schema).compile(this.props.design.quickfilters, this.state.quickfiltersValues, this.props.quickfilterLocks);
+    };
+    handleCellEditingToggle = () => {
+        if (this.state.cellEditingEnabled) {
+            return this.setState({ cellEditingEnabled: false });
+        }
+        else {
+            if (confirm(T("Turn on cell editing? This will allow you to edit the live data and is an advanced feature."))) {
+                return this.setState({ cellEditingEnabled: true });
+            }
+        }
+    };
+    handleEdit = () => {
+        return this.setState({ editingDesign: true });
+    };
+    // Get datagrid filter compiled for quickfilter filtering
+    getCompiledFilters() {
+        let jsonql;
+        const exprCompiler = new expressions_2.ExprCompiler(this.props.schema);
+        const exprUtils = new expressions_1.ExprUtils(this.props.schema);
+        const exprCleaner = new expressions_3.ExprCleaner(this.props.schema);
+        const compiledFilters = [];
+        if (this.props.design.filter) {
+            // First clean the filter
+            const cleanExpr = exprCleaner.cleanExpr(this.props.design.filter, { table: this.props.design.table });
+            jsonql = exprCompiler.compileExpr({ expr: cleanExpr, tableAlias: "{alias}" });
+            if (jsonql) {
+                compiledFilters.push({
+                    table: this.props.design.table,
+                    jsonql
+                });
+            }
+        }
+        // Add global filters
+        for (let filter of this.props.design.globalFilters || []) {
+            // Check if exists and is correct type
+            const column = this.props.schema.getColumn(this.props.design.table, filter.columnId);
+            if (!column) {
+                continue;
+            }
+            const columnExpr = { type: "field", table: this.props.design.table, column: column.id };
+            if (exprUtils.getExprType(columnExpr) !== filter.columnType) {
+                continue;
+            }
+            // Create expr
+            let expr = {
+                type: "op",
+                op: filter.op,
+                table: this.props.design.table,
+                exprs: [columnExpr].concat(filter.exprs)
+            };
+            // Clean expr
+            expr = exprCleaner.cleanExpr(expr, { table: this.props.design.table });
+            jsonql = exprCompiler.compileExpr({ expr, tableAlias: "{alias}" });
+            if (jsonql) {
+                compiledFilters.push({
+                    table: this.props.design.table,
+                    jsonql
+                });
+            }
+        }
+        return compiledFilters;
+    }
+    // Toggle to allow cell editing
+    renderCellEdit() {
+        if (!this.props.canEditExpr) {
+            return null;
+        }
+        const label = [
+            R("i", { className: this.state.cellEditingEnabled ? "fa fa-fw fa-check-square" : "fa fa-fw fa-square-o" }),
+            " ",
+            T("Cell Editing")
+        ];
+        return R("a", {
+            key: "cell-edit",
+            className: "btn btn-link btn-sm",
+            onClick: this.handleCellEditingToggle
+        }, label);
+    }
+    renderEditButton() {
+        if (!this.props.onDesignChange) {
+            return null;
+        }
+        return R("button", {
+            type: "button",
+            className: "btn btn-primary",
+            onClick: this.handleEdit
+        }, R("span", { className: "fas fa-cog" }), " ", T("Settings"));
+    }
+    renderFindReplace() {
+        if (!this.state.cellEditingEnabled) {
+            return null;
+        }
+        return R("a", {
+            key: "findreplace",
+            className: "btn btn-link btn-sm",
+            onClick: () => this.findReplaceModal.show()
+        }, T("Find/Replace"));
+    }
+    renderTitleBar() {
+        return R("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: 40, padding: 4 } }, R("div", { style: { float: "right" } }, this.renderFindReplace(), this.renderCellEdit(), this.renderEditButton(), this.props.extraTitleButtonsElem), this.props.titleElem);
+    }
+    renderQuickfilter() {
+        return R("div", {
+            style: { position: "absolute", top: 40, left: 0, right: 0 },
+            ref: (c) => {
+                this.quickfilters = c;
+            }
+        }, R(QuickfiltersComponent_1.default, {
+            design: this.props.design.quickfilters,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            quickfiltersDataSource: this.props.datagridDataSource.getQuickfiltersDataSource(),
+            values: this.state.quickfiltersValues || [],
+            onValuesChange: (values) => this.setState({ quickfiltersValues: values }),
+            locks: this.props.quickfilterLocks,
+            filters: this.getCompiledFilters()
+        }));
+    }
+    // Renders the editor modal
+    renderEditor() {
+        if (!this.state.editingDesign) {
+            return;
+        }
+        return R(DatagridEditorComponent, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            design: this.props.design,
+            onDesignChange: (design) => {
+                // If quickfilters have changed, reset values
+                if (!lodash_1.default.isEqual(this.props.design.quickfilters, design.quickfilters)) {
+                    this.setState({ quickfiltersValues: null });
+                }
+                this.props.onDesignChange(design);
+                return this.setState({ editingDesign: false });
+            },
+            onCancel: () => this.setState({ editingDesign: false })
+        });
+    }
+    renderFindReplaceModal(filters) {
+        return R(FindReplaceModalComponent_1.default, {
+            ref: (c) => {
+                this.findReplaceModal = c;
+            },
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            datagridDataSource: this.props.datagridDataSource,
+            design: this.props.design,
+            filters,
+            updateExprValues: this.props.updateExprValues,
+            onUpdate: () => {
+                // Reload
+                return this.datagridView?.reload();
+            }
+        });
+    }
+    render() {
+        let filters = this.props.filters || [];
+        // Compile quickfilters
+        filters = filters.concat(this.getQuickfilterFilters());
+        return R("div", {
+            style: {
+                width: "100%",
+                height: "100%",
+                position: "relative",
+                paddingTop: 40 + (this.state.quickfiltersHeight || 0)
+            }
+        }, this.renderTitleBar(), this.renderQuickfilter(), this.renderEditor(), this.renderFindReplaceModal(filters), R(AutoSizeComponent_1.default, { injectWidth: true, injectHeight: true }, (size) => {
+            // Clean before displaying
+            const design = new DatagridUtils_1.default(this.props.schema).cleanDesign(this.props.design);
+            if (!new DatagridUtils_1.default(this.props.schema).validateDesign(design)) {
+                return R(DatagridViewComponent_1.default, {
+                    ref: (view) => {
+                        this.datagridView = view;
+                    },
+                    width: size.width - 1,
+                    height: size.height - 1,
+                    pageSize: 100,
+                    schema: this.props.schema,
+                    dataSource: this.props.dataSource,
+                    datagridDataSource: this.props.datagridDataSource,
+                    design,
+                    filters,
+                    onDesignChange: this.props.onDesignChange,
+                    onRowClick: this.props.onRowClick,
+                    onRowDoubleClick: this.props.onRowDoubleClick,
+                    canEditExpr: this.state.cellEditingEnabled ? this.props.canEditExpr : undefined,
+                    updateExprValues: this.state.cellEditingEnabled ? this.props.updateExprValues : undefined,
+                });
+            }
+            else if (this.props.onDesignChange) {
+                return R("div", { style: { textAlign: "center", marginTop: size.height / 2 } }, R("a", { className: "btn btn-link", onClick: this.handleEdit }, T("Click Here to Configure")));
+            }
+            else {
+                return null;
+            }
+        }));
+    }
+}
+exports.default = DatagridComponent;
+/** Popup editor */
+class DatagridEditorComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            design: props.design
+        };
+    }
+    render() {
+        return R(ActionCancelModalComponent_1.default, {
+            onAction: () => {
+                this.props.onDesignChange(this.state.design);
+                return this.setState({ design: this.props.design });
+            },
+            onCancel: this.props.onCancel,
+            size: "large"
+        }, R(DatagridDesignerComponent_1.default, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            design: this.state.design,
+            onDesignChange: (design) => this.setState({ design })
+        }));
+    }
+}

package/lib/datagrids/DatagridDataSource.d.ts

@@ -0,0 +1,9 @@
+import { Row } from "@mwater/expressions";
+import { DatagridDesign, JsonQLFilter } from "..";
+import { QuickfiltersDataSource } from "../quickfilter/QuickfiltersDataSource";
+export default class DatagridDataSource {
+    /** Gets the rows specified */
+    getRows(design: DatagridDesign, offset: number, limit: number, filters: JsonQLFilter[] | undefined, callback: (error: any, rows: Row[]) => void): void;
+    /** Gets the quickfilters data source */
+    getQuickfiltersDataSource(): QuickfiltersDataSource;
+}

package/lib/datagrids/DatagridDataSource.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class DatagridDataSource {
+    /** Gets the rows specified */
+    getRows(design, offset, limit, filters, callback) {
+        throw new Error("Not implemented");
+    }
+    /** Gets the quickfilters data source */
+    getQuickfiltersDataSource() {
+        throw new Error("Not implemented");
+    }
+}
+exports.default = DatagridDataSource;

package/lib/datagrids/DatagridDesign.d.ts

@@ -0,0 +1,75 @@
+import { Expr, LiteralType } from "@mwater/expressions";
+import { Quickfilter } from "../quickfilter/Quickfilter";
+/** Design of data grid */
+export interface DatagridDesign {
+    /** table id of main table */
+    table: string | null;
+    /** array of columns */
+    columns: DatagridDesignColumn[];
+    /** mwater-expression */
+    filter?: Expr;
+    /** locale to display localizable strings in. optional */
+    locale?: string;
+    /** array of subtables (1-n joins) */
+    subtables?: DatagridDesignSubtable[];
+    /** array of { expr: expression to order on, direction: "asc"/"desc" } */
+    orderBys?: {
+        expr: Expr;
+        direction: "asc" | "desc";
+    }[];
+    /** array of quick filters (user-selectable filters). See quickfilter/README.md */
+    quickfilters?: Quickfilter[];
+    /** true to show row numbers */
+    showRowNumbers?: boolean;
+    /** array of global filters. See below. */
+    globalFilters?: DatagridDesignGlobalFilter[];
+}
+export interface DatagridDesignColumn {
+    /** unique id of the column */
+    id: string;
+    /** optional label for the column */
+    label?: string;
+    /** subtable from which column is from. Null/undefined for main table */
+    subtable?: string | null;
+    /** width of column in pixels */
+    width: number;
+    /** type of the column */
+    type: "expr";
+    /** Expression */
+    expr: Expr;
+    /** Format for formattable types (number and geometry) */
+    format?: string;
+}
+export interface DatagridDesignSubtable {
+    /** unique id of the subtable (not the id of the table, just a unique id) */
+    id: string;
+    /** name of subtable (optional) */
+    name?: string;
+    /** array of join columns to get to subtable from the table */
+    joins: string[];
+    /** mwater-expression */
+    filter?: Expr;
+    /** array of { expr: expression to order on, direction: "asc"/"desc" } */
+    orderBys: {
+        expr: Expr;
+        direction: "asc" | "desc";
+    }[];
+}
+/** Global Filters
+
+Global filters apply to multiple tables at once if a certain column is present. User-interface to set them is application-specific
+and the default (non-mWater) dashboard applies them but does not allow editing.
+
+Note: This is less applicable in the case of datagrids since there is a single table, but is included for consistency and ease
+of setting complex but common filters.
+*/
+export interface DatagridDesignGlobalFilter {
+    /** id of column to filter */
+    columnId: string;
+    /** type of column to filter (to ensure that consistent) */
+    columnType: LiteralType;
+    /** op of expression for filtering */
+    op: string;
+    /** array of expressions to use for filtering. field expression for column will be injected as expression 0 in the resulting filter expression */
+    exprs: Expr[];
+}

package/lib/datagrids/DatagridDesign.js

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