@mwater/visualization 5.0.1 → 5.1.0

package/src/maps/UtfGridLayer.ts

@@ -65,8 +65,8 @@ module.exports = L.Layer.extend({
 
     //Find a unique id in window we can use for our callbacks
     //Required for jsonP
-    var i = 0
-    while (window["lu" + i]) {
+    let i = 0
+    while ((window as any)["lu" + i]) {
       i++
     }
     this._windowKey = "lu" + i
@@ -244,9 +244,9 @@ module.exports = L.Layer.extend({
     script.setAttribute("type", "text/javascript")
     script.setAttribute("src", url)
 
-    window[wk][functionName] = function (data: any) {
+    ;(window as any)[wk][functionName] = function (data: any) {
       self._cache[key] = data
-      delete window[wk][functionName]
+      delete (window as any)[wk][functionName]
       head.removeChild(script)
     }
 

package/src/maps/mapboxUtils.ts

@@ -3,7 +3,7 @@ import { Axis } from "../axes/Axis"
 
 /** Compile a color mapped axis to mapbox format case statement */
 export function compileColorMapToMapbox(axis: Axis | null | undefined, defaultColor: string): DataDrivenPropertyValueSpecification<string> | string {
-  let compiled: DataDrivenPropertyValueSpecification<string> | string
+  let compiled: any
 
   if (axis && axis.colorMap && axis.colorMap.length > 0) {
     const excludedValues = axis.excludedValues || []
@@ -31,7 +31,7 @@ export function compileColorMapToMapbox(axis: Axis | null | undefined, defaultCo
 
 /** Compile a color that is transparent if excluded to mapbox format case statement */
 export function compileColorToMapbox(color: string, excludedValues?: any[]): DataDrivenPropertyValueSpecification<string> | string {
-  let compiled: DataDrivenPropertyValueSpecification<string> | string
+  let compiled: any
 
   if (excludedValues) {
     // Create match operator

package/src/richtext/ExprItemsHtmlConverter.ts

@@ -121,7 +121,7 @@ export default class ExprItemsHtmlConverter extends ItemsHtmlConverter {
     const items = super.convertElemToItems(elem)
 
     // Ensure exprs have unique ids
-    const takenIds = {}
+    const takenIds: { [id: string]: boolean } = {}
     var uniqueify = (items: any) => {
       for (let item of items) {
         if (item.type === "expr") {

package/src/richtext/FontColorPaletteItem.ts

@@ -36,7 +36,7 @@ export default class FontColorPaletteItem extends React.Component<
   }
 
   render() {
-    const popupPosition = {
+    const popupPosition: React.CSSProperties = {
       position: "absolute",
       left: 0,
       zIndex: 1000,

package/src/richtext/FontSizePaletteItem.ts

@@ -60,7 +60,7 @@ export default class FontSizePaletteItem extends React.Component<FontSizePalette
   }
 
   render() {
-    const popupPosition = {
+    const popupPosition: React.CSSProperties = {
       position: "absolute",
       left: 0,
       zIndex: 1000,

package/src/richtext/ItemsHtmlConverter.ts

@@ -215,7 +215,7 @@ export default class ItemsHtmlConverter {
 }
 
 // Whitelist allowed tags and styles
-var allowedTags = {
+var allowedTags: { [tag: string]: number } = {
   div: 1,
   p: 1,
   ul: 1,
@@ -236,7 +236,7 @@ var allowedTags = {
   strong: 1,
   font: 1
 }
-var allowedStyles = {
+var allowedStyles: { [style: string]: number } = {
   "text-align": 1,
   "font-weight": 1,
   "font-style": 1,

package/src/widgets/ImageWidgetComponent.ts

@@ -10,7 +10,7 @@ import DropdownWidgetComponent from "./DropdownWidgetComponent"
 import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent"
 import TabbedComponent from "@mwater/react-library/lib/TabbedComponent"
 import { ExprComponent } from "@mwater/expressions-ui"
-import TableSelectComponent from "../TableSelectComponent"
+import { TableSelectComponent } from "@mwater/expressions-ui"
 import ImageUploaderComponent from "./ImageUploaderComponent"
 import ImagelistCarouselComponent from "./ImagelistCarouselComponent"
 import { DataSource, Schema } from "@mwater/expressions"

package/src/widgets/charts/calendar/CalendarChartDesignerComponent.ts

@@ -7,7 +7,7 @@ import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
 import AxisBuilder from "../../../axes/AxisBuilder"
 import AxisComponent from "../../../axes/AxisComponent"
 import { FilterExprComponent } from "@mwater/expressions-ui"
-import TableSelectComponent from "../../../TableSelectComponent"
+import { TableSelectComponent } from "@mwater/expressions-ui"
 import ColorComponent from "../../../ColorComponent"
 import { CalendarChartDesign } from "./CalendarChart"
 

package/src/widgets/charts/imagemosaic/ImageMosaicChart.ts

@@ -183,7 +183,7 @@ export default class ImageMosaicChart extends Chart {
 
   createDataTable(design: any, schema: Schema, dataSource: DataSource, data: any) {
     alert("Not available for Image Mosaics")
-    return null
+    return []
   }
   // TODO
   // renderHeaderCell = (column) =>

package/src/widgets/charts/imagemosaic/ImageMosaicChartDesignerComponent.ts

@@ -8,7 +8,7 @@ import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
 import AxisBuilder from "../../../axes/AxisBuilder"
 import AxisComponent from "../../../axes/AxisComponent"
 import { FilterExprComponent } from "@mwater/expressions-ui"
-import TableSelectComponent from "../../../TableSelectComponent"
+import { TableSelectComponent } from "@mwater/expressions-ui"
 
 export interface ImageMosaicChartDesignerComponentProps {
   design: any

package/src/widgets/charts/layered/LayeredChartLayerDesignerComponent.tsx

@@ -11,7 +11,7 @@ import ColorComponent from "../../../ColorComponent"
 import * as LayeredChartUtils from "./LayeredChartUtils"
 import LayeredChartCompiler from "./LayeredChartCompiler"
 import * as uiComponents from "../../../UIComponents"
-import TableSelectComponent from "../../../TableSelectComponent"
+import { TableSelectComponent } from "@mwater/expressions-ui"
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import { Checkbox } from "@mwater/react-library/lib/bootstrap"
 import PopoverHelpComponent from "@mwater/react-library/lib/PopoverHelpComponent"

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

@@ -5,7 +5,7 @@ const R = React.createElement
 import uuid from "uuid"
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import { FilterExprComponent } from "@mwater/expressions-ui"
-import TableSelectComponent from "../../../TableSelectComponent"
+import { TableSelectComponent } from "@mwater/expressions-ui"
 import AxisComponent from "../../../axes/AxisComponent"
 import { DataSource, Schema } from "@mwater/expressions"
 

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

@@ -9,7 +9,7 @@ import { LinkComponent } from "@mwater/expressions-ui"
 import { ExprComponent } from "@mwater/expressions-ui"
 import { FilterExprComponent } from "@mwater/expressions-ui"
 import OrderingsComponent from "./OrderingsComponent"
-import TableSelectComponent from "../../../TableSelectComponent"
+import { TableSelectComponent } from "@mwater/expressions-ui"
 import ReorderableListComponent from "@mwater/react-library/lib/reorderable/ReorderableListComponent"
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import { getFormatOptions } from "../../../valueFormatter"

package/src/widgets/text/ExprItemEditorComponent.tsx

@@ -5,7 +5,7 @@ const R = React.createElement
 
 import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
 import { ExprComponent } from "@mwater/expressions-ui"
-import TableSelectComponent from "../../TableSelectComponent"
+import { TableSelectComponent } from "@mwater/expressions-ui"
 import { getFormatOptions } from "../../valueFormatter"
 import { getDefaultFormat } from "../../valueFormatter"
 import { Checkbox } from "@mwater/react-library/lib/bootstrap"

package/src/MWaterContextComponent.ts

@@ -1,141 +0,0 @@
-import PropTypes from "prop-types"
-import _ from "lodash"
-import React from "react"
-const R = React.createElement
-
-import MWaterTableSelectComponent from "./MWaterTableSelectComponent"
-import MWaterAddRelatedFormComponent from "./MWaterAddRelatedFormComponent"
-import MWaterAddRelatedIndicatorComponent from "./MWaterAddRelatedIndicatorComponent"
-import MWaterGlobalFiltersComponent from "./MWaterGlobalFiltersComponent"
-import { Schema } from "@mwater/expressions"
-
-/** Creates a tableSelectElementFactory context to allow selecting of a table in an mWater-friendly way
- * and several other context items
- */
-export default class MWaterContextComponent extends React.Component<{
-  apiUrl: string
-  client?: string
-  /**  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 */
-  extraTables?: string[]
-  /**  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
-}> {
-  static childContextTypes = {
-    tableSelectElementFactory: PropTypes.func, // Call with props of TableSelectComponent
-    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
-
-    // Decorates sections (the children element, specifically) in the expression picker
-    decorateScalarExprTreeSectionChildren: PropTypes.func,
-
-    // Function to override initial open state of a section. Passed { tableId: id of table, section: section object from schema, filter: optional string filter }
-    // Should return true to set initially open
-    isScalarExprTreeSectionInitiallyOpen: PropTypes.func,
-
-    // Function to override filtering of a section. Passed { tableId: id of table, section: section object from schema, filter: optional string filter }
-    // Should return null for default, true to include, false to exclude
-    isScalarExprTreeSectionMatch: PropTypes.func
-  }
-
-  getChildContext() {
-    const context: any = {}
-
-    context.tableSelectElementFactory = (props: any) => {
-      return React.createElement(MWaterTableSelectComponent, {
-        apiUrl: this.props.apiUrl,
-        client: this.props.client,
-        schema: props.schema,
-        user: this.props.user,
-        table: props.value,
-        onChange: props.onChange,
-        extraTables: this.props.extraTables,
-        onExtraTablesChange: this.props.onExtraTablesChange,
-        filter: props.filter,
-        onFilterChange: props.onFilterChange
-      })
-    }
-
-    if (this.props.addLayerElementFactory) {
-      context.addLayerElementFactory = this.props.addLayerElementFactory
-    }
-
-    context.globalFiltersElementFactory = (props: any) => {
-      if (props.nullIfIrrelevant && !_.any(props.filterableTables, (t: string) => t.match(/^entities./))) {
-        return null
-      }
-
-      return React.createElement(MWaterGlobalFiltersComponent, props)
-    }
-
-    context.decorateScalarExprTreeSectionChildren = (options: any) => {
-      // If related forms section of entities table or assets table
-      if ((options.tableId.match(/^entities\./) || options.tableId.match(/^assets:/)) && options.section.id === "!related_forms") {
-        return R(
-          "div",
-          { key: "_add_related_form_parent" },
-          options.children,
-          R(MWaterAddRelatedFormComponent, {
-            key: "_add_related_form",
-            table: options.tableId,
-            apiUrl: this.props.apiUrl,
-            client: this.props.client,
-            user: this.props.user,
-            schema: this.props.schema,
-            onSelect: this.handleAddTable
-          })
-        )
-      }
-
-      // If indicators section of entities table
-      if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
-        return R(
-          "div",
-          { key: "_add_related_indicator_parent" },
-          options.children,
-          R(MWaterAddRelatedIndicatorComponent, {
-            key: "_add_related_indicator",
-            table: options.tableId,
-            apiUrl: this.props.apiUrl,
-            client: this.props.client,
-            user: this.props.user,
-            schema: this.props.schema,
-            onSelect: this.handleAddTable,
-            filter: options.filter
-          })
-        )
-      } else {
-        return options.children
-      }
-    }
-
-    // Always match indicator section
-    context.isScalarExprTreeSectionMatch = (options: any) => {
-      if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
-        return true
-      }
-      return null
-    }
-
-    // Nothing initially open
-    context.isScalarExprTreeSectionInitiallyOpen = (options: any) => {
-      return null
-    }
-
-    return context
-  }
-
-  handleAddTable = (table: any) => {
-    const extraTables = _.union(this.props.extraTables || [], [table])
-    return this.props.onExtraTablesChange!(extraTables)
-  }
-
-  render() {
-    return this.props.children
-  }
-}

package/src/TableSelectComponent.ts

@@ -1,60 +0,0 @@
-import _ from "lodash"
-import PropTypes from "prop-types"
-import React from "react"
-import * as ui from "./UIComponents"
-import { Expr, ExprUtils, Schema } from "@mwater/expressions"
-const R = React.createElement
-
-export interface TableSelectComponentProps {
-  schema: Schema
-  /** Current table id */
-  value?: string | null
-  /** Newly selected table id */
-  onChange: (tableId: string) => void
-  /** Some table select components (not the default) can also perform filtering. Include these props to enable this */
-  filter?: Expr
-  onFilterChange?: (filter: Expr) => void
-}
-
-export default class TableSelectComponent extends React.Component<TableSelectComponentProps> {
-  static contextTypes = {
-    tableSelectElementFactory: PropTypes.func, // Can be overridden by setting tableSelectElementFactory in context that takes ({ schema, value, onChange, filter, onFilterChange })
-    locale: PropTypes.string, // e.g. "en"
-
-    // Optional list of tables (ids) being used. Some overrides of the table select component may use this to present
-    // an initially short list to select from
-    activeTables: PropTypes.arrayOf(PropTypes.string.isRequired)
-  }
-
-  render() {
-    if (this.context.tableSelectElementFactory) {
-      return this.context.tableSelectElementFactory(this.props)
-    }
-
-    return React.createElement(ui.ToggleEditComponent, {
-      forceOpen: !this.props.value,
-      label: this.props.value
-        ? ExprUtils.localizeString(
-            this.props.schema.getTable(this.props.value)?.name || "(not found)",
-            this.context.locale
-          )
-        : R("i", null, "Select..."),
-      editor: (onClose: any) => {
-        return React.createElement(ui.OptionListComponent, {
-          hint: "Select source to get data from",
-          items: _.map(
-            _.filter(this.props.schema.getTables(), (table) => !table.deprecated),
-            (table) => ({
-              name: ExprUtils.localizeString(table.name, this.context.locale),
-              desc: ExprUtils.localizeString(table.desc, this.context.locale),
-              onClick: () => {
-                onClose()
-                return this.props.onChange(table.id)
-              }
-            })
-          )
-        })
-      }
-    })
-  }
-}