@mwater/visualization 5.0.0 → 5.1.0

package/src/dashboards/{DashboardComponent.ts → DashboardComponent.tsx}

@@ -19,6 +19,7 @@ import { getLayoutOptions } from "./layoutOptions"
 import { DashboardDesign } from "./DashboardDesign"
 import DashboardDataSource from "./DashboardDataSource"
 import { JsonQLFilter } from ".."
+import { ActiveTablesContext } from "@mwater/expressions-ui"
 
 export interface DashboardComponentProps {
   design: DashboardDesign
@@ -80,7 +81,6 @@ export default class DashboardComponent extends React.Component<DashboardCompone
 
   static childContextTypes = {
     locale: PropTypes.string,
-    activeTables: PropTypes.arrayOf(PropTypes.string.isRequired)
   }
 
   settings: SettingsModalComponent | null
@@ -89,9 +89,6 @@ export default class DashboardComponent extends React.Component<DashboardCompone
     return {
       // Pass locale down. Both here and DashboardViewComponent to ensure that quickfilters also get context
       locale: this.props.design.locale,
-
-      // Pass active tables down to table select components so they can present a shorter list
-      activeTables: DashboardUtils.getFilterableTables(this.props.design, this.props.schema)
     }
   }
 
@@ -428,41 +425,41 @@ export default class DashboardComponent extends React.Component<DashboardCompone
       hideScopes: this.state.hideQuickfilters
     })
 
-    return R(
-      "div",
-      {
-        style: {
-          display: "grid",
-          gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
-          height: "100%"
-        }
-      },
-      !this.props.hideTitleBar ? this.renderTitleBar() : undefined,
-      R("div", null, !this.state.hideQuickfilters ? this.renderQuickfilter() : undefined),
-      dashboardView,
-      this.props.onDesignChange != null
-        ? R(SettingsModalComponent, {
-            onDesignChange: this.handleDesignChange,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            ref: (c: SettingsModalComponent | null) => {
-              this.settings = c
-            }
-          })
-        : undefined,
-      this.state.layoutOptionsOpen
-        ? R(
-            ModalWindowComponent,
-            { isOpen: true, outerPadding: 10, innerPadding: 10 },
-            R(LayoutOptionsComponent, {
-              design: this.props.design,
-              onDesignChange: this.props.onDesignChange!,
-              onClose: () => this.setState({ layoutOptionsOpen: false }),
-              dashboardView: readonlyDashboardView,
-              quickfiltersView: this.renderQuickfilter()
-            })
-          )
-        : undefined
-    )
+
+    // Pass active tables down to table select components so they can present a shorter list
+    return <ActiveTablesContext.Provider 
+      value={DashboardUtils.getFilterableTables(this.props.design, this.props.schema)}>
+        
+    <div style={{
+      display: "grid",
+      gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
+      height: "100%"
+    }}>
+      {!this.props.hideTitleBar ? this.renderTitleBar() : undefined}
+      <div>{!this.state.hideQuickfilters ? this.renderQuickfilter() : undefined}</div>
+      {dashboardView}
+      {this.props.onDesignChange != null && (
+        <SettingsModalComponent
+          onDesignChange={this.handleDesignChange}
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          ref={(c: SettingsModalComponent | null) => {
+            this.settings = c
+          }}
+        />
+      )}
+      {this.state.layoutOptionsOpen && (
+        <ModalWindowComponent isOpen={true} outerPadding={10} innerPadding={10}>
+          <LayoutOptionsComponent
+            design={this.props.design}
+            onDesignChange={this.props.onDesignChange!}
+            onClose={() => this.setState({ layoutOptionsOpen: false })}
+            dashboardView={readonlyDashboardView}
+            quickfiltersView={this.renderQuickfilter()}
+          />
+        </ModalWindowComponent>
+      )}
+    </div>
+    </ActiveTablesContext.Provider>
   }
 }

package/src/dashboards/ServerDashboardDataSource.ts

