@mwater/visualization 5.0.0

package/lib/widgets/text/ExprItemEditorComponent.js

@@ -0,0 +1,92 @@
+"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 expressions_1 = require("@mwater/expressions");
+const expressions_ui_1 = require("@mwater/expressions-ui");
+const TableSelectComponent_1 = __importDefault(require("../../TableSelectComponent"));
+const valueFormatter_1 = require("../../valueFormatter");
+const valueFormatter_2 = require("../../valueFormatter");
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+// Expression editor that allows changing an expression item
+class ExprItemEditorComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        // Keep table in state as it can be set before the expression
+        this.state = {
+            table: props.exprItem.expr?.table || props.singleRowTable
+        };
+    }
+    handleTableChange = (table) => {
+        this.setState({ table });
+    };
+    handleExprChange = (expr) => {
+        const exprItem = lodash_1.default.extend({}, this.props.exprItem, { expr });
+        this.props.onChange(exprItem);
+    };
+    handleIncludeLabelChange = (value) => {
+        const exprItem = lodash_1.default.extend({}, this.props.exprItem, {
+            includeLabel: value,
+            labelText: value ? this.props.exprItem.labelText : undefined
+        });
+        this.props.onChange(exprItem);
+    };
+    handleLabelTextChange = (ev) => {
+        const exprItem = lodash_1.default.extend({}, this.props.exprItem, { labelText: ev.target.value || null });
+        this.props.onChange(exprItem);
+    };
+    handleFormatChange = (ev) => {
+        const exprItem = lodash_1.default.extend({}, this.props.exprItem, { format: ev.target.value });
+        this.props.onChange(exprItem);
+    };
+    renderFormat() {
+        const exprUtils = new expressions_1.ExprUtils(this.props.schema);
+        const exprType = exprUtils.getExprType(this.props.exprItem.expr);
+        if (!exprType) {
+            return null;
+        }
+        const formats = (0, valueFormatter_1.getFormatOptions)(exprType);
+        if (!formats) {
+            return null;
+        }
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Format"), ": ", R("select", {
+            value: this.props.exprItem.format != null ? this.props.exprItem.format : (0, valueFormatter_2.getDefaultFormat)(exprType),
+            className: "form-select",
+            style: { width: "auto", display: "inline-block" },
+            onChange: this.handleFormatChange
+        }, lodash_1.default.map(formats, (format) => R("option", { key: format.value, value: format.value }, format.label))));
+    }
+    render() {
+        return R("div", { style: { paddingBottom: 200 } }, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, {
+            schema: this.props.schema,
+            value: this.state.table,
+            onChange: this.handleTableChange
+        }), R("br")), this.state.table
+            ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Field"), ": ", R(expressions_ui_1.ExprComponent, {
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                table: this.state.table,
+                types: ["text", "number", "enum", "date", "datetime", "boolean", "enumset", "geometry"],
+                value: this.props.exprItem.expr,
+                aggrStatuses: ["individual", "literal", "aggregate"],
+                onChange: this.handleExprChange
+            }))
+            : undefined, this.state.table && this.props.exprItem.expr
+            ? R("div", { className: "mb-3" }, react_1.default.createElement(bootstrap_1.Checkbox, { key: "includeLabel", value: this.props.exprItem.includeLabel, onChange: this.handleIncludeLabelChange }, "Include Label"), this.props.exprItem.includeLabel
+                ? R("input", {
+                    key: "labelText",
+                    className: "form-control",
+                    type: "text",
+                    value: this.props.exprItem.labelText || "",
+                    onChange: this.handleLabelTextChange,
+                    placeholder: new expressions_1.ExprUtils(this.props.schema).summarizeExpr(this.props.exprItem.expr) + ": "
+                })
+                : undefined)
+            : undefined, this.renderFormat());
+    }
+}
+exports.default = ExprItemEditorComponent;

