@mwater/visualization 5.3.1 → 5.4.0

package/src/widgets/charts/pivot/PivotChartDesignerComponent.tsx

@@ -81,7 +81,7 @@ export default class PivotChartDesignerComponent extends React.Component<
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"),
+      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T`Data Source`),
       ": ",
       R(TableSelectComponent, {
         schema: this.props.schema,
@@ -102,7 +102,7 @@ export default class PivotChartDesignerComponent extends React.Component<
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", "Filters"),
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", T`Filters`),
       R(
         "div",
         { style: { marginLeft: 8 } },
@@ -127,7 +127,7 @@ export default class PivotChartDesignerComponent extends React.Component<
       ui.FormGroup,
       {
         labelMuted: true,
-        label: "Striping"
+        label: T`Striping`
       },
       <ui.Radio
         key="none"
@@ -136,7 +136,7 @@ export default class PivotChartDesignerComponent extends React.Component<
         value={this.props.design.striping || null}
         onChange={(value) => this.updateDesign({ striping: value })}
       >
-        None
+        {T`None`}
       </ui.Radio>,
 
       <ui.Radio
@@ -146,7 +146,7 @@ export default class PivotChartDesignerComponent extends React.Component<
         value={this.props.design.striping}
         onChange={(value) => this.updateDesign({ striping: value })}
       >
-        Columns
+        {T`Columns`}
       </ui.Radio>,
 
       <ui.Radio
@@ -156,7 +156,7 @@ export default class PivotChartDesignerComponent extends React.Component<
         radioValue={"rows"}
         onChange={(value) => this.updateDesign({ striping: value })}
       >
-        Rows
+        {T`Rows`}
       </ui.Radio>
     )
   }
@@ -172,8 +172,8 @@ export default class PivotChartDesignerComponent extends React.Component<
         ui.FormGroup,
         {
           labelMuted: true,
-          label: "Columns",
-          help: "Field to optionally make columns out of"
+          label: T`Columns`,
+          help: T`Field to optionally make columns out of`
         },
         R(AxisComponent, {
           schema: this.props.schema,
@@ -191,8 +191,8 @@ export default class PivotChartDesignerComponent extends React.Component<
         ui.FormGroup,
         {
           labelMuted: true,
-          label: "Rows",
-          help: "Field to optionally make rows out of"
+          label: T`Rows`,
+          help: T`Field to optionally make rows out of`
         },
         R(AxisComponent, {
           schema: this.props.schema,
@@ -210,8 +210,8 @@ export default class PivotChartDesignerComponent extends React.Component<
         ui.FormGroup,
         {
           labelMuted: true,
-          label: "Value",
-          help: "Field show in cells"
+          label: T`Value`,
+          help: T`Field show in cells`
         },
         R(AxisComponent, {
           schema: this.props.schema,

package/src/widgets/charts/pivot/PivotChartLayoutComponent.tsx

@@ -311,7 +311,7 @@ vertical-align: top;
             "div",
             { className: "text-warning", style: { fontSize: 12 } },
             R("i", { className: "fa fa-exclamation-circle" }),
-            " Warning: Too many rows in table to display"
+            T`Warning: Too many rows in table to display`
           )
         : undefined,
 
@@ -320,7 +320,7 @@ vertical-align: top;
             "div",
             { className: "text-warning", style: { fontSize: 12 } },
             R("i", { className: "fa fa-exclamation-circle" }),
-            " Warning: Too many columns in table to display"
+            T`Warning: Too many columns in table to display`
           )
         : undefined,
       R(
@@ -390,11 +390,11 @@ class LayoutCellComponent extends React.Component<LayoutCellComponentProps> {
     return R(
       "span",
       { style: { fontSize: "90%" } },
-      R("a", { className: "link-plain", onClick: this.props.onEditSection }, "Edit"),
+      R("a", { className: "link-plain", onClick: this.props.onEditSection }, T`Edit`),
       cell.summarize
         ? [
-            R("span", { className: "text-muted" }, " / "),
-            R("a", { className: "link-plain", onClick: this.props.onSummarizeSegment }, "Summarize")
+            R("span", { className: "text-muted" }, T` / `),
+            R("a", { className: "link-plain", onClick: this.props.onSummarizeSegment }, T`Summarize`)
           ]
         : undefined
     )

package/src/widgets/charts/pivot/PivotChartQueryBuilder.ts

@@ -40,8 +40,6 @@ export default class PivotChartQueryBuilder {
   // extraFilters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. }
   // Queries are indexed by intersection id, as one query is made for each intersection
   createQueries(design: PivotChartDesign, extraFilters: JsonQLFilter[]) {
-    const exprCompiler = new ExprCompiler(this.schema)
-
     const queries: { [intersectionId: string]: JsonQLQuery } = {}
 
     // For each intersection
@@ -79,7 +77,7 @@ export default class PivotChartQueryBuilder {
    *  ...
    *  bc: background color of the cell (if present)
    *  bcc0: background color condition 0 of the cell (if present)
-   *  bcc1: background color condition 1 of the cell (if present)
+   *  bcc1: inner row segment value (if present)
    *  ...
    * @param design - Design of the chart
    * @param rowPath - Row path
@@ -146,7 +144,7 @@ export default class PivotChartQueryBuilder {
         alias: `r${i}`
       })
       query.groupBy!.push(i + 1)
-      if (rowSegment.filter) {
+      if (rowSegment.filter && !intersection.tableOverride) {
         filters.push(rowSegment.filter)
       }
     }
@@ -159,7 +157,7 @@ export default class PivotChartQueryBuilder {
         alias: `c${i}`
       })
       query.groupBy!.push(i + 1 + rowPath.length)
-      if (columnSegment.filter) {
+      if (columnSegment.filter && !intersection.tableOverride) {
         filters.push(columnSegment.filter)
       }
     }
@@ -199,9 +197,10 @@ export default class PivotChartQueryBuilder {
       return null
     }
 
-    // Add where
-    let whereClauses = []
-    if (design.filter) {
+    let whereClauses: JsonQLExpr[] = []
+
+    // Add overall where if no table override. If table override, would be for the wrong table
+    if (design.filter && !intersection.tableOverride) {
       whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, tableAlias: "main" }))
     }
 

package/src/widgets/charts/pivot/PivotChartViewComponent.tsx

@@ -12,7 +12,7 @@ import IntersectionDesignerComponent from "./IntersectionDesignerComponent"
 import { JsonQLFilter, WidgetScope } from "../../.."
 import { PivotChartDesign, PivotChartIntersection } from "./PivotChartDesign"
 
-import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
+import { LocaleContext } from "@mwater/expressions-ui"
 
 export interface PivotChartViewComponentProps {
   schema: Schema
@@ -152,7 +152,7 @@ export default class PivotChartViewComponent extends React.Component<
   }
 
   handleSummarizeSegment = (segmentId: any) => {
-    const design = PivotChartUtils.summarizeSegment(this.props.design, segmentId, "Summary")
+    const design = PivotChartUtils.summarizeSegment(this.props.design, segmentId, T`Summary`)
 
     return this.props.onDesignChange!(design)
   }
@@ -193,12 +193,12 @@ export default class PivotChartViewComponent extends React.Component<
     }
 
     const segmentType = PivotChartUtils.findSegment(this.props.design.rows, this.state.editSegment.id)
-      ? "row"
-      : "column"
+      ? T`row`
+      : T`column`
 
     return (
       <ActionCancelModalComponent
-        title={`Edit ${segmentType}`}
+        title={T`Edit ${segmentType}`}
         onAction={this.handleSaveEditSegment}
         onCancel={this.handleCancelEditSegment}
         size="large"
@@ -223,7 +223,7 @@ export default class PivotChartViewComponent extends React.Component<
 
     return (
       <ActionCancelModalComponent
-        title="Edit Value"
+        title={T`Edit Value`}
         onAction={this.handleSaveEditIntersection}
         onCancel={this.handleCancelEditIntersection}
         size="large"

package/src/widgets/charts/pivot/SegmentDesignerComponent.tsx

@@ -90,18 +90,18 @@ export default class SegmentDesignerComponent extends React.Component<
       ui.FormGroup,
       {
         labelMuted: true,
-        label: "Type"
+        label: T`Type`
       },
       <ui.Radio key="single" value={this.state.mode} radioValue={"single"} onChange={this.handleMode}>
-        {`Single ${this.props.segmentType}`}
+        {T`Single ${this.props.segmentType}`}
         <span className="text-muted">
-          {` - used for summary ${this.props.segmentType}s and empty ${this.props.segmentType}s`}
+          {T` - used for summary ${this.props.segmentType}s and empty ${this.props.segmentType}s`}
         </span>
       </ui.Radio>,
 
       <ui.Radio key="multiple" value={this.state.mode} radioValue={"multiple"} onChange={this.handleMode}>
-        {`Multiple ${this.props.segmentType}s`}
-        <span className="text-muted">{` - disaggregate data by a field`}</span>
+        {T`Multiple ${this.props.segmentType}s`}
+        <span className="text-muted">{T` - disaggregate data by a field`}</span>
       </ui.Radio>
     )
   }
@@ -111,8 +111,8 @@ export default class SegmentDesignerComponent extends React.Component<
       ui.FormGroup,
       {
         labelMuted: true,
-        label: "Label",
-        help: this.state.mode === "multiple" ? `Optional label for the ${this.props.segmentType}s` : undefined
+        label: T`Label`,
+        help: this.state.mode === "multiple" ? T`Optional label for the ${this.props.segmentType}s` : undefined
       },
       R("input", {
         ref: (elem: HTMLInputElement | null) => {
@@ -133,7 +133,7 @@ export default class SegmentDesignerComponent extends React.Component<
     const axisType = axisBuilder.getAxisType(this.props.segment.valueAxis)
     const allowValueAxisOnlyValuesPresent = axisType == "enum" || axisType == "enumset" || axisType == "date"
 
-    return <ui.FormGroup labelMuted label="Field" help="Field to disaggregate data by">
+    return <ui.FormGroup labelMuted label={T`Field`} help={T`Field to disaggregate data by`}>
       <div style={{ marginLeft: 8 }}>
         {
           R(AxisComponent, {
@@ -154,10 +154,10 @@ export default class SegmentDesignerComponent extends React.Component<
             value={this.props.segment.valueAxisOnlyValuesPresent}
             onChange={this.handleValueAxisOnlyValuesPresentChange}
           >
-            Only show values actually present&nbsp;
+            {T`Only show values actually present`}&nbsp;
             <PopoverHelpComponent placement="bottom">
-              Limits values to those that are present in the data, as opposed
-              to all choices or all dates within range
+              {T`Limits values to those that are present in the data, as opposed
+              to all choices or all dates within range`}
             </PopoverHelpComponent>
           </ui.Checkbox>
         : null }
@@ -170,8 +170,8 @@ export default class SegmentDesignerComponent extends React.Component<
       ui.FormGroup,
       {
         labelMuted: true,
-        label: [R(ui.Icon, { id: "glyphicon-filter" }), " Filters"],
-        hint: `Filters all data associated with this ${this.props.segmentType}`
+        label: [R(ui.Icon, { id: "glyphicon-filter" }), T` Filters`],
+        hint: T`Filters all data associated with this ${this.props.segmentType}`
       },
       R(FilterExprComponent, {
         schema: this.props.schema,
@@ -188,7 +188,7 @@ export default class SegmentDesignerComponent extends React.Component<
       ui.FormGroup,
       {
         labelMuted: true,
-        label: "Styling"
+        label: T`Styling`
       },
       <div>
         <ui.Checkbox
@@ -197,7 +197,7 @@ export default class SegmentDesignerComponent extends React.Component<
           value={this.props.segment.bold === true}
           onChange={(value) => this.update({ bold: value })}
         >
-          Bold
+          {T`Bold`}
         </ui.Checkbox>
         <ui.Checkbox
           key="italic"
@@ -205,7 +205,7 @@ export default class SegmentDesignerComponent extends React.Component<
           value={this.props.segment.italic === true}
           onChange={(value) => this.update({ italic: value })}
         >
-          Italic
+          {T`Italic`}
         </ui.Checkbox>
         { this.props.segment.valueAxis && this.props.segment.label ? 
         <ui.Checkbox
@@ -214,14 +214,14 @@ export default class SegmentDesignerComponent extends React.Component<
           value={this.props.segment.valueLabelBold === true}
           onChange={(value) => this.update({ valueLabelBold: value })}
         >
-          Header Bold
+          {T`Header Bold`}
         </ui.Checkbox>
         : undefined}
         {this.props.segment.valueAxis && this.props.segment.label
           ? R(
               "div",
               { style: { paddingTop: 5 } },
-              "Shade filler cells: ",
+              T`Shade filler cells: `,
               R(ColorComponent, {
                 color: this.props.segment.fillerColor,
                 onChange: (color: any) => this.update({ fillerColor: color })
@@ -237,21 +237,21 @@ export default class SegmentDesignerComponent extends React.Component<
       ui.FormGroup,
       {
         labelMuted: true,
-        label: "Borders"
+        label: T`Borders`
       },
-      R("div", { key: "before" }, this.props.segmentType === "row" ? "Top: " : "Left: "),
+      R("div", { key: "before" }, this.props.segmentType === "row" ? T`Top: ` : T`Left: `),
       R(BorderComponent, {
         value: this.props.segment.borderBefore,
         defaultValue: 2,
         onChange: (value: any) => this.update({ borderBefore: value })
       }),
-      R("div", { key: "within" }, "Within: "),
+      R("div", { key: "within" }, T`Within: `),
       R(BorderComponent, {
         value: this.props.segment.borderWithin,
         defaultValue: 1,
         onChange: (value: any) => this.update({ borderWithin: value })
       }),
-      R("div", { key: "after" }, this.props.segmentType === "row" ? "Bottom: " : "Right: "),
+      R("div", { key: "after" }, this.props.segmentType === "row" ? T`Bottom: ` : T`Right: `),
       R(BorderComponent, {
         value: this.props.segment.borderAfter,
         defaultValue: 2,
@@ -265,8 +265,8 @@ export default class SegmentDesignerComponent extends React.Component<
       ui.FormGroup,
       {
         labelMuted: true,
-        label: [R(ui.Icon, { id: "fa-sort-amount-asc" }), " Sort"],
-        hint: `Sorts the display of this ${this.props.segmentType}`
+        label: [R(ui.Icon, { id: "fa-sort-amount-asc" }), T` Sort`],
+        hint: T`Sorts the display of this ${this.props.segmentType}`
       },
       R(ExprComponent, {
         schema: this.props.schema,
@@ -290,7 +290,7 @@ export default class SegmentDesignerComponent extends React.Component<
                 onChange: this.handleOrderDirChange,
                 inline: true
               },
-              "Ascending"
+              T`Ascending`
             ),
             R(
               ui.Radio,
@@ -300,7 +300,7 @@ export default class SegmentDesignerComponent extends React.Component<
                 onChange: this.handleOrderDirChange,
                 inline: true
               },
-              "Descending"
+              T`Descending`
             )
           )
         : undefined
@@ -337,16 +337,16 @@ class BorderComponent extends React.Component<BorderComponentProps> {
       "span",
       null,
       <Radio inline value={value} radioValue={0} onChange={() => this.props.onChange(0)}>
-        None
+        {T`None`}
       </Radio>,
       <Radio inline value={value} radioValue={1} onChange={() => this.props.onChange(1)}>
-        Light
+        {T`Light`}
       </Radio>,
       <Radio inline value={value} radioValue={2} onChange={() => this.props.onChange(2)}>
-        Medium
+        {T`Medium`}
       </Radio>,
       <Radio inline value={value} radioValue={3} onChange={() => this.props.onChange(3)}>
-        Heavy
+        {T`Heavy`}
       </Radio>
     )
   }

package/src/widgets/charts/table/OrderingsComponent.tsx

@@ -56,7 +56,7 @@ export default class OrderingsComponent extends React.Component<OrderingsCompone
         "button",
         { type: "button", className: "btn btn-sm btn-secondary", onClick: this.handleAdd, key: "add" },
         R("span", { className: "fas fa-plus" }),
-        " Add Ordering"
+        T` Add Ordering`
       )
     )
   }
@@ -111,7 +111,7 @@ class OrderingComponent extends React.Component<OrderingComponentProps> {
         "div",
         null,
         <Checkbox inline value={this.props.ordering.direction === "desc"} onChange={this.handleDirectionChange}>
-          Reverse
+          {T`Reverse`}
         </Checkbox>
       )
     )

package/src/widgets/charts/table/TableChart.ts

@@ -135,7 +135,7 @@ export default class TableChart extends Chart {
 
     // Check that has table
     if (!design.table) {
-      return "Missing data source"
+      return T`Missing data source`
     }
 
     let error = null
@@ -143,7 +143,7 @@ export default class TableChart extends Chart {
     for (let column of design.columns) {
       // Check that has textAxis
       if (!column.textAxis) {
-        error = error || "Missing text"
+        error = error || T`Missing text`
       }
 
       error = error || axisBuilder.validateAxis({ axis: column.textAxis })
@@ -151,7 +151,7 @@ export default class TableChart extends Chart {
 
     for (let ordering of design.orderings) {
       if (!ordering.axis) {
-        error = error || "Missing order expression"
+        error = error || T`Missing order expression`
       }
       error = error || axisBuilder.validateAxis({ axis: ordering.axis })
     }

package/src/widgets/charts/table/TableChartDesignerComponent.ts

@@ -16,7 +16,7 @@ import { TableChartColumn, TableChartDesign } from "./TableChart"
 import AxisComponent from "../../../axes/AxisComponent"
 import { Axis } from "../../../axes/Axis"
 
-import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
+import { LocaleContext } from "@mwater/expressions-ui"
 
 export interface TableChartDesignerComponentProps {
   design: TableChartDesign
@@ -70,7 +70,7 @@ export default class TableChartDesignerComponent extends React.Component<TableCh
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"),
+      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T`Data Source`),
       ": ",
       R(TableSelectComponent, {
         schema: this.props.schema,
@@ -86,13 +86,13 @@ export default class TableChartDesignerComponent extends React.Component<TableCh
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, "Title"),
+      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: "Untitled"
+        placeholder: T`Untitled`
       })
     )
   }
@@ -145,7 +145,7 @@ export default class TableChartDesignerComponent extends React.Component<TableCh
         "button",
         { className: "btn btn-secondary btn-sm", type: "button", onClick: this.handleAddColumn },
         R("span", { className: "fas fa-plus" }),
-        " Add Column"
+        " ", T`Add Column`
       )
     )
   }
@@ -162,7 +162,7 @@ export default class TableChartDesignerComponent extends React.Component<TableCh
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-sort-amount-down" }), " ", "Ordering"),
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-sort-amount-down" }), " ", T`Ordering`),
       R(
         "div",
         { style: { marginLeft: 8 } },
@@ -186,7 +186,7 @@ export default class TableChartDesignerComponent extends React.Component<TableCh
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", "Filters"),
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", T`Filters`),
       R(
         "div",
         { style: { marginLeft: 8 } },
@@ -210,7 +210,7 @@ export default class TableChartDesignerComponent extends React.Component<TableCh
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, "Maximum Number of Rows (up to 1000)"),
+      R("label", { className: "text-muted" }, T`Maximum Number of Rows (up to 1000)`),
       R(
         "div",
         { style: { marginLeft: 8 } },
@@ -291,7 +291,7 @@ class TableChartColumnDesignerComponent extends React.Component<TableChartColumn
   renderExpr() {
     const column = this.props.design.columns[this.props.index]
 
-    const title = "Value"
+    const title = T`Value`
 
     return R(
       "div",
@@ -327,7 +327,7 @@ class TableChartColumnDesignerComponent extends React.Component<TableChartColumn
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, "Format"),
+      R("label", { className: "text-muted" }, T`Format`),
       ": ",
       R(
         "select",
@@ -351,7 +351,7 @@ class TableChartColumnDesignerComponent extends React.Component<TableChartColumn
     return R(
       "div",
       null,
-      R("label", { className: "text-muted" }, "Header"),
+      R("label", { className: "text-muted" }, T`Header`),
       ": ",
       R("input", {
         type: "text",
@@ -373,16 +373,16 @@ class TableChartColumnDesignerComponent extends React.Component<TableChartColumn
     }
 
     return R('div', null, 
-      R(ui.Checkbox, {value: column.summarize, inline: true, onChange: (summarize) => this.updateColumn({ summarize, summaryType: column.summaryType ?? 'sum' })}, "Summarize"),
+      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" }, "Summary Type"),
+        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: 'Average'}, {value: 'sum', label: 'Sum'}, {value: 'min', label: 'Minimum'}, {value: 'max', label: 'Maximum'} ]
+          options: [{value: 'avg', label: T`Average`}, {value: 'sum', label: T`Sum`}, {value: 'min', label: T`Minimum`}, {value: 'max', label: T`Maximum`} ]
         })
       ) : undefined
     ) 
@@ -396,7 +396,7 @@ class TableChartColumnDesignerComponent extends React.Component<TableChartColumn
     return R(
       ui.CollapsibleSection,
       {
-        label: "Background color by data",
+        label: T`Background color by data`,
         labelMuted: true
       },
       R(AxisComponent, {
@@ -426,7 +426,7 @@ class TableChartColumnDesignerComponent extends React.Component<TableChartColumn
       null,
       this.props.connectDragSource(R("i", { className: "fa fa-bars", style: iconStyle })),
       this.renderRemove(),
-      R("label", null, `Column ${this.props.index + 1}`),
+      R("label", null, T`Column ${this.props.index + 1}`),
       R(
         "div", 
         { style: { marginLeft: 5 } }, 

package/src/widgets/charts/table/TableChartViewComponent.ts

@@ -8,7 +8,7 @@ import { formatValue } from "../../../valueFormatter"
 import { Image } from "@mwater/forms/lib/RotationAwareImageComponent"
 import { TableChartColumn, TableChartDesign } from "./TableChart"
 import Color from "color"
-import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
+import { LocaleContext } from "@mwater/expressions-ui"
 
 export interface TableChartViewComponentProps {
   /** Design of chart */
@@ -222,7 +222,7 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
 
   renderImage(id: any) {
     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 } }, "Image")
+    return R("a", { href: url, onClick: (e) => {e.stopPropagation()}, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, T`Image`)
   }
 
   renderCell(rowIndex: any, columnIndex: any) {

package/src/widgets/text/{ExprInsertModalComponent.ts → ExprInsertModalComponent.tsx}

@@ -1,13 +1,11 @@
-import React from "react"
-const R = React.createElement
-
+import React, { useState } from "react"
 import uuid from "uuid"
 import { DataSource, Schema } from "@mwater/expressions"
 import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
 import ExprItemEditorComponent from "./ExprItemEditorComponent"
 import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter"
 
-export interface ExprInsertModalComponentProps {
+interface ExprInsertModalComponentProps {
   /** Schema to use */
   schema: Schema
   /** Data source to use to get values */
@@ -56,22 +54,22 @@ export default class ExprInsertModalComponent extends React.Component<
       return null
     }
 
-    return R(
-      ActionCancelModalComponent,
-      {
-        actionLabel: "Insert",
-        onAction: this.handleInsert,
-        onCancel: () => this.setState({ open: false }),
-        title: "Insert Field",
-        size: "x-large"
-      },
-      R(ExprItemEditorComponent, {
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        exprItem: this.state.exprItem,
-        onChange: (exprItem: any) => this.setState({ exprItem }),
-        singleRowTable: this.props.singleRowTable
-      })
+    return (
+      <ActionCancelModalComponent
+        actionLabel={T`Insert`}
+        onAction={this.handleInsert}
+        onCancel={() => this.setState({ open: false })}
+        title={T`Insert Field`}
+        size="x-large"
+      >
+        <ExprItemEditorComponent
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          exprItem={this.state.exprItem!}
+          onChange={(exprItem: HtmlItemExpr) => this.setState({ exprItem })}
+          singleRowTable={this.props.singleRowTable}
+        />
+      </ActionCancelModalComponent>
     )
   }
 }