@mwater/visualization 5.1.0 → 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
   }
 

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

@@ -75,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/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/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/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

@@ -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/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/{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/ServerMapDataSource.ts

@@ -35,7 +35,7 @@ interface ServerMapDataSourceOptions {
   mapId: string
 
   /** revision to use to allow caching */
-  rev: string
+  rev: number
 }
 
 interface ServerMapLayerDataSourceOptions extends ServerMapDataSourceOptions {

package/src/maps/VectorMapViewComponent.tsx

@@ -14,7 +14,6 @@ import {
   getFilterableTables as utilsGetFilterableTables,
   MapScope
 } from "./MapUtils"
-import {Color} from '@maplibre/maplibre-gl-style-spec';
 
 import "maplibre-gl/dist/maplibre-gl.css"
 import "./VectorMapViewComponent.css"

package/src/maps/vectorMaps.tsx

@@ -7,6 +7,13 @@ import "maplibre-gl/dist/maplibre-gl.css"
 import "./VectorMapViewComponent.css"
 import React from "react"
 
+/** Set to true to enable printing by preserving the drawing buffer */
+let printingModeEnabled = false
+
+export function setPrintingModeEnabled(val: boolean) {
+  printingModeEnabled = val
+}
+
 /* Hooks and functions related to displaying a vector map */
 
 let mapTilerApiKey = ""
@@ -58,7 +65,8 @@ export function useVectorMap(options: {
     }
     
     const observer = new IntersectionObserver(function(entries) {
-      setMapDivVisible(entries[0].isIntersecting)
+      // When in printing mode, always visible as we need to render the map
+      setMapDivVisible(entries[0].isIntersecting || printingModeEnabled)
     })
     observer.observe(divRef)
     return () => {
@@ -98,6 +106,7 @@ export function useVectorMap(options: {
         [-179.9, -85], // Southwest coordinates
         [179.9, 85] // Northeast coordinates
       ],
+      preserveDrawingBuffer: printingModeEnabled
     })
 
     setHasWebGLContext(true)

package/src/quickfilter/QuickfilterCompiler.ts

@@ -81,7 +81,7 @@ export default class QuickfilterCompiler {
     return filters
   }
 
-  compileToFilterExpr(expr: any, value: any, multi: any): OpExpr | null {
+  compileToFilterExpr(expr: any, value: any, multi?: boolean): OpExpr | null {
     // Get type of expr
     const type = new ExprUtils(this.schema).getExprType(expr)
     const idTable = new ExprUtils(this.schema).getExprIdTable(expr)

package/src/widgets/charts/table/TableChartViewComponent.ts

@@ -223,7 +223,7 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
 
   renderImage(id: any) {
     const url = this.props.dataSource.getImageUrl(id)
-    return R("a", { href: url, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, "Image")
+    return R("a", { href: url, onClick: (e) => {e.stopPropagation()}, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, "Image")
   }
 
   renderCell(rowIndex: any, columnIndex: any) {
@@ -264,7 +264,9 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
         // Convert to node based on type
         switch (exprType) {
           case "text":
-            node = R(Linkify, { properties: { target: "_blank" } }, value)
+            if (_.isString(value)) {
+              node = R(Linkify, { properties: { target: "_blank" } }, value)
+            }
             break
           case "number":
           case "geometry":
@@ -272,21 +274,33 @@ class TableContentsComponent extends React.Component<TableContentsComponentProps
             break
           case "boolean":
           case "enum":
+            node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context.locale)
+            break
           case "enumset":
           case "text[]":
-            node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context.locale)
+            if (_.isArray(value)) {
+              node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context.locale)
+            }
             break
           case "date":
-            node = formatValue(exprType, value, column.format)
+            if (_.isString(value)) {
+              node = formatValue(exprType, value, column.format)
+            }
             break
           case "datetime":
-            node = formatValue(exprType, value, column.format)
+            if (_.isString(value)) {
+              node = formatValue(exprType, value, column.format)
+            }
             break
           case "image":
-            node = this.renderImage(value.id)
+            if (_.isObject(value) && value.id != null) {
+              node = this.renderImage(value.id)
+            }
             break
           case "imagelist":
-            node = _.map(value, (v: Image) => this.renderImage(v.id))
+            if (_.isArray(value)) {
+              node = _.map(value, (v: Image) => this.renderImage(v.id))
+            }
             break
           default:
             node = "" + value

package/src/widgets/text/TextWidgetDesign.ts

@@ -1,6 +1,9 @@
+import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter"
+import { HtmlItem } from "../../richtext/ItemsHtmlConverter"
+
 export interface TextWidgetDesign {
   /** Text widget stores its content as array of items. See ItemsHtmlConverter TODO */
-  items: any[]
+  items: (HtmlItem | HtmlItemExpr)[]
 
   /** "title" for title block. default is "default" */
   style?: "title" | "default"

package/src/dashboards/SettingsModalComponent.ts

@@ -1,169 +0,0 @@
-import PropTypes from "prop-types"
-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"
-
-export interface SettingsModalComponentProps {
-  onDesignChange: any
-  schema: Schema
-  dataSource: DataSource
-}
-
-interface SettingsModalComponentState {
-  design: any
-}
-
-// Popup with settings for dashboard
-export default class SettingsModalComponent extends React.Component<
-  SettingsModalComponentProps,
-  SettingsModalComponentState
-> {
-  static contextTypes = { globalFiltersElementFactory: PropTypes.func }
-
-  constructor(props: any) {
-    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 R(
-      ActionCancelModalComponent,
-      {
-        size: "large",
-        onCancel: this.handleCancel,
-        onAction: this.handleSave
-      },
-      R(
-        "div",
-        { style: { paddingBottom: 200 } },
-        R("h4", null, "Quick Filters"),
-        R(
-          "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."
-        ),
-
-        filterableTables.length > 0
-          ? R(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",
-
-        R("h4", { style: { paddingTop: 10 } }, "Filters"),
-        R(
-          "div",
-          { className: "text-muted" },
-          "Filters are built in to the dashboard and cannot be changed by viewers of the dashboard."
-        ),
-
-        filterableTables.length > 0
-          ? R(FiltersDesignerComponent, {
-              schema: this.props.schema,
-              dataSource: this.props.dataSource,
-              filters: this.state.design.filters,
-              onFiltersChange: this.handleFiltersChange,
-              filterableTables
-            })
-          : "Nothing to filter. Add widgets to the dashboard",
-
-        this.context.globalFiltersElementFactory
-          ? R(
-              "div",
-              null,
-              R("h4", { style: { paddingTop: 10 } }, "Global Filters"),
-
-              this.context.globalFiltersElementFactory({
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                filterableTables,
-                globalFilters: this.state.design.globalFilters || [],
-                onChange: this.handleGlobalFiltersChange
-              })
-            )
-          : undefined,
-
-        R("h4", { style: { paddingTop: 10 } }, "Language"),
-        R(
-          "div",
-          { className: "text-muted" },
-          "Controls the preferred language of widgets and uses specified language when available"
-        ),
-
-        R(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 } }))
-        }),
-
-        R("h4", { style: { paddingTop: 10 } }, "Advanced"),
-        R(
-          ui.Checkbox,
-          {
-            value: this.state.design.implicitFiltersEnabled != null ? this.state.design.implicitFiltersEnabled : true,
-            onChange: (value) =>
-              this.handleDesignChange(update(this.state.design, { implicitFiltersEnabled: { $set: value } }))
-          },
-          "Enable Implicit Filtering (leave unchecked for new dashboards)"
-        )
-      )
-    )
-  }
-}