@mwater/visualization 5.0.1 → 5.2.0

package/src/datagrids/FindReplaceModalComponent.ts

@@ -24,7 +24,7 @@ export interface FindReplaceModalComponentProps {
 
   /** Update cell values by updating set of expressions and values */
   updateExprValues: (tableId: string, rowUpdates: RowUpdate[]) => Promise<void>
- 
+
   onUpdate: () => void
 }
 
@@ -73,6 +73,18 @@ export default class FindReplaceModalComponent extends React.Component<
     // Get expr of replace column
     const replaceExpr = _.findWhere(this.props.design.columns, { id: this.state.replaceColumn })!.expr
 
+    const exprType = exprUtils.getExprType(this.state.withExpr)
+    let compiledWithExpr = exprCompiler.compileExpr({ expr: this.state.withExpr, tableAlias: "main" })
+    if (exprType === "geometry") {
+      compiledWithExpr = {
+        type: "op",
+        op: "ST_AsGeoJSON",
+        exprs: [
+          { type: "op", op: "ST_Transform", exprs: [{ type: "op", op: "::geometry", exprs: [compiledWithExpr] }, 4326] }
+        ]
+      }
+    }
+
     // Get ids and with value, filtered by filters, design.filter and conditionExpr (if present)
     const query: JsonQLSelectQuery = {
       type: "query",
@@ -88,7 +100,7 @@ export default class FindReplaceModalComponent extends React.Component<
         },
         {
           type: "select",
-          expr: exprCompiler.compileExpr({ expr: this.state.withExpr, tableAlias: "main" }),
+          expr: compiledWithExpr,
           alias: "withValue"
         }
       ],
@@ -120,7 +132,12 @@ export default class FindReplaceModalComponent extends React.Component<
       }
 
       // Create expr
-      let expr: Expr = { type: "op", op: filter.op, table: design.table!, exprs: [columnExpr as Expr].concat(filter.exprs) }
+      let expr: Expr = {
+        type: "op",
+        op: filter.op,
+        table: design.table!,
+        exprs: [columnExpr as Expr].concat(filter.exprs)
+      }
 
       // Clean expr
       expr = exprCleaner.cleanExpr(expr, { table: design.table! })
@@ -147,16 +164,19 @@ export default class FindReplaceModalComponent extends React.Component<
       }
 
       // Perform updates
-      await this.props.updateExprValues(this.props.design.table!, rows.map(row => ({
-        primaryKey: row.id,
-        expr: replaceExpr,
-        value: row.withValue
-      })))
-      
+      await this.props.updateExprValues(
+        this.props.design.table!,
+        rows.map(row => ({
+          primaryKey: row.id,
+          expr: replaceExpr,
+          value: exprType === "geometry" ? JSON.parse(row.withValue) : row.withValue
+        }))
+      )
+
       alert(T("Successfully replaced {0} values", rows.length))
       this.setState({ open: false })
       this.props.onUpdate()
-    } catch(error) {
+    } catch (error) {
       alert(`Error: ${error.message}`)
     } finally {
       this.setState({ busy: false })
@@ -183,7 +203,8 @@ export default class FindReplaceModalComponent extends React.Component<
           else: replaceColumn.expr
         }
 
-        replaceColumn.label = replaceColumn.label || exprUtils.summarizeExpr(replaceColumn.expr, this.props.design.locale)
+        replaceColumn.label =
+          replaceColumn.label || exprUtils.summarizeExpr(replaceColumn.expr, this.props.design.locale)
       }
 
       // Add filter
@@ -193,13 +214,9 @@ export default class FindReplaceModalComponent extends React.Component<
             type: "op",
             op: "and",
             table: this.props.design.table!,
-            exprs: [
-              draft.filter,
-              this.state.conditionExpr
-            ]
+            exprs: [draft.filter, this.state.conditionExpr]
           }
-        }
-        else {
+        } else {
           draft.filter = this.state.conditionExpr
         }
       }
@@ -228,9 +245,9 @@ export default class FindReplaceModalComponent extends React.Component<
     // Determine which columns are replace-able. Excludes subtables and aggregates
     const replaceColumns = _.filter(
       this.props.design.columns,
-      (column) => !column.subtable && exprUtils.getExprAggrStatus(column.expr) === "individual"
+      column => !column.subtable && exprUtils.getExprAggrStatus(column.expr) === "individual"
     )
