@mwater/visualization 5.0.0 → 5.1.0

package/src/maps/Layer.ts

@@ -312,22 +312,12 @@ export default class Layer<LayerDesign> {
 
         if (results[0].bounds) {
           const [w, s, e, n] = bbox(results[0].bounds)
-          // Pad to 10km if point
-          if (w === e && n === s) {
-            bounds = {
-              w: w - 0.1,
-              s: s - 0.1,
-              e: e + 0.1,
-              n: n + 0.1
-            }
-            // Pad bounds to prevent too small box (10m)
-          } else {
-            bounds = {
-              w: w - 0.001,
-              s: s - 0.001,
-              e: e + 0.001,
-              n: n + 0.001
-            }
+          // Pad bounds to prevent too small box (100m)
+          bounds = {
+            w: w - 0.001,
+            s: s - 0.001,
+            e: e + 0.001,
+            n: n + 0.001
           }
         }
 

package/src/maps/LegendGroup.ts

@@ -76,7 +76,7 @@ class LegendItem extends React.Component<LegendItemProps> {
   }
 
   renderColorIndicator() {
-    const indicatorStyle = {
+    const indicatorStyle: React.CSSProperties = {
       height: 10,
       width: 10,
       backgroundColor: this.props.color,

package/src/maps/MWaterServerLayer.ts

@@ -94,14 +94,14 @@ class LoadingLegend extends React.Component<LoadingLegendProps, LoadingLegendSta
   }
 
   componentDidMount() {
-    return $.get(this.props.url).done((data) => {
+    return $.get(this.props.url).done((data: any) => {
       return this.setState({ html: data })
     })
   }
 
   componentWillReceiveProps(nextProps: any) {
     if (nextProps.url !== this.props.url) {
-      return $.get(nextProps.url).done((data) => {
+      return $.get(nextProps.url).done((data: any) => {
         return this.setState({ html: data })
       })
     }

package/src/maps/MapComponent.ts

@@ -303,7 +303,7 @@ export default class MapComponent extends React.Component<MapComponentProps, Map
           gridTemplateAreas: `"header designer" "quickfilters designer" "view designer"`
         }
       },
-      this.renderHeader(),
+      this.props.hideTitleBar != true ? this.renderHeader() : null,
       this.state.hideQuickfilters ? null : this.renderQuickfilter(),
       R("div", { style: { width: "100%", height: "100%", gridArea: "view", overflow: "hidden" } }, this.renderView()),
       designerVisible ? this.renderDesigner() : null

package/src/maps/{MapDesignerComponent.ts → MapDesignerComponent.tsx}

@@ -18,6 +18,7 @@ import { MapDesign } from "./MapDesign"
 import { JsonQLFilter } from "../JsonQLFilter"
 import QuickfiltersDesignComponent from "../quickfilter/QuickfiltersDesignComponent"
 import produce from "immer"
+import { ActiveTablesContext } from "@mwater/expressions-ui"
 
 export interface MapDesignerComponentProps {
   /** Schema to use */
@@ -36,15 +37,6 @@ export interface MapDesignerComponentProps {
 }
 
 export default class MapDesignerComponent extends React.Component<MapDesignerComponentProps> {
-  static childContextTypes = { activeTables: PropTypes.arrayOf(PropTypes.string.isRequired) }
-
-  getChildContext() {
-    return {
-      // Pass active tables down to table select components so they can present a shorter list
-      activeTables: MapUtils.getFilterableTables(this.props.design, this.props.schema)
-    }
-  }
-
   handleAttributionChange = (text: any) => {
     const design = { ...this.props.design, attribution: text }
     return this.props.onDesignChange(design)
@@ -229,14 +221,14 @@ export default class MapDesignerComponent extends React.Component<MapDesignerCom
       })
     }
 
+    const activeTables = MapUtils.getFilterableTables(this.props.design, this.props.schema)
 
-    return R(
-      "div",
-      { style: { padding: 5 } },
-      R(TabbedComponent, {
-        initialTabId: "layers",
-        tabs
-      })
+    return (
+      <ActiveTablesContext.Provider value={activeTables}>
+        <div style={{ padding: 5 }}>
+          <TabbedComponent initialTabId="layers" tabs={tabs} />
+        </div>
+      </ActiveTablesContext.Provider>
     )
   }
 }

package/src/maps/MarkersLayerDesignerComponent.ts

@@ -6,7 +6,7 @@ import { DataSource, ExprUtils, OpExpr, Schema } from "@mwater/expressions"
 import { ExprCompiler } from "@mwater/expressions"
 import AxisComponent from "./../axes/AxisComponent"
 import ColorComponent from "../ColorComponent"
-import TableSelectComponent from "../TableSelectComponent"
+import { TableSelectComponent } from "@mwater/expressions-ui"
 import EditPopupComponent from "./EditPopupComponent"
 import ZoomLevelsComponent from "./ZoomLevelsComponent"
 import MarkerSymbolSelectComponent from "./MarkerSymbolSelectComponent"

package/src/maps/PopupFilterJoinsUtils.ts

@@ -38,7 +38,7 @@ export function createPopupFilters(
           type: "op",
           op: "within",
           table,
-          exprs: [expr, { type: "literal", idTable: exprUtils.getExprIdTable(expr), valueType: "id", value: rowId }]
+          exprs: [expr, { type: "literal", idTable: exprUtils.getExprIdTable(expr) ?? undefined, valueType: "id", value: rowId }]
         }
         filters.push({ table, jsonql: exprCompiler.compileExpr({ expr: filterExpr, tableAlias: "{alias}" }) })
       }
@@ -90,10 +90,10 @@ export function createPopupFilters(
 
 // Create default popup filter joins where the join is just the id (not used for choropleth since that needs to join to admin_regions)
 export function createDefaultPopupFilterJoins(table: any) {
-  const popupFilterJoins = {}
-
   // Return id of row for a simple match
-  popupFilterJoins[table] = { table, type: "id" }
+  const popupFilterJoins = {
+    [table]: { table, type: "id" }
+  }
 
   return popupFilterJoins
 }

package/src/maps/RasterMapViewComponent.ts

@@ -13,7 +13,6 @@ import { JsonQLFilter } from "../JsonQLFilter"
 import { MapDesign } from "./MapDesign"
 import { MapDataSource } from "./MapDataSource"
 import { MapScope } from "./MapUtils"
-import { defaultProps } from "react-select/src/Select"
 
 export interface RasterMapViewComponentProps {
   schema: Schema

package/src/maps/ServerMapDataSource.ts

@@ -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

@@ -1,4 +1,4 @@
-import _ from "lodash"
+import _, { find } from "lodash"
 import { LayerSpecification, MapLayerMouseEvent } from "maplibre-gl"
 import { DataSource, Schema } from "@mwater/expressions"
 import React, { CSSProperties, ReactNode, useEffect, useMemo, useState } from "react"
@@ -14,7 +14,7 @@ import {
   getFilterableTables as utilsGetFilterableTables,
   MapScope
 } from "./MapUtils"
-import { memoizedDebounce } from "../memoizedDebounce"
+import {Color} from '@maplibre/maplibre-gl-style-spec';
 
 import "maplibre-gl/dist/maplibre-gl.css"
 import "./VectorMapViewComponent.css"
@@ -115,7 +115,7 @@ export function VectorMapViewComponent(props: {
   )
 
   // Last feature that mouse entered
-  const lastFeature = useRef()
+  const lastFeature = useRef<string>()
 
   // Load map
   const map = useVectorMap({
@@ -162,6 +162,7 @@ export function VectorMapViewComponent(props: {
     })
 
     if (!results) {
+      setHoverContents(null)
       return
     }
 
@@ -171,15 +172,6 @@ export function VectorMapViewComponent(props: {
     }
   })
 
-  const handleLayerHoverDebounced = memoizedDebounce(
-    (layerViewId: string, ev: { data: any; event: any }) => {
-      handleLayerHover(layerViewId, ev)
-    },
-    250,
-    { leading: true, trailing: false },
-    (layerViewId, ev) => ev.data.id
-  )
-
   /** Handle a click on a layer */
   const handleLayerClick = useStableCallback((layerViewId: string, ev: { data: any; event: any }) => {
     const layerView = props.design.layerViews.find(lv => lv.id == layerViewId)!
@@ -514,7 +506,7 @@ export function VectorMapViewComponent(props: {
       setBusy(b => b - 1)
 
       if (bounds) {
-        map!.fitBounds([bounds.w, bounds.s, bounds.e, bounds.n], { padding: 20, duration: 3000 })
+        map!.fitBounds([bounds.w, bounds.s, bounds.e, bounds.n], { padding: 20, duration: 2500 })
 
         // Also record if editable as part of bounds
         setBounds(bounds)
@@ -598,42 +590,37 @@ export function VectorMapViewComponent(props: {
       return
     }
 
-    const removes: { (): void }[] = []
 
-    for (const clickHandler of layerClickHandlers) {
-      const onEnter = (ev: MapLayerMouseEvent) => {
-        if (!ev.features || !ev.features[0].properties) {
+    const layers = layerClickHandlers.map(clickHandler => clickHandler.mapLayerId)
+    
+    const onEnter = (ev: MapLayerMouseEvent) => {
+      let f = map.queryRenderedFeatures(ev.point, { layers });
+      if (f.length) {
+        if(f[0].layer.type === 'fill' && f[0].layer.paint?.['fill-color']?.toString() == 'rgba(0,0,0,0)') {
           lastFeature.current = undefined
           setHoverContents(null)
           return
         }
-
-        if (ev.features![0].properties.id !== lastFeature.current) {
+        if(lastFeature.current !== f[0].properties.id) {
+          lastFeature.current = f[0].properties.id
           setHoverContents(null)
-          lastFeature.current = ev.features![0].properties.id
+          const handler = find(layerClickHandlers, {mapLayerId: f[0].layer.id})
+          handleLayerHover(handler!.layerViewId, {
+            data: f[0].properties,
+            event: ev
+          })
         }
-
-        handleLayerHoverDebounced(clickHandler.layerViewId, {
-          data: ev.features![0].properties,
-          event: ev
-        })
-      }
-      const onLeave = (ev: MapLayerMouseEvent) => {
+      } else {
         lastFeature.current = undefined
         setHoverContents(null)
       }
-      map.on("mousemove", clickHandler.mapLayerId, onEnter)
-      map.on("mouseleave", clickHandler.mapLayerId, onLeave)
-      removes.push(() => {
-        map.off("mousemove", clickHandler.mapLayerId, onEnter)
-        map.off("mouseleave", clickHandler.mapLayerId, onLeave)
-      })
     }
+    map.on("mousemove", onEnter)
+    
     return () => {
-      for (const remove of removes) {
-        remove()
-      }
+      map.off("mousemove", onEnter)
     }
+
   }, [map, layerClickHandlers])
 
   function renderLegend() {

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/quickfilter/QuickfiltersDesignComponent.tsx

@@ -210,7 +210,7 @@ class QuickfilterDesignComponent extends React.Component<
             table: this.state.table,
             value: this.props.design.expr,
             onChange: this.handleExprChange,
-            types: ["enum", "text", "enumset", "date", "datetime", "id[]", "text[]"]
+            types: ["enum", "text", "enumset", "date", "datetime", "id[]", "text[]"],
           })
         )
       ),

package/src/quickfilter/TextLiteralComponent.ts

@@ -51,6 +51,10 @@ export default class TextLiteralComponent extends React.Component<TextLiteralCom
     // Create query to get matches
     const exprCompiler = new ExprCompiler(this.props.schema)
 
+    if(!this.props.expr.table) {
+      return 
+    }
+
     // Add filter for input (simple if just text)
     if (exprType === "text") {
       if (input) {

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/valueFormatter.ts

@@ -1,6 +1,7 @@
 import { LiteralType } from "@mwater/expressions"
 import { format as d3Format } from "d3-format"
 import { fromLatLon } from "utm"
+import dayjs from './dayjs'
 
 /** Option for list of format options */
 export interface FormatOption {
@@ -10,7 +11,7 @@ export interface FormatOption {
 
 /** Determine if can format type */
 export function canFormatType(type: LiteralType): boolean {
-  return type == "number" || type == "geometry"
+  return type == "number" || type == "geometry" || type === "date" || type === "datetime"
 }
 
 /** Get available options for formatting a type. Null if not available */
@@ -35,6 +36,43 @@ export function getFormatOptions(type: LiteralType): FormatOption[] | null {
     ]
   }
 
+  if (type == "date") {
+    return [
+      { value: "ll", label: dayjs().format("ll") },
+      { value: "YYYY-MM-DD", label: dayjs().format("YYYY-MM-DD") },
+      { value: "YYYY-MMM-DD", label: dayjs().format("YYYY-MMM-DD") },
+      { value: "YYYY-MM", label: dayjs().format("YYYY-MM") },
+      { value: "YYYY", label: dayjs().format("YYYY") },
+      { value: "MMM YYYY", label: dayjs().format("MMM YYYY") },
+      { value: "MMM DD, YYYY", label: dayjs().format("MMM DD, YYYY") },
+      { value: "MMMM D, YYYY", label: dayjs().format("MMMM D, YYYY") },
+      { value: "MM/DD/YYYY", label: dayjs().format("MM/DD/YYYY") },
+      { value: "DD/MM/YYYY", label: dayjs().format("DD/MM/YYYY") },
+      { value: "DD-MM-YYYY", label: dayjs().format("DD-MM-YYYY") },
+    ]
+  }
+
+  if (type == "datetime") {
+    return [
+      { value: "lll", label: dayjs().format("lll") },
+      { value: "llll", label: dayjs().format("llll") },
+      { value: "YYYY-MM-DD", label: dayjs().format("YYYY-MM-DD") },
+      { value: "YYYY-MMM-DD", label: dayjs().format("YYYY-MMM-DD") },
+      { value: "YYYY-MM", label: dayjs().format("YYYY-MM") },
+      { value: "YYYY", label: dayjs().format("YYYY") },
+      { value: "MMM YYYY", label: dayjs().format("MMM YYYY") },
+      { value: "MMM DD, YYYY h:mm A", label: dayjs().format("MMM DD, YYYY h:mm A") },
+      { value: "MMMM D, YYYY h:mm A", label: dayjs().format("MMMM D, YYYY h:mm A") },
+      { value: "MMM DD, YYYY", label: dayjs().format("MMM DD, YYYY") },
+      { value: "MMMM D, YYYY", label: dayjs().format("MMMM D, YYYY") },
+      { value: "MM/DD/YYYY", label: dayjs().format("MM/DD/YYYY") },
+      { value: "DD/MM/YYYY", label: dayjs().format("DD/MM/YYYY") },
+      { value: "DD-MM-YYYY", label: dayjs().format("DD-MM-YYYY") },
+      { value: "YYYY-MM-DD HH:mm:ss", label: dayjs().format("YYYY-MM-DD HH:mm:ss") },
+      { value: "ISO 8601", label: dayjs().toISOString() },
+    ]
+  }
+
   return null
 }
 
@@ -48,6 +86,14 @@ export function getDefaultFormat(type: LiteralType): string {
     return "lat, lng"
   }
 
+  if (type == "date") {
+    return "ll"
+  }
+
+  if (type == "datetime") {
+    return "lll"
+  }
+
   throw new Error("Not supported")
 }
 
@@ -78,6 +124,13 @@ export function formatValue(
     return d3Format(format)(value)
   }
 
+  if (["date", "datetime"].includes(type)) {
+    if (format == "ISO 8601") {
+      return dayjs(value).toISOString()
+    }
+    return dayjs(value).format(format)
+  }
+
   if (type == "geometry") {
     if (format == "UTM") {
       if (value.type == "Point") {

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/pivot/PivotChartLayout.ts

@@ -40,8 +40,9 @@ export interface PivotChartLayoutCell {
   align: "left" | "center" | "right"
 
   /** section id of either a segment or intersection or blank area. Always a rectangle. 
-   * Id is like intersection id if intersection, id of segment if segment */
-  section: string
+   * Id is like intersection id if intersection, id of segment if segment. Undefined if doesn't
+   * exist yet. */
+  section?: string
   
   /** true if cell is on top edge of section */
   sectionTop?: boolean

package/src/widgets/charts/pivot/PivotChartLayoutBuilder.ts

@@ -373,7 +373,7 @@ export default class PivotChartLayoutBuilder {
     const intersectionData = dataIndexed[intersectionId]
 
     // Create key to lookup value
-    const key = {}
+    const key: { [rNcN: string]: any } = {}
     for (i = 0; i < row.length; i++) {
       part = row[i]
       key[`r${i}`] = part.value
@@ -727,7 +727,7 @@ export default class PivotChartLayoutBuilder {
       // Sort categories if segment is sorted
       if (segment.orderExpr) {
         // Index the ordering by the JSON.stringify to make it O(n)
-        const orderIndex = {}
+        const orderIndex: { [key: string]: number } = {}
         const iterable = _.pluck(data[segment.id], "value")
         for (let index = 0; index < iterable.length; index++) {
           value = iterable[index]