package/lib/widgets/text/ExprUpdateModalComponent.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter";
+export interface ExprUpdateModalComponentProps {
+    /** Schema to use */
+    schema: Schema;
+    /** Data source to use to get values */
+    dataSource: DataSource;
+    singleRowTable?: string;
+}
+interface ExprUpdateModalComponentState {
+    open: boolean;
+    onUpdate: ((exprItem: HtmlItemExpr) => void) | null;
+    exprItem: HtmlItemExpr | null;
+}
+export default class ExprUpdateModalComponent extends React.Component<ExprUpdateModalComponentProps, ExprUpdateModalComponentState> {
+    constructor(props: any);
+    open(item: any, onUpdate: any): void;
+    render(): React.CElement<{
+        actionLabel: string;
+        onAction: () => void;
+        onCancel: () => void;
+        title: string;
+        size: string;
+    }, React.Component<{
+        actionLabel: string;
+        onAction: () => void;
+        onCancel: () => void;
+        title: string;
+        size: string;
+    }, any, any>> | null;
+}
+export {};

package/lib/widgets/text/ExprUpdateModalComponent.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
+const ExprItemEditorComponent_1 = __importDefault(require("./ExprItemEditorComponent"));
+// Modal that displays an expression builder for updating an expression
+class ExprUpdateModalComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            open: false,
+            exprItem: null,
+            onUpdate: null
+        };
+    }
+    open(item, onUpdate) {
+        return this.setState({ open: true, exprItem: item, onUpdate });
+    }
+    render() {
+        if (!this.state.open) {
+            return null;
+        }
+        return R(ActionCancelModalComponent_1.default, {
+            actionLabel: "Update",
+            onAction: () => {
+                // Close first to avoid strange effects when mixed with pojoviews
+                this.setState({ open: false }, () => {
+                    return this.state.onUpdate(this.state.exprItem);
+                });
+            },
+            onCancel: () => this.setState({ open: false }),
+            title: "Update Field",
+            size: "x-large"
+        }, R(ExprItemEditorComponent_1.default, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            exprItem: this.state.exprItem,
+            onChange: (exprItem) => this.setState({ exprItem }),
+            singleRowTable: this.props.singleRowTable
+        }));
+    }
+}
+exports.default = ExprUpdateModalComponent;

package/lib/widgets/text/README.md

@@ -0,0 +1,2 @@
+items: Text widget stores its content as array of items. See ItemsHtmlConverter
+style: "title" for title block. default is "default"

package/lib/widgets/text/TextComponent.d.ts

@@ -0,0 +1,48 @@
+import PropTypes from "prop-types";
+import React from "react";
+import RichTextComponent from "../../richtext/RichTextComponent";
+import ExprInsertModalComponent from "./ExprInsertModalComponent";
+import ExprUpdateModalComponent from "./ExprUpdateModalComponent";
+import ExprItemsHtmlConverter from "../../richtext/ExprItemsHtmlConverter";
+import { TextWidgetDesign } from "./TextWidgetDesign";
+import { DataSource, Schema } from "@mwater/expressions";
+export interface TextComponentProps {
+    design: TextWidgetDesign;
+    onDesignChange?: (design: TextWidgetDesign) => void;
+    schema: Schema;
+    dataSource: DataSource;
+    /** Expression values */
+    exprValues: {
+        [key: string]: any;
+    };
+    width?: number;
+    height?: number;
+    /** Table that is filtered to have one row */
+    singleRowTable?: string;
+    /** Optional lookup of string name to value. Used for {{branding}} and other replacement strings in text widget */
+    namedStrings?: {
+        [key: string]: string;
+    };
+}
+export default class TextComponent extends React.Component<TextComponentProps> {
+    static contextTypes: {
+        locale: PropTypes.Requireable<string>;
+    };
+    exprInsertModal: ExprInsertModalComponent | null;
+    exprUpdateModal: ExprUpdateModalComponent | null;
+    editor: RichTextComponent | null;
+    createItemsHtmlConverter(): ExprItemsHtmlConverter;
+    handleItemsChange: (items: any) => void;
+    handleInsertExpr: (item: any) => void;
+    replaceItem(item: any): void;
+    handleItemClick: (item: any) => void;
+    handleAddExpr: (ev: any) => void;
+    renderExtraPaletteButtons(): React.DetailedReactHTMLElement<{
+        key: string;
+        className: string;
+        onMouseDown: (ev: any) => void;
+    }, HTMLElement>;
+    renderModals(): (React.CElement<import("./ExprInsertModalComponent").ExprInsertModalComponentProps, ExprInsertModalComponent> | React.CElement<any, ExprUpdateModalComponent>)[];
+    refRichTextComponent: (c: RichTextComponent | null) => void;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}

