@mwater/visualization 5.2.0 → 5.3.0

package/lib/MWaterCompleteTableSelectComponent.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 jquery_1 = __importDefault(require("jquery"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const querystring_1 = __importDefault(require("querystring"));
@@ -40,6 +39,7 @@ const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib
 const MWaterCustomTablesetListComponent_1 = require("./MWaterCustomTablesetListComponent");
 const MWaterMetricsTableListComponent_1 = require("./MWaterMetricsTableListComponent");
 const MWaterAssetSystemsListComponent_1 = require("./MWaterAssetSystemsListComponent");
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 const sitesOrder = {
     "entities.water_point": 1,
     "entities.sanitation_facility": 2,
@@ -59,7 +59,7 @@ const assetEntities = [
 ];
 // Allows selection of a table. Is the complete list mode of tables
 class MWaterCompleteTableSelectComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -98,8 +98,8 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
             items: lodash_1.default.compact(lodash_1.default.map(types, (tableId) => {
                 table = this.props.schema.getTable(tableId);
                 return {
-                    name: expressions_1.ExprUtils.localizeString(table.name, this.context.locale),
-                    desc: expressions_1.ExprUtils.localizeString(table.desc, this.context.locale),
+                    name: expressions_1.ExprUtils.localizeString(table.name, this.context),
+                    desc: expressions_1.ExprUtils.localizeString(table.desc, this.context),
                     onClick: this.props.onChange.bind(null, table.id)
                 };
             }))
@@ -147,8 +147,8 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
         return R(uiComponents.OptionListComponent, {
             items: lodash_1.default.map(sweetSenseTables, (table) => {
                 return {
-                    name: expressions_1.ExprUtils.localizeString(table.name, this.context.locale),
-                    desc: expressions_1.ExprUtils.localizeString(table.desc, this.context.locale),
+                    name: expressions_1.ExprUtils.localizeString(table.name, this.context),
+                    desc: expressions_1.ExprUtils.localizeString(table.desc, this.context),
                     onClick: this.props.onChange.bind(null, table.id)
                 };
             })
@@ -164,7 +164,7 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
             extraTables: this.props.extraTables,
             onExtraTableAdd: this.handleExtraTableAdd,
             onExtraTableRemove: this.handleExtraTableRemove,
-            locale: this.context.locale
+            locale: this.context
         });
     }
     renderMetrics() {
@@ -177,7 +177,7 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
             extraTables: this.props.extraTables,
             onExtraTableAdd: this.handleExtraTableAdd,
             onExtraTableRemove: this.handleExtraTableRemove,
-            locale: this.context.locale
+            locale: this.context
         });
     }
     renderAssets() {
@@ -188,8 +188,8 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
                 continue;
             }
             items.push({
-                name: expressions_1.ExprUtils.localizeString(table.name, this.context.locale),
-                desc: expressions_1.ExprUtils.localizeString(table.desc, this.context.locale),
+                name: expressions_1.ExprUtils.localizeString(table.name, this.context),
+                desc: expressions_1.ExprUtils.localizeString(table.desc, this.context),
                 onClick: this.props.onChange.bind(null, table.id)
             });
         }
@@ -211,7 +211,7 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
             extraTables: this.props.extraTables,
             onExtraTableAdd: this.handleExtraTableAdd,
             onExtraTableRemove: this.handleExtraTableRemove,
