@mwater/visualization 5.4.5 → 5.6.0

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

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (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 uuid_1 = __importDefault(require("uuid"));
 const expressions_1 = require("@mwater/expressions");
 const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
@@ -79,22 +78,18 @@ class TableChartDesignerComponent extends react_1.default.Component {
         this.updateDesign({ columns });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T `Data Source`), ": ", R(expressions_ui_3.TableSelectComponent, {
-            schema: this.props.schema,
-            value: this.props.design.table,
-            onChange: this.handleTableChange,
-            filter: this.props.design.filter,
-            onFilterChange: this.handleFilterChange
-        }));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("i", { className: "fa fa-database" }),
+                " ",
+                T `Data Source`),
+            ": ",
+            react_1.default.createElement(expressions_ui_3.TableSelectComponent, { schema: this.props.schema, value: this.props.design.table, onChange: this.handleTableChange, filter: this.props.design.filter, onFilterChange: this.handleFilterChange })));
     }
     renderTitle() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Title`), R("input", {
-            type: "text",
-            className: "form-control form-control-sm",
-            value: this.props.design.titleText,
-            onChange: this.handleTitleTextChange,
-            placeholder: T `Untitled`
-        }));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Title`),
+            react_1.default.createElement("input", { type: "text", className: "form-control form-control-sm", value: this.props.design.titleText, onChange: this.handleTitleTextChange, placeholder: T `Untitled` })));
     }
     renderColumn = (column, index, connectDragSource, connectDragPreview, connectDropTarget) => {
         const style = {
@@ -102,15 +97,8 @@ class TableChartDesignerComponent extends react_1.default.Component {
             paddingTop: 10,
             paddingBottom: 10
         };
-        return connectDragPreview(connectDropTarget(R("div", { key: index, style }, react_1.default.createElement(TableChartColumnDesignerComponent, {
-            design: this.props.design,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            index,
-            onChange: this.handleColumnChange.bind(null, index),
-            onRemove: this.handleRemoveColumn.bind(null, index),
-            connectDragSource
-        }))));
+        return connectDragPreview(connectDropTarget(react_1.default.createElement("div", { key: index, style: style },
+            react_1.default.createElement(TableChartColumnDesignerComponent, { design: this.props.design, schema: this.props.schema, dataSource: this.props.dataSource, index: index, onChange: this.handleColumnChange.bind(null, index), onRemove: this.handleRemoveColumn.bind(null, index), connectDragSource: connectDragSource }))));
     };
     handleReorder = (map) => {
         return this.updateDesign({ columns: map });
@@ -119,12 +107,12 @@ class TableChartDesignerComponent extends react_1.default.Component {
         if (!this.props.design.table) {
             return;
         }
-        return R("div", null, R(ReorderableListComponent_1.default, {
-            items: this.props.design.columns,
-            onReorder: this.handleReorder,
-            renderItem: this.renderColumn,
-            getItemId: (item) => item.id
-        }), R("button", { className: "btn btn-secondary btn-sm", type: "button", onClick: this.handleAddColumn }, R("span", { className: "fas fa-plus" }), " ", T `Add Column`));
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(ReorderableListComponent_1.default, { items: this.props.design.columns, onReorder: this.handleReorder, renderItem: this.renderColumn, getItemId: (item) => item.id }),
+            react_1.default.createElement("button", { className: "btn btn-secondary btn-sm", type: "button", onClick: this.handleAddColumn },
+                react_1.default.createElement("span", { className: "fas fa-plus" }),
+                " ",
+                T `Add Column`)));
     }
     // return R 'div', className: "form-group",
     //   _.map(@props.design.columns, (column, i) => @renderColumn(i))
