@mwater/visualization 5.4.1 → 5.4.2

package/lib/widgets/text/TextComponent.js

@@ -10,8 +10,10 @@ const ExprInsertModalComponent_1 = __importDefault(require("./ExprInsertModalCom
 const ExprUpdateModalComponent_1 = __importDefault(require("./ExprUpdateModalComponent"));
 const ExprItemsHtmlConverter_1 = __importDefault(require("../../richtext/ExprItemsHtmlConverter"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
-// 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
+/**
+ * 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 contextType = expressions_ui_1.LocaleContext;
     exprInsertModal = null;
@@ -19,7 +21,7 @@ class TextComponent extends react_1.default.Component {
     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
+        // Display summaries if in design mode 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);
@@ -45,22 +47,23 @@ class TextComponent extends react_1.default.Component {
             }
         });
         const items = replaceItemInItems(this.props.design.items || [], item);
-        return this.props.onDesignChange({ ...this.props.design, items });
+        this.props.onDesignChange({ ...this.props.design, items });
     }
     handleItemClick = (item) => {
-        return this.exprUpdateModal.open(item, (item) => {
+        this.exprUpdateModal.open(item, (item) => {
             // Replace in items
-            return this.replaceItem(item);
+            this.replaceItem(item);
         });
     };
     handleAddExpr = (ev) => {
         ev.preventDefault();
-        return this.exprInsertModal.open();
+        this.exprInsertModal.open();
     };
     renderExtraPaletteButtons() {
         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" }),
-            T ` Expression`));
+            " ",
+            T `Expression`));
     }
     renderModals() {
         return [

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

@@ -11,8 +11,8 @@ export default class TextWidget extends Widget {
         dataSource: DataSource;
         widgetDataSource: import("../WidgetDataSource").WidgetDataSource;
         filters: JsonQLFilter[];
-        design: object;
-        onDesignChange: ((design: object) => void) | null | undefined;
+        design: any;
+        onDesignChange: ((design: any) => void) | null | undefined;
         width: number | undefined;
         height: number | undefined;
         singleRowTable: string | undefined;
@@ -21,10 +21,13 @@ export default class TextWidget extends Widget {
         } | undefined;
         ref: ((widget: any) => void) | undefined;
         refreshKey: any;
+        locale: string;
+        translate: (input: string) => string;
     }, any>;
     getData(design: any, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): any;
     isAutoHeight(): boolean;
-    getExprItems(items: HtmlItem[]): HtmlItemExpr[];
+    getExprItems(items?: HtmlItem[]): HtmlItemExpr[];
     getFilterableTables(design: TextWidgetDesign | undefined, schema: Schema): string[];
     getTOCEntries(design: any, namedStrings: any): any;
+    getTranslatableStrings(design: TextWidgetDesign, schema: Schema): string[];
 }

package/lib/widgets/text/TextWidget.js

@@ -12,6 +12,7 @@ const expressions_2 = require("@mwater/expressions");
 const expressions_3 = require("@mwater/expressions");
 const expressions_4 = require("@mwater/expressions");
 const Widget_1 = __importDefault(require("../Widget"));
+const ExprItemsTranslator_1 = require("../../richtext/ExprItemsTranslator");
 class TextWidget extends Widget_1.default {
     // Creates a React element that is a view of the widget
     // options:
@@ -42,7 +43,9 @@ class TextWidget extends Widget_1.default {
             singleRowTable: options.singleRowTable,
             namedStrings: options.namedStrings,
             ref: options.widgetRef,
-            refreshKey: options.refreshKey
+            refreshKey: options.refreshKey,
+            locale: options.locale,
+            translate: options.translate
         });
     }
     // Get the data that the widget needs. This will be called on the server, typically.
@@ -243,5 +246,8 @@ class TextWidget extends Widget_1.default {
         findRecursive(design.items);
         return entries;
     }
+    getTranslatableStrings(design, schema) {
+        return (0, ExprItemsTranslator_1.getHtmlItemsStrings)(design.items || []);
+    }
 }
 exports.default = TextWidget;

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

@@ -19,6 +19,10 @@ export interface TextWidgetComponentProps {
     namedStrings?: any;
     /** A key that changes when the widget should be refreshed */
     refreshKey?: any;
+    /** Locale to use for display */
+    locale: string;
+    /** Translate function to use for display. Returns same string when editing. */
+    translate: (input: string) => string;
 }
 export default class TextWidgetComponent extends AsyncLoadComponent<TextWidgetComponentProps, {
     loading: boolean;

package/lib/widgets/text/TextWidgetComponent.js

@@ -13,6 +13,7 @@ const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-libr
 const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
 const ColorComponent_1 = __importDefault(require("../../ColorComponent"));
 const bootstrap_2 = require("@mwater/react-library/lib/bootstrap");
+const ExprItemsTranslator_1 = require("../../richtext/ExprItemsTranslator");
 // Widget which displays styled text with embedded expressions
 class TextWidgetComponent extends AsyncLoadComponent_1.default {
     divComp;
@@ -123,7 +124,12 @@ class TextWidgetComponent extends AsyncLoadComponent_1.default {
         // If loading, don't display old values
         const exprValues = !this.state.loading ? this.state.exprValues : {};
         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 }));
+        // Translate items if needed
+        const translatedDesign = this.props.onDesignChange ? this.props.design : {
+            ...this.props.design,
+            items: (0, ExprItemsTranslator_1.translateHtmlItems)(this.props.design.items || [], this.props.translate)
+        };
+        return (react_1.default.createElement(TextComponent_1.default, { design: translatedDesign, 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, locale: this.props.locale }));
     }
     render() {
         const borderStyle = this.props.design.borderThickness && this.props.design.borderColor

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

@@ -1,9 +1,7 @@
-import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter";
-import { HtmlItem } from "../../richtext/ItemsHtmlConverter";
-export type TextWidgetItem = HtmlItem | HtmlItemExpr;
+import { HtmlItemOrExpr } from "../../richtext/ExprItemsHtmlConverter";
 export interface TextWidgetDesign {
     /** Text widget stores its content as array of items. See ItemsHtmlConverter TODO */
-    items: TextWidgetItem[];
+    items?: HtmlItemOrExpr[];
     /** "title" for title block. default is "default" */
     style?: "title" | "default" | "header" | "footer";
     /** Background color of the text widget (optional) */

package/lib/widgets/text/TextWidgetDesign.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isEmptyTextWidgetDesign = isEmptyTextWidgetDesign;
 /** Returns true if the text widget design is empty. */
 function isEmptyTextWidgetDesign(design) {
-    return design == null || design.items.length === 0;
+    return design == null || (design.items != null && design.items.length === 0);
 }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@mwater/visualization",
-  "version": "5.4.1",
+  "version": "5.4.2",
   "description": "Visualization library",
   "main": "lib/index.js",
   "scripts": {
-    "test": "../../node_modules/build-library/test-cli",
-    "test-browser": "../../node_modules/build-library/test-browser",
-    "watch": "../../node_modules/build-library/watch",
+    "test": "./node_modules/build-library/test-cli",
+    "test-browser": "./node_modules/build-library/test-browser",
+    "watch": "./node_modules/build-library/watch",
     "build": "rsync -av --exclude '*.ts' --exclude '*.tsx' src/ lib/ ; tsc -p tsconfig.build.json",
     "prepublish": "npm run build"
   },
@@ -29,7 +29,7 @@
     "async": "^1.2.1",
     "async-latest": "^1.0.0",
     "backbone": "~1.1.2",
-    "billboard.js": "3.12.2",
+    "billboard.js": "3.14.0",
     "canonical-json": "0.0.4",
     "classnames": "^2.3.1",
     "color": "^3.2.1",
@@ -41,9 +41,8 @@
     "d3-tip": "^0.9.0",
     "dayjs": "^1.11.10",
     "dompurify": "^1.0.11",
-    "ez-localize": "^2.10.5",
+    "ez-localize": "^2.13.0",
     "file-saver": "^2.0.5",
-    "fixed-data-table-2": "^1.2.15",
     "immer": "^8.0.0",
     "immutable-setter": "^1.1.1",
     "jquery": "^3.6.3",
@@ -85,7 +84,7 @@
     "@types/d3": "^5.16.4",
     "@types/d3-format": "^1.4.1",
     "@types/dompurify": "0.0.32",
-    "@types/fixed-data-table-2": "^0.8.6",
+    "@types/file-saver": "^2.0.7",
     "@types/jquery": "^3.5.5",
     "@types/leaflet": "^1.7.9",
     "@types/lodash": "^3.10.3",

package/src/ColorComponent.tsx

@@ -64,8 +64,7 @@ export default class ColorComponent extends React.Component<ColorComponentProps,
         <div style={popupPosition}>
           {!this.props.disableReset && (
             <button type="button" className="btn btn-link btn-sm" onClick={this.handleReset}>
-              <i className="fa fa-undo" />
-              {T` Reset Color`}
+              <i className="fa fa-undo" /> {T`Reset Color`}
             </button>
           )}
           <button type="button" className="btn btn-link btn-sm" onClick={this.handleAdvanced}>

package/src/IdSelection.ts

@@ -0,0 +1,62 @@
+/** Immutable selection class for selecting ids */
+export default class IdSelection {
+  ids: { [id: string]: true }
+  inverted: boolean
+
+  // ids is map of ids to true, inverted is boolean
+  constructor(ids = {}, inverted = false) {
+    this.ids = ids
+    this.inverted = inverted
+  }
+
+  isSelected(id: string) {
+    if (this.ids[id]) {
+      return !this.inverted
+    }
+    return this.inverted
+  }
+
+  isNone() {
+    return Object.keys(this.ids).length === 0 && !this.inverted
+  }
+
+  all() {
+    return new IdSelection({}, true)
+  }
+
+  none() {
+    return new IdSelection({}, false)
+  }
+
+  invert() {
+    return new IdSelection(this.ids, !this.inverted)
+  }
+
+  add(id: string) {
+    if (this.inverted) {
+      const newIds = { ...this.ids }
+      delete newIds[id]
+      return new IdSelection(newIds, true)
+    } else {
+      return new IdSelection({ ...this.ids, [id]: true }, false)
+    }
+  }
+
+  remove(id: string) {
+    if (!this.inverted) {
+      const newIds = { ...this.ids }
+      delete newIds[id]
+      return new IdSelection(newIds, false)
+    } else {
+      return new IdSelection({ ...this.ids, [id]: true }, true)
+    }
+  }
+
+  toggle(id: string) {
+    if (this.isSelected(id)) {
+      return this.remove(id)
+    } else {
+      return this.add(id)
+    }
+  }
+}

package/src/MWaterAddRelatedIndicatorComponent.ts

@@ -124,10 +124,11 @@ export default class MWaterAddRelatedIndicatorComponent extends React.Component<
         { style: { paddingLeft: 5 }, className: "text-muted" },
         T`Other Available Indicators. Click to enable. `,
         R("i", { className: "fa fa-check-circle" }),
-        T` = recommended`,
+        " = ",
+        T`recommended`,
 
         !this.state.indicators
-          ? R("div", { className: "text-muted" }, R("i", { className: "fa fa-spin fa-spinner" }), T` Loading...`)
+          ? R("div", { className: "text-muted" }, R("i", { className: "fa fa-spin fa-spinner" }), " ", T`Loading...`)
           : undefined,
 
         R(

package/src/MWaterCompleteTableSelectComponent.tsx

@@ -12,7 +12,6 @@ import { MWaterCustomTablesetListComponent } from "./MWaterCustomTablesetListCom
 import { MWaterMetricsTableListComponent } from "./MWaterMetricsTableListComponent"
 import { Form } from "@mwater/forms"
 import { MWaterAssetSystemsListComponent } from "./MWaterAssetSystemsListComponent"
-import { LocaleContext } from "@mwater/expressions-ui"
 
 const sitesOrder: { [table: string]: number } = {
   "entities.water_point": 1,
@@ -52,8 +51,6 @@ interface MWaterCompleteTableSelectComponentProps {
 export default class MWaterCompleteTableSelectComponent extends React.Component<MWaterCompleteTableSelectComponentProps, {
   showLegacyAssets: boolean
 }> {
-  static contextType = LocaleContext
-
   constructor(props: MWaterCompleteTableSelectComponentProps) {
     super(props)
 
@@ -104,8 +101,8 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
         _.map(types, (tableId) => {
           table = this.props.schema.getTable(tableId)!
           return {
-            name: ExprUtils.localizeString(table.name, this.context),
-            desc: ExprUtils.localizeString(table.desc, this.context),
+            name: ExprUtils.localizeString(table.name, T.locale),
+            desc: ExprUtils.localizeString(table.desc, T.locale),
             onClick: this.props.onChange.bind(null, table.id)
           }
         })
@@ -159,8 +156,8 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
     return R(uiComponents.OptionListComponent, {
       items: _.map(sweetSenseTables, (table) => {
         return {
-          name: ExprUtils.localizeString(table.name, this.context),
-          desc: ExprUtils.localizeString(table.desc, this.context),
+          name: ExprUtils.localizeString(table.name, T.locale),
+          desc: ExprUtils.localizeString(table.desc, T.locale),
           onClick: this.props.onChange.bind(null, table.id)
         }
       })
@@ -177,7 +174,7 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
       extraTables: this.props.extraTables,
       onExtraTableAdd: this.handleExtraTableAdd,
       onExtraTableRemove: this.handleExtraTableRemove,
-      locale: this.context
+      locale: T.locale
     })
   }
 
@@ -191,7 +188,7 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
       extraTables: this.props.extraTables,
       onExtraTableAdd: this.handleExtraTableAdd,
       onExtraTableRemove: this.handleExtraTableRemove,
-      locale: this.context
+      locale: T.locale
     })
   }
 
@@ -208,8 +205,8 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
         continue
       }
       items.push({
-        name: ExprUtils.localizeString(table.name, this.context),
-        desc: ExprUtils.localizeString(table.desc, this.context),
+        name: ExprUtils.localizeString(table.name, T.locale),
+        desc: ExprUtils.localizeString(table.desc, T.locale),
         onClick: this.props.onChange.bind(null, table.id)
       })
     }
@@ -236,7 +233,7 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
       extraTables: this.props.extraTables,
       onExtraTableAdd: this.handleExtraTableAdd,
       onExtraTableRemove: this.handleExtraTableRemove,
-      locale: this.context
+      locale: T.locale
     })
   }
 