package/lib/widgets/text/TextComponent.js

@@ -0,0 +1,109 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const prop_types_1 = __importDefault(require("prop-types"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const lodash_1 = __importDefault(require("lodash"));
+const RichTextComponent_1 = __importDefault(require("../../richtext/RichTextComponent"));
+const ExprInsertModalComponent_1 = __importDefault(require("./ExprInsertModalComponent"));
+const ExprUpdateModalComponent_1 = __importDefault(require("./ExprUpdateModalComponent"));
+const ExprItemsHtmlConverter_1 = __importDefault(require("../../richtext/ExprItemsHtmlConverter"));
+// Text component which is provided with the data it needs, rather than loading it.
+// Used by TextWidgetComponent and also by other components that embed text fields
+class TextComponent extends react_1.default.Component {
+    static contextTypes = { locale: prop_types_1.default.string };
+    exprInsertModal;
+    exprUpdateModal;
+    editor;
+    createItemsHtmlConverter() {
+        return new ExprItemsHtmlConverter_1.default(this.props.schema, this.props.onDesignChange != null, this.props.exprValues, 
+        // Display summaries if in design more and singleRowTable is set
+        this.props.onDesignChange != null && this.props.singleRowTable != null, 
+        // Only replace named strings if not editing
+        this.props.onDesignChange == null ? this.props.namedStrings : undefined, this.context.locale);
+    }
+    handleItemsChange = (items) => {
+        const design = { ...this.props.design, items };
+        return this.props.onDesignChange(design);
+    };
+    handleInsertExpr = (item) => {
+        const html = '<div data-embed="' + lodash_1.default.escape(JSON.stringify(item)) + '"></div>';
+        return this.editor.pasteHTML(html);
+    };
+    replaceItem(item) {
+        var replaceItemInItems = (items, item) => lodash_1.default.map(items, function (i) {
+            if (i.id === item.id) {
+                return item;
+            }
+            else if (i.items) {
+                return lodash_1.default.extend({}, i, { items: replaceItemInItems(i.items, item) });
+            }
+            else {
+                return i;
+            }
+        });
+        const items = replaceItemInItems(this.props.design.items || [], item);
+        return this.props.onDesignChange({ ...this.props.design, items });
+    }
+    handleItemClick = (item) => {
+        return this.exprUpdateModal.open(item, (item) => {
+            // Replace in items
+            return this.replaceItem(item);
+        });
+    };
+    handleAddExpr = (ev) => {
+        ev.preventDefault();
+        return this.exprInsertModal.open();
+    };
+    renderExtraPaletteButtons() {
+        return R("div", { key: "expr", className: "mwater-visualization-text-palette-item", onMouseDown: this.handleAddExpr }, R("i", { className: "fa fa-plus" }), " Field");
+    }
+    renderModals() {
+        return [
+            R(ExprInsertModalComponent_1.default, {
+                key: "exprInsertModal",
+                ref: (c) => {
+                    this.exprInsertModal = c;
+                },
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                onInsert: this.handleInsertExpr,
+                singleRowTable: this.props.singleRowTable
+            }),
+            R(ExprUpdateModalComponent_1.default, {
+                key: "exprUpdateModal",
+                ref: (c) => {
+                    this.exprUpdateModal = c;
+                },
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                singleRowTable: this.props.singleRowTable
+            })
+        ];
+    }
+    refRichTextComponent = (c) => {
+        this.editor = c;
+    };
+    render() {
+        const style = {
+            position: "relative"
+        };
+        style.width = this.props.width;
+        style.height = this.props.height;
+        return R("div", null, this.renderModals(), R(RichTextComponent_1.default, {
+            ref: this.refRichTextComponent,
+            className: `mwater-visualization-text-widget-style-${this.props.design.style || "default"}`,
+            style,
+            items: this.props.design.items,
+            onItemsChange: this.props.onDesignChange ? this.handleItemsChange : undefined,
+            onItemClick: this.handleItemClick,
+            itemsHtmlConverter: this.createItemsHtmlConverter(),
+            includeHeadings: this.props.design.style === "default" || !this.props.design.style,
+            extraPaletteButtons: this.renderExtraPaletteButtons()
+        }));
+    }
+}
+exports.default = TextComponent;

package/lib/widgets/text/TextWidget.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+import Widget, { CreateViewElementOptions } from "../Widget";
+import { JsonQLFilter } from "../../JsonQLFilter";
+import { HtmlItem } from "../../richtext/ItemsHtmlConverter";
+import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter";
+import { TextWidgetDesign } from "./TextWidgetDesign";
+export default class TextWidget extends Widget {
+    createViewElement(options: CreateViewElementOptions): React.CElement<{
+        schema: Schema;
+        dataSource: DataSource;
+        widgetDataSource: import("../WidgetDataSource").WidgetDataSource;
+        filters: JsonQLFilter[];
+        design: object;
+        onDesignChange: ((design: object) => void) | null | undefined;
+        width: number | undefined;
+        height: number | undefined;
+        singleRowTable: string | undefined;
+        namedStrings: {
+            [key: string]: string;
+        } | undefined;
+        ref: ((widget: any) => void) | undefined;
+    }, any>;
+    getData(design: any, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): void;
+    isAutoHeight(): boolean;
+    getExprItems(items: HtmlItem[]): HtmlItemExpr[];
+    getFilterableTables(design: TextWidgetDesign, schema: Schema): string[];
+    getTOCEntries(design: any, namedStrings: any): any;
+}

package/lib/widgets/text/TextWidget.js

@@ -0,0 +1,243 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const lodash_1 = __importDefault(require("lodash"));
+const async_1 = __importDefault(require("async"));
+const expressions_1 = require("@mwater/expressions");
+const expressions_2 = require("@mwater/expressions");
+const expressions_3 = require("@mwater/expressions");
+const expressions_4 = require("@mwater/expressions");
+const Widget_1 = __importDefault(require("../Widget"));
+class TextWidget extends Widget_1.default {
+    // Creates a React element that is a view of the widget
+    // options:
+    //  schema: schema to use
+    //  dataSource: data source to use
+    //  widgetDataSource: Gives data to the widget in a way that allows client-server separation and secure sharing. See definition in WidgetDataSource.
+    //  design: widget design
+    //  scope: scope of the widget (when the widget self-selects a particular scope)
+    //  filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
+    //  onScopeChange: called with scope of widget
+    //  onDesignChange: called with new design. null/undefined for readonly
+    //  width: width in pixels on screen
+    //  height: height in pixels on screen
+    //  singleRowTable: optional table name of table that will be filtered to have a single row present. Widget designer should optionally account for this
+    //  namedStrings: Optional lookup of string name to value. Used for {{branding}} and other replacement strings in text widget
+    createViewElement(options) {
+        // Put here so TextWidget can be created on server
+        const TextWidgetComponent = require("./TextWidgetComponent").default;
+        return R(TextWidgetComponent, {
+            schema: options.schema,
+            dataSource: options.dataSource,
+            widgetDataSource: options.widgetDataSource,
+            filters: options.filters,
+            design: options.design,
+            onDesignChange: options.onDesignChange,
+            width: options.width,
+            height: options.height,
+            singleRowTable: options.singleRowTable,
+            namedStrings: options.namedStrings,
+            ref: options.widgetRef
+        });
+    }
+    // Get the data that the widget needs. This will be called on the server, typically.
+    //   design: design of the chart
+    //   schema: schema to use
+    //   dataSource: data source to get data from
+    //   filters: array of { table: table id, jsonql: jsonql condition with {alias} for tableAlias }
+    //   callback: (error, data)
+    getData(design, schema, dataSource, filters, callback) {
+        // Evaluates a single exprItem
+        const evalExprItem = (exprItem, cb) => {
+            let query, whereClauses;
+            if (!exprItem.expr) {
+                return cb(null);
+            }
+            const { table } = exprItem.expr;
+            // If table doesn't exist, return null
+            if (table && !schema.getTable(table)) {
+                return cb(null);
+            }
+            const exprCompiler = new expressions_2.ExprCompiler(schema);
+            const exprUtils = new expressions_1.ExprUtils(schema);
+            // Clean expression
+            const exprCleaner = new expressions_3.ExprCleaner(schema);
+            let expr = exprCleaner.cleanExpr(exprItem.expr, { aggrStatuses: ["individual", "literal", "aggregate"] });
+            // Get relevant filters
+            if (table) {
+                const relevantFilters = lodash_1.default.where(filters || [], { table });
+                whereClauses = lodash_1.default.map(relevantFilters, (f) => (0, expressions_4.injectTableAlias)(f.jsonql, "main"));
+            }
+            else {
+                whereClauses = [];
+            }
+            // In case of "sum where"/"count where", extract where clause to make faster
+            if (expr && expr.type == "op" && expr?.op === "sum where") {
+                whereClauses.push(exprCompiler.compileExpr({ expr: expr.exprs[1], tableAlias: "main" }));
+                expr = { type: "op", table: expr.table, op: "sum", exprs: [expr.exprs[0]] };
+            }
+            else if (expr && expr.type == "op" && expr?.op === "count where") {
+                whereClauses.push(exprCompiler.compileExpr({ expr: expr.exprs[0], tableAlias: "main" }));
+                expr = { type: "op", table: expr.table, op: "count", exprs: [] };
+            }
+            let compiledExpr = exprCompiler.compileExpr({ expr, tableAlias: "main" });
+            const exprType = exprUtils.getExprType(expr);
+            // Handle special case of geometry, converting to GeoJSON
+            if (exprType === "geometry") {
+                // Convert to 4326 (lat/long). Force ::geometry for null
+                compiledExpr = {
+                    type: "op",
+                    op: "::jsonb",
+                    exprs: [
+                        {
+                            type: "op",
+                            op: "ST_AsGeoJSON",
+                            exprs: [
+                                {
+                                    type: "op",
+                                    op: "ST_Transform",
+                                    exprs: [{ type: "op", op: "::geometry", exprs: [compiledExpr] }, 4326]
+                                }
+                            ]
+                        }
+                    ]
+                };
+            }
+            const aggrStatus = exprUtils.getExprAggrStatus(expr);
+            if (aggrStatus === "individual" || aggrStatus === "literal") {
+                // Get two distinct examples to know if unique if not aggregate
+                query = {
+                    type: "query",
+                    distinct: true,
+                    selects: [{ type: "select", expr: compiledExpr, alias: "value" }],
+                    from: table ? exprCompiler.compileTable(table, "main") : undefined,
+                    limit: 2
+                };
+            }
+            else {
+                query = {
+                    type: "query",
+                    selects: [{ type: "select", expr: compiledExpr, alias: "value" }],
+                    from: table ? exprCompiler.compileTable(table, "main") : undefined
+                };
+            }
+            whereClauses = lodash_1.default.compact(whereClauses);
+            // Wrap if multiple
+            if (whereClauses.length > 1) {
+                query.where = { type: "op", op: "and", exprs: whereClauses };
+            }
+            else {
+                query.where = whereClauses[0];
+            }
+            // Execute query
+            return dataSource.performQuery(query, (error, rows) => {
+                if (error) {
+                    return cb(error);
+                }
+                else {
+                    // If multiple, use null
+                    if (rows.length !== 1) {
+                        return cb(null, null);
+                    }
+                    else {
+                        return cb(null, rows[0].value);
+                    }
+                }
+            });
+        };
+        // Map of value by id
+        const exprValues = {};
+        return async_1.default.each(this.getExprItems(design.items), (exprItem, cb) => {
+            evalExprItem(exprItem, (error, value) => {
+                if (error) {
+                    cb(error);
+                }
+                else {
+                    exprValues[exprItem.id] = value;
+                    cb(null);
+                }
+            });
+        }, (error) => {
+            if (error) {
+                callback(error);
+            }
+            else {
+                callback(null, exprValues);
+            }
+        });
+    }
+    // Determine if widget is auto-height, which means that a vertical height is not required.
+    isAutoHeight() {
+        return true;
+    }
+    // Get expression items recursively
+    getExprItems(items) {
+        let exprItems = [];
+        for (let item of items || []) {
+            if (item.type === "expr") {
+                exprItems.push(item);
+            }
+            if (item.items) {
+                exprItems = exprItems.concat(this.getExprItems(item.items));
+            }
+        }
+        return exprItems;
+    }
+    // Get a list of table ids that can be filtered on
+    getFilterableTables(design, schema) {
+        const exprItems = this.getExprItems(design.items);
+        let filterableTables = lodash_1.default.map(exprItems, (exprItem) => exprItem.expr?.table);
+        filterableTables = lodash_1.default.uniq(lodash_1.default.compact(filterableTables));
+        return filterableTables;
+    }
+    // Get table of contents entries for the widget, entries that should be displayed in the TOC.
+    // returns `[{ id: "id that is unique within widget", text: "text of TOC entry", level: 1, 2, etc. }]
+    // For simplicity, the h1, h2, etc. have ids of 0, 1, 2 in the order they appear. h1, h2 will be given ids 0, 1 respectively.
+    getTOCEntries(design, namedStrings) {
+        // Find all items that are h1, h2, etc
+        const entries = [];
+        // Convert items into flat text
+        function flattenText(items) {
+            let text = lodash_1.default.map(items, function (item) {
+                if (lodash_1.default.isString(item)) {
+                    return item;
+                }
+                if (item?.items) {
+                    return flattenText(item.items);
+                }
+            }).join("");
+            // Handle named strings
+            return (text = text.replace(/\{\{.+?\}\}/g, (match) => {
+                const name = match.substr(2, match.length - 4);
+                if (namedStrings && namedStrings[name] != null) {
+                    return namedStrings[name];
+                }
+                else {
+                    return match;
+                }
+            }));
+        }
+        var findRecursive = (items) => (() => {
+            const result = [];
+            for (let item of items || []) {
+                if (item?.type === "element" && item.tag.match(/^h[1-9]$/)) {
+                    entries.push({ id: entries.length, level: parseInt(item.tag.substr(1)), text: flattenText(item.items) });
+                }
+                if (item?.items) {
+                    result.push(findRecursive(item.items));
+                }
+                else {
+                    result.push(undefined);
+                }
+            }
+            return result;
+        })();
+        findRecursive(design.items);
+        return entries;
+    }
+}
+exports.default = TextWidget;

package/lib/widgets/text/TextWidgetComponent.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent";
+import { DataSource, Schema } from "@mwater/expressions";
+import { JsonQLFilter } from "../../JsonQLFilter";
+import { TextWidgetDesign } from "./TextWidgetDesign";
+export interface TextWidgetComponentProps {
+    design: TextWidgetDesign;
+    /** Called with new design. null/undefined for readonly */
+    onDesignChange?: (design: TextWidgetDesign) => void;
+    filters: JsonQLFilter[];
+    schema: Schema;
+    /** Data source to use for chart */
+    dataSource: DataSource;
+    widgetDataSource: any;
+    width?: number;
+    height?: number;
+    /** Table that is filtered to have one row */
+    singleRowTable?: string;
+    namedStrings?: any;
+}
+export default class TextWidgetComponent extends AsyncLoadComponent<TextWidgetComponentProps, {
+    loading: boolean;
+    exprValues: any;
+    error: any;
+    cacheExpiry: any;
+}> {
+    divComp: HTMLElement | null;
+    constructor(props: any);
+    isLoadNeeded(newProps: any, oldProps: any): boolean;
+    load(props: any, prevProps: any, callback: any): void;
+    scrollToTOCEntry(entryId: any): void;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}