@@ -134,41 +122,47 @@ class TableChartDesignerComponent extends react_1.default.Component {
         if (!this.props.design.table) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-sort-amount-down" }), " ", T `Ordering`), R("div", { style: { marginLeft: 8 } }, react_1.default.createElement(OrderingsComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            orderings: this.props.design.orderings,
-            onOrderingsChange: this.handleOrderingsChange,
-            table: this.props.design.table
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("span", { className: "fas fa-sort-amount-down" }),
+                " ",
+                T `Ordering`),
+            react_1.default.createElement("div", { style: { marginLeft: 8 } },
+                react_1.default.createElement(OrderingsComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, orderings: this.props.design.orderings, onOrderingsChange: this.handleOrderingsChange, table: this.props.design.table }))));
     }
     renderFilter() {
         // If no table, hide
         if (!this.props.design.table) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", T `Filters`), R("div", { style: { marginLeft: 8 } }, react_1.default.createElement(expressions_ui_2.FilterExprComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            onChange: this.handleFilterChange,
-            table: this.props.design.table,
-            value: this.props.design.filter
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("span", { className: "fas fa-filter" }),
+                " ",
+                T `Filters`),
+            react_1.default.createElement("div", { style: { marginLeft: 8 } },
+                react_1.default.createElement(expressions_ui_2.FilterExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, onChange: this.handleFilterChange, table: this.props.design.table, value: this.props.design.filter }))));
     }
     renderLimit() {
         // If no table, hide
         if (!this.props.design.table) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Maximum Number of Rows (up to 1000)`), R("div", { style: { marginLeft: 8 } }, R(ui.NumberInput, {
-            value: this.props.design.limit,
-            onChange: this.handleLimitChange,
-            decimal: false,
-            placeholder: "1000"
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Maximum Number of Rows (up to 1000)`),
+            react_1.default.createElement("div", { style: { marginLeft: 8 } },
+                react_1.default.createElement(ui.NumberInput, { value: this.props.design.limit, onChange: this.handleLimitChange, decimal: false, placeholder: "1000" }))));
     }
     render() {
-        return R("div", null, this.renderTable(), this.renderColumns(), this.props.design.table ? R("hr") : undefined, this.renderOrderings(), this.renderFilter(), this.renderLimit(), R("hr"), this.renderTitle());
+        return (react_1.default.createElement("div", null,
+            this.renderTable(),
+            this.renderColumns(),
+            this.props.design.table ? react_1.default.createElement("hr", null) : undefined,
+            this.renderOrderings(),
+            this.renderFilter(),
+            this.renderLimit(),
+            react_1.default.createElement("hr", null),
+            this.renderTitle()));
     }
 }
 exports.default = TableChartDesignerComponent;
@@ -197,21 +191,18 @@ class TableChartColumnDesignerComponent extends react_1.default.Component {
     };
     renderRemove() {
         if (this.props.design.columns.length > 1) {
-            return R("button", { className: "btn btn-sm btn-link float-end", type: "button", onClick: this.props.onRemove }, R("span", { className: "fas fa-times" }));
+            return (react_1.default.createElement("button", { className: "btn btn-sm btn-link float-end", type: "button", onClick: this.props.onRemove },
+                react_1.default.createElement("span", { className: "fas fa-times" })));
         }
         return null;
     }
     renderExpr() {
         const column = this.props.design.columns[this.props.index];
         const title = T `Value`;
-        return R("div", null, R("label", { className: "text-muted" }, title), ": ", react_1.default.createElement(expressions_ui_1.ExprComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            value: column.textAxis ? column.textAxis.expr : null,
-            onChange: this.handleExprChange,
-            aggrStatuses: ["literal", "individual", "aggregate"]
-        }));
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("label", { className: "text-muted" }, title),
+            ": ",
+            react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, value: column.textAxis ? column.textAxis.expr : null, onChange: this.handleExprChange, aggrStatuses: ["literal", "individual", "aggregate"] })));
     }
     renderFormat() {
         const column = this.props.design.columns[this.props.index];
@@ -225,25 +216,19 @@ class TableChartColumnDesignerComponent extends react_1.default.Component {
         if (!formats) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Format`), ": ", R("select", {
-            value: column.format != null ? column.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))));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Format`),
+            ": ",
+            react_1.default.createElement("select", { value: column.format != null ? column.format : (0, valueFormatter_2.getDefaultFormat)(exprType), className: "form-select", style: { width: "auto", display: "inline-block" }, onChange: this.handleFormatChange }, lodash_1.default.map(formats, (format) => react_1.default.createElement("option", { key: format.value, value: format.value }, format.label)))));
     }
     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) : "";
