@mwater/visualization 5.0.1 → 5.2.0

package/src/maps/ServerMapDataSource.ts

@@ -35,7 +35,7 @@ interface ServerMapDataSourceOptions {
   mapId: string
 
   /** revision to use to allow caching */
-  rev: string
+  rev: number
 }
 
 interface ServerMapLayerDataSourceOptions extends ServerMapDataSourceOptions {
@@ -79,7 +79,7 @@ export default class ServerMapDataSource implements MapDataSource {
 
     $.getJSON(url, (data: any) => {
       return callback(null, data)
-    }).fail((xhr) => {
+    }).fail((xhr: any) => {
       console.log(xhr.responseText)
       return callback(new Error(xhr.responseText))
     })
@@ -317,9 +317,9 @@ class ServerMapLayerPopupWidgetDataSource implements WidgetDataSource {
       `maps/${this.options.mapId}/layers/${this.options.layerId}/widgets/${this.options.popupWidgetId}/data?` +
       querystring.stringify(query)
 
-    return $.getJSON(url, (data) => {
+    return $.getJSON(url, (data: any) => {
       return callback(null, data)
-    }).fail((xhr) => {
+    }).fail((xhr: any) => {
       console.log(xhr.responseText)
       return callback(new Error(xhr.responseText))
     })
@@ -374,7 +374,7 @@ class ServerQuickfilterDataSource implements QuickfiltersDataSource {
       `maps/${this.options.mapId}/quickfilters/${index}/values?` +
       querystring.stringify(query)
 
-    const headers = {}
+    const headers: any = {}
     const cacheExpiry = this.options.dataSource.getCacheExpiry()
     if (cacheExpiry) {
       const seconds = Math.floor((new Date().getTime() - cacheExpiry) / 1000)
@@ -387,10 +387,10 @@ class ServerQuickfilterDataSource implements QuickfiltersDataSource {
       url,
       headers
     })
-      .done((data) => {
+      .done((data: any) => {
         return callback(null, data)
       })
-      .fail((xhr) => {
+      .fail((xhr: any) => {
         console.log(xhr.responseText)
         return callback(new Error(xhr.responseText))
       })

package/src/maps/SwitchableTileUrlLayerDesigner.tsx

@@ -3,22 +3,10 @@ import React from "react"
 const R = React.createElement
 import { produce } from "immer"
 
-import { ExprComponent, FilterExprComponent } from "@mwater/expressions-ui"
-import { ExprCompiler, Schema, DataSource, Expr, OpExpr } from "@mwater/expressions"
-import AxisComponent from "./../axes/AxisComponent"
-import TableSelectComponent from "../TableSelectComponent"
-import ColorComponent from "../ColorComponent"
-import Rcslider from "rc-slider"
-import ChoroplethLayerDesign from "./ChoroplethLayerDesign"
 import { JsonQLFilter } from "../index"
-import EditPopupComponent from "./EditPopupComponent"
-import ZoomLevelsComponent from "./ZoomLevelsComponent"
-import ui, { Radio } from "@mwater/react-library/lib/bootstrap"
-import { Axis } from "../axes/Axis"
+import { Radio } from "@mwater/react-library/lib/bootstrap"
 import { SwitchableTileUrlLayerDesign } from "./SwitchableTileUrlLayer"
 
-import AdminScopeAndDetailLevelComponent from "./AdminScopeAndDetailLevelComponent"
-import ScopeAndDetailLevelComponent from "./ScopeAndDetailLevelComponent"
 
 /** Designer for a switchable tile url layer */
 export default class SwitchableTileUrlLayerDesigner extends React.Component<{

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/VectorMapViewComponent.tsx

@@ -14,7 +14,6 @@ import {
   getFilterableTables as utilsGetFilterableTables,
   MapScope
 } from "./MapUtils"
-import {Color} from '@maplibre/maplibre-gl-style-spec';
 
 import "maplibre-gl/dist/maplibre-gl.css"
 import "./VectorMapViewComponent.css"

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/maps/vectorMaps.tsx

@@ -7,6 +7,13 @@ import "maplibre-gl/dist/maplibre-gl.css"
 import "./VectorMapViewComponent.css"
 import React from "react"
 
+/** Set to true to enable printing by preserving the drawing buffer */
+let printingModeEnabled = false
+
+export function setPrintingModeEnabled(val: boolean) {
+  printingModeEnabled = val
+}
+
 /* Hooks and functions related to displaying a vector map */
 
 let mapTilerApiKey = ""
@@ -58,7 +65,8 @@ export function useVectorMap(options: {
     }
     
     const observer = new IntersectionObserver(function(entries) {
-      setMapDivVisible(entries[0].isIntersecting)
+      // When in printing mode, always visible as we need to render the map
+      setMapDivVisible(entries[0].isIntersecting || printingModeEnabled)
     })
     observer.observe(divRef)
     return () => {
@@ -98,6 +106,7 @@ export function useVectorMap(options: {
         [-179.9, -85], // Southwest coordinates
         [179.9, 85] // Northeast coordinates
       ],
+      preserveDrawingBuffer: printingModeEnabled
     })
 
     setHasWebGLContext(true)

package/src/quickfilter/QuickfilterCompiler.ts

@@ -81,7 +81,7 @@ export default class QuickfilterCompiler {
     return filters
   }
 
-  compileToFilterExpr(expr: any, value: any, multi: any): OpExpr | null {
+  compileToFilterExpr(expr: any, value: any, multi?: boolean): OpExpr | null {
     // Get type of expr
     const type = new ExprUtils(this.schema).getExprType(expr)
     const idTable = new ExprUtils(this.schema).getExprIdTable(expr)

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/charts/table/TableChartViewComponent.ts

@@ -223,7 +223,7 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
 
   renderImage(id: any) {
     const url = this.props.dataSource.getImageUrl(id)
-    return R("a", { href: url, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, "Image")
+    return R("a", { href: url, onClick: (e) => {e.stopPropagation()}, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, "Image")
   }
 
   renderCell(rowIndex: any, columnIndex: any) {
@@ -264,7 +264,9 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
         // Convert to node based on type
         switch (exprType) {
           case "text":
-            node = R(Linkify, { properties: { target: "_blank" } }, value)
+            if (_.isString(value)) {
+              node = R(Linkify, { properties: { target: "_blank" } }, value)
+            }
             break
           case "number":
           case "geometry":
@@ -272,21 +274,33 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
             break
           case "boolean":
           case "enum":
+            node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context.locale)
+            break
           case "enumset":
           case "text[]":
-            node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context.locale)
+            if (_.isArray(value)) {
+              node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context.locale)
+            }
             break
           case "date":
-            node = formatValue(exprType, value, column.format)
+            if (_.isString(value)) {
+              node = formatValue(exprType, value, column.format)
+            }
             break
           case "datetime":
-            node = formatValue(exprType, value, column.format)
+            if (_.isString(value)) {
+              node = formatValue(exprType, value, column.format)
+            }
             break
           case "image":
-            node = this.renderImage(value.id)
+            if (_.isObject(value) && value.id != null) {
+              node = this.renderImage(value.id)
+            }
             break
           case "imagelist":
-            node = _.map(value, (v: Image) => this.renderImage(v.id))
+            if (_.isArray(value)) {
+              node = _.map(value, (v: Image) => this.renderImage(v.id))
+            }
             break
           default:
             node = "" + value

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/widgets/text/TextWidgetDesign.ts

@@ -1,6 +1,9 @@
+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"

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)
-              }
-            })
-          )
-        })
-      }
-    })
-  }
-}