@@ -294,8 +291,8 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
     return R(uiComponents.OptionListComponent, {
       items: _.map(otherTables, (table) => {
         return {
-          name: ExprUtils.localizeString(table.name, this.context),
-          desc: ExprUtils.localizeString(table.desc, this.context),
+          name: ExprUtils.localizeString(table.name, T.locale),
+          desc: ExprUtils.localizeString(table.desc, T.locale),
           onClick: this.props.onChange.bind(null, table.id)
         }
       })
@@ -320,25 +317,25 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
     const sweetSenseTables = this.getSweetSenseTables()
 
     const tabs: TabbedComponentTab[] = [
-      { id: "sites", label: [R("i", { className: "fa fa-map-marker" }), T` Sites`], elem: this.renderSites() },
-      { id: "forms", label: [R("i", { className: "fa fa-th-list" }), T` Surveys`], elem: this.renderForms() },
+      { id: "sites", label: [R("i", { className: "fa fa-map-marker" }), " ", T`Sites`], elem: this.renderSites() },
+      { id: "forms", label: [R("i", { className: "fa fa-th-list" }), " ", T`Surveys`], elem: this.renderForms() },
       {
         id: "indicators",
-        label: [R("i", { className: "fa fa-check-circle" }), T` Indicators`],
+        label: [R("i", { className: "fa fa-check-circle" }), " ", T`Indicators`],
         elem: this.renderIndicators()
       },
       {
         id: "issues",
-        label: [R("i", { className: "fa fa-exclamation-circle" }), T` Issues`],
+        label: [R("i", { className: "fa fa-exclamation-circle" }), " ", T`Issues`],
         elem: this.renderIssues()
       },
-      { id: "tablesets", label: [R("i", { className: "fa fa-table" }), T` Tables`], elem: this.renderTablesets() },
-      { id: "metrics", label: [R("i", { className: "fa fa-line-chart" }), T` Metrics`], elem: this.renderMetrics() },
-      { id: "assets", label: [R("i", { className: "fas fa-map-pin" }), T` Assets`], elem: this.renderAssets() }
+      { id: "tablesets", label: [R("i", { className: "fa fa-table" }), " ", T`Tables`], elem: this.renderTablesets() },
+      { id: "metrics", label: [R("i", { className: "fa fa-line-chart" }), " ", T`Metrics`], elem: this.renderMetrics() },
+      { id: "assets", label: [R("i", { className: "fas fa-map-pin" }), " ", T`Assets`], elem: this.renderAssets() }
     ]
 
     if (sweetSenseTables.length > 0) {
-      tabs.push({ id: "sensors", label: T` Sensors`, elem: this.renderSweetSense() })
+      tabs.push({ id: "sensors", label: T`Sensors`, elem: this.renderSweetSense() })
     }
 
     tabs.push({ id: "other", label: T`Advanced`, elem: this.renderOther() })
@@ -383,8 +380,6 @@ interface FormsListComponentState {
 
 // Searchable list of forms
 class FormsListComponent extends React.Component<FormsListComponentProps, FormsListComponentState> {
-  static contextType = LocaleContext
-
   constructor(props: any) {
     super(props)
     this.state = {
@@ -447,7 +442,7 @@ class FormsListComponent extends React.Component<FormsListComponentProps, FormsL
       confirm(
         T`Remove ${ExprUtils.localizeString(
           table.name,
-          this.context
+          T.locale
         )}? Any widgets that depend on it will no longer work properly.`
       )
     ) {
@@ -496,8 +491,8 @@ class FormsListComponent extends React.Component<FormsListComponentProps, FormsL
         ? R(uiComponents.OptionListComponent, {
             items: _.map(tables, (table) => {
               return {
-                name: ExprUtils.localizeString(table.name, this.context),
-                desc: ExprUtils.localizeString(table.desc, this.context),
+                name: ExprUtils.localizeString(table.name, T.locale),
+                desc: ExprUtils.localizeString(table.desc, T.locale),
                 onClick: this.props.onChange.bind(null, table.id),
                 onRemove: this.handleTableRemove.bind(null, table)
               }
@@ -562,7 +557,6 @@ interface IndicatorsListComponentState {
 
 // Searchable list of indicators
 class IndicatorsListComponent extends React.Component<IndicatorsListComponentProps, IndicatorsListComponentState> {
-  static contextType = LocaleContext
   addIndicatorConfirmPopup: AddIndicatorConfirmPopupComponent | null
 
   constructor(props: any) {
@@ -590,7 +584,7 @@ class IndicatorsListComponent extends React.Component<IndicatorsListComponentPro
         [
           (indicator: any) => ((this.props.extraTables || []).includes("indicator_values:" + indicator._id) ? 0 : 1),
           (indicator: any) => (indicator.design.recommended ? 0 : 1),
-          (indicator: any) => ExprUtils.localizeString(indicator.design.name, this.context)
+          (indicator: any) => ExprUtils.localizeString(indicator.design.name, T.locale)
         ],
         ["asc", "asc", "asc"]
       )
@@ -598,8 +592,8 @@ class IndicatorsListComponent extends React.Component<IndicatorsListComponentPro
       return this.setState({
         indicators: _.map(indicators, (indicator) => ({
           id: indicator._id,
-          name: ExprUtils.localizeString(indicator.design.name, this.context),
-          desc: ExprUtils.localizeString(indicator.design.desc, this.context)
+          name: ExprUtils.localizeString(indicator.design.name, T.locale),
+          desc: ExprUtils.localizeString(indicator.design.desc, T.locale)
         }))
       })
     }).fail((xhr: any) => {
@@ -612,7 +606,7 @@ class IndicatorsListComponent extends React.Component<IndicatorsListComponentPro
       confirm(
         T`Remove ${ExprUtils.localizeString(
           table.name,
-          this.context
+          T.locale
         )}? Any widgets that depend on it will no longer work properly.`
       )
     ) {
@@ -679,8 +673,8 @@ class IndicatorsListComponent extends React.Component<IndicatorsListComponentPro
         ? R(uiComponents.OptionListComponent, {
             items: _.map(tables, (table) => {
               return {
-                name: ExprUtils.localizeString(table.name, this.context),
-                desc: ExprUtils.localizeString(table.desc, this.context),
+                name: ExprUtils.localizeString(table.name, T.locale),
+                desc: ExprUtils.localizeString(table.desc, T.locale),
                 onClick: this.handleSelect.bind(null, table.id),
                 onRemove: this.handleTableRemove.bind(null, table)
               }
@@ -738,8 +732,6 @@ class AddIndicatorConfirmPopupComponent extends React.Component<
   AddIndicatorConfirmPopupComponentProps,
   AddIndicatorConfirmPopupComponentState
 > {
-  static contextType = LocaleContext
-
   constructor(props: any) {
     super(props)
     this.state = {
@@ -781,8 +773,8 @@ are certain that you want to use the raw indicator table`
 
       R(uiComponents.OptionListComponent, {
         items: _.map(entityColumns, (entityColumn) => ({
-          name: ExprUtils.localizeString(entityColumn.name, this.context),
-          desc: ExprUtils.localizeString(entityColumn.desc, this.context),
+          name: ExprUtils.localizeString(entityColumn.name, T.locale),
+          desc: ExprUtils.localizeString(entityColumn.desc, T.locale),
           onClick: () => {
             // Select table
             this.props.onChange(entityColumn.join!.toTable)
@@ -845,8 +837,6 @@ interface IssuesListComponentState {
 
 // Searchable list of issue types
 class IssuesListComponent extends React.Component<IssuesListComponentProps, IssuesListComponentState> {
-  static contextType = LocaleContext
-
   constructor(props: any) {
     super(props)
     this.state = {
@@ -869,7 +859,7 @@ class IssuesListComponent extends React.Component<IssuesListComponentProps, Issu
         [
           (issueType) => ((this.props.extraTables || []).includes("issues:" + issueType._id) ? 0 : 1),
           (issueType) => (issueType.created.by === this.props.user ? 0 : 1),
-          (issueType) => ExprUtils.localizeString(issueType.name, this.context)
+          (issueType) => ExprUtils.localizeString(issueType.name, T.locale)
         ],
         ["asc", "asc", "asc"]
       )
@@ -877,8 +867,8 @@ class IssuesListComponent extends React.Component<IssuesListComponentProps, Issu
       return this.setState({
         issueTypes: _.map(issueTypes, (issueType) => ({
           id: issueType._id,
-          name: ExprUtils.localizeString(issueType.name, this.context),
-          desc: ExprUtils.localizeString(issueType.desc, this.context)
+          name: ExprUtils.localizeString(issueType.name, T.locale),
+          desc: ExprUtils.localizeString(issueType.desc, T.locale)
         }))
       })
     }).fail((xhr: any) => {
@@ -891,7 +881,7 @@ class IssuesListComponent extends React.Component<IssuesListComponentProps, Issu
       confirm(
         T`Remove ${ExprUtils.localizeString(
           table.name,
-          this.context
+          T.locale
         )}? Any widgets that depend on it will no longer work properly.`
       )
     ) {
@@ -940,8 +930,8 @@ class IssuesListComponent extends React.Component<IssuesListComponentProps, Issu
         ? R(uiComponents.OptionListComponent, {
             items: _.map(tables, (table) => {
               return {
-                name: ExprUtils.localizeString(table.name, this.context),
-                desc: ExprUtils.localizeString(table.desc, this.context),
+                name: ExprUtils.localizeString(table.name, T.locale),
+                desc: ExprUtils.localizeString(table.desc, T.locale),
                 onClick: this.props.onChange.bind(null, table.id),
                 onRemove: this.handleTableRemove.bind(null, table)
               }

package/src/MWaterLoaderComponent.ts

@@ -8,34 +8,36 @@ import LoadingComponent from "@mwater/react-library/lib/LoadingComponent"
 import mWaterLoader from "./mWaterLoader"
 import MWaterContextComponent, { AddLayerElementFactory } from "./MWaterContextComponent"
 
+export interface MWaterLoaderComponentProps {
+  apiUrl: string
+  client?: string
+  share?: string
+  /**  user id of logged in user */
+  user?: string
+  /**  Load schema as a specific user (for shared dashboards, etc) */
+  asUser?: string
+  /**  Extra tables to load in schema. Forms are not loaded by default as they are too many */
+  extraTables?: string[]
+  /**  Called when extra tables are changed and schema will be reloaded */
+  onExtraTablesChange?: (extraTables: string[]) => void
+  /** Locales of the schema to load. Default is all. */
+  locales?: string[]
+  /**  Override default add layer component. See AddLayerComponent for details */
+  addLayerElementFactory?: AddLayerElementFactory
+  children: (error: any, config?: { schema: Schema; dataSource: DataSource }) => ReactElement<any>
+  /** Custom error formatter that returns React node or string, gets passed the error response from server */
+  errorFormatter?: (data: any, defaultError: string) => string
+  /** Origin of usage. e.g. "dashboards:43445364..." */
+  origin?: string
+}
+
 /**
  * Loads an mWater schema from the server and creates child with schema and dataSource
  * Also creates context to allow selecting of a table in an mWater-friendly way
  * and several other context items
  */
 export default class MWaterLoaderComponent extends AsyncLoadComponent<
-  {
-    apiUrl: string
-    client?: string
-    share?: string
-    /**  user id of logged in user */
-    user?: string
-    /**  Load schema as a specific user (for shared dashboards, etc) */
-    asUser?: string
-    /**  Extra tables to load in schema. Forms are not loaded by default as they are too many */
-    extraTables?: string[]
-    /**  Called when extra tables are changed and schema will be reloaded */
-    onExtraTablesChange?: (extraTables: string[]) => void
-    /** Locales of the schema to load. Default is all. */
-    locales?: string[]
-    /**  Override default add layer component. See AddLayerComponent for details */
-    addLayerElementFactory?: AddLayerElementFactory
-    children: (error: any, config?: { schema: Schema; dataSource: DataSource }) => ReactElement<any>
-    /** Custom error formatter that returns React node or string, gets passed the error response from server */
-    errorFormatter?: (data: any, defaultError: string) => string
-    /** Origin of usage. e.g. "dashboards:43445364..." */
-    origin?: string
-  },
+  MWaterLoaderComponentProps,
   {
     error: any
     schema: Schema | null
@@ -45,7 +47,7 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<
 > {
   mounted: boolean
 
-  constructor(props: any) {
+  constructor(props: MWaterLoaderComponentProps) {
     super(props)
     this.state = {
       error: null,
@@ -58,7 +60,7 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<
   }
 
   // Override to determine if a load is needed. Not called on mounting
-  isLoadNeeded(newProps: any, oldProps: any) {
+  isLoadNeeded(newProps: MWaterLoaderComponentProps, oldProps: MWaterLoaderComponentProps) {
     return !_.isEqual(
       _.pick(newProps, "apiUrl", "client", "user", "share", "asUser", "extraTables", "locales"),
       _.pick(oldProps, "apiUrl", "client", "user", "share", "asUser", "extraTables", "locales")
@@ -66,9 +68,9 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<
   }
 
   // Call callback with state changes
-  load(props: any, prevProps: any, callback: any) {
+  load(props: MWaterLoaderComponentProps, prevProps: MWaterLoaderComponentProps, callback: any) {
     // Load schema and data source
-    return mWaterLoader(
+    mWaterLoader(
       {
         apiUrl: props.apiUrl,
         client: props.client,