@mwater/visualization 5.1.0 → 5.3.0

package/src/MWaterCompleteTableSelectComponent.tsx

@@ -1,6 +1,5 @@
 import _ from "lodash"
 import $ from "jquery"
-import PropTypes from "prop-types"
 import React from "react"
 const R = React.createElement
 import querystring from "querystring"
@@ -13,6 +12,7 @@ import { MWaterCustomTablesetListComponent } from "./MWaterCustomTablesetListCom
 import { MWaterMetricsTableListComponent } from "./MWaterMetricsTableListComponent"
 import { Form } from "@mwater/forms"
 import { MWaterAssetSystemsListComponent } from "./MWaterAssetSystemsListComponent"
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
 
 const sitesOrder: { [table: string]: number } = {
   "entities.water_point": 1,
@@ -52,7 +52,7 @@ interface MWaterCompleteTableSelectComponentProps {
 export default class MWaterCompleteTableSelectComponent extends React.Component<MWaterCompleteTableSelectComponentProps, {
   showLegacyAssets: boolean
 }> {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   constructor(props: MWaterCompleteTableSelectComponentProps) {
     super(props)
@@ -104,8 +104,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.locale),
-            desc: ExprUtils.localizeString(table.desc, this.context.locale),
+            name: ExprUtils.localizeString(table.name, this.context),
+            desc: ExprUtils.localizeString(table.desc, this.context),
             onClick: this.props.onChange.bind(null, table.id)
           }
         })
@@ -159,8 +159,8 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
     return R(uiComponents.OptionListComponent, {
       items: _.map(sweetSenseTables, (table) => {
         return {
-          name: ExprUtils.localizeString(table.name, this.context.locale),
-          desc: ExprUtils.localizeString(table.desc, this.context.locale),
+          name: ExprUtils.localizeString(table.name, this.context),
+          desc: ExprUtils.localizeString(table.desc, this.context),
           onClick: this.props.onChange.bind(null, table.id)
         }
       })
@@ -177,7 +177,7 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
       extraTables: this.props.extraTables,
       onExtraTableAdd: this.handleExtraTableAdd,
       onExtraTableRemove: this.handleExtraTableRemove,
-      locale: this.context.locale
+      locale: this.context
     })
   }
 
@@ -191,7 +191,7 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
       extraTables: this.props.extraTables,
       onExtraTableAdd: this.handleExtraTableAdd,
       onExtraTableRemove: this.handleExtraTableRemove,
-      locale: this.context.locale
+      locale: this.context
     })
   }
 
@@ -208,8 +208,8 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
         continue
       }
       items.push({
-        name: ExprUtils.localizeString(table.name, this.context.locale),
-        desc: ExprUtils.localizeString(table.desc, this.context.locale),
+        name: ExprUtils.localizeString(table.name, this.context),
+        desc: ExprUtils.localizeString(table.desc, this.context),
         onClick: this.props.onChange.bind(null, table.id)
       })
     }
@@ -236,7 +236,7 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
       extraTables: this.props.extraTables,
       onExtraTableAdd: this.handleExtraTableAdd,
       onExtraTableRemove: this.handleExtraTableRemove,
-      locale: this.context.locale
+      locale: this.context
     })
   }
 
