@mwater/visualization 5.0.1 → 5.2.0

package/src/dashboards/DashboardDesign.ts

@@ -1,7 +1,7 @@
-import { JsonQLFilter } from "../JsonQLFilter"
 import { Quickfilter } from "../quickfilter/Quickfilter"
-import { LiteralType, Expr } from "@mwater/expressions"
+import { Expr } from "@mwater/expressions"
 import { BlocksLayoutOptions, DashboardTheme } from "./layoutOptions"
+import { GlobalFilter } from "../GlobalFilter"
 
 /** Dashboard design
  * Each understands enough of the dashboard design to create widgets.
@@ -35,23 +35,3 @@ export interface DashboardDesign {
   /** array of global filters. See below. */
   globalFilters?: GlobalFilter[]
 }
-
-/** Global Filters:
-
-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/dashboards/DashboardViewComponent.ts

@@ -14,7 +14,7 @@ import WidgetScopesViewComponent from "../widgets/WidgetScopesViewComponent"
 import { getLayoutOptions } from "./layoutOptions"
 import { WidgetComponent } from "./WidgetComponent"
 import { DashboardDataSource, DashboardDesign, JsonQLFilter } from ".."
-import { getMapTilerApiKey, setMapTilerApiKey } from "../maps/vectorMaps"
+import { setPrintingModeEnabled } from "../maps/vectorMaps"
 
 export interface DashboardViewComponentProps {
   /** schema to use */
