@mwater/visualization 5.2.0 → 5.3.0

package/lib/widgets/charts/pivot/PivotChartViewComponent.js

@@ -26,10 +26,8 @@ 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 lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
 const TextComponent_1 = __importDefault(require("../../text/TextComponent"));
 const PivotChartUtils = __importStar(require("./PivotChartUtils"));
@@ -37,9 +35,10 @@ const PivotChartLayoutComponent_1 = __importDefault(require("./PivotChartLayoutC
 const PivotChartLayoutBuilder_1 = __importDefault(require("./PivotChartLayoutBuilder"));
 const SegmentDesignerComponent_1 = __importDefault(require("./SegmentDesignerComponent"));
 const IntersectionDesignerComponent_1 = __importDefault(require("./IntersectionDesignerComponent"));
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 // Displays a pivot chart
 class PivotChartViewComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -128,78 +127,39 @@ class PivotChartViewComponent extends react_1.default.Component {
         return this.props.onDesignChange(design);
     };
     renderHeader() {
-        return R("div", { style: { paddingLeft: 10, paddingRight: 10 } }, R(TextComponent_1.default, {
-            design: this.props.design.header,
-            onDesignChange: this.props.onDesignChange ? this.handleHeaderChange : undefined,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            exprValues: this.props.data.header || {},
-            width: this.props.width
-        }));
+        return (react_1.default.createElement("div", { style: { paddingLeft: 10, paddingRight: 10 } },
+            react_1.default.createElement(TextComponent_1.default, { design: this.props.design.header, onDesignChange: this.props.onDesignChange ? this.handleHeaderChange : undefined, schema: this.props.schema, dataSource: this.props.dataSource, exprValues: this.props.data.header || {}, width: this.props.width })));
     }
     renderFooter() {
-        return R("div", { style: { paddingLeft: 10, paddingRight: 10 } }, R(TextComponent_1.default, {
-            design: this.props.design.footer,
-            onDesignChange: this.props.onDesignChange ? this.handleFooterChange : undefined,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            exprValues: this.props.data.footer || {},
-            width: this.props.width
-        }));
+        return (react_1.default.createElement("div", { style: { paddingLeft: 10, paddingRight: 10 } },
+            react_1.default.createElement(TextComponent_1.default, { design: this.props.design.footer, onDesignChange: this.props.onDesignChange ? this.handleFooterChange : undefined, schema: this.props.schema, dataSource: this.props.dataSource, exprValues: this.props.data.footer || {}, width: this.props.width })));
     }
     renderEditSegmentModal() {
         if (!this.state.editSegment) {
-            return;
+            return null;
         }
         const segmentType = PivotChartUtils.findSegment(this.props.design.rows, this.state.editSegment.id)
             ? "row"
             : "column";
-        return R(ActionCancelModalComponent_1.default, {
-            title: `Edit ${segmentType}`,
-            onAction: this.handleSaveEditSegment,
-            onCancel: this.handleCancelEditSegment,
-            size: "large"
-        }, R(SegmentDesignerComponent_1.default, {
-            segment: this.state.editSegment,
-            table: this.props.design.table,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            segmentType,
-            onChange: (segment) => this.setState({ editSegment: segment }),
-            filters: this.props.filters
-        }));
+        return (react_1.default.createElement(ActionCancelModalComponent_1.default, { title: `Edit ${segmentType}`, onAction: this.handleSaveEditSegment, onCancel: this.handleCancelEditSegment, size: "large" },
+            react_1.default.createElement(SegmentDesignerComponent_1.default, { segment: this.state.editSegment, table: this.props.design.table, schema: this.props.schema, dataSource: this.props.dataSource, segmentType: segmentType, onChange: (segment) => this.setState({ editSegment: segment }), filters: this.props.filters })));
     }
     renderEditIntersectionModal() {
         if (!this.state.editIntersectionId) {
-            return;
+            return null;
         }
-        return R(ActionCancelModalComponent_1.default, {
-            title: "Edit Value",
-            onAction: this.handleSaveEditIntersection,
-            onCancel: this.handleCancelEditIntersection,
-            size: "large"
-        }, R(IntersectionDesignerComponent_1.default, {
-            intersection: this.state.editIntersection,
-            table: this.props.design.table,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            onChange: (intersection) => this.setState({ editIntersection: intersection }),
-            filters: this.props.filters
-        }));
+        return (react_1.default.createElement(ActionCancelModalComponent_1.default, { title: "Edit Value", onAction: this.handleSaveEditIntersection, onCancel: this.handleCancelEditIntersection, size: "large" },
+            react_1.default.createElement(IntersectionDesignerComponent_1.default, { design: this.props.design, intersectionId: this.state.editIntersectionId, intersection: this.state.editIntersection, table: this.props.design.table, schema: this.props.schema, dataSource: this.props.dataSource, onChange: (intersection) => this.setState({ editIntersection: intersection }), filters: this.props.filters })));
     }
     render() {
-        const layout = new PivotChartLayoutBuilder_1.default({ schema: this.props.schema }).buildLayout(this.props.design, this.props.data, this.context.locale);
-        return R("div", { style: { width: this.props.width, height: this.props.height } }, this.renderHeader(), this.renderEditSegmentModal(), this.renderEditIntersectionModal(), R("div", { key: "layout", style: { margin: 5, marginTop: 12, overflowX: "auto", padding: 7 } }, // Allow table to scroll since tables have hard minimum widths, Leave room for gear menu
-        R(PivotChartLayoutComponent_1.default, {
-            layout,
-            editable: this.props.onDesignChange != null,
-            onEditSection: this.props.onDesignChange != null ? this.handleEditSection : undefined,
-            onRemoveSegment: this.props.onDesignChange != null ? this.handleRemoveSegment : undefined,
-            onInsertBeforeSegment: this.props.onDesignChange != null ? this.handleInsertBeforeSegment : undefined,
-            onInsertAfterSegment: this.props.onDesignChange != null ? this.handleInsertAfterSegment : undefined,
-            onAddChildSegment: this.props.onDesignChange != null ? this.handleAddChildSegment : undefined,
-            onSummarizeSegment: this.props.onDesignChange != null ? this.handleSummarizeSegment : undefined
-        })), this.renderFooter());
+        const layout = new PivotChartLayoutBuilder_1.default({ schema: this.props.schema }).buildLayout(this.props.design, this.props.data, this.context);
+        return (react_1.default.createElement("div", { style: { width: this.props.width, height: this.props.height } },
+            this.renderHeader(),
+            this.renderEditSegmentModal(),
+            this.renderEditIntersectionModal(),
+            react_1.default.createElement("div", { key: "layout", style: { margin: 5, marginTop: 12, overflowX: "auto", padding: 7 } },
+                react_1.default.createElement(PivotChartLayoutComponent_1.default, { layout: layout, editable: this.props.onDesignChange != null, onEditSection: this.props.onDesignChange != null ? this.handleEditSection : undefined, onRemoveSegment: this.props.onDesignChange != null ? this.handleRemoveSegment : undefined, onInsertBeforeSegment: this.props.onDesignChange != null ? this.handleInsertBeforeSegment : undefined, onInsertAfterSegment: this.props.onDesignChange != null ? this.handleInsertAfterSegment : undefined, onAddChildSegment: this.props.onDesignChange != null ? this.handleAddChildSegment : undefined, onSummarizeSegment: this.props.onDesignChange != null ? this.handleSummarizeSegment : undefined })),
+            this.renderFooter()));
     }
 }
 exports.default = PivotChartViewComponent;

package/lib/widgets/charts/table/TableChart.js

@@ -149,10 +149,14 @@ class TableChart extends Chart_1.default {
                 // Convert to 4326 (lat/long). Force ::geometry for null
                 compiledExpr = {
                     type: "op",
-                    op: "ST_AsGeoJSON",
-                    exprs: [
-                        { type: "op", op: "ST_Transform", exprs: [{ type: "op", op: "::geometry", exprs: [compiledExpr] }, 4326] }
-                    ]
+                    op: "::jsonb",
+                    exprs: [{
+                            type: "op",
+                            op: "ST_AsGeoJSON",
+                            exprs: [
+                                { type: "op", op: "ST_Transform", exprs: [{ type: "op", op: "::geometry", exprs: [compiledExpr] }, 4326] }
+                            ]
+                        }]
                 };
             }
             query.selects.push({

package/lib/widgets/charts/table/TableChartDesignerComponent.js

@@ -26,7 +26,6 @@ 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 lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
@@ -42,6 +41,7 @@ const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const valueFormatter_1 = require("../../../valueFormatter");
 const valueFormatter_2 = require("../../../valueFormatter");
 const AxisComponent_1 = __importDefault(require("../../../axes/AxisComponent"));
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 class TableChartDesignerComponent extends react_1.default.Component {
     // Updates design with the specified changes
     updateDesign(changes) {
@@ -173,7 +173,7 @@ class TableChartDesignerComponent extends react_1.default.Component {
 }
 exports.default = TableChartDesignerComponent;
 class TableChartColumnDesignerComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     // Updates column with the specified changes
     updateColumn(changes) {
         const column = lodash_1.default.extend({}, this.props.design.columns[this.props.index], changes);
@@ -235,7 +235,7 @@ class TableChartColumnDesignerComponent extends react_1.default.Component {
     renderHeader() {
         const column = this.props.design.columns[this.props.index];
         const axisBuilder = new AxisBuilder_1.default({ schema: this.props.schema });
-        const placeholder = column.textAxis ? axisBuilder.summarizeAxis(column.textAxis ?? null, this.context.locale) : "";
+        const placeholder = column.textAxis ? axisBuilder.summarizeAxis(column.textAxis ?? null, this.context) : "";
         return R("div", null, R("label", { className: "text-muted" }, "Header"), ": ", R("input", {
             type: "text",
             className: "form-control form-control-sm",

package/lib/widgets/charts/table/TableChartViewComponent.js

@@ -3,7 +3,6 @@ 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 lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
@@ -12,6 +11,7 @@ const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
 const expressions_1 = require("@mwater/expressions");
 const valueFormatter_1 = require("../../../valueFormatter");
 const color_1 = __importDefault(require("color"));
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 class TableChartViewComponent extends react_1.default.Component {
     shouldComponentUpdate(prevProps) {
         return !lodash_1.default.isEqual(prevProps, this.props);
@@ -33,7 +33,7 @@ class TableChartViewComponent extends react_1.default.Component {
 }
 exports.default = TableChartViewComponent;
 class TableContentsComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -89,7 +89,7 @@ class TableContentsComponent extends react_1.default.Component {
         const axisBuilder = new AxisBuilder_1.default({ schema: this.props.schema });
         const column = this.props.columns[index];
         //(this.state.sort?.direction === 'asc' ? "":"")
-        const text = column.headerText ?? (column.textAxis ? axisBuilder.summarizeAxis(column.textAxis, this.context.locale) : "");
+        const text = column.headerText ?? (column.textAxis ? axisBuilder.summarizeAxis(column.textAxis, this.context) : "");
         return R("th", {
             key: index,
             style: { cursor: "pointer" },
@@ -133,7 +133,7 @@ class TableContentsComponent extends react_1.default.Component {
         const column = this.props.columns[columnIndex];
         // Set background color
         let backgroundColor = "transparent";
-        let textColor = "#212529";
+        let textColor = "inherit";
         const exprUtils = new expressions_1.ExprUtils(this.props.schema);
         if (!column.textAxis) {
             node = null;
@@ -142,6 +142,9 @@ class TableContentsComponent extends react_1.default.Component {
             const exprType = exprUtils.getExprType(column.textAxis.expr);
             // Get value
             let value = row[`c${columnIndex}`];
+            if (column.backgroundColorAxis) {
+                backgroundColor = axisBuilder.getValueColor(column.backgroundColorAxis, row[`bc${columnIndex}`]) ?? "#fff";
+            }
             if (value == null) {
                 node = null;
             }
@@ -156,9 +159,6 @@ class TableContentsComponent extends react_1.default.Component {
                         value = null;
                     }
                 }
-                if (column.backgroundColorAxis && row[`bc${columnIndex}`] != null) {
-                    backgroundColor = axisBuilder.getValueColor(column.backgroundColorAxis, row[`bc${columnIndex}`]) ?? "#fff";
-                }
                 // Convert to node based on type
                 switch (exprType) {
                     case "text":
@@ -172,12 +172,12 @@ class TableContentsComponent extends react_1.default.Component {
                         break;
                     case "boolean":
                     case "enum":
-                        node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context.locale);
+                        node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context);
                         break;
                     case "enumset":
                     case "text[]":
                         if (lodash_1.default.isArray(value)) {
-                            node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context.locale);
+                            node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context);
                         }
                         break;
                     case "date":
@@ -209,7 +209,7 @@ class TableContentsComponent extends react_1.default.Component {
             const c = (0, color_1.default)(backgroundColor);
             // Get lightness (taking into account alpha)
             const lightness = 1 - (1 - c.luminosity()) * c.alpha();
-            textColor = lightness < 0.3 ? "rgb(204,204,204)" : "#212529";
+            textColor = lightness < 0.3 ? "rgb(204,204,204)" : "inherit";
         }
         return R("td", { key: columnIndex, style: { backgroundColor, color: textColor } }, node);
     }
@@ -220,6 +220,6 @@ class TableContentsComponent extends react_1.default.Component {
         return R("tbody", { key: "body" }, lodash_1.default.map(this.state.data, (row, i) => this.renderRow(i)));
     }
     render() {
-        return R("table", { className: "mwater-visualization-table", style: { fontSize: "10pt", marginBottom: 0 } }, this.renderHeader(), this.renderBody(), this.renderFooter());
+        return R("table", { className: "mwater-visualization-table", style: { marginBottom: 0 } }, this.renderHeader(), this.renderBody(), this.renderFooter());
     }
 }

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

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React from "react";
 import RichTextComponent from "../../richtext/RichTextComponent";
 import ExprInsertModalComponent from "./ExprInsertModalComponent";
@@ -25,9 +24,7 @@ export interface TextComponentProps {
     };
 }
 export default class TextComponent extends React.Component<TextComponentProps> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     exprInsertModal: ExprInsertModalComponent | null;
     exprUpdateModal: ExprUpdateModalComponent | null;
     editor: RichTextComponent | null;
@@ -36,13 +33,9 @@ export default class TextComponent extends React.Component<TextComponentProps> {
     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>)[];
+    handleAddExpr: (ev: React.MouseEvent<HTMLDivElement>) => void;
+    renderExtraPaletteButtons(): React.JSX.Element;
+    renderModals(): React.JSX.Element[];
     refRichTextComponent: (c: RichTextComponent | null) => void;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    render(): React.JSX.Element;
 }

package/lib/widgets/text/TextComponent.js

@@ -3,27 +3,26 @@ 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"));
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 // 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;
+    static contextType = contexts_1.LocaleContext;
+    exprInsertModal = null;
+    exprUpdateModal = null;
+    editor = null;
     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);
+        this.props.onDesignChange == null ? this.props.namedStrings : undefined, this.context);
     }
     handleItemsChange = (items) => {
         const design = { ...this.props.design, items };
@@ -59,29 +58,18 @@ class TextComponent extends react_1.default.Component {
         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");
+        return (react_1.default.createElement("div", { key: "expr", className: "mwater-visualization-text-palette-item", onMouseDown: this.handleAddExpr },
+            react_1.default.createElement("i", { className: "fa fa-plus" }),
+            " Expression"));
     }
     renderModals() {
         return [
-            R(ExprInsertModalComponent_1.default, {
-                key: "exprInsertModal",
-                ref: (c) => {
+            react_1.default.createElement(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) => {
+                }, schema: this.props.schema, dataSource: this.props.dataSource, onInsert: this.handleInsertExpr, singleRowTable: this.props.singleRowTable }),
+            react_1.default.createElement(ExprUpdateModalComponent_1.default, { key: "exprUpdateModal", ref: (c) => {
                     this.exprUpdateModal = c;
-                },
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                singleRowTable: this.props.singleRowTable
-            })
+                }, schema: this.props.schema, dataSource: this.props.dataSource, singleRowTable: this.props.singleRowTable })
         ];
     }
     refRichTextComponent = (c) => {
@@ -89,21 +77,13 @@ class TextComponent extends react_1.default.Component {
     };
     render() {
         const style = {
-            position: "relative"
+            position: "relative",
+            width: this.props.width,
+            height: this.props.height
         };
-        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()
-        }));
+        return (react_1.default.createElement("div", null,
+            this.renderModals(),
+            react_1.default.createElement(RichTextComponent_1.default, { ref: this.refRichTextComponent, className: `mwater-visualization-text-widget-style-${this.props.design.style || "default"}`, style: 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

@@ -20,10 +20,11 @@ export default class TextWidget extends Widget {
             [key: string]: string;
         } | undefined;
         ref: ((widget: any) => void) | undefined;
+        refreshKey: any;
     }, 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[];
+    getFilterableTables(design: TextWidgetDesign | undefined, schema: Schema): string[];
     getTOCEntries(design: any, namedStrings: any): any;
 }

package/lib/widgets/text/TextWidget.js

@@ -41,7 +41,8 @@ class TextWidget extends Widget_1.default {
             height: options.height,
             singleRowTable: options.singleRowTable,
             namedStrings: options.namedStrings,
-            ref: options.widgetRef
+            ref: options.widgetRef,
+            refreshKey: options.refreshKey
         });
     }
     // Get the data that the widget needs. This will be called on the server, typically.
@@ -189,6 +190,9 @@ class TextWidget extends Widget_1.default {
     }
     // Get a list of table ids that can be filtered on
     getFilterableTables(design, schema) {
+        if (!design) {
+            return [];
+        }
         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));

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

@@ -17,17 +17,29 @@ export interface TextWidgetComponentProps {
     /** Table that is filtered to have one row */
     singleRowTable?: string;
     namedStrings?: any;
+    /** A key that changes when the widget should be refreshed */
+    refreshKey?: any;
 }
 export default class TextWidgetComponent extends AsyncLoadComponent<TextWidgetComponentProps, {
     loading: boolean;
     exprValues: any;
     error: any;
     cacheExpiry: any;
+    editModalOpen: boolean;
 }> {
     divComp: HTMLElement | null;
-    constructor(props: any);
+    constructor(props: TextWidgetComponentProps);
     isLoadNeeded(newProps: any, oldProps: any): boolean;
-    load(props: any, prevProps: any, callback: any): void;
+    load(props: TextWidgetComponentProps, prevProps: TextWidgetComponentProps, callback: any): void;
     scrollToTOCEntry(entryId: any): void;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    handleEditClick: () => void;
+    handleEditModalClose: () => void;
+    handleBackgroundColorChange: (color: string | null) => void;
+    handleSpacingChange: (spacing: number | null) => void;
+    handleBorderColorChange: (color: string | null) => void;
+    handleBorderThicknessChange: (thickness: number | null) => void;
+    handleBorderRadiusChange: (radius: number | null) => void;
+    renderEditModal(): React.JSX.Element | null;
+    renderTextComponent(): React.JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/widgets/text/TextWidgetComponent.js

@@ -4,11 +4,15 @@ var __importDefault = (this && this.__importDefault) || function (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 TextComponent_1 = __importDefault(require("./TextComponent"));
 const TextWidget_1 = __importDefault(require("./TextWidget"));
 const AsyncLoadComponent_1 = __importDefault(require("@mwater/react-library/lib/AsyncLoadComponent"));
+const DropdownWidgetComponent_1 = __importDefault(require("../DropdownWidgetComponent"));
+const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+const ColorComponent_1 = __importDefault(require("../../ColorComponent"));
+const bootstrap_2 = require("@mwater/react-library/lib/bootstrap");
 // Widget which displays styled text with embedded expressions
 class TextWidgetComponent extends AsyncLoadComponent_1.default {
     divComp;
@@ -19,7 +23,8 @@ class TextWidgetComponent extends AsyncLoadComponent_1.default {
             // Map of expression id to expression value
             exprValues: {},
             error: null,
-            cacheExpiry: props.dataSource.getCacheExpiry() // Save cache expiry to see if changes
+            cacheExpiry: props.dataSource.getCacheExpiry(),
+            editModalOpen: false
         };
     }
     // Override to determine if a load is needed. Not called on mounting
@@ -42,7 +47,8 @@ class TextWidgetComponent extends AsyncLoadComponent_1.default {
         // Reload if filters or expressions have changed or cache expiry
         return (!lodash_1.default.isEqual(newProps.filters, oldProps.filters) ||
             !lodash_1.default.isEqual(getExprItems(newProps.design.items), getExprItems(oldProps.design.items)) ||
-            newProps.dataSource.getCacheExpiry() !== this.state.cacheExpiry);
+            newProps.dataSource.getCacheExpiry() !== this.state.cacheExpiry ||
+            newProps.refreshKey !== oldProps.refreshKey);
     }
     // Call callback with state changes
     load(props, prevProps, callback) {
@@ -65,24 +71,75 @@ class TextWidgetComponent extends AsyncLoadComponent_1.default {
             return entry.scrollIntoView(true);
         }
     }
-    render() {
+    handleEditClick = () => {
+        this.setState({ editModalOpen: true });
+    };
+    handleEditModalClose = () => {
+        this.setState({ editModalOpen: false });
+    };
+    handleBackgroundColorChange = (color) => {
+        const newDesign = { ...this.props.design, backgroundColor: color };
+        this.props.onDesignChange(newDesign);
+    };
+    handleSpacingChange = (spacing) => {
+        const newDesign = { ...this.props.design, padding: spacing ?? undefined };
+        this.props.onDesignChange(newDesign);
+    };
+    handleBorderColorChange = (color) => {
+        const newDesign = { ...this.props.design, borderColor: color };
+        this.props.onDesignChange(newDesign);
+    };
+    handleBorderThicknessChange = (thickness) => {
+        const newDesign = { ...this.props.design, borderThickness: thickness };
+        this.props.onDesignChange(newDesign);
+    };
+    handleBorderRadiusChange = (radius) => {
+        const newDesign = { ...this.props.design, borderRadius: radius };
+        this.props.onDesignChange(newDesign);
+    };
+    renderEditModal() {
+        if (!this.state.editModalOpen) {
+            return null;
+        }
+        const spacingOptions = [0, 5, 10, 15, 20, 25, 30, 35, 40].map(value => ({ value, label: `${value}px` }));
+        const borderThicknessOptions = [0, 1, 2, 3, 4, 5].map(value => ({ value, label: value === 0 ? "None" : `${value}px` }));
+        return (react_1.default.createElement(ActionCancelModalComponent_1.default, { title: "Edit Text Widget", onCancel: this.handleEditModalClose, onAction: this.handleEditModalClose },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Background Color" },
+                react_1.default.createElement(ColorComponent_1.default, { color: this.props.design.backgroundColor || null, onChange: this.handleBackgroundColorChange }),
+                react_1.default.createElement("div", { className: "text-muted" }, "Choose a background color for the text widget")),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Padding" },
+                react_1.default.createElement(bootstrap_2.Select, { value: this.props.design.padding ?? 0, onChange: this.handleSpacingChange, options: spacingOptions }),
+                react_1.default.createElement("div", { className: "text-muted" }, "Choose extra padding for the text widget")),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Border Thickness", help: "Choose the border thickness for the text widget" },
+                react_1.default.createElement(bootstrap_2.Select, { value: this.props.design.borderThickness ?? 0, onChange: this.handleBorderThicknessChange, options: borderThicknessOptions })),
+            this.props.design.borderThickness &&
+                react_1.default.createElement(bootstrap_1.FormGroup, { label: "Border Color", help: "Choose the border color for the text widget" },
+                    react_1.default.createElement(ColorComponent_1.default, { color: this.props.design.borderColor || null, onChange: this.handleBorderColorChange })),
+            this.props.design.borderThickness &&
+                react_1.default.createElement(bootstrap_1.FormGroup, { label: "Border Radius", help: "Choose the border radius for the text widget" },
+                    react_1.default.createElement(bootstrap_2.Select, { value: this.props.design.borderRadius ?? 0, onChange: this.handleBorderRadiusChange, options: spacingOptions }))));
+    }
+    renderTextComponent() {
         // If loading, don't display old values
         const exprValues = !this.state.loading ? this.state.exprValues : {};
-        return R("div", {
-            ref: (c) => {
-                this.divComp = c;
-            }
-        }, R(TextComponent_1.default, {
-            design: this.props.design,
-            onDesignChange: this.props.onDesignChange,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            exprValues,
-            width: this.props.width,
-            height: this.props.height,
-            singleRowTable: this.props.singleRowTable,
-            namedStrings: this.props.namedStrings
-        }));
+        const padding = this.props.design.padding ?? 0;
+        return (react_1.default.createElement(TextComponent_1.default, { design: this.props.design, onDesignChange: this.props.onDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, exprValues: exprValues, width: this.props.width ? this.props.width - padding * 2 : undefined, height: this.props.height ? this.props.height - padding * 2 : undefined, singleRowTable: this.props.singleRowTable, namedStrings: this.props.namedStrings }));
+    }
+    render() {
+        const borderStyle = this.props.design.borderThickness && this.props.design.borderColor
+            ? `${this.props.design.borderThickness}px solid ${this.props.design.borderColor}`
+            : undefined;
+        return (react_1.default.createElement("div", { style: {
+                backgroundColor: this.props.design.backgroundColor ?? undefined,
+                padding: this.props.design.padding != null ? `${this.props.design.padding}px` : undefined,
+                border: borderStyle,
+                borderRadius: this.props.design.borderRadius != null ? `${this.props.design.borderRadius}px` : undefined
+            }, ref: comp => this.divComp = comp },
+            this.props.onDesignChange ? (react_1.default.createElement(DropdownWidgetComponent_1.default, { dropdownItems: [{
+                        label: "Edit",
+                        onClick: this.handleEditClick
+                    }] }, this.renderTextComponent())) : (this.renderTextComponent()),
+            this.renderEditModal()));
     }
 }
 exports.default = TextWidgetComponent;

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

@@ -4,5 +4,17 @@ export interface TextWidgetDesign {
     /** Text widget stores its content as array of items. See ItemsHtmlConverter TODO */
     items: (HtmlItem | HtmlItemExpr)[];
     /** "title" for title block. default is "default" */
-    style?: "title" | "default";
+    style?: "title" | "default" | "header" | "footer";
+    /** Background color of the text widget (optional) */
+    backgroundColor?: string | null;
+    /** Extra padding for the text widget */
+    padding?: number;
+    /** Border color of the text widget (optional) */
+    borderColor?: string | null;
+    /** Border thickness of the text widget (optional) */
+    borderThickness?: number | null;
+    /** Border radius of the text widget (optional) */
+    borderRadius?: number | null;
 }
+/** Returns true if the text widget design is empty. */
+export declare function isEmptyTextWidgetDesign(design: TextWidgetDesign | undefined): boolean;

package/lib/widgets/text/TextWidgetDesign.js

@@ -1,2 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isEmptyTextWidgetDesign = void 0;
+/** Returns true if the text widget design is empty. */
+function isEmptyTextWidgetDesign(design) {
+    return design == null || design.items.length === 0;
+}
+exports.isEmptyTextWidgetDesign = isEmptyTextWidgetDesign;