@mwater/visualization 5.0.1 → 5.1.0

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,21 +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[]
-    refreshKey: number
-  }
+  DatagridComponentState
 > {
   datagridView?: DatagridViewComponent | null
   quickfilters?: HTMLElement | null
@@ -88,15 +93,40 @@ export default class DatagridComponent extends React.Component<
   }
 
   reload() {
-    return this.datagridView?.reload()
+    this.datagridView?.reload()
   }
 
   componentDidMount() {
-    return this.updateHeight()
+    this.loadRowCount()
+    this.updateHeight()
   }
 
-  componentDidUpdate() {
-    return 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})
+      })
   }
 
   handleRefreshData = () => {
@@ -265,6 +295,7 @@ 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(),

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

@@ -95,7 +95,7 @@ export default class DatagridViewComponent extends React.Component<
     // 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) || nextProps.refreshKey !== this.props.refreshKey) {
-      return this.setState({ rows: [], entirelyLoaded: false })
+      this.setState({ rows: [], entirelyLoaded: false })
     }
   }
 

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

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