@@ -147,10 +147,9 @@ export default class DashboardViewComponent extends React.Component<
 
   // Call to print the dashboard
   print = async () => {
-    // Temporarily disable vector maps as WebGL is not supported in print mode
-    const mapTilerAPIKey = getMapTilerApiKey()
+    // Temporarily enable print mode for vector maps
     try {
-      setMapTilerApiKey("")
+      setPrintingModeEnabled(true)
 
       // Create element at 1080 wide (use as standard printing width)
       const elem = R(
@@ -162,7 +161,7 @@ export default class DashboardViewComponent extends React.Component<
       const printer = new ReactElementPrinter()
       await printer.print(elem, { delay: 5000 })
     } finally {
-      setMapTilerApiKey(mapTilerAPIKey)
+      setPrintingModeEnabled(false)
     }
   }
 

package/src/dashboards/LayoutOptionsComponent.tsx

@@ -137,7 +137,7 @@ export function LayoutOptionsComponent(props: {
           <div style={{ height: "100%", display: "grid", gridTemplateRows: "auto 1fr" }}>
             <div key="quickfilters">
               {layoutOptions.hideQuickfiltersWidth == null ||
-              sizeOptions[previewSize].value.width > layoutOptions.hideQuickfiltersWidth
+                sizeOptions[previewSize].value.width > layoutOptions.hideQuickfiltersWidth
                 ? props.quickfiltersView
                 : null}
             </div>
@@ -196,9 +196,11 @@ function ThemeToggle(props: { theme?: DashboardTheme; onChange: (theme: Dashboar
 
   return (
     <FormGroup label="Theme">
-      {renderStyleItem("default")}
-      {renderStyleItem("greybg")}
-      {renderStyleItem("story")}
+      <div className="list-group">
+        {renderStyleItem("default")}
+        {renderStyleItem("greybg")}
+        {renderStyleItem("story")}
+      </div>
     </FormGroup>
   )
 }

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/dashboards/SettingsModalComponent.tsx

@@ -0,0 +1,170 @@
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+import update from "update-object"
+import { languages } from "../languages"
+import * as ui from "@mwater/react-library/lib/bootstrap"
+import { default as ReactSelect } from "react-select"
+import * as DashboardUtils from "./DashboardUtils"
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
+import QuickfiltersDesignComponent from "../quickfilter/QuickfiltersDesignComponent"
+import FiltersDesignerComponent from "../FiltersDesignerComponent"
+import { DataSource, Schema } from "@mwater/expressions"
+import { DashboardDesign } from "./DashboardDesign"
+import { GlobalFiltersElementFactoryContext } from "../MWaterContextComponent"
+
+export interface SettingsModalComponentProps {
+  onDesignChange: any
+  schema: Schema
+  dataSource: DataSource
+}
+
+interface SettingsModalComponentState {
+  design: DashboardDesign | null
+}
+
+// Popup with settings for dashboard
+export default class SettingsModalComponent extends React.Component<
+  SettingsModalComponentProps,
+  SettingsModalComponentState
+> {
+  constructor(props: SettingsModalComponentProps) {
+    super(props)
+    this.state = {
+      design: null // Set when being edited
+    }
+  }
+
+  show(design: any) {
+    return this.setState({ design })
+  }
+
+  handleSave = () => {
+    this.props.onDesignChange(this.state.design)
+    return this.setState({ design: null })
+  }
+
+  handleCancel = () => {
+    return this.setState({ design: null })
+  }
+  handleDesignChange = (design: any) => {
+    return this.setState({ design })
+  }
+
+  handleFiltersChange = (filters: any) => {
+    const design = _.extend({}, this.state.design, { filters })
+    return this.handleDesignChange(design)
+  }
+
+  handleGlobalFiltersChange = (globalFilters: any) => {
+    const design = _.extend({}, this.state.design, { globalFilters })
+    return this.handleDesignChange(design)
+  }
+
+  render() {
+    // Don't show if not editing
+    if (!this.state.design) {
+      return null
+    }
+
+    // Get filterable tables
+    const filterableTables = DashboardUtils.getFilterableTables(this.state.design, this.props.schema)
+
+    const localeOptions = _.map(languages, (language) => {
+      return {
+        value: language.code,
+        label: language.en + " (" + language.name + ")"
+      }
+    })
+
+    return (
+      <ActionCancelModalComponent
+        size="large"
+        onCancel={this.handleCancel}
+        onAction={this.handleSave}
+      >
+        <div style={{ paddingBottom: 200 }}>
+          <h4>Quick Filters</h4>
+          <div className="text-muted">
+            Quick filters are shown to the user as a dropdown at the top of the dashboard and can be used to filter data of widgets.
+          </div>
+
+          {filterableTables.length > 0 ? (
+            <QuickfiltersDesignComponent
+              design={this.state.design.quickfilters || []}
+              onDesignChange={(design: any) =>
+                this.handleDesignChange(update(this.state.design, { quickfilters: { $set: design } }))
+              }
+              schema={this.props.schema}
+              dataSource={this.props.dataSource}
+              tables={filterableTables}
+            />
+          ) : (
+            "Nothing to quickfilter. Add widgets to the dashboard"
+          )}
+
+          <h4 style={{ paddingTop: 10 }}>Filters</h4>
+          <div className="text-muted">
+            Filters are built in to the dashboard and cannot be changed by viewers of the dashboard.
+          </div>
+
+          {filterableTables.length > 0 ? (
+            <FiltersDesignerComponent
+              schema={this.props.schema}
+              dataSource={this.props.dataSource}
+              filters={this.state.design.filters}
+              onFiltersChange={this.handleFiltersChange}
+              filterableTables={filterableTables}
+            />
+          ) : (
+            "Nothing to filter. Add widgets to the dashboard"
+          )}
+
+          <GlobalFiltersElementFactoryContext.Consumer>
+            {globalFiltersElementFactory =>
+              globalFiltersElementFactory ? (
+                <div>
+                  <h4 style={{ paddingTop: 10 }}>Global Filters</h4>
+                  {globalFiltersElementFactory({
+                    schema: this.props.schema,
+                    dataSource: this.props.dataSource,
+                    filterableTables,
+                    globalFilters: this.state.design!.globalFilters || [],
+                    onChange: this.handleGlobalFiltersChange
+                  })}
+                </div>
+              ) : undefined
+            }
+          </GlobalFiltersElementFactoryContext.Consumer>
+
+          <h4 style={{ paddingTop: 10 }}>Language</h4>
+          <div className="text-muted">
+            Controls the preferred language of widgets and uses specified language when available
+          </div>
+
+          <ReactSelect
+            value={_.findWhere(localeOptions, { value: this.state.design.locale || "en" }) || null}
+            options={localeOptions}
+            onChange={(locale: any) =>
+              this.handleDesignChange(update(this.state.design, { locale: { $set: locale.value } }))
+            }
+          />
+
+          {this.state.design.implicitFiltersEnabled && (
+            <>
+              <h4 style={{ paddingTop: 10 }}>Advanced</h4>
+              <ui.Checkbox
+                value={this.state.design.implicitFiltersEnabled != null ? this.state.design.implicitFiltersEnabled : true}
+                onChange={(value: boolean) =>
+                  this.handleDesignChange(update(this.state.design, { implicitFiltersEnabled: { $set: value } }))
+                }
+              >
+                Enable Implicit Filtering (leave unchecked for new dashboards)
+              </ui.Checkbox>
+            </>
+          )}
+        </div>
+      </ActionCancelModalComponent>
+    )
+  }
+}

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

@@ -2,20 +2,22 @@ import { Row } from "@mwater/expressions"
 import { DatagridDesign, JsonQLFilter } from ".."
 import { QuickfiltersDataSource } from "../quickfilter/QuickfiltersDataSource"
 
-export default class DatagridDataSource {
+export default interface DatagridDataSource {
   /** Gets the rows specified */
   getRows(
     design: DatagridDesign,
     offset: number,
     limit: number,
     filters: JsonQLFilter[] | undefined,
-    callback: (error: any, rows: Row[]) => void
-  ): void {
-    throw new Error("Not implemented")
-  }
+    callback: (error: any, rows?: Row[]) => void
+  ): void
+
+  countRows(
+    design: DatagridDesign,
+    filters: JsonQLFilter[] | undefined,
+    callback: (error: any, numRows?: number) => void
+  ): void
 
   /** Gets the quickfilters data source */
-  getQuickfiltersDataSource(): QuickfiltersDataSource {
-    throw new Error("Not implemented")
-  }
+  getQuickfiltersDataSource(): QuickfiltersDataSource
 }

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

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React, { useMemo } from "react"
 const R = React.createElement
@@ -14,7 +13,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"
@@ -22,6 +21,7 @@ import { getFormatOptions } from "../valueFormatter"
 import { getDefaultFormat } from "../valueFormatter"
 import { DatagridDesignColumn } from "./DatagridDesign"
 import { DatagridDesign } from ".."
+import { GlobalFiltersElementFactoryContext } from "../MWaterContextComponent"
 
 export interface DatagridDesignerComponentProps {
   /** schema to use */
@@ -36,8 +36,6 @@ export interface DatagridDesignerComponentProps {
 
 // Designer for the datagrid. Currenly allows only single-table designs (no subtable rows)
 export default class DatagridDesignerComponent extends React.Component<DatagridDesignerComponentProps> {
-  static contextTypes = { globalFiltersElementFactory: PropTypes.func }
-
   handleTableChange = (table: any) => {
     const design = {
       table,
@@ -93,20 +91,24 @@ export default class DatagridDesignerComponent extends React.Component<DatagridD
               value: this.props.design.filter,
               onChange: this.handleFilterChange
             }),
-            this.context.globalFiltersElementFactory
-              ? R(
-                  "div",
-                  { style: { marginTop: 20 } },
-                  this.context.globalFiltersElementFactory({
-                    schema: this.props.schema,
-                    dataSource: this.props.dataSource,
-                    filterableTables: [this.props.design.table],
-                    globalFilters: this.props.design.globalFilters,
-                    onChange: this.handleGlobalFiltersChange,
-                    nullIfIrrelevant: true
-                  })
-                )
-              : undefined
+            <GlobalFiltersElementFactoryContext.Consumer>
+              {(globalFiltersElementFactory) =>
+                globalFiltersElementFactory
+                  ? R(
+                      "div",
+                      { style: { marginTop: 20 } },
+                      globalFiltersElementFactory({
+                        schema: this.props.schema,
+                        dataSource: this.props.dataSource,
+                        filterableTables: [this.props.design.table!],
+                        globalFilters: this.props.design.globalFilters,
+                        onChange: this.handleGlobalFiltersChange,
+                        nullIfIrrelevant: true
+                      })
+                    )
+                  : undefined
+              }
+            </GlobalFiltersElementFactoryContext.Consumer>
           )
         },
         {
@@ -196,6 +198,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}
@@ -554,7 +564,9 @@ class ColumnDesignerComponent extends React.Component<ColumnDesignerComponentPro
         }),
         this.renderSplit(),
         this.renderFormat(),
-        error ? R("i", { className: "fa fa-exclamation-circle text-danger" }) : undefined
+        error ? <span className="text-danger">
+          <i className="fa fa-exclamation-circle" /> {error}
+        </span> : undefined
       ),
 
       R(

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 })
     }
   }
 
@@ -191,8 +191,8 @@ export default class DatagridViewComponent extends React.Component<
         }
 
         const newRows = produce(this.state.rows, draft => {
-          if (rows[0]) {
-            draft[rowIndex] = rows[0]    
+          if (rows![0]) {
+            draft[rowIndex] = rows![0]    
           }
           else {
             // If row missing, remove it from list
@@ -308,7 +308,7 @@ export default class DatagridViewComponent extends React.Component<
   }
 
   handleRowDoubleClick = (ev: any, rowIndex: any) => {
-    if (this.props.onRowDoubleClick != null && this.state.rows[rowIndex].id) {
+    if (this.props.onRowDoubleClick != null && this.state.rows[rowIndex]?.id) {
       this.props.onRowDoubleClick(this.props.design.table!, this.state.rows[rowIndex].id, rowIndex)
     }
   }

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

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React from "react"
 const R = React.createElement