-    const replaceColumnOptions = _.map(replaceColumns, (column) => ({
+    const replaceColumnOptions = _.map(replaceColumns, column => ({
       value: column.id,
       label: column.label || exprUtils.summarizeExpr(column.expr, this.props.design.locale)
     }))
@@ -263,7 +280,7 @@ export default class FindReplaceModalComponent extends React.Component<
           placeholder: T("Select Column..."),
           styles: {
             // Keep menu above fixed data table headers
-            menu: (style) => _.extend({}, style, { zIndex: 2 })
+            menu: style => _.extend({}, style, { zIndex: 2 })
           }
         })
       ),
@@ -282,7 +299,7 @@ export default class FindReplaceModalComponent extends React.Component<
               dataSource: this.props.dataSource,
               table: this.props.design.table!,
               value: this.state.withExpr,
-              onChange: (value) => this.setState({ withExpr: value }),
+              onChange: value => this.setState({ withExpr: value }),
               types: [exprUtils.getExprType(replaceExpr)!],
               enumValues: exprUtils.getExprEnumValues(replaceExpr) || undefined,
               idTable: exprUtils.getExprIdTable(replaceExpr) || undefined,
@@ -304,7 +321,7 @@ export default class FindReplaceModalComponent extends React.Component<
           dataSource: this.props.dataSource,
           table: this.props.design.table!,
           value: this.state.conditionExpr,
-          onChange: (value) => this.setState({ conditionExpr: value }),
+          onChange: value => this.setState({ conditionExpr: value }),
           types: ["boolean"],
           placeholder: T("All Rows")
         })

package/src/datagrids/ServerDatagridDataSource.ts

@@ -22,7 +22,7 @@ export interface ServerDatagridDataSourceOptions {
 }
 
 /** Uses mWater server to get datagrid data to allow sharing with unprivileged users */
