@mwater/visualization 5.1.0 → 5.3.0

package/lib/widgets/text/TextWidget.js

@@ -41,7 +41,8 @@ class TextWidget extends Widget_1.default {
             height: options.height,
             singleRowTable: options.singleRowTable,
             namedStrings: options.namedStrings,
-            ref: options.widgetRef
+            ref: options.widgetRef,
+            refreshKey: options.refreshKey
         });
     }
     // Get the data that the widget needs. This will be called on the server, typically.
@@ -189,6 +190,9 @@ class TextWidget extends Widget_1.default {
     }
     // Get a list of table ids that can be filtered on
     getFilterableTables(design, schema) {
+        if (!design) {
+            return [];
+        }
         const exprItems = this.getExprItems(design.items);
         let filterableTables = lodash_1.default.map(exprItems, (exprItem) => exprItem.expr?.table);
         filterableTables = lodash_1.default.uniq(lodash_1.default.compact(filterableTables));

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

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

package/lib/widgets/text/TextWidgetComponent.js

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

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

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

package/lib/widgets/text/TextWidgetDesign.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mwater/visualization",
-  "version": "5.1.0",
+  "version": "5.3.0",
   "description": "Visualization library",
   "main": "lib/index.js",
   "scripts": {
@@ -29,7 +29,7 @@
     "async": "^1.2.1",
     "async-latest": "^1.0.0",
     "backbone": "~1.1.2",
-    "billboard.js": "^3.6.3",
+    "billboard.js": "^3.13.0",
     "canonical-json": "0.0.4",
     "classnames": "^2.3.1",
     "color": "^3.2.1",
@@ -54,6 +54,7 @@
     "maplibre-gl": "^3.3.1",
     "markdown-it": "^12.0.4",
     "moment": "^2.29.1",
+    "p-queue": "^8.0.1",
     "pako": "^1.0.11",
     "prop-types": "^15.7.2",
     "querystring": "^0.2.0",
@@ -70,7 +71,7 @@
     "react-linkify": "^0.2.2",
     "react-motion": "^0.5.2",
     "react-onclickout": "^2.0.4",
-    "react-select": "^5.1.0",
+    "react-select": "^5.8.0",
     "save-svg-as-png": "^1.4.17",
     "shallowequal": "^0.2.2",
     "update-object": "^1.0.0",
@@ -94,7 +95,6 @@
     "@types/react-color": "^2.17.6",
     "@types/react-datepicker": "^1.8.0",
     "@types/react-dropzone": "^5.1.0",
-    "@types/react-select": "^3.0.27",
     "@types/uuid": "^3.4.10",
     "build-library": "github:mWater/build-library",
     "chai": "~2.0.0",

package/src/ColorComponent.tsx

@@ -0,0 +1,177 @@
+import React, { CSSProperties, useContext } from "react"
+import ReactDOM from "react-dom"
+import ClickOutHandler from "react-onclickout"
+import { ColorState, SketchPicker, SwatchesPicker } from "react-color"
+import { CustomColorsContext } from "./CustomColorsContext"
+
+export interface ColorComponentProps {
+  color: string | null | undefined
+  onChange: (value: string | null) => void
+  disableReset?: boolean
+}
+
+interface ColorComponentState {
+  open: boolean
+  advanced: boolean
+}
+
+// Simple color well with popup
+export default class ColorComponent extends React.Component<ColorComponentProps, ColorComponentState> {
+  constructor(props: ColorComponentProps) {
+    super(props)
+    this.state = { open: false, advanced: false }
+  }
+
+  handleClick = () => {
+    return this.setState({ open: !this.state.open, advanced: false })
+  }
+
+  handleColor = (color: ColorState) => {
+    return this.props.onChange(color.hex)
+  }
+
+  handleReset = () => {
+    this.setState({ open: false })
+    return this.props.onChange(null)
+  }
+
+  handleTransparent = () => {
+    this.setState({ open: false })
+    return this.props.onChange("transparent")
+  }
+
+  handleAdvanced = () => {
+    return this.setState({ advanced: !this.state.advanced })
+  }
+
+  renderPopup() {
+    if (!this.state.open || !this.colorWellRef) return null
+
+    const rect = this.colorWellRef.getBoundingClientRect()
+
+    const popupPosition: CSSProperties = {
+      position: "fixed",
+      top: `${rect.bottom + window.scrollY}px`,
+      left: `${rect.left + window.scrollX}px`,
+      zIndex: 1070,
+      backgroundColor: "white",
+      border: "solid 1px #DDD",
+      borderRadius: 3
+    }
+
+    return ReactDOM.createPortal(
+      <ClickOutHandler onClickOut={() => this.setState({ open: false })}>
+        <div style={popupPosition}>
+          {!this.props.disableReset && (
+            <button type="button" className="btn btn-link btn-sm" onClick={this.handleReset}>
+              <i className="fa fa-undo" />
+              {" Reset Color"}
+            </button>
+          )}
+          <button type="button" className="btn btn-link btn-sm" onClick={this.handleAdvanced}>
+            {this.state.advanced ? "Basic" : "Advanced"}
+          </button>
+
+          <CustomColors
+            color={this.props.color}
+            onChange={this.props.onChange}
+          />
+          {this.state.advanced ? (
+            <SketchPicker
+              color={this.props.color || undefined}
+              disableAlpha={true}
+              onChangeComplete={this.handleColor}
+            />
+          ) : (
+            <SwatchesPicker
+              color={this.props.color || undefined}
+              onChangeComplete={this.handleColor}
+            />
+          )}
+        </div>
+      </ClickOutHandler>,
+      document.body
+    )
+  }
+
+  colorWellRef: HTMLDivElement | null = null
+
+  render() {
+    const style: CSSProperties = {
+      height: 20,
+      width: 20,
+      border: "solid 2px #888",
+      borderRadius: 4,
+      backgroundColor: this.props.color || undefined,
+      cursor: "pointer",
+      display: "inline-block"
+    }
+
+    if (!this.props.color) {
+      // http://lea.verou.me/css3patterns/#diagonal-stripes
+      style.backgroundColor = "#AAA"
+      style.backgroundImage =
+        "repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,.7) 2px, rgba(255,255,255,.7) 4px)"
+    }
+
+    return (
+      <div style={{ position: "relative", display: "inline-block" }}>
+        <div
+          style={style}
+          onClick={this.handleClick}
+          ref={ref => this.colorWellRef = ref}
+        />
+        {this.renderPopup()}
+      </div>
+    )
+  }
+}
+
+/**
+ * Custom colors component for the color picker that allows the user to select from a set of custom colors
+ * that are defined in CSS variables.
+ * @param props 
+ * @returns 
+ */
+function CustomColors(props: {
+  color: string | null | undefined
+  onChange: (value: string | null) => void
+}) {
+  const customColors = useContext(CustomColorsContext)
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 42px)', gap: 8, margin: 5, marginLeft: 16 }}>
+      {customColors?.customColors.filter(color => color != null).map((color) => {
+        const isSelected = props.color === color
+
+        return (
+          <div
+            key={color}
+            title={color}
+            tabIndex={0}
+            onClick={() => props.onChange(color)}
+            style={{
+              background: color,
+              height: '24px',
+              width: '40px',
+              cursor: 'pointer',
+              position: 'relative',
+              outline: 'none',
+              marginBottom: '1px',
+              overflow: 'hidden',
+              boxShadow: isSelected ? `${color} 0 0 4px` : 'none'
+            }}
+          >
+            {isSelected && (
+              <div style={{ color: '#FFFFFF', marginLeft: '8px' }}>
+                <svg viewBox="0 0 24 24" style={{ fill: 'currentcolor', width: '24px', height: '24px' }}>
+                  <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
+                </svg>
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/ColorSchemeFactory.ts

@@ -27,12 +27,18 @@ function generateSequentialSet(set: any, number: any, reversed: any) {
 }
 
 export default class ColorSchemeFactory {
-  // creates a color scheme
-  // options:
-  //   type: string (type of the color scheme)
-  //   number: int (number of colors to be generated)
-  //   reversed: true to reversed
-  static createColorScheme(options: any) {
+  /**
+   * Creates a color scheme
+   * @param options
+   * @param options.type - type of the color scheme
+   * @param options.number - number of colors to be generated
+   * @param options.reversed - true to reversed
+   */
+  static createColorScheme(options: {
+    type: string
+    number: number
+    reversed: boolean
+  }): string[] {
     switch (options.type) {
       case "schemeAccent":
         return generateCategoricalSet(brewer.schemeAccent, options.number, options.reversed)

package/src/CustomColorsContext.tsx

@@ -0,0 +1,8 @@
+import { createContext } from "react"
+
+export interface CustomColorsContextType {
+  customColors: (string | null)[]
+}
+
+/** Context for custom colors */
+export const CustomColorsContext = createContext<CustomColorsContextType | null>(null)

package/src/FiltersDesignerComponent.ts

@@ -1,8 +1,7 @@
 import _ from "lodash"
-import PropTypes from "prop-types"
 import React from "react"
 const R = React.createElement
-import { FilterExprComponent } from "@mwater/expressions-ui"
+import { FilterExprComponent, LocaleContext } from "@mwater/expressions-ui"
 import { DataSource, Expr, ExprCleaner, Schema } from "@mwater/expressions"
 import { ExprUtils } from "@mwater/expressions"
 
@@ -20,7 +19,7 @@ export interface FiltersDesignerComponentProps {
 // Designer for filters of multiple tables. Used for maps and dashboards
 // Filters are in format mwater-expression filter expression indexed by table. e.g. { sometable: logical expression, etc. }
 export default class FiltersDesignerComponent extends React.Component<FiltersDesignerComponentProps> {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   handleFilterChange = (table: any, expr: any) => {
     // Clean filter
@@ -33,7 +32,7 @@ export default class FiltersDesignerComponent extends React.Component<FiltersDes
   }
 
   renderFilterableTable = (table: any) => {
-    const name = ExprUtils.localizeString(this.props.schema.getTable(table)!.name, this.context.locale)
+    const name = ExprUtils.localizeString(this.props.schema.getTable(table)!.name, this.context)
 
     return R(
       "div",

package/src/GlobalFilter.ts

@@ -0,0 +1,17 @@
+import { Expr, LiteralType } from "@mwater/expressions"
+
+/** Global filters apply to multiple tables at once if a certain column is present. User-interface to set them 
+ * is application-specific and the default (non-mWater) dashboard applies them but does not allow editing. */
+export interface GlobalFilter {
+  /** id of column to filter */
+  columnId: string
+
+  /** type of column to filter (to ensure that consistent) */
+  columnType: LiteralType
+
+  /** op of expression for filtering */
+  op: string
+
+  /** array of expressions to use for filtering. field expression for column will be injected as expression 0 in the resulting filter expression */
+  exprs: Expr[]
+}

package/src/LocaleContextInjector.tsx

@@ -1,17 +1,18 @@
 import React from "react"
-import PropTypes from "prop-types"
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
 
-/** Adds the locale to the context */
-export default class LocaleContextInjector extends React.Component<{ locale: string }> {
-  static childContextTypes = {
-    locale: PropTypes.string
-  }
-
-  getChildContext() {
-    return { locale: this.props.locale }
-  }
+export interface LocaleContextProps {
+  locale: string
+  children: React.ReactNode
+}
 
-  render() {
-    return this.props.children
-  }
+/** Adds the locale to the context */
+const LocaleContextInjector: React.FC<LocaleContextProps> = ({ locale, children }) => {
+  return (
+    <LocaleContext.Provider value={locale}>
+      {children}
+    </LocaleContext.Provider>
+  )
 }
+
+export default LocaleContextInjector

package/src/MWaterAddRelatedFormComponent.ts

@@ -1,5 +1,4 @@
 import $ from "jquery"
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React from "react"
 const R = React.createElement
@@ -11,6 +10,7 @@ import { ExprUtils, Schema } from "@mwater/expressions"
 import * as ui from "./UIComponents"
 import * as formUtils from "@mwater/forms/lib/formUtils" // TODO requireing this directly because of bizarre backbone issue
 import { Form, FormDesign } from "@mwater/forms"
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
 
 export interface MWaterAddRelatedFormComponentProps {
   /** Entities table id */
@@ -115,7 +115,7 @@ class AddRelatedFormModalComponent extends React.Component<
   AddRelatedFormModalComponentProps,
   AddRelatedFormModalComponentState
 > {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   constructor(props: any) {
     super(props)
@@ -149,7 +149,7 @@ class AddRelatedFormModalComponent extends React.Component<
 
       // Get _id, name, and description
       const items = _.map(forms, (form) => ({
-        name: ExprUtils.localizeString(form.design.name, this.context.locale),
+        name: ExprUtils.localizeString(form.design.name, this.context),
         desc: `Modified ${moment(form.modified!.on, moment.ISO_8601).format("ll")}`,
         onClick: this.props.onSelect.bind(null, "responses:" + form._id)
       }))

package/src/MWaterAddRelatedIndicatorComponent.ts

@@ -1,11 +1,11 @@
 import $ from "jquery"
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React from "react"
 const R = React.createElement
 
 import querystring from "querystring"
 import { ExprUtils, Schema } from "@mwater/expressions"
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
 
 export interface MWaterAddRelatedIndicatorComponentProps {
   table: string
@@ -30,7 +30,7 @@ export default class MWaterAddRelatedIndicatorComponent extends React.Component<
   MWaterAddRelatedIndicatorComponentProps,
   MWaterAddRelatedIndicatorComponentState
 > {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   constructor(props: any) {
     super(props)
@@ -69,7 +69,7 @@ export default class MWaterAddRelatedIndicatorComponent extends React.Component<
         indicators,
         [
           (indicator) => (indicator.design.recommended ? 0 : 1),
-          (indicator) => ExprUtils.localizeString(indicator.design.name, this.context.locale)
+          (indicator) => ExprUtils.localizeString(indicator.design.name, this.context)
         ],
         ["asc", "asc"]
       )
@@ -112,7 +112,7 @@ export default class MWaterAddRelatedIndicatorComponent extends React.Component<
     // Filter by search
     if (this.props.filter) {
       indicators = _.filter(indicators, (indicator) =>
-        filterMatches(this.props.filter, ExprUtils.localizeString(indicator.design.name, this.context.locale))
+        filterMatches(this.props.filter, ExprUtils.localizeString(indicator.design.name, this.context))
       )
     }
 
@@ -134,8 +134,8 @@ export default class MWaterAddRelatedIndicatorComponent extends React.Component<
           "div",
           { style: { paddingLeft: 10 } },
           _.map(indicators, (indicator) => {
-            const name = ExprUtils.localizeString(indicator.design.name, this.context.locale)
-            const desc = ExprUtils.localizeString(indicator.design.desc, this.context.locale)
+            const name = ExprUtils.localizeString(indicator.design.name, this.context)
+            const desc = ExprUtils.localizeString(indicator.design.desc, this.context)
 
             // If added, put special message
             if (this.props.schema.getTable(`indicator_values:${indicator._id}`)) {