@@ -97,7 +97,7 @@ class ServerQuickfilterDataSource implements QuickfiltersDataSource {
       `dashboards/${this.options.dashboardId}/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)
@@ -110,10 +110,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))
       })
@@ -151,7 +151,7 @@ class ServerWidgetDataSource {
       `dashboards/${this.options.dashboardId}/widgets/${this.options.widgetId}/data?` +
       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)
@@ -164,10 +164,10 @@ class ServerWidgetDataSource {
       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))
       })
@@ -235,7 +235,7 @@ class ServerWidgetMapDataSource implements MapDataSource {
       `dashboards/${this.options.dashboardId}/widgets/${this.options.widgetId}/bounds?` +
       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)
@@ -248,14 +248,18 @@ class ServerWidgetMapDataSource implements MapDataSource {
       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))
       })
   }
+
+  getQuickfiltersDataSource(): QuickfiltersDataSource {
+    return new ServerQuickfilterDataSource(this.options)
+  }
 }
 
 interface ServerWidgetLayerDataSourceOptions extends ServerDashboardDataSourceOptions {
@@ -480,7 +484,7 @@ class ServerWidgetLayerPopupWidgetDataSource implements WidgetDataSource {
       `dashboards/${this.options.dashboardId}/widgets/${this.options.widgetId}/layers/${this.options.layerView.id}/widgets/${this.options.popupWidgetId}/data?` +
       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)
@@ -493,10 +497,10 @@ class ServerWidgetLayerPopupWidgetDataSource implements WidgetDataSource {
       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/datagrids/DatagridComponent.ts

@@ -16,6 +16,7 @@ import QuickfilterCompiler from "../quickfilter/QuickfilterCompiler"
 import FindReplaceModalComponent from "./FindReplaceModalComponent"
 import DatagridDataSource from "./DatagridDataSource"
 import { DatagridDesign, JsonQLFilter } from ".."
+import { format as d3Format } from "d3-format"
 
 export interface DatagridComponentProps {
   /** schema to use */
@@ -55,20 +56,25 @@ export interface DatagridComponentProps {
   filters?: JsonQLFilter[]
 }
 
+interface DatagridComponentState {
+  /** is design being edited */
+  editingDesign: boolean
+  /** True if cells can be edited directly */
+  cellEditingEnabled: boolean
+  /** Height of quickfilters */
+  quickfiltersHeight: number | null
+  quickfiltersValues: null | any[]
+  refreshKey: number
+  /** Number of rows */
+  numRows?: number
+}
+
 // Datagrid with decorations
 // See README.md for description of datagrid format
 // Design should be cleaned already before being passed in (see DatagridUtils)
 export default class DatagridComponent extends React.Component<
   DatagridComponentProps,
-  {
-    /** is design being edited */
-    editingDesign: boolean
-    /** True if cells can be edited directly */
-    cellEditingEnabled: boolean
-    /** Height of quickfilters */
-    quickfiltersHeight: number | null
-    quickfiltersValues: null | any[]
-  }
+  DatagridComponentState
 > {
   datagridView?: DatagridViewComponent | null
   quickfilters?: HTMLElement | null
@@ -81,20 +87,51 @@ export default class DatagridComponent extends React.Component<
       editingDesign: false, // is design being edited
       cellEditingEnabled: false, // True if cells can be edited directly
       quickfiltersHeight: null, // Height of quickfilters
-      quickfiltersValues: null
+      quickfiltersValues: null,
+      refreshKey: 1
     }
   }
 
   reload() {
-    return this.datagridView?.reload()
+    this.datagridView?.reload()
   }
 
   componentDidMount() {
-    return this.updateHeight()
+    this.loadRowCount()
+    this.updateHeight()
+  }
+
+  componentDidUpdate(prevProps: DatagridComponentProps, prevState: DatagridComponentState) {
+    if (!_.isEqual(prevProps.design, this.props.design) || !_.isEqual(prevState.quickfiltersValues, this.state.quickfiltersValues) || prevState.refreshKey !== this.state.refreshKey) {
+      this.loadRowCount()
+    }
+    this.updateHeight()
+  }
+
+  loadRowCount() {
+    if(!this.props.design.showNumRows) {
+      return
+    }
+    let filters = this.props.filters || []
+
+    // Compile quickfilters
+    filters = filters.concat(this.getQuickfilterFilters())
+    this.props.datagridDataSource.countRows(this.props.design,
+      filters, 
+      (error: any, numRows: any) => {
+        if (error) {
+          console.error(error)
+          alert(T("Error loading data"))
+          return
+        }
+        console.log(numRows)
+        this.setState({numRows})
+      })
   }
 
-  componentDidUpdate() {
-    return this.updateHeight()
+  handleRefreshData = () => {
+    this.props.dataSource.clearCache?.()
+    this.setState({ refreshKey: this.state.refreshKey + 1 })
   }
 
   updateHeight() {
@@ -258,9 +295,16 @@ export default class DatagridComponent extends React.Component<
       R(
         "div",
         { style: { float: "right" } },
+        this.props.design.showNumRows && this.state.numRows ? R("small", {className: 'text-muted text-sm'}, `${d3Format(',')(this.state.numRows)} rows`): undefined,
         this.renderFindReplace(),
         this.renderCellEdit(),
         this.renderEditButton(),
+        R(
+          "a",
+          { key: "refresh", className: "btn btn-link btn-sm", onClick: this.handleRefreshData },
+          R("span", { className: "fas fa-sync" }),
+          R("span", { className: "hide-600px" }, " Refresh")
+        ),
         this.props.extraTitleButtonsElem
       ),
       this.props.titleElem
@@ -375,6 +419,7 @@ export default class DatagridComponent extends React.Component<
             onRowDoubleClick: this.props.onRowDoubleClick,
             canEditExpr: this.state.cellEditingEnabled ? this.props.canEditExpr : undefined,
             updateExprValues: this.state.cellEditingEnabled ? this.props.updateExprValues : undefined,
+            refreshKey: this.state.refreshKey
           })
         } else if (this.props.onDesignChange) {
           return R(

package/src/datagrids/DatagridDataSource.ts

@@ -14,6 +14,14 @@ export default class DatagridDataSource {
     throw new Error("Not implemented")
   }
 
+  countRows(
+    design: DatagridDesign,
+    filters: JsonQLFilter[] | undefined,
+    callback: (error: any, numRows: number) => void
+  ): void {
+    throw new Error("Not implemented")
+  }
+
   /** Gets the quickfilters data source */
   getQuickfiltersDataSource(): QuickfiltersDataSource {
     throw new Error("Not implemented")

package/src/datagrids/DatagridDesign.ts

@@ -29,6 +29,9 @@ export interface DatagridDesign {
 
   /** array of global filters. See below. */
   globalFilters?: DatagridDesignGlobalFilter[]
+
+  /** true to show number of rows */
+  showNumRows?: boolean
 }
 
 export interface DatagridDesignColumn {

package/src/datagrids/DatagridDesignerComponent.tsx

@@ -14,7 +14,7 @@ import OrderBysDesignerComponent from "./OrderBysDesignerComponent"
 import ReorderableListComponent from "@mwater/react-library/lib/reorderable/ReorderableListComponent"
 import QuickfiltersDesignComponent from "../quickfilter/QuickfiltersDesignComponent"
 import LabeledExprGenerator from "./LabeledExprGenerator"
-import TableSelectComponent from "../TableSelectComponent"
+import { TableSelectComponent } from "@mwater/expressions-ui"
 import uuid from "uuid"
 import update from "update-object"
 import * as ui from "@mwater/react-library/lib/bootstrap"
@@ -196,6 +196,14 @@ function DatagridOptionsComponent(props: DatagridOptionsComponentProps) {
     >
       {T("Show row numbers")}
     </ui.Checkbox>
+    <ui.Checkbox 
+      value={props.design.showNumRows}
+      onChange={(showNumRows) =>
+          props.onDesignChange({ ...props.design, showNumRows })
+      }
+    >
+      {T("Show number of rows")}
+    </ui.Checkbox>
     <ui.FormGroup label={T("Language")} hint={T("Preferred language of the datagrid")}>
       <ReactSelect
         value={localeOptions.find(opt => opt.value == (props.design.locale || "en")) || null}

package/src/datagrids/DatagridViewComponent.ts

@@ -38,6 +38,9 @@ export interface DatagridViewComponentProps {
 
   /** Called when a row is clicked with (tableId, rowId, rowIndex) */
   onRowClick?: (tableId: string, rowId: any, rowIndex: number) => void
+
+  /** Change to force a refresh */
+  refreshKey?: any
 }
 
 /** Update to one row expression value */
@@ -91,8 +94,8 @@ export default class DatagridViewComponent extends React.Component<
   componentWillReceiveProps(nextProps: DatagridViewComponentProps) {
     // If design or filters changed, delete all rows
     // TODO won't this reload on column resize?
-    if (!_.isEqual(nextProps.design, this.props.design) || !_.isEqual(nextProps.filters, this.props.filters)) {
-      return this.setState({ rows: [], entirelyLoaded: false })
+    if (!_.isEqual(nextProps.design, this.props.design) || !_.isEqual(nextProps.filters, this.props.filters) || nextProps.refreshKey !== this.props.refreshKey) {
+      this.setState({ rows: [], entirelyLoaded: false })
     }
   }
 
@@ -452,7 +455,8 @@ export default class DatagridViewComponent extends React.Component<
         onRowDoubleClick: this.handleRowDoubleClick,
         onRowClick: this.handleRowClick,
         isColumnResizing: false,
-        onColumnResizeEndCallback: this.handleColumnResize
+        onColumnResizeEndCallback: this.handleColumnResize,
+        touchScrollEnabled: true
       },
       this.renderColumns()
     )

package/src/datagrids/DirectDatagridDataSource.ts

@@ -4,6 +4,8 @@ import * as QuickfilterUtils from "../quickfilter/QuickfilterUtils"
 import { DataSource, Row, Schema } from "@mwater/expressions"
 import { DatagridDesign } from "./DatagridDesign"
 import { JsonQLFilter } from "../JsonQLFilter"
+import _ from "lodash"
+import { JsonQLSelectQuery } from "@mwater/jsonql"
 
 /** Uses direct DataSource queries */
 export default class DirectDatagridDataSource implements DatagridDataSource {
@@ -37,6 +39,39 @@ export default class DirectDatagridDataSource implements DatagridDataSource {
     return this.options.dataSource.performQuery(query, callback)
   }
 
+  countRows(
+    design: DatagridDesign,
+    filters: JsonQLFilter[] | undefined,
+    callback: (error: any, numRows: number) => void
+  ): void {
+    const queryBuilder = new DatagridQueryBuilder(this.options.schema)
+
+    // Create query to get the page of rows at the specific offset
+    const query = queryBuilder.createQuery(design, {
+      extraFilters: filters
+    })
+
+    const countQuery: JsonQLSelectQuery = {
+      ..._.omit(query, 'orderBy'),
+      selects: [
+        {
+          type: 'select',
+          expr: {
+            type: 'op',
+            op: 'count',
+            exprs: []
+          },
+          alias: 'cnt'
+        }
+      ]
+    };
+
+    console.log(countQuery)
+    return this.options.dataSource.performQuery(countQuery, (error, rows) => {
+      callback(error, rows?.[0]?.cnt)
+    })
+  }
+
   // Gets the quickfilters data source
   getQuickfiltersDataSource() {
     return {

package/src/datagrids/LabeledExprGenerator.ts

@@ -140,6 +140,21 @@ export default class LabeledExprGenerator {
               joins
             }
           ]
+        } else if (column.idTable!.match(/^custom./)) { // Support cascading ref question
+          return this.schema
+            .getColumns(column.idTable!)
+            .filter((c: any) => c.id[0] !== "_")
+            .map((c: any) => ({
+              expr: {
+                type: "scalar",
+                table,
+                joins: [column.id],
+                expr: { type: "field", table: column.idTable, column: c.id }
+              },
+
+              label: `${createLabel(column)} > ${createLabel(c)}`,
+              joins
+            }))
         } else {
           // Use label, code, full name, or name of dest table
           const destTable = this.schema.getTable(column.idTable!)

package/src/datagrids/ServerDatagridDataSource.ts

@@ -51,9 +51,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 +127,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/dayjs.ts

@@ -0,0 +1,5 @@
+import dayjs from "dayjs"
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+dayjs.extend(localizedFormat)
+
+export default dayjs

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"

package/src/languages.ts

@@ -513,6 +513,11 @@ export const languages: {
       "name": "Māori",
       "en": "Maori"
   },
+  {
+      "code": "miq",
+      "name": "Miskitu",
+      "en": "Miskito"
+  },
   {
       "code": "mk",
       "name": "Македонски",

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/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/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/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"