-export default class ServerDatagridDataSource extends DatagridDataSource {
+export default class ServerDatagridDataSource implements DatagridDataSource {
   options: ServerDatagridDataSourceOptions
 
   // options:
@@ -32,7 +32,6 @@ export default class ServerDatagridDataSource extends DatagridDataSource {
   //   datagridId: datagrid id to use on server
   //   rev: revision to use to allow caching
   constructor(options: ServerDatagridDataSourceOptions) {
-    super()
     this.options = options
   }
 
@@ -51,9 +50,27 @@ export default class ServerDatagridDataSource extends DatagridDataSource {
 
     const url = this.options.apiUrl + `datagrids/${this.options.datagridId}/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))
+    })
+  }
+
+  countRows(design: DatagridDesign, filters: any, callback: any) {
+    const query = {
+      client: this.options.client,
+      share: this.options.share,
+      filters: compressJson(filters),
+      rev: this.options.rev,
+    }
+
+    const url = this.options.apiUrl + `datagrids/${this.options.datagridId}/summary?` + querystring.stringify(query)
+
+    return $.getJSON(url, (data: any) => {
+      return callback(null, data?.[0]?.cnt)
+    }).fail((xhr: any) => {
       console.log(xhr.responseText)
       return callback(new Error(xhr.responseText))
     })
@@ -109,9 +126,9 @@ class ServerQuickfilterDataSource {
       `datagrids/${this.options.datagridId}/quickfilters/${index}/values?` +
       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))
     })

package/src/demo.ts

@@ -471,7 +471,7 @@ class WaterOrgDashboardPane extends React.Component {
   }
 
   componentWillMount() {
-    const url = this.props.apiUrl + "jsonql/schema"
+    const url = this.props.apiUrl + "schema"
     return $.getJSON(url, (schemaJson) => {
       const schema = new Schema(schemaJson)
       const dataSource = new MWaterDataSource(this.props.apiUrl, null, { serverCaching: false, localCaching: true })

package/src/index.ts

@@ -12,8 +12,6 @@ export { default as RegionSelectComponent } from "./maps/RegionSelectComponent"
 
 export * from "./datagrids/DatagridDesign"
 
-export { default as TableSelectComponent } from "./TableSelectComponent"
-
 export * from "./JsonQLFilter"
 
 export { default as DashboardComponent } from "./dashboards/DashboardComponent"
@@ -77,6 +75,7 @@ export { default as AxisBuilder } from "./axes/AxisBuilder"
 export { default as ColorSchemeFactory } from "./ColorSchemeFactory"
 export { default as DatagridComponent } from "./datagrids/DatagridComponent"
 export { default as DatagridViewComponent } from "./datagrids/DatagridViewComponent"
+export { default as DatagridDataSource } from "./datagrids/DatagridDataSource"
 export { default as ServerDashboardDataSource } from "./dashboards/ServerDashboardDataSource"
 export { default as ServerMapDataSource } from "./maps/ServerMapDataSource"
 export { default as DirectMapDataSource } from "./maps/DirectMapDataSource"

package/src/layouts/blocks/BlocksDisplayComponent.ts

@@ -331,7 +331,7 @@ class BlocksDisplayComponent extends React.Component<BlocksDisplayComponentProps
         R(
           "div",
           {
-            style: { position: "absolute", left: 141, top: 0, bottom: 0, right: 0, overflow: "auto" },
+            style: { position: "absolute", left: 141, top: 0, bottom: 0, right: 0, overflowX: "auto", overflowY: "scroll" },
             className: `mwater-visualization-block-parent-outer mwater-visualization-block-parent-outer-${
               this.props.style || "default"
             } mwater-visualization-block-editing`
@@ -351,7 +351,7 @@ class BlocksDisplayComponent extends React.Component<BlocksDisplayComponentProps
       )
     } else {
       return R(AutoSizeComponent, { injectWidth: true, injectHeight: true } as any, (size: any) => {
-        const outerParentStyle: CSSProperties = { width: "100%", height: "100%", overflowX: "auto" }
+        const outerParentStyle: CSSProperties = { width: "100%", height: "100%", overflowX: "auto", overflowY: "scroll" }
         innerParentStyle = {}
 
         // Remove padding if small

package/src/layouts/grid/LegoLayoutEngine.ts

@@ -68,8 +68,8 @@ export default class LegoLayoutEngine {
   // Returns layout lookup of id -> layout
   performLayout(layouts: any, priority: any) {
     // Create list of placed layouts to avoid as placing new ones
-    const placedLayouts = []
-    const results = {}
+    const placedLayouts: any[] = []
+    const results: any = {}
 
     // Add priority first to displace others
     if (priority) {

package/src/layouts/grid/WidgetContainerComponent.ts

@@ -106,7 +106,7 @@ class Container extends React.Component<ContainerProps, ContainerState> {
     let items = _.clone(this.props.items)
     items[id] = { layout: droppedLayout, widget }
 
-    let layouts = {}
+    let layouts: any = {}
     for (id in items) {
       const item = items[id]
       layouts[id] = item.layout
@@ -279,7 +279,7 @@ class Container extends React.Component<ContainerProps, ContainerState> {
       hoveredLayout = props.layoutEngine.rectToLayout(hoveredRect)
     }
 
-    let layouts = {}
+    let layouts: any = {}
     for (id in props.items) {
       const item = props.items[id]
       layouts[id] = item.layout

package/src/maps/BingLayer.ts

@@ -69,9 +69,9 @@ module.exports = L.TileLayer.extend({
   loadMetadata: function () {
     var _this = this
     var cbid = "_bing_metadata_" + L.Util.stamp(this)
-    window[cbid] = function (meta: any) {
+    ;(window as any)[cbid] = function (meta: any) {
       _this.meta = meta
-      window[cbid] = undefined
+      ;(window as any)[cbid] = undefined
       var e = document.getElementById(cbid)
       e!.parentNode!.removeChild(e!)
       if (meta.errorDetails) {

package/src/maps/BufferLayer.ts

@@ -88,7 +88,9 @@ export default class BufferLayer extends Layer<BufferLayerDesign> {
       sourceLayers: [{ id: "circles", jsonql: jsonql }],
       ctes: [],
       mapLayers: mapLayers,
-      mapLayersHandleClicks: [`${sourceId}:fill`]
+      mapLayersHandleClicks: [`${sourceId}:fill`],
+      minZoom: this.getMinZoom(design),
+      maxZoom: this.getMaxZoom(design)
     }
   }
 

package/src/maps/BufferLayerDesignerComponent.ts

@@ -9,7 +9,7 @@ import { ExprCompiler } from "@mwater/expressions"
 import NumberInputComponent from "@mwater/react-library/lib/NumberInputComponent"
 import AxisComponent from "./../axes/AxisComponent"
 import ColorComponent from "../ColorComponent"
-import TableSelectComponent from "../TableSelectComponent"
+import { TableSelectComponent } from "@mwater/expressions-ui"
 import { default as Rcslider } from "rc-slider"
 import EditPopupComponent from "./EditPopupComponent"
 import ZoomLevelsComponent from "./ZoomLevelsComponent"

package/src/maps/ChoroplethLayerDesigner.tsx

@@ -6,7 +6,7 @@ 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 { TableSelectComponent } from "@mwater/expressions-ui"
 import ColorComponent from "../ColorComponent"
 import Rcslider from "rc-slider"
 import ChoroplethLayerDesign from "./ChoroplethLayerDesign"

package/src/maps/ClusterLayer.ts

@@ -79,7 +79,9 @@ export default class ClusterLayer extends Layer<ClusterLayerDesign> {
       sourceLayers: [{ id: "clusters", jsonql: jsonql }],
       ctes: [],
       mapLayers: mapLayers,
-      mapLayersHandleClicks: [`${sourceId}:circles-single`, `${sourceId}:circles-multiple`]
+      mapLayersHandleClicks: [`${sourceId}:circles-single`, `${sourceId}:circles-multiple`],
+      minZoom: this.getMinZoom(design),
+      maxZoom: this.getMaxZoom(design)
     }
   }
 

package/src/maps/ClusterLayerDesignerComponent.ts

@@ -8,7 +8,7 @@ import { DataSource, ExprUtils, 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 ZoomLevelsComponent from "./ZoomLevelsComponent"
 
 export interface ClusterLayerDesignerComponentProps {

package/src/maps/DirectMapDataSource.ts

@@ -249,8 +249,7 @@ class DirectLayerDataSource implements MapLayerDataSource {
     const { url, expires } = await getVectorTileFromDirectRequest({
       apiUrl: this.options.apiUrl,
       client: this.options.client,
-      directTokenRequest,
-      createdAfter
+      directTokenRequest
     })
 
     return { url, expires }

package/src/maps/GridLayer.ts

@@ -75,7 +75,9 @@ export default class GridLayer extends Layer<GridLayerDesign> {
       sourceLayers: [{ id: "grid", jsonql: jsonql }],
       ctes: [],
       mapLayers: mapLayers,
-      mapLayersHandleClicks: [`${sourceId}:fill`]
+      mapLayersHandleClicks: [`${sourceId}:fill`],
+      minZoom: this.getMinZoom(design),
+      maxZoom: this.getMaxZoom(design)
     }
   }
 
@@ -606,9 +608,9 @@ export default class GridLayer extends Layer<GridLayerDesign> {
 
   // Get min and max zoom levels
   getMinZoom(design: GridLayerDesign) {
-    // Determine if too zoomed out to safely display (zoom 6 at 20000 is limit)
+    // Determine if too zoomed out to safely display (200x200, so size = 4e7/(2^zoom) < 200)
     if (design.sizeUnits === "meters") {
-      const minSafeZoom = Math.log2(1280000.0 / (design.size || 20000))
+      const minSafeZoom = Math.log2(200000.0 / (design.size || 20000))
       if (design.minZoom) {
         return Math.max(design.minZoom, minSafeZoom)
       } else {

package/src/maps/GridLayerDesigner.tsx

@@ -6,7 +6,7 @@ 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 { TableSelectComponent } from "@mwater/expressions-ui"
 import Rcslider from "rc-slider"
 import GridLayerDesign from "./GridLayerDesign"
 import { JsonQLFilter } from "../index"
@@ -69,7 +69,6 @@ export default class GridLayerDesigner extends React.Component<{
       this.update((d) => {
         d.sizeUnits = sizeUnits
         d.size = 20000
-        d.minZoom = 6
       })
     }
   }

package/src/maps/LayerSwitcherComponent.tsx

@@ -60,7 +60,7 @@ export function LayerSwitcherComponent(props: { design: MapDesign; onDesignChang
         <i className="fas fa-layer-group fa-fw" />
       </div>
       {dropdownOpen ? (
-        <div style={{ backgroundColor: "white", padding: 5 }}>{props.design.layerViews.map(renderLayerView)}</div>
+        <div style={{ backgroundColor: "white", padding: 5, textAlign: "left" }}>{props.design.layerViews.map(renderLayerView)}</div>
       ) : null}
     </div>
   )

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

@@ -1,5 +1,6 @@
-import { Expr, LiteralType } from "@mwater/expressions"
+import { Expr } from "@mwater/expressions"
 import { Quickfilter } from "../quickfilter/Quickfilter"
+import { GlobalFilter } from "../GlobalFilter"
 
 /** Maps are stored as a base layer, a series of layers and filters. */
 export interface MapDesign {
@@ -85,19 +86,3 @@ export interface MapLayerView {
   /** true to hide legend */
   hideLegend?: boolean
 }
-
-/** Global filters apply to multiple tables at once if a certain column is present. User-interface to set them is application-specific
-and the default (non-mWater) dashboard applies them but does not allow editing. */
-export interface GlobalFilter {
-  /** id of column to filter */
-  columnId: string
-
-  /** type of column to filter (to ensure that consistent) */
-  columnType: LiteralType
-
-  /** op of expression for filtering */
-  op: string
-
-  /** array of expressions to use for filtering. field expression for column will be injected as expression 0 in the resulting filter expression */
-  exprs: Expr[]
-}

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/{MapFiltersDesignerComponent.ts → MapFiltersDesignerComponent.tsx}

@@ -1,13 +1,11 @@
 import _ from "lodash"
-import PropTypes from "prop-types"
 import React from "react"
 const R = React.createElement
-import { FilterExprComponent } from "@mwater/expressions-ui"
-import { DataSource, ExprCleaner, Schema } from "@mwater/expressions"
-import { ExprUtils } from "@mwater/expressions"
+import { DataSource, Schema } from "@mwater/expressions"
 import PopoverHelpComponent from "@mwater/react-library/lib/PopoverHelpComponent"
 import FiltersDesignerComponent from "../FiltersDesignerComponent"
 import * as MapUtils from "./MapUtils"
+import { GlobalFiltersElementFactoryContext } from "../MWaterContextComponent"
 
 export interface MapFiltersDesignerComponentProps {
   /** Schema to use */
@@ -22,8 +20,6 @@ export interface MapFiltersDesignerComponentProps {
 
 // Designer for filters for a map
 export default class MapFiltersDesignerComponent extends React.Component<MapFiltersDesignerComponentProps> {
-  static contextTypes = { globalFiltersElementFactory: PropTypes.func }
-
   handleFiltersChange = (filters: any) => {
     const design = _.extend({}, this.props.design, { filters })
     return this.props.onDesignChange(design)
@@ -70,26 +66,30 @@ export default class MapFiltersDesignerComponent extends React.Component<MapFilt
           })
         )
       ),
+        
+      <GlobalFiltersElementFactoryContext.Consumer>
+        {globalFiltersElementFactory =>
+          globalFiltersElementFactory
+            ? R(
+                "div",
+                { className: "mb-3" },
+                R("label", { className: "text-muted" }, "Global Filters "),
 
-      this.context.globalFiltersElementFactory
-        ? R(
-            "div",
-            { className: "mb-3" },
-            R("label", { className: "text-muted" }, "Global Filters "),
-
-            R(
-              "div",
-              { style: { margin: 5 } },
-              this.context.globalFiltersElementFactory({
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                filterableTables,
-                globalFilters: this.props.design.globalFilters || [],
-                onChange: this.handleGlobalFiltersChange
-              })
-            )
-          )
-        : undefined
+                R(
+                  "div",
+                  { style: { margin: 5 } },
+                  globalFiltersElementFactory({
+                    schema: this.props.schema,
+                    dataSource: this.props.dataSource,
+                    filterableTables,
+                    globalFilters: this.props.design.globalFilters || [],
+                    onChange: this.handleGlobalFiltersChange
+                  })
+                )
+              )
+            : undefined
+        }
+      </GlobalFiltersElementFactoryContext.Consumer>
     )
   }
 }

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
 }