@@ -294,8 +294,8 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
     return R(uiComponents.OptionListComponent, {
       items: _.map(otherTables, (table) => {
         return {
-          name: ExprUtils.localizeString(table.name, this.context.locale),
-          desc: ExprUtils.localizeString(table.desc, this.context.locale),
+          name: ExprUtils.localizeString(table.name, this.context),
+          desc: ExprUtils.localizeString(table.desc, this.context),
           onClick: this.props.onChange.bind(null, table.id)
         }
       })
@@ -383,7 +383,7 @@ interface FormsListComponentState {
 
 // Searchable list of forms
 class FormsListComponent extends React.Component<FormsListComponentProps, FormsListComponentState> {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   constructor(props: any) {
     super(props)
@@ -424,7 +424,7 @@ class FormsListComponent extends React.Component<FormsListComponentProps, FormsL
       // TODO use name instead of design.name
       this.setState({
         forms: _.map(forms, (form) => {
-          let desc = ExprUtils.localizeString(form.design.description, this.context.locale) || ""
+          let desc = ExprUtils.localizeString(form.design.description, null) || ""
           if (desc) {
             desc += " - "
           }
@@ -432,7 +432,7 @@ class FormsListComponent extends React.Component<FormsListComponentProps, FormsL
 
           return {
             id: form._id,
-            name: ExprUtils.localizeString(form.design.name, this.context.locale),
+            name: ExprUtils.localizeString(form.design.name, null),
             desc
           }
         })
@@ -447,7 +447,7 @@ class FormsListComponent extends React.Component<FormsListComponentProps, FormsL
       confirm(
         `Remove ${ExprUtils.localizeString(
           table.name,
-          this.context.locale
+          this.context
         )}? Any widgets that depend on it will no longer work properly.`
       )
     ) {
@@ -496,8 +496,8 @@ class FormsListComponent extends React.Component<FormsListComponentProps, FormsL
         ? R(uiComponents.OptionListComponent, {
             items: _.map(tables, (table) => {
               return {
-                name: ExprUtils.localizeString(table.name, this.context.locale),
-                desc: ExprUtils.localizeString(table.desc, this.context.locale),
+                name: ExprUtils.localizeString(table.name, this.context),
+                desc: ExprUtils.localizeString(table.desc, this.context),
                 onClick: this.props.onChange.bind(null, table.id),
                 onRemove: this.handleTableRemove.bind(null, table)
               }
@@ -562,7 +562,7 @@ interface IndicatorsListComponentState {
 
 // Searchable list of indicators
 class IndicatorsListComponent extends React.Component<IndicatorsListComponentProps, IndicatorsListComponentState> {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
   addIndicatorConfirmPopup: AddIndicatorConfirmPopupComponent | null
 
   constructor(props: any) {
@@ -590,7 +590,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.locale)
+          (indicator: any) => ExprUtils.localizeString(indicator.design.name, this.context)
         ],
         ["asc", "asc", "asc"]
       )
@@ -598,8 +598,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.locale),
-          desc: ExprUtils.localizeString(indicator.design.desc, this.context.locale)
+          name: ExprUtils.localizeString(indicator.design.name, this.context),
+          desc: ExprUtils.localizeString(indicator.design.desc, this.context)
         }))
       })
     }).fail((xhr: any) => {
@@ -612,7 +612,7 @@ class IndicatorsListComponent extends React.Component<IndicatorsListComponentPro
       confirm(
         `Remove ${ExprUtils.localizeString(
           table.name,
-          this.context.locale
+          this.context
         )}? Any widgets that depend on it will no longer work properly.`
       )
     ) {
@@ -679,8 +679,8 @@ class IndicatorsListComponent extends React.Component<IndicatorsListComponentPro
         ? R(uiComponents.OptionListComponent, {
             items: _.map(tables, (table) => {
               return {
-                name: ExprUtils.localizeString(table.name, this.context.locale),
-                desc: ExprUtils.localizeString(table.desc, this.context.locale),
+                name: ExprUtils.localizeString(table.name, this.context),
+                desc: ExprUtils.localizeString(table.desc, this.context),
                 onClick: this.handleSelect.bind(null, table.id),
                 onRemove: this.handleTableRemove.bind(null, table)
               }
@@ -738,7 +738,7 @@ class AddIndicatorConfirmPopupComponent extends React.Component<
   AddIndicatorConfirmPopupComponentProps,
   AddIndicatorConfirmPopupComponentState
 > {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   constructor(props: any) {
     super(props)
@@ -781,8 +781,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.locale),
-          desc: ExprUtils.localizeString(entityColumn.desc, this.context.locale),
+          name: ExprUtils.localizeString(entityColumn.name, this.context),
+          desc: ExprUtils.localizeString(entityColumn.desc, this.context),
           onClick: () => {
             // Select table
             this.props.onChange(entityColumn.join!.toTable)
@@ -845,7 +845,7 @@ interface IssuesListComponentState {
 
 // Searchable list of issue types
 class IssuesListComponent extends React.Component<IssuesListComponentProps, IssuesListComponentState> {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   constructor(props: any) {
     super(props)
@@ -869,7 +869,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.locale)
+          (issueType) => ExprUtils.localizeString(issueType.name, this.context)
         ],
         ["asc", "asc", "asc"]
       )
@@ -877,8 +877,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.locale),
-          desc: ExprUtils.localizeString(issueType.desc, this.context.locale)
+          name: ExprUtils.localizeString(issueType.name, this.context),
+          desc: ExprUtils.localizeString(issueType.desc, this.context)
         }))
       })
     }).fail((xhr: any) => {
@@ -891,7 +891,7 @@ class IssuesListComponent extends React.Component<IssuesListComponentProps, Issu
       confirm(
         `Remove ${ExprUtils.localizeString(
           table.name,
-          this.context.locale
+          this.context
         )}? Any widgets that depend on it will no longer work properly.`
       )
     ) {
@@ -940,8 +940,8 @@ class IssuesListComponent extends React.Component<IssuesListComponentProps, Issu
         ? R(uiComponents.OptionListComponent, {
             items: _.map(tables, (table) => {
               return {
-                name: ExprUtils.localizeString(table.name, this.context.locale),
-                desc: ExprUtils.localizeString(table.desc, this.context.locale),
+                name: ExprUtils.localizeString(table.name, this.context),
+                desc: ExprUtils.localizeString(table.desc, this.context),
                 onClick: this.props.onChange.bind(null, table.id),
                 onRemove: this.handleTableRemove.bind(null, table)
               }

package/src/MWaterContextComponent.tsx

@@ -1,15 +1,36 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
-import React from "react"
+import React, { createContext } from "react"
 const R = React.createElement
 
 import MWaterTableSelectComponent from "./MWaterTableSelectComponent"
 import MWaterAddRelatedFormComponent from "./MWaterAddRelatedFormComponent"
 import MWaterAddRelatedIndicatorComponent from "./MWaterAddRelatedIndicatorComponent"
 import MWaterGlobalFiltersComponent from "./MWaterGlobalFiltersComponent"
-import { Schema, Section } from "@mwater/expressions"
+import { DataSource, Schema, Section } from "@mwater/expressions"
 import { CustomTableSelectComponentFactoryContext, CustomTableSelectComponentFactoryOptions, DecorateScalarExprTreeSectionChildrenContext, DecorateScalarExprTreeSectionChildrenOptions } from "@mwater/expressions-ui"
 import { IsScalarExprTreeSectionInitiallyOpenContext, IsScalarExprTreeSectionMatchContext } from "@mwater/expressions-ui"
+import { GlobalFilter } from "./GlobalFilter"
+import { AddLayerComponentProps } from "./maps/AddLayerComponent"
+
+
+export interface GlobalFiltersElementFactoryProps {
+  schema: Schema
+  dataSource: DataSource
+  filterableTables: string[]
+  globalFilters?: GlobalFilter[]
+  onChange: (globalFilters: GlobalFilter[]) => void
+
+  /** If true, return null element if not applicable to filterableTables */
+  nullIfIrrelevant?: boolean
+}
+
+export type GlobalFiltersElementFactory = (props: GlobalFiltersElementFactoryProps) => React.ReactElement | null
+
+export const GlobalFiltersElementFactoryContext = createContext<GlobalFiltersElementFactory | null>(null)
+
+export type AddLayerElementFactory = (props: AddLayerComponentProps) => React.ReactElement | null
+
+export const AddLayerElementFactoryContext = createContext<AddLayerElementFactory | undefined>(undefined)
 
 /** 
  * Creates several contexts to allow selecting of a table in an mWater-friendly way
@@ -18,7 +39,7 @@ import { IsScalarExprTreeSectionInitiallyOpenContext, IsScalarExprTreeSectionMat
 export default class MWaterContextComponent extends React.Component<{
   apiUrl: string
   client?: string
-  /**  user id of logged in user */
+  /** user id of logged in user */
   user?: string
   schema: Schema
   /**  Extra tables to load in schema. Forms are not loaded by default as they are too many */
@@ -26,14 +47,8 @@ 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.func, // Call with props of AddLayerComponent
-    globalFiltersElementFactory: PropTypes.func, // Call with props { schema, dataSource, filterableTables, globalFilters, onChange, nullIfIrrelevant }.
-    // Displays a component to edit global filters. nullIfIrrelevant causes null element if not applicable to filterableTables
-  }
-
   createTableSelectElementFactory = (options: CustomTableSelectComponentFactoryOptions) => {
     return (
       <MWaterTableSelectComponent
@@ -51,22 +66,12 @@ export default class MWaterContextComponent extends React.Component<{
     )
   }
 
-  getChildContext() {
-    const context: any = {}
-
-    if (this.props.addLayerElementFactory) {
-      context.addLayerElementFactory = this.props.addLayerElementFactory
+  createGlobalFiltersElementFactory = (props: GlobalFiltersElementFactoryProps) => {
+    if (props.nullIfIrrelevant && !_.any(props.filterableTables, (t: string) => t.match(/^entities./))) {
+      return null
     }
 
-    context.globalFiltersElementFactory = (props: any) => {
-      if (props.nullIfIrrelevant && !_.any(props.filterableTables, (t: string) => t.match(/^entities./))) {
-        return null
-      }
-
-      return React.createElement(MWaterGlobalFiltersComponent, props)
-    }
-
-    return context
+    return <MWaterGlobalFiltersComponent {...props} />
   }
 
   isScalarExprTreeSectionMatch = (options: { tableId: string; section: Section; filter?: string }) => {
@@ -128,13 +133,17 @@ export default class MWaterContextComponent extends React.Component<{
 
   render() {
     return <CustomTableSelectComponentFactoryContext.Provider value={this.createTableSelectElementFactory}>
-      <IsScalarExprTreeSectionMatchContext.Provider value={this.isScalarExprTreeSectionMatch}>
-        <IsScalarExprTreeSectionInitiallyOpenContext.Provider value={this.isScalarExprTreeSectionInitiallyOpen}>
-          <DecorateScalarExprTreeSectionChildrenContext.Provider value={this.decorateScalarExprTreeSectionChildren}>
-            {this.props.children}
-          </DecorateScalarExprTreeSectionChildrenContext.Provider>
-        </IsScalarExprTreeSectionInitiallyOpenContext.Provider>
-      </IsScalarExprTreeSectionMatchContext.Provider>
-    </CustomTableSelectComponentFactoryContext.Provider>
+      <GlobalFiltersElementFactoryContext.Provider value={this.createGlobalFiltersElementFactory}>
+        <IsScalarExprTreeSectionMatchContext.Provider value={this.isScalarExprTreeSectionMatch}>
+          <IsScalarExprTreeSectionInitiallyOpenContext.Provider value={this.isScalarExprTreeSectionInitiallyOpen}>
+            <DecorateScalarExprTreeSectionChildrenContext.Provider value={this.decorateScalarExprTreeSectionChildren}>
+              <AddLayerElementFactoryContext.Provider value={this.props.addLayerElementFactory}>
+                {this.props.children}
+              </AddLayerElementFactoryContext.Provider>
+            </DecorateScalarExprTreeSectionChildrenContext.Provider>
+          </IsScalarExprTreeSectionInitiallyOpenContext.Provider>
+
+        </IsScalarExprTreeSectionMatchContext.Provider>
+      </GlobalFiltersElementFactoryContext.Provider>    </CustomTableSelectComponentFactoryContext.Provider>
   }
 }

package/src/MWaterCustomTablesetListComponent.tsx

@@ -27,14 +27,19 @@ export const MWaterCustomTablesetListComponent = (props: {
   const [search, setSearch] = useState<string | null>("")
   const [extraTableNeeded, setExtraTableNeeded] = useState<string>()
 
+  const [showSystem, setShowSystem] = useState(false)
+
   // Get list of all tablesets
   useEffect(() => {
     fetch(`${props.apiUrl}custom_tablesets?client=${props.client || ""}`)
       .then((response) => response.json())
-      .then((body) => {
+      .then((tablesets) => {
+        // Filter out non-normal
+        tablesets = tablesets.filter((ts: CustomTableset) => ts.type === "normal")
+
         // Put included ones first
         setTablesets(
-          _.sortByAll(body, [
+          _.sortByAll(tablesets, [
             (ts) => (props.extraTables.some((t) => (t || "").startsWith(`custom.${ts.code}.`)) ? 0 : 1),
             (ts) => ExprUtils.localizeString(ts.design.name, props.locale)
           ])
@@ -117,10 +122,17 @@ export const MWaterCustomTablesetListComponent = (props: {
     )
   }
 
+  const visibleTablesets = tablesets.filter((ts) => (showSystem || !ts.design.system) && !ts.design.deprecated)
+
   return (
     <div>
       <TextInput value={search} onChange={setSearch} placeholder="Search..." />
-      {tablesets.map((ts) => renderTableset(ts))}
+      {visibleTablesets.map((ts) => renderTableset(ts))}
+      <div>
+        <button className="btn btn-link btn-sm" onClick={() => setShowSystem(!showSystem)}>
+          {showSystem ? "Hide system tables" : "Show system tables"}
+        </button>
+      </div>
     </div>
   )
 }
@@ -137,5 +149,11 @@ interface CustomTableset {
     desc?: LocalizedString
 
     tables: Table[]
+
+    /** True if tableset is deprecated */
+    deprecated?: boolean
+
+    /** True if tableset is for system use and should only be visible to admins in the UI */
+    system?: boolean
   }
 }

package/src/MWaterGlobalFiltersComponent.ts

@@ -2,19 +2,19 @@ import _ from "lodash"
 import React from "react"
 const R = React.createElement
 
-import querystring from "querystring"
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import { IdLiteralComponent } from "@mwater/expressions-ui"
 import { DataSource, Schema } from "@mwater/expressions"
+import { GlobalFilter } from "./GlobalFilter"
 
 export interface MWaterGlobalFiltersComponentProps {
   /** Schema of the database */
   schema: Schema
   /** Data source to use to get values */
   dataSource: DataSource
-  filterableTables: any
-  globalFilters?: any
-  onChange: any
+  filterableTables: string[]
+  globalFilters?: GlobalFilter[]
+  onChange: (globalFilters: GlobalFilter[]) => void
 }
 
 // Control to edit the global filters (_managed_by and admin_region)
@@ -36,7 +36,7 @@ export default class MWaterGlobalFiltersComponent extends React.Component<MWater
       })
     }
 
-    return this.props.onChange(globalFilters)
+    this.props.onChange(globalFilters)
   }
 
   handleManagedByChange = (managedBy: any) => {
@@ -56,13 +56,13 @@ export default class MWaterGlobalFiltersComponent extends React.Component<MWater
       })
     }
 
-    return this.props.onChange(globalFilters)
+    this.props.onChange(globalFilters)
   }
 
   render() {
     // Find managed by
     let adminRegions, managedBy
-    const managedByEntry = _.find(this.props.globalFilters, (gf) => gf.op === "within" && gf.columnId === "_managed_by")
+    const managedByEntry = _.find(this.props.globalFilters || [], (gf) => gf.op === "within" && gf.columnId === "_managed_by")
     if (managedByEntry) {
       managedBy = managedByEntry.exprs[0].value.split(":")[1]
     } else {
@@ -71,7 +71,7 @@ export default class MWaterGlobalFiltersComponent extends React.Component<MWater
 
     // Find admin region
     const adminRegionEntry = _.find(
-      this.props.globalFilters,
+      this.props.globalFilters || [],
       (gf) => gf.op === "within any" && gf.columnId === "admin_region"
     )
     if (adminRegionEntry) {

package/src/MWaterLoaderComponent.ts

@@ -6,7 +6,7 @@ import { DataSource, Schema } from "@mwater/expressions"
 import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent"
 import LoadingComponent from "@mwater/react-library/lib/LoadingComponent"
 import mWaterLoader from "./mWaterLoader"
-import MWaterContextComponent from "./MWaterContextComponent"
+import MWaterContextComponent, { AddLayerElementFactory } from "./MWaterContextComponent"
 
 /**
  * Loads an mWater schema from the server and creates child with schema and dataSource
@@ -29,10 +29,12 @@ 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
@@ -73,13 +75,21 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<
         share: props.share,
         asUser: props.asUser,
         extraTables: props.extraTables,
-        locales: props.locales
+        locales: props.locales,
+        origin: props.origin
       },
       (error: any, config: any) => {
         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}`
           if (this.props.errorFormatter) {
-            return callback({ error: this.props.errorFormatter(JSON.parse(error.message), defaultError) })
+            try {
+              const parsedError = JSON.parse(error.message)
+              if (parsedError) {
+                return callback({ error: this.props.errorFormatter(parsedError, defaultError) })
+              }
+            } catch (e) {
+              // Ignore
+            }
           }
           return callback({ error: defaultError })
         }

package/src/MWaterTableSelectComponent.tsx

@@ -7,7 +7,7 @@ import { ExprUtils, Schema } from "@mwater/expressions"
 import MWaterResponsesFilterComponent from "./MWaterResponsesFilterComponent"
 import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent"
 import MWaterCompleteTableSelectComponent from "./MWaterCompleteTableSelectComponent"
-import { ActiveTablesContext } from "@mwater/expressions-ui"
+import { ActiveTablesContext, LocaleContext } from "@mwater/expressions-ui"
 
 export interface MWaterTableSelectComponentProps {
   /** Url to hit api */
@@ -36,9 +36,7 @@ export default class MWaterTableSelectComponent extends React.Component<
   MWaterTableSelectComponentProps,
   MWaterTableSelectComponentState
 > {
-  static contextTypes = {
-    locale: PropTypes.string, // e.g. "en"
-  }
+  static contextType = LocaleContext
   
   toggleEdit: any
 
@@ -139,9 +137,12 @@ export default class MWaterTableSelectComponent extends React.Component<
         },
         forceOpen: !this.props.table, // Must have table
         label: this.props.table
-          ? ExprUtils.localizeString(this.props.schema.getTable(this.props.table)?.name, this.context.locale)
+          ? ExprUtils.localizeString(this.props.schema.getTable(this.props.table)?.name, this.context)
           : "",
-        editor
+        editor,
+        onRemove: () => {
+          this.props.onChange(null)
+        }
       }),
 
       // Make sure table still exists
@@ -184,9 +185,7 @@ class EditModeTableSelectComponent extends React.Component<
   EditModeTableSelectComponentProps,
   EditModeTableSelectComponentState
 > {
-  static contextTypes = {
-    locale: PropTypes.string, // e.g. "en"
-  }
+  static contextType = LocaleContext
 
   constructor(props: any) {
     super(props)
@@ -237,7 +236,7 @@ class EditModeTableSelectComponent extends React.Component<
 
     // Sort by name
     tables = _.sortBy(tables, (tableId) =>
-      ExprUtils.localizeString(this.props.schema.getTable(tableId)!.name, this.context.locale)
+      ExprUtils.localizeString(this.props.schema.getTable(tableId)!.name, this.context)
     )
 
     return tables
@@ -279,8 +278,8 @@ class EditModeTableSelectComponent extends React.Component<
                 <OptionListComponent items={this.getTableShortlist(activeTables).map((tableId) => {
                   const table = this.props.schema.getTable(tableId)!
                   return {
-                    name: ExprUtils.localizeString(table.name, this.context.locale),
-                    desc: ExprUtils.localizeString(table.desc, this.context.locale),
+                    name: ExprUtils.localizeString(table.name, this.context),
+                    desc: ExprUtils.localizeString(table.desc, this.context),
                     onClick: () => this.props.onChange(table.id)
                   }
                 })} />

package/src/{UIComponents.ts → UIComponents.tsx}

@@ -9,6 +9,7 @@ import { Radio } from "@mwater/react-library/lib/bootstrap"
 export interface SectionComponentProps {
   icon?: string
   label?: any
+  required?: boolean
 }
 
 // Miscellaneous ui components
@@ -28,7 +29,8 @@ export class SectionComponent extends React.Component<SectionComponentProps> {
         this.props.icon && this.props.icon.match(/^glyphicon-/)
           ? [R("span", { className: `glyphicon ${this.props.icon}` }), " "]
           : undefined,
-        this.props.label
+        this.props.label,
+        this.props.required ? <span style={{ color: "red" }}> *</span> : undefined
       ),
       R("div", { style: { marginLeft: 10 } }, this.props.children)
     )
@@ -205,7 +207,7 @@ export interface ToggleEditComponentProps {
   initiallyOpen?: boolean
   label: any
   editor: any
-  onRemove?: any
+  onRemove?: () => void
 }
 
 interface ToggleEditComponentState {
@@ -221,25 +223,15 @@ export class ToggleEditComponent extends React.Component<ToggleEditComponentProp
   }
 
   close = () => {
-    // Save height of editor
-    if (this.editorComp) {
-      this.editorHeight = ReactDOM.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: any) => {
-    return (this.editorComp = editorComp)
+    this.setState({ open: !this.state.open })
   }
 
   render() {