-            locale: this.context.locale
+            locale: this.context
         });
     }
     renderOther() {
@@ -258,8 +258,8 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
         return R(uiComponents.OptionListComponent, {
             items: lodash_1.default.map(otherTables, (table) => {
                 return {
-                    name: expressions_1.ExprUtils.localizeString(table.name, this.context.locale),
-                    desc: expressions_1.ExprUtils.localizeString(table.desc, this.context.locale),
+                    name: expressions_1.ExprUtils.localizeString(table.name, this.context),
+                    desc: expressions_1.ExprUtils.localizeString(table.desc, this.context),
                     onClick: this.props.onChange.bind(null, table.id)
                 };
             })
@@ -308,7 +308,7 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
 exports.default = MWaterCompleteTableSelectComponent;
 // Searchable list of forms
 class FormsListComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -341,14 +341,14 @@ class FormsListComponent extends react_1.default.Component {
             // TODO use name instead of design.name
             this.setState({
                 forms: lodash_1.default.map(forms, (form) => {
-                    let desc = expressions_1.ExprUtils.localizeString(form.design.description, this.context.locale) || "";
+                    let desc = expressions_1.ExprUtils.localizeString(form.design.description, null) || "";
                     if (desc) {
                         desc += " - ";
                     }
                     desc += `Modified ${(0, moment_1.default)(form.modified?.on, moment_1.default.ISO_8601).format("ll")}`;
                     return {
                         id: form._id,
-                        name: expressions_1.ExprUtils.localizeString(form.design.name, this.context.locale),
+                        name: expressions_1.ExprUtils.localizeString(form.design.name, null),
                         desc
                     };
                 })
@@ -358,7 +358,7 @@ class FormsListComponent extends react_1.default.Component {
         });
     }
     handleTableRemove = (table) => {
-        if (confirm(`Remove ${expressions_1.ExprUtils.localizeString(table.name, this.context.locale)}? Any widgets that depend on it will no longer work properly.`)) {
+        if (confirm(`Remove ${expressions_1.ExprUtils.localizeString(table.name, this.context)}? Any widgets that depend on it will no longer work properly.`)) {
             return this.props.onExtraTableRemove(table.id);
         }
     };
@@ -391,8 +391,8 @@ class FormsListComponent extends react_1.default.Component {
             ? R(uiComponents.OptionListComponent, {
                 items: lodash_1.default.map(tables, (table) => {
                     return {
-                        name: expressions_1.ExprUtils.localizeString(table.name, this.context.locale),
-                        desc: expressions_1.ExprUtils.localizeString(table.desc, this.context.locale),
+                        name: expressions_1.ExprUtils.localizeString(table.name, this.context),
+                        desc: expressions_1.ExprUtils.localizeString(table.desc, this.context),
                         onClick: this.props.onChange.bind(null, table.id),
                         onRemove: this.handleTableRemove.bind(null, table)
                     };
@@ -423,7 +423,7 @@ class FormsListComponent extends react_1.default.Component {
 }
 // Searchable list of indicators
 class IndicatorsListComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     addIndicatorConfirmPopup;
     constructor(props) {
         super(props);
@@ -445,13 +445,13 @@ class IndicatorsListComponent extends react_1.default.Component {
             indicators = lodash_1.default.sortByOrder(indicators, [
                 (indicator) => ((this.props.extraTables || []).includes("indicator_values:" + indicator._id) ? 0 : 1),
                 (indicator) => (indicator.design.recommended ? 0 : 1),
-                (indicator) => expressions_1.ExprUtils.localizeString(indicator.design.name, this.context.locale)
+                (indicator) => expressions_1.ExprUtils.localizeString(indicator.design.name, this.context)
             ], ["asc", "asc", "asc"]);
             return this.setState({
                 indicators: lodash_1.default.map(indicators, (indicator) => ({
                     id: indicator._id,
-                    name: expressions_1.ExprUtils.localizeString(indicator.design.name, this.context.locale),
-                    desc: expressions_1.ExprUtils.localizeString(indicator.design.desc, this.context.locale)
+                    name: expressions_1.ExprUtils.localizeString(indicator.design.name, this.context),
+                    desc: expressions_1.ExprUtils.localizeString(indicator.design.desc, this.context)
                 }))
             });
         }).fail((xhr) => {
@@ -459,7 +459,7 @@ class IndicatorsListComponent extends react_1.default.Component {
         });
     }
     handleTableRemove = (table) => {
-        if (confirm(`Remove ${expressions_1.ExprUtils.localizeString(table.name, this.context.locale)}? Any widgets that depend on it will no longer work properly.`)) {
+        if (confirm(`Remove ${expressions_1.ExprUtils.localizeString(table.name, this.context)}? Any widgets that depend on it will no longer work properly.`)) {
             return this.props.onExtraTableRemove(table.id);
         }
     };
@@ -506,8 +506,8 @@ class IndicatorsListComponent extends react_1.default.Component {
             ? R(uiComponents.OptionListComponent, {
                 items: lodash_1.default.map(tables, (table) => {
                     return {
-                        name: expressions_1.ExprUtils.localizeString(table.name, this.context.locale),
-                        desc: expressions_1.ExprUtils.localizeString(table.desc, this.context.locale),
+                        name: expressions_1.ExprUtils.localizeString(table.name, this.context),
+                        desc: expressions_1.ExprUtils.localizeString(table.desc, this.context),
                         onClick: this.handleSelect.bind(null, table.id),
                         onRemove: this.handleTableRemove.bind(null, table)
                     };
@@ -537,7 +537,7 @@ class IndicatorsListComponent extends react_1.default.Component {
     }
 }
 class AddIndicatorConfirmPopupComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -559,8 +559,8 @@ class AddIndicatorConfirmPopupComponent extends react_1.default.Component {
 below, then find the indicator values in the 'Related Indicators' section. Or click on 'Use Raw Indicator' if you 
 are certain that you want to use the raw indicator table`), R(uiComponents.OptionListComponent, {
             items: lodash_1.default.map(entityColumns, (entityColumn) => ({
-                name: expressions_1.ExprUtils.localizeString(entityColumn.name, this.context.locale),
-                desc: expressions_1.ExprUtils.localizeString(entityColumn.desc, this.context.locale),
+                name: expressions_1.ExprUtils.localizeString(entityColumn.name, this.context),
+                desc: expressions_1.ExprUtils.localizeString(entityColumn.desc, this.context),
                 onClick: () => {
                     // Select table
                     this.props.onChange(entityColumn.join.toTable);
@@ -582,7 +582,7 @@ are certain that you want to use the raw indicator table`), R(uiComponents.Optio
 }
 // Searchable list of issue types
 class IssuesListComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -601,13 +601,13 @@ class IssuesListComponent extends react_1.default.Component {
             issueTypes = lodash_1.default.sortByOrder(issueTypes, [
                 (issueType) => ((this.props.extraTables || []).includes("issues:" + issueType._id) ? 0 : 1),
                 (issueType) => (issueType.created.by === this.props.user ? 0 : 1),
-                (issueType) => expressions_1.ExprUtils.localizeString(issueType.name, this.context.locale)
+                (issueType) => expressions_1.ExprUtils.localizeString(issueType.name, this.context)
             ], ["asc", "asc", "asc"]);
             return this.setState({
                 issueTypes: lodash_1.default.map(issueTypes, (issueType) => ({
                     id: issueType._id,
-                    name: expressions_1.ExprUtils.localizeString(issueType.name, this.context.locale),
-                    desc: expressions_1.ExprUtils.localizeString(issueType.desc, this.context.locale)
+                    name: expressions_1.ExprUtils.localizeString(issueType.name, this.context),
+                    desc: expressions_1.ExprUtils.localizeString(issueType.desc, this.context)
                 }))
             });
         }).fail((xhr) => {
@@ -615,7 +615,7 @@ class IssuesListComponent extends react_1.default.Component {
         });
     }
     handleTableRemove = (table) => {
-        if (confirm(`Remove ${expressions_1.ExprUtils.localizeString(table.name, this.context.locale)}? Any widgets that depend on it will no longer work properly.`)) {
+        if (confirm(`Remove ${expressions_1.ExprUtils.localizeString(table.name, this.context)}? Any widgets that depend on it will no longer work properly.`)) {
             return this.props.onExtraTableRemove(table.id);
         }
     };
@@ -648,8 +648,8 @@ class IssuesListComponent extends react_1.default.Component {
             ? R(uiComponents.OptionListComponent, {
                 items: lodash_1.default.map(tables, (table) => {
                     return {
-                        name: expressions_1.ExprUtils.localizeString(table.name, this.context.locale),
-                        desc: expressions_1.ExprUtils.localizeString(table.desc, this.context.locale),
+                        name: expressions_1.ExprUtils.localizeString(table.name, this.context),
+                        desc: expressions_1.ExprUtils.localizeString(table.desc, this.context),
                         onClick: this.props.onChange.bind(null, table.id),
                         onRemove: this.handleTableRemove.bind(null, table)
                     };

package/lib/MWaterContextComponent.d.ts

@@ -1,8 +1,8 @@
-import PropTypes from "prop-types";
 import React from "react";
 import { DataSource, Schema, Section } from "@mwater/expressions";
 import { CustomTableSelectComponentFactoryOptions, DecorateScalarExprTreeSectionChildrenOptions } from "@mwater/expressions-ui";
 import { GlobalFilter } from "./GlobalFilter";
+import { AddLayerComponentProps } from "./maps/AddLayerComponent";
 export interface GlobalFiltersElementFactoryProps {
     schema: Schema;
     dataSource: DataSource;
@@ -14,6 +14,8 @@ export interface GlobalFiltersElementFactoryProps {
 }
 export type GlobalFiltersElementFactory = (props: GlobalFiltersElementFactoryProps) => React.ReactElement | null;
 export declare const GlobalFiltersElementFactoryContext: React.Context<GlobalFiltersElementFactory | null>;
+export type AddLayerElementFactory = (props: AddLayerComponentProps) => React.ReactElement | null;
+export declare const AddLayerElementFactoryContext: React.Context<AddLayerElementFactory | undefined>;
 /**
  * Creates several contexts to allow selecting of a table in an mWater-friendly way
  * and several other context items
@@ -29,13 +31,9 @@ export default class MWaterContextComponent extends React.Component<{
     /**  Called when extra tables are changed and schema will be reloaded */
     onExtraTablesChange?: (extraTables: string[]) => void;
     /**  Override default add layer component. See AddLayerComponent for details */
-    addLayerElementFactory?: any;
+    addLayerElementFactory?: AddLayerElementFactory;
 }> {
-    static childContextTypes: {
-        addLayerElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
-    };
     createTableSelectElementFactory: (options: CustomTableSelectComponentFactoryOptions) => React.JSX.Element;
-    getChildContext(): any;
     createGlobalFiltersElementFactory: (props: GlobalFiltersElementFactoryProps) => React.JSX.Element | null;
     isScalarExprTreeSectionMatch: (options: {
         tableId: string;

package/lib/MWaterContextComponent.js

@@ -26,8 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GlobalFiltersElementFactoryContext = void 0;
-const prop_types_1 = __importDefault(require("prop-types"));
+exports.AddLayerElementFactoryContext = exports.GlobalFiltersElementFactoryContext = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importStar(require("react"));
 const R = react_1.default.createElement;
@@ -38,24 +37,15 @@ const MWaterGlobalFiltersComponent_1 = __importDefault(require("./MWaterGlobalFi
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_ui_2 = require("@mwater/expressions-ui");
 exports.GlobalFiltersElementFactoryContext = (0, react_1.createContext)(null);
+exports.AddLayerElementFactoryContext = (0, react_1.createContext)(undefined);
 /**
  * Creates several contexts to allow selecting of a table in an mWater-friendly way
  * and several other context items
  */
 class MWaterContextComponent extends react_1.default.Component {
-    static childContextTypes = {
-        addLayerElementFactory: prop_types_1.default.func, // Call with props of AddLayerComponent
-    };
     createTableSelectElementFactory = (options) => {
         return (react_1.default.createElement(MWaterTableSelectComponent_1.default, { apiUrl: this.props.apiUrl, client: this.props.client, schema: options.schema, user: this.props.user, table: options.value ?? undefined, onChange: options.onChange, extraTables: this.props.extraTables, onExtraTablesChange: this.props.onExtraTablesChange, filter: options.filter, onFilterChange: options.onFilterChange }));
     };
-    getChildContext() {
-        const context = {};
-        if (this.props.addLayerElementFactory) {
-            context.addLayerElementFactory = this.props.addLayerElementFactory;
-        }
-        return context;
-    }
     createGlobalFiltersElementFactory = (props) => {
         if (props.nullIfIrrelevant && !lodash_1.default.any(props.filterableTables, (t) => t.match(/^entities./))) {
             return null;
@@ -110,7 +100,8 @@ class MWaterContextComponent extends react_1.default.Component {
             react_1.default.createElement(exports.GlobalFiltersElementFactoryContext.Provider, { value: this.createGlobalFiltersElementFactory },
                 react_1.default.createElement(expressions_ui_2.IsScalarExprTreeSectionMatchContext.Provider, { value: this.isScalarExprTreeSectionMatch },
                     react_1.default.createElement(expressions_ui_2.IsScalarExprTreeSectionInitiallyOpenContext.Provider, { value: this.isScalarExprTreeSectionInitiallyOpen },
-                        react_1.default.createElement(expressions_ui_1.DecorateScalarExprTreeSectionChildrenContext.Provider, { value: this.decorateScalarExprTreeSectionChildren }, this.props.children)))),
+                        react_1.default.createElement(expressions_ui_1.DecorateScalarExprTreeSectionChildrenContext.Provider, { value: this.decorateScalarExprTreeSectionChildren },
+                            react_1.default.createElement(exports.AddLayerElementFactoryContext.Provider, { value: this.props.addLayerElementFactory }, this.props.children))))),
             "    ");
     }
 }

package/lib/MWaterLoaderComponent.d.ts

@@ -2,7 +2,7 @@ import React, { ReactElement } from "react";
 import { DataSource, Schema } from "@mwater/expressions";
 import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent";
 import LoadingComponent from "@mwater/react-library/lib/LoadingComponent";
-import MWaterContextComponent from "./MWaterContextComponent";
+import MWaterContextComponent, { AddLayerElementFactory } from "./MWaterContextComponent";
 /**
  * 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
@@ -23,13 +23,15 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<{
     /** Locales of the schema to load. Default is all. */
     locales?: string[];
     /**  Override default add layer component. See AddLayerComponent for details */
-    addLayerElementFactory?: any;
+    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;
 }, {
     error: any;
     schema: Schema | null;
@@ -47,6 +49,6 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<{
         schema: Schema;
         extraTables?: string[] | undefined;
         onExtraTablesChange?: ((extraTables: string[]) => void) | undefined;
-        addLayerElementFactory?: any;
+        addLayerElementFactory?: AddLayerElementFactory | undefined;
     }, MWaterContextComponent>;
 }

package/lib/MWaterLoaderComponent.js

@@ -40,7 +40,8 @@ class MWaterLoaderComponent extends AsyncLoadComponent_1.default {
             share: props.share,
             asUser: props.asUser,
             extraTables: props.extraTables,
-            locales: props.locales
+            locales: props.locales,
+            origin: props.origin
         }, (error, config) => {
             if (error) {
                 const defaultError = `Cannot load one of the forms that this depends on. Perhaps the administrator has not shared the form with you? Details: ${error.message}`;

package/lib/MWaterTableSelectComponent.d.ts

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React from "react";
 import { Schema } from "@mwater/expressions";
 export interface MWaterTableSelectComponentProps {
@@ -22,9 +21,7 @@ interface MWaterTableSelectComponentState {
     pendingExtraTable: any;
 }
 export default class MWaterTableSelectComponent extends React.Component<MWaterTableSelectComponentProps, MWaterTableSelectComponentState> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     toggleEdit: any;
     constructor(props: any);
     componentWillReceiveProps(nextProps: any): any;

package/lib/MWaterTableSelectComponent.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const UIComponents_1 = require("./UIComponents");
@@ -15,9 +14,7 @@ const MWaterCompleteTableSelectComponent_1 = __importDefault(require("./MWaterCo
 const expressions_ui_1 = require("@mwater/expressions-ui");
 // Allows selection of a mwater-visualization table. Loads forms as well and calls event if modified
 class MWaterTableSelectComponent extends react_1.default.Component {
-    static contextTypes = {
-        locale: prop_types_1.default.string, // e.g. "en"
-    };
+    static contextType = expressions_ui_1.LocaleContext;
     toggleEdit;
     constructor(props) {
         super(props);
@@ -96,9 +93,12 @@ class MWaterTableSelectComponent extends react_1.default.Component {
             },
             forceOpen: !this.props.table,
             label: this.props.table
-                ? expressions_1.ExprUtils.localizeString(this.props.schema.getTable(this.props.table)?.name, this.context.locale)
+                ? expressions_1.ExprUtils.localizeString(this.props.schema.getTable(this.props.table)?.name, this.context)
                 : "",
-            editor
+            editor,
+            onRemove: () => {
+                this.props.onChange(null);
+            }
         }), 
         // Make sure table still exists
         this.props.table &&
@@ -117,9 +117,7 @@ class MWaterTableSelectComponent extends react_1.default.Component {
 exports.default = MWaterTableSelectComponent;
 // Is the table select component when in edit mode. Toggles between complete list and simplified list
 class EditModeTableSelectComponent extends react_1.default.Component {
-    static contextTypes = {
-        locale: prop_types_1.default.string, // e.g. "en"
-    };
+    static contextType = expressions_ui_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -158,7 +156,7 @@ class EditModeTableSelectComponent extends react_1.default.Component {
             }
         }
         // Sort by name
-        tables = lodash_1.default.sortBy(tables, (tableId) => expressions_1.ExprUtils.localizeString(this.props.schema.getTable(tableId).name, this.context.locale));
+        tables = lodash_1.default.sortBy(tables, (tableId) => expressions_1.ExprUtils.localizeString(this.props.schema.getTable(tableId).name, this.context));
         return tables;
     }
     handleCompleteChange = (tableId) => {
@@ -174,8 +172,8 @@ class EditModeTableSelectComponent extends react_1.default.Component {
                 react_1.default.createElement(UIComponents_1.OptionListComponent, { items: this.getTableShortlist(activeTables).map((tableId) => {
                         const table = this.props.schema.getTable(tableId);
                         return {
-                            name: expressions_1.ExprUtils.localizeString(table.name, this.context.locale),
-                            desc: expressions_1.ExprUtils.localizeString(table.desc, this.context.locale),
+                            name: expressions_1.ExprUtils.localizeString(table.name, this.context),
+                            desc: expressions_1.ExprUtils.localizeString(table.desc, this.context),
                             onClick: () => this.props.onChange(table.id)
                         };
                     }) }),

package/lib/UIComponents.d.ts

@@ -3,6 +3,7 @@ import * as motion from "react-motion";
 export interface SectionComponentProps {
     icon?: string;
     label?: any;
+    required?: boolean;
 }
 export declare class SectionComponent extends React.Component<SectionComponentProps> {
     render(): React.DetailedReactHTMLElement<{
@@ -56,7 +57,7 @@ export interface ToggleEditComponentProps {
     initiallyOpen?: boolean;
     label: any;
     editor: any;
-    onRemove?: any;
+    onRemove?: () => void;
 }
 interface ToggleEditComponentState {
     open: any;
@@ -66,7 +67,6 @@ export declare class ToggleEditComponent extends React.Component<ToggleEditCompo
     close: () => void;
     open: () => void;
     handleToggle: () => void;
-    editorRef: (editorComp: any) => any;
     render(): React.CElement<any, SwitchViewComponent>;
 }
 export interface RadioToggleComponentProps {

package/lib/UIComponents.js

@@ -42,7 +42,7 @@ class SectionComponent extends react_1.default.Component {
             ? [R("i", { className: `fa ${this.props.icon}` }), " "]
             : undefined, this.props.icon && this.props.icon.match(/^glyphicon-/)
             ? [R("span", { className: `glyphicon ${this.props.icon}` }), " "]
-            : undefined, this.props.label), R("div", { style: { marginLeft: 10 } }, this.props.children));
+            : undefined, this.props.label, this.props.required ? react_1.default.createElement("span", { style: { color: "red" } }, " *") : undefined), R("div", { style: { marginLeft: 10 } }, this.props.children));
     }
 }
 exports.SectionComponent = SectionComponent;
@@ -149,21 +149,13 @@ class ToggleEditComponent extends react_1.default.Component {
         this.state = { open: props.initiallyOpen || false };
     }
     close = () => {
-        // Save height of editor
-        if (this.editorComp) {
-            this.editorHeight = react_dom_1.default.findDOMNode(this.editorComp).clientHeight;
-        }
-        return this.setState({ open: false });
+        this.setState({ open: false });
     };
     open = () => {
-        return this.setState({ open: true });
+        this.setState({ open: true });
     };
     handleToggle = () => {
-        return this.setState({ open: !this.state.open });
-    };
-    // Save editor comp
-    editorRef = (editorComp) => {
-        return (this.editorComp = editorComp);
+        this.setState({ open: !this.state.open });
     };
     render() {
         let { editor } = this.props;

package/lib/axes/AxisBuilder.d.ts

@@ -53,10 +53,13 @@ export default class AxisBuilder {
          */
         onlyValuesPresent?: boolean;
     }): AxisCategory[];
-    getAxisType(axis: any): LiteralType | null;
-    isAxisAggr(axis: any): any;
-    doesAxisSupportCumulative(axis: any): boolean;
-    formatCategory(axis: any, category: any): any;
+    /**
+     * Get type of axis output
+     */
+    getAxisType(axis: Axis | null | undefined): LiteralType | null;
+    isAxisAggr(axis: Axis | null | undefined): string | boolean;
+    doesAxisSupportCumulative(axis: Axis): boolean;
+    formatCategory(axis: Axis, category: any): any;
     summarizeAxis(axis: Axis, locale?: string): string;
     formatValue(axis: Axis, value: any, locale?: string, legacyPercentFormat?: any): any;
     createValueFilter(axis: Axis, value: any): JsonQLExpr;

package/lib/axes/AxisBuilder.js

@@ -855,7 +855,9 @@ class AxisBuilder {
         }
         return [];
     }
-    // Get type of axis output
+    /**
+     * Get type of axis output
+     */
     getAxisType(axis) {
         if (!axis) {
             return null;

package/lib/axes/AxisComponent.d.ts

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React from "react";
 import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent";
 import { DataSource, LiteralType, Schema } from "@mwater/expressions";
@@ -15,7 +14,7 @@ export interface AxisComponentProps {
     /** Optional types to limit to */
     types?: LiteralType[];
     aggrNeed: "none" | "optional" | "required";
-    value?: Axis;
+    value?: Axis | null;
     onChange: (axis: Axis | null) => void;
     /** Makes this a required value */
     required?: boolean;
@@ -44,9 +43,7 @@ export default class AxisComponent extends AsyncLoadComponent<AxisComponentProps
         allowExcludedValues: boolean;
         autosetColors: boolean;
     };
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     constructor(props: any);
     isLoadNeeded(newProps: any, oldProps: any): boolean;
     load(props: any, prevProps: any, callback: any): any;

package/lib/axes/AxisComponent.js

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const uuid_1 = __importDefault(require("uuid"));
@@ -52,7 +51,7 @@ class AxisComponent extends AsyncLoadComponent_1.default {
         allowExcludedValues: false,
         autosetColors: true
     };
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = expressions_ui_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {

package/lib/axes/ColorPaletteCollectionComponent.d.ts

@@ -1,17 +1,10 @@
 import React from "react";
-import { Axis, AxisCategory } from "./Axis";
+import { Axis, AxisCategory, ColorMap } from "./Axis";
 export interface ColorPaletteCollectionComponentProps {
-    onPaletteSelected: any;
     axis: Axis;
     categories: AxisCategory[];
-    onCancel: any;
-}
-export default class ColorPaletteCollectionComponent extends React.Component<ColorPaletteCollectionComponentProps> {
-    static palettes: {
-        type: string;
-        reversed: boolean;
-    }[];
-    onPaletteSelected: (index: any) => any;
-    renderCancel: () => React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | null;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    onPaletteSelected: (colorMap: ColorMap) => void;
+    onCancel: () => void;
 }
+declare function ColorPaletteCollectionComponent(props: ColorPaletteCollectionComponentProps): React.JSX.Element;
+export default ColorPaletteCollectionComponent;