-        return R("div", null, R("label", { className: "text-muted" }, T `Header`), ": ", R("input", {
-            type: "text",
-            className: "form-control form-control-sm",
-            style: { display: "inline-block", width: "15em" },
-            value: column.headerText,
-            onChange: this.handleHeaderTextChange,
-            placeholder
-        }));
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("label", { className: "text-muted" }, T `Header`),
+            ": ",
+            react_1.default.createElement("input", { type: "text", className: "form-control form-control-sm", style: { display: "inline-block", width: "15em" }, value: column.headerText, onChange: this.handleHeaderTextChange, placeholder: placeholder })));
     }
     renderSummarize() {
         const column = this.props.design.columns[this.props.index];
@@ -252,31 +237,21 @@ class TableChartColumnDesignerComponent extends react_1.default.Component {
         if (!exprType || exprType !== 'number') {
             return null;
         }
-        return R('div', null, R(ui.Checkbox, { value: column.summarize, inline: true, onChange: (summarize) => this.updateColumn({ summarize, summaryType: column.summaryType ?? 'sum' }) }, T `Summarize`), column.summarize ?
-            R('div', null, R("label", { className: "text-muted" }, T `Summary Type`), ": ", R(ui.Select, {
-                inline: true,
-                value: column.summaryType,
-                onChange: (summaryType) => this.updateColumn({ summaryType }),
-                options: [{ value: 'avg', label: T `Average` }, { value: 'sum', label: T `Sum` }, { value: 'min', label: T `Minimum` }, { value: 'max', label: T `Maximum` }]
-            })) : undefined);
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(ui.Checkbox, { value: column.summarize, inline: true, onChange: (summarize) => this.updateColumn({ summarize, summaryType: column.summaryType ?? 'sum' }) }, T `Summarize`),
+            column.summarize ?
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { className: "text-muted" }, T `Summary Type`),
+                    ": ",
+                    react_1.default.createElement(ui.Select, { inline: true, value: column.summaryType, onChange: (summaryType) => this.updateColumn({ summaryType }), options: [{ value: 'avg', label: T `Average` }, { value: 'sum', label: T `Sum` }, { value: 'min', label: T `Minimum` }, { value: 'max', label: T `Maximum` }] }))
+                : undefined));
     }
     renderBackgroundColorAxis() {
         const column = this.props.design.columns[this.props.index];
         if (!column.textAxis)
             return null;
-        return R(ui.CollapsibleSection, {
-            label: T `Background color by data`,
-            labelMuted: true
-        }, R(AxisComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            types: ["enum", "text", "boolean", "date"],
-            value: column.backgroundColorAxis,
-            onChange: (backgroundColorAxis) => this.updateColumn({ backgroundColorAxis }),
-            showColorMap: true,
-            aggrNeed: "optional"
-        }));
+        return (react_1.default.createElement(ui.CollapsibleSection, { label: T `Background color by data`, labelMuted: true },
+            react_1.default.createElement(AxisComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, types: ["enum", "text", "boolean", "date"], value: column.backgroundColorAxis, onChange: (backgroundColorAxis) => this.updateColumn({ backgroundColorAxis }), showColorMap: true, aggrNeed: "optional" })));
     }
     render() {
         const iconStyle = {
@@ -286,6 +261,15 @@ class TableChartColumnDesignerComponent extends react_1.default.Component {
             fontSize: 12,
             height: 20
         };
-        return R("div", null, this.props.connectDragSource(R("i", { className: "fa fa-bars", style: iconStyle })), this.renderRemove(), R("label", null, T `Column ${this.props.index + 1}`), R("div", { style: { marginLeft: 5 } }, this.renderExpr(), this.renderFormat(), this.renderHeader(), this.renderSummarize(), this.renderBackgroundColorAxis()));
+        return (react_1.default.createElement("div", null,
+            this.props.connectDragSource(react_1.default.createElement("i", { className: "fa fa-bars", style: iconStyle })),
+            this.renderRemove(),
+            react_1.default.createElement("label", null, T `Column ${this.props.index + 1}`),
+            react_1.default.createElement("div", { style: { marginLeft: 5 } },
+                this.renderExpr(),
+                this.renderFormat(),
+                this.renderHeader(),
+                this.renderSummarize(),
+                this.renderBackgroundColorAxis())));
     }
 }

package/lib/widgets/charts/table/TableChartViewComponent.d.ts

@@ -19,11 +19,5 @@ export interface TableChartViewComponentProps {
 }
 export default class TableChartViewComponent extends React.Component<TableChartViewComponentProps> {
     shouldComponentUpdate(prevProps: TableChartViewComponentProps): boolean;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            width: number | undefined;
-            height: number | undefined;
-        };
-        className: string;
-    }, HTMLElement>;
+    render(): React.JSX.Element;
 }

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

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (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 react_linkify_1 = __importDefault(require("react-linkify"));
 const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
 const expressions_1 = require("@mwater/expressions");
@@ -21,14 +20,9 @@ class TableChartViewComponent extends react_1.default.Component {
             width: this.props.width,
             height: this.props.height
         };
-        return R("div", { style, className: "overflow-auto-except-print" }, R("div", { style: { fontWeight: "bold", textAlign: "center" } }, this.props.design.titleText), R(TableContentsComponent, {
-            columns: this.props.design.columns,
-            table: this.props.design.table,
-            data: this.props.data,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            onRowClick: this.props.onRowClick
-        }));
+        return (react_1.default.createElement("div", { style: style, className: "overflow-auto-except-print" },
+            react_1.default.createElement("div", { style: { fontWeight: "bold", textAlign: "center" } }, this.props.design.titleText),
+            react_1.default.createElement(TableContentsComponent, { columns: this.props.design.columns, table: this.props.design.table, data: this.props.data, schema: this.props.schema, dataSource: this.props.dataSource, onRowClick: this.props.onRowClick })));
     }
 }
 exports.default = TableChartViewComponent;
@@ -90,19 +84,13 @@ class TableContentsComponent extends react_1.default.Component {
         const column = this.props.columns[index];
         //(this.state.sort?.direction === 'asc' ? "":"")
         const text = column.headerText ?? (column.textAxis ? axisBuilder.summarizeAxis(column.textAxis, this.context) : "");
-        return R("th", {
-            key: index,
-            style: { cursor: "pointer" },
-            onClick: () => this.handleSort(index)
-        }, text, this.state.sort?.column === index
-            ? R("span", {
-                style: { marginLeft: 10 },
-                className: `fa ${this.state.sort?.direction === "asc" ? "fa-sort-asc" : "fa-sort-desc"}`
-            })
-            : undefined);
+        return (react_1.default.createElement("th", { key: index, style: { cursor: "pointer" }, onClick: () => this.handleSort(index) },
+            text,
+            this.state.sort?.column === index ? (react_1.default.createElement("span", { style: { marginLeft: 10 }, className: `fa ${this.state.sort?.direction === "asc" ? "fa-sort-asc" : "fa-sort-desc"}` })) : undefined));
     }
     renderHeader() {
-        return R("thead", { key: "head" }, R("tr", { key: "head" }, lodash_1.default.map(this.props.columns, (column, i) => this.renderHeaderCell(i))));
+        return (react_1.default.createElement("thead", { key: "head" },
+            react_1.default.createElement("tr", { key: "head" }, lodash_1.default.map(this.props.columns, (column, i) => this.renderHeaderCell(i)))));
     }
     renderFooterCell(index) {
         const exprUtils = new expressions_1.ExprUtils(this.props.schema);
@@ -120,11 +108,12 @@ class TableContentsComponent extends react_1.default.Component {
         if (!this.props.data.summary) {
             return null;
         }
-        return R("tfoot", { key: "foot" }, R("tr", { key: "foot" }, lodash_1.default.map(this.props.columns, (column, i) => R("th", { key: i }, this.renderFooterCell(i)))));
+        return (react_1.default.createElement("tfoot", { key: "foot" },
+            react_1.default.createElement("tr", { key: "foot" }, lodash_1.default.map(this.props.columns, (column, i) => react_1.default.createElement("th", { key: i }, this.renderFooterCell(i))))));
     }
     renderImage(id) {
         const url = this.props.dataSource.getImageUrl(id);
-        return R("a", { href: url, onClick: (e) => { e.stopPropagation(); }, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, T `Image`);
+        return (react_1.default.createElement("a", { href: url, onClick: (e) => { e.stopPropagation(); }, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, T `Image`));
     }
     renderCell(rowIndex, columnIndex) {
         const axisBuilder = new AxisBuilder_1.default({ schema: this.props.schema });
@@ -163,7 +152,7 @@ class TableContentsComponent extends react_1.default.Component {
                 switch (exprType) {
                     case "text":
                         if (lodash_1.default.isString(value)) {
-                            node = R(react_linkify_1.default, { properties: { target: "_blank" } }, value);
+                            node = react_1.default.createElement(react_linkify_1.default, { properties: { target: "_blank" } }, value);
                         }
                         break;
                     case "number":
@@ -211,15 +200,18 @@ class TableContentsComponent extends react_1.default.Component {
             const lightness = 1 - (1 - c.luminosity()) * c.alpha();
             textColor = lightness < 0.3 ? "rgb(204,204,204)" : "inherit";
         }
-        return R("td", { key: columnIndex, style: { backgroundColor, color: textColor } }, node);
+        return react_1.default.createElement("td", { key: columnIndex, style: { backgroundColor, color: textColor } }, node);
     }
     renderRow(index) {
-        return R("tr", { key: index, onClick: this.handleRowClick.bind(null, index) }, lodash_1.default.map(this.props.columns, (column, i) => this.renderCell(index, i)));
+        return (react_1.default.createElement("tr", { key: index, onClick: this.handleRowClick.bind(null, index) }, lodash_1.default.map(this.props.columns, (column, i) => this.renderCell(index, i))));
     }
     renderBody() {
-        return R("tbody", { key: "body" }, lodash_1.default.map(this.state.data, (row, i) => this.renderRow(i)));
+        return (react_1.default.createElement("tbody", { key: "body" }, lodash_1.default.map(this.state.data, (row, i) => this.renderRow(i))));
     }
     render() {
-        return R("table", { className: "mwater-visualization-table", style: { marginBottom: 0 } }, this.renderHeader(), this.renderBody(), this.renderFooter());
+        return (react_1.default.createElement("table", { className: "mwater-visualization-table", style: { marginBottom: 0 } },
+            this.renderHeader(),
+            this.renderBody(),
+            this.renderFooter()));
     }
 }

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

@@ -10,6 +10,7 @@ export interface ExprItemEditorComponentProps {
     exprItem: HtmlItemExpr;
     /** Called with expr item */
     onChange: (exprItem: HtmlItemExpr) => void;
+    /** Optional table that will be filtered to have a single row present. Widget designer should optionally account for this */
     singleRowTable?: string;
 }
 interface ExprItemEditorComponentState {
@@ -22,13 +23,7 @@ export default class ExprItemEditorComponent extends React.Component<ExprItemEdi
     handleIncludeLabelChange: (value: any) => void;
     handleLabelTextChange: (ev: any) => void;
     handleFormatChange: (ev: any) => void;
-    renderFormat(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | null;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            paddingBottom: number;
-        };
-    }, HTMLElement>;
+    renderFormat(): React.JSX.Element | null;
+    render(): React.JSX.Element;
 }
 export {};

package/lib/widgets/text/ExprItemEditorComponent.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (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 expressions_ui_2 = require("@mwater/expressions-ui");
@@ -53,40 +52,44 @@ class ExprItemEditorComponent extends react_1.default.Component {
         if (!formats) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `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))));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Format`),
+            ": ",
+            react_1.default.createElement("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) => react_1.default.createElement("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" }), " ", T `Data Source`), ": ", R(expressions_ui_2.TableSelectComponent, {
-            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" }, T `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 }, T `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());
+        const exprValidator = new expressions_1.ExprValidator(this.props.schema);
+        const error = exprValidator.validateExpr(this.props.exprItem.expr, {
+            table: this.state.table,
+            aggrStatuses: ["individual", "literal", "aggregate"]
+        });
+        return (react_1.default.createElement("div", { style: { paddingBottom: 200 } },
+            react_1.default.createElement("div", { className: "mb-3" },
+                react_1.default.createElement("label", { className: "text-muted" },
+                    react_1.default.createElement("i", { className: "fa fa-database" }),
+                    " ",
+                    T `Data Source`),
+                ": ",
+                react_1.default.createElement(expressions_ui_2.TableSelectComponent, { schema: this.props.schema, value: this.state.table, onChange: this.handleTableChange }),
+                react_1.default.createElement("br", null)),
+            this.state.table
+                ? (react_1.default.createElement("div", { className: "mb-3" },
+                    react_1.default.createElement("label", { className: "text-muted" }, T `Field`),
+                    ": ",
+                    react_1.default.createElement(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,
+            error ? react_1.default.createElement("div", { className: "alert alert-danger" },
+                react_1.default.createElement("i", { className: "fa fa-exclamation-circle" }),
+                " ",
+                error) : undefined,
+            this.state.table && this.props.exprItem.expr
+                ? (react_1.default.createElement("div", { className: "mb-3" },
+                    react_1.default.createElement(bootstrap_1.Checkbox, { key: "includeLabel", value: this.props.exprItem.includeLabel, onChange: this.handleIncludeLabelChange }, T `Include Label`),
+                    this.props.exprItem.includeLabel
+                        ? react_1.default.createElement("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

@@ -6,6 +6,7 @@ export interface ExprUpdateModalComponentProps {
     schema: Schema;
     /** Data source to use to get values */
     dataSource: DataSource;
+    /** Optional table that will be filtered to have a single row present. Widget designer should optionally account for this */
     singleRowTable?: string;
 }
 interface ExprUpdateModalComponentState {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mwater/visualization",
-  "version": "5.4.5",
+  "version": "5.6.0",
   "description": "Visualization library",
   "main": "lib/index.js",
   "scripts": {
@@ -10,11 +10,6 @@
     "build": "rsync -av --exclude '*.ts' --exclude '*.tsx' src/ lib/ ; tsc -p tsconfig.build.json",
     "prepublish": "npm run build"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm test"
-    }
-  },
   "style": "lib/index.css",
   "author": "mWater",
   "license": "MIT",
@@ -41,7 +36,7 @@
     "d3-tip": "^0.9.0",
     "dayjs": "^1.11.10",
     "dompurify": "^1.0.11",
-    "ez-localize": "^2.13.0",
+    "ez-localize": "^2.15.0",
     "file-saver": "^2.0.5",
     "immer": "^8.0.0",
     "immutable-setter": "^1.1.1",
@@ -75,10 +70,10 @@
     "shallowequal": "^0.2.2",
     "update-object": "^1.0.0",
     "utm": "^1.1.1",
-    "uuid": "^3.4.0"
+    "uuid": "^3.4.0",
+    "xlsx-js-style": "^1.2.0"
   },
   "devDependencies": {
-    "@kadira/storybook": "^2.21.0",
     "@types/chai": "^4.3.0",
     "@types/color": "^3.0.2",
     "@types/d3": "^5.16.4",
@@ -101,7 +96,6 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "esbuild": "^0.8.34",
-    "husky": "^1.0.0-rc.13",
     "ignore-styles": "^5.0.1",
     "jsdom": "^15.2.1",
     "react-addons-test-utils": "^0.14.0",

package/src/MWaterContextComponent.tsx

@@ -2,7 +2,7 @@ import _ from "lodash"
 import React, { createContext } from "react"
 const R = React.createElement
 
-import MWaterTableSelectComponent from "./MWaterTableSelectComponent"
+import MWaterTableSelectComponent from "./mwater_table_selection/MWaterTableSelectComponent"
 import MWaterAddRelatedFormComponent from "./MWaterAddRelatedFormComponent"
 import MWaterAddRelatedIndicatorComponent from "./MWaterAddRelatedIndicatorComponent"
 import MWaterGlobalFiltersComponent from "./MWaterGlobalFiltersComponent"
@@ -18,7 +18,7 @@ export interface GlobalFiltersElementFactoryProps {
   dataSource: DataSource
   filterableTables: string[]
   globalFilters?: GlobalFilter[]
-  onChange: (globalFilters: GlobalFilter[]) => void
+  onChange?: (globalFilters: GlobalFilter[]) => void
 
   /** If true, return null element if not applicable to filterableTables */
   nullIfIrrelevant?: boolean