@mwater/visualization 5.0.1 → 5.2.0

package/src/MWaterGlobalFiltersComponent.ts

@@ -2,19 +2,19 @@ import _ from "lodash"
 import React from "react"
 const R = React.createElement
 
-import querystring from "querystring"
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import { IdLiteralComponent } from "@mwater/expressions-ui"
 import { DataSource, Schema } from "@mwater/expressions"
+import { GlobalFilter } from "./GlobalFilter"
 
 export interface MWaterGlobalFiltersComponentProps {
   /** Schema of the database */
   schema: Schema
   /** Data source to use to get values */
   dataSource: DataSource
-  filterableTables: any
-  globalFilters?: any
-  onChange: any
+  filterableTables: string[]
+  globalFilters?: GlobalFilter[]
+  onChange: (globalFilters: GlobalFilter[]) => void
 }
 
 // Control to edit the global filters (_managed_by and admin_region)
@@ -36,7 +36,7 @@ export default class MWaterGlobalFiltersComponent extends React.Component<MWater
       })
     }
 
-    return this.props.onChange(globalFilters)
+    this.props.onChange(globalFilters)
   }
 
   handleManagedByChange = (managedBy: any) => {
@@ -56,13 +56,13 @@ export default class MWaterGlobalFiltersComponent extends React.Component<MWater
       })
     }
 
-    return this.props.onChange(globalFilters)
+    this.props.onChange(globalFilters)
   }
 
   render() {
     // Find managed by
     let adminRegions, managedBy
-    const managedByEntry = _.find(this.props.globalFilters, (gf) => gf.op === "within" && gf.columnId === "_managed_by")
+    const managedByEntry = _.find(this.props.globalFilters || [], (gf) => gf.op === "within" && gf.columnId === "_managed_by")
     if (managedByEntry) {
       managedBy = managedByEntry.exprs[0].value.split(":")[1]
     } else {
@@ -71,7 +71,7 @@ export default class MWaterGlobalFiltersComponent extends React.Component<MWater
 
     // Find admin region
     const adminRegionEntry = _.find(
-      this.props.globalFilters,
+      this.props.globalFilters || [],
       (gf) => gf.op === "within any" && gf.columnId === "admin_region"
     )
     if (adminRegionEntry) {

package/src/MWaterLoaderComponent.ts

@@ -10,7 +10,7 @@ import MWaterContextComponent from "./MWaterContextComponent"
 
 /**
  * Loads an mWater schema from the server and creates child with schema and dataSource
- * Also creates a tableSelectElementFactory context to allow selecting of a table in an mWater-friendly way
+ * Also creates context to allow selecting of a table in an mWater-friendly way
  * and several other context items
  */
 export default class MWaterLoaderComponent extends AsyncLoadComponent<
@@ -32,7 +32,7 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<
     addLayerElementFactory?: any
     children: (error: any, config?: { schema: Schema; dataSource: DataSource }) => ReactElement<any>
     /** Custom error formatter that returns React node or string, gets passed the error response from server */
-    errorFormatter: (data: any, defaultError: string) => string
+    errorFormatter?: (data: any, defaultError: string) => string
   },
   {
     error: any
@@ -79,7 +79,14 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<
         if (error) {
           const defaultError = `Cannot load one of the forms that this depends on. Perhaps the administrator has not shared the form with you? Details: ${error.message}`
           if (this.props.errorFormatter) {
-            return callback({ error: this.props.errorFormatter(JSON.parse(error.message), defaultError) })
+            try {
+              const parsedError = JSON.parse(error.message)
+              if (parsedError) {
+                return callback({ error: this.props.errorFormatter(parsedError, defaultError) })
+              }
+            } catch (e) {
+              // Ignore
+            }
           }
           return callback({ error: defaultError })
         }

package/src/{MWaterTableSelectComponent.ts → MWaterTableSelectComponent.tsx}

@@ -7,6 +7,7 @@ import { ExprUtils, Schema } from "@mwater/expressions"
 import MWaterResponsesFilterComponent from "./MWaterResponsesFilterComponent"
 import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent"
 import MWaterCompleteTableSelectComponent from "./MWaterCompleteTableSelectComponent"
+import { ActiveTablesContext } from "@mwater/expressions-ui"
 
 export interface MWaterTableSelectComponentProps {
   /** Url to hit api */
@@ -37,10 +38,8 @@ export default class MWaterTableSelectComponent extends React.Component<
 > {
   static contextTypes = {
     locale: PropTypes.string, // e.g. "en"
-
-    // Optional list of tables (ids) being used. Use this to present an initially short list to select from
-    activeTables: PropTypes.arrayOf(PropTypes.string.isRequired)
   }
+  
   toggleEdit: any
 
   constructor(props: any) {
@@ -187,9 +186,6 @@ class EditModeTableSelectComponent extends React.Component<
 > {
   static contextTypes = {
     locale: PropTypes.string, // e.g. "en"
-
-    // Optional list of tables (ids) being used. Use this to present an initially short list to select from
-    activeTables: PropTypes.arrayOf(PropTypes.string.isRequired)
   }
 
   constructor(props: any) {
@@ -208,8 +204,8 @@ class EditModeTableSelectComponent extends React.Component<
   // Get list of tables that should be included in shortlist
   // This is all active tables and all responses tables in schema (so as to include rosters) and all extra tables
   // Also includes current table
-  getTableShortlist(): string[] {
-    let tables: string[] = this.context.activeTables || []
+  getTableShortlist(activeTables: string[]): string[] {
+    let tables: string[] = activeTables
 
     // Remove dead tables
     tables = tables.filter(
@@ -253,64 +249,63 @@ class EditModeTableSelectComponent extends React.Component<
   }
 
   render() {
-    const items = _.map(this.getTableShortlist(), (tableId) => {
-      const table = this.props.schema.getTable(tableId)!
-
-      return {
-        name: ExprUtils.localizeString(table.name, this.context.locale),
-        desc: ExprUtils.localizeString(table.desc, this.context.locale),
-        onClick: this.props.onChange.bind(null, table.id)
-      }
-    })
-
-    return R(
-      "div",
-      null,
-      this.state.completeMode
-        ? R(
-            ModalPopupComponent,
-            {
-              header: "Select Data Source",
-              onClose: () => this.setState({ completeMode: false }),
-              showCloseX: true,
-              size: "x-large"
-            },
-            R(MWaterCompleteTableSelectComponent, {
-              apiUrl: this.props.apiUrl,
-              client: this.props.client,
-              schema: this.props.schema,
-              user: this.props.user,
-              table: this.props.table,
-              onChange: this.handleCompleteChange,
-              extraTables: this.props.extraTables,
-              onExtraTablesChange: this.props.onExtraTablesChange
-            })
-          )
-        : undefined,
-
-      items.length > 0
-        ? [
-            R("div", { className: "text-muted" }, "Select Data Source:"),
-
-            R(OptionListComponent, { items }),
-
-            R(
-              "div",
-              null,
-              items.length > 0
-                ? R(
-                    "button",
-                    { type: "button", className: "btn btn-link btn-sm", onClick: this.handleShowMore },
-                    "Show All Available Data Sources..."
-                  )
-                : undefined
-            )
-          ]
-        : R(
-            "button",
-            { type: "button", className: "btn btn-link", onClick: this.handleShowMore },
-            "Select Data Source..."
-          )
+    return (
+      <ActiveTablesContext.Consumer>
+        {activeTables => (
+          <div>
+            {this.state.completeMode ? (
+              <ModalPopupComponent
+                header="Select Data Source"
+                onClose={() => this.setState({ completeMode: false })}
+                showCloseX={true}
+                size="x-large"
+              >
+                <MWaterCompleteTableSelectComponent
+                  apiUrl={this.props.apiUrl}
+                  client={this.props.client}
+                  schema={this.props.schema}
+                  user={this.props.user}
+                  table={this.props.table}
+                  onChange={this.handleCompleteChange}
+                  extraTables={this.props.extraTables}
+                  onExtraTablesChange={this.props.onExtraTablesChange}
+                />
+              </ModalPopupComponent>
+            ) : null}
+
+            {this.getTableShortlist(activeTables).length > 0 ? (
+              <>
+                <div className="text-muted">Select Data Source:</div>
+                <OptionListComponent items={this.getTableShortlist(activeTables).map((tableId) => {
+                  const table = this.props.schema.getTable(tableId)!
+                  return {
+                    name: ExprUtils.localizeString(table.name, this.context.locale),
+                    desc: ExprUtils.localizeString(table.desc, this.context.locale),
+                    onClick: () => this.props.onChange(table.id)
+                  }
+                })} />
+                <div>
+                  <button
+                    type="button"
+                    className="btn btn-link btn-sm"
+                    onClick={this.handleShowMore}
+                  >
+                    Show All Available Data Sources...
+                  </button>
+                </div>
+              </>
+            ) : (
+              <button
+                type="button"
+                className="btn btn-link"
+                onClick={this.handleShowMore}
+              >
+                Select Data Source...
+              </button>
+            )}
+          </div>
+        )}
+      </ActiveTablesContext.Consumer>
     )
   }
 }

package/src/axes/Axis.ts

@@ -5,37 +5,19 @@ import { Expr } from "@mwater/expressions"
 An axis is an expression with optional aggregation, transform and color mapping
 In ggplot2 parlance, an "aesthetic"
 
-It contains:
- expr: expression
- aggr: DEPRECATED: optional aggregation (e.g. sum)
- xform: optional transformation to be applied. object with `type` field. See below
- colorMap: optional array of color mappings. See below
- excludedValues: Array of post-xform values to exclude when displaying. 
- format: optional d3-format format for numeric values. Default if null is ","
-
-## Xforms
-
-types: 
-
-
 */
 export interface Axis {
+  /** Expression to be displayed on axis */
   expr: Expr
-  /**
-   * `bin`: convert into bins. always has `numBins` integer and `min` and `max`. Can have `excludeUpper` and/or `excludeLower` to remove open bin on top or bottem. type enum
-   * `date`: convert to complete date e.g. `2015-02-08`. type date
-   * `year`: year only e.g. `2015-01-01`. type date
-   * `yearmonth`: year and month only e.g. `2015-02-01`. type date
-   * `yearquarter`: year and quarter only e.g. `2015-01`. type enum
-   * `yearweek`: year and week (ISO) only e.g. `2015-31`. type enum
-   * `month`: month only e.g. `02`. type enum
-   * `week`: ISO week of year e.g. `01` for the first week that contains January 4th
-   * `ranges`: convert to ranges. type enum. `ranges` is array of { id (unique id), label (optional label), minValue (null for none), maxValue (null for none), minOpen (true for >, false for >=), maxOpen (true for <, false for <=) }
-   * `floor`: convert to floor. type enum
+
+  /** Optional transformation to be applied. If a date is used, for example, it's generally
+   * better to use a transform to convert to a year or month rather than creating an expression.
    */
   xform?: AxisXform
 
+  /** optional array of color mappings */
   colorMap?: ColorMap
+
   /** optional array of category values which define the order in which categories should be rendered */
   drawOrder?: any[]
 
@@ -45,12 +27,16 @@ export interface Axis {
   /** optional string for null category */
   nullLabel?: string
 
+  /** Array of post-xform values to exclude when displaying. */
   excludedValues?: any[]
+
+  /** optional d3-format format for numeric values. Default if null is "," */
   format?: string
 
-  /** @deprecated */
+  /** @deprecated optional aggregation (e.g. sum) */
   aggr?: string
 }
+
 /**
  * Color map
  * Array of { value: post-transform value of expression, color: html color }
@@ -70,6 +56,19 @@ export interface AxisCategory {
 }
 
 export interface AxisXform {
+  /**
+   * Type of transformation
+   * `bin`: convert into bins. always has `numBins` integer and `min` and `max`. Can have `excludeUpper` and/or `excludeLower` to remove open bin on top or bottem. type enum
+   * `date`: convert to complete date e.g. `2015-02-08`. type date
+   * `year`: year only e.g. `2015-01-01`. type date
+   * `yearmonth`: year and month only e.g. `2015-02-01`. type date
+   * `yearquarter`: year and quarter only e.g. `2015-01`. type enum
+   * `yearweek`: year and week (ISO) only e.g. `2015-31`. type enum
+   * `month`: month only e.g. `02`. type enum
+   * `week`: ISO week of year e.g. `01` for the first week that contains January 4th
+   * `ranges`: convert to ranges. type enum. `ranges` is array of { id (unique id), label (optional label), minValue (null for none), maxValue (null for none), minOpen (true for >, false for >=), maxOpen (true for <, false for <=) }
+   * `floor`: convert to floor. type enum
+   */
   type: "bin" | "date" | "year" | "yearmonth" | "month" | "week" | "ranges" | "yearweek" | "yearquarter" | "floor"
   numBins?: number
   min?: number

package/src/axes/AxisBuilder.ts

@@ -12,6 +12,7 @@ import { default as produce } from "immer"
 import { formatValue } from "../valueFormatter"
 import { Axis, AxisCategory } from "./Axis"
 import { JsonQLExpr, JsonQLSelectQuery } from "@mwater/jsonql"
+import dayjs from '../dayjs'
 
 const xforms: { type: string; input: LiteralType; output: LiteralType }[] = [
   { type: "bin", input: "number", output: "enum" },
@@ -253,7 +254,7 @@ export default class AxisBuilder {
         if (options.axis.xform.excludeUpper) {
           const thresholds = _.map(
             _.range(0, options.axis.xform.numBins),
-            (bin) => min + ((max - min) * bin) / options.axis.xform!.numBins!
+            (bin) => min + ((max - min) * bin) / options.axis!.xform!.numBins!
           )
           thresholds.push(max + epsilon)
           compiledExpr = {
@@ -913,10 +914,9 @@ export default class AxisBuilder {
         if (values.length === 0) {
           return [noneCategory]
         }
-
         if (options.onlyValuesPresent) {
           // Sort and take only present
-          categories = _.sortBy(_.uniq(values), item => item).map(value => ({ value, label: moment(value, "YYYY-MM-DD").format("ll") }))
+          categories = _.sortBy(_.uniq(values), item => item).map(value => ({ value, label: formatValue("date", value, axis.format)}))
   
           if (hasNone) {
             categories.push(noneCategory)
@@ -930,12 +930,12 @@ export default class AxisBuilder {
         max = values.sort().slice(-1)[0]
 
         // Use moment to get range
-        current = moment(min, "YYYY-MM-DD")
-        end = moment(max, "YYYY-MM-DD")
+        current = dayjs(min)
+        end = dayjs(max)
         categories = []
         while (!current.isAfter(end)) {
-          categories.push({ value: current.format("YYYY-MM-DD"), label: current.format("ll") })
-          current.add(1, "days")
+          categories.push({ value: current.format("YYYY-MM-DD"), label: current.format(axis.format ?? "ll") })
+          current = current.add(1, "days")
           if (categories.length >= 1000) {
             break
           }
@@ -1055,9 +1055,10 @@ export default class AxisBuilder {
           _.map(value as string[], (v, i) => R("div", { key: i }, v))
         )
       case "date":
-        return moment(value, moment.ISO_8601).format("ll")
+        console.log(axis)
+        return formatValue(type, value, axis.format)
       case "datetime":
-        return moment(value, moment.ISO_8601).format("lll")
+        return formatValue(type, value, axis.format)
     }
 
     return "" + value

package/src/axes/RangesComponent.ts

@@ -10,6 +10,7 @@ import NumberInputComponent from "@mwater/react-library/lib/NumberInputComponent
 import ReorderableListComponent from "@mwater/react-library/lib/reorderable/ReorderableListComponent"
 import { AxisXform, AxisXformRange } from "./Axis"
 import { Expr, Schema } from "@mwater/expressions"
+import produce from "immer"
 
 export interface RangesComponentProps {
   schema: Schema
@@ -102,9 +103,9 @@ export default class RangesComponent extends React.Component<RangesComponentProp
 
 interface RangeComponentProps {
   /** Range to edit */
-  range: any
-  onChange: any
-  onRemove: any
+  range: AxisXformRange
+  onChange: (range: AxisXformRange) => void
+  onRemove: () => void
   /** reorderable connector */
   connectDragSource: any
   /** reorderable connector */
@@ -114,14 +115,24 @@ interface RangeComponentProps {
 
 // Single range (row)
 class RangeComponent extends React.Component<RangeComponentProps> {
-  handleMinOpenChange = (minOpen: any) => {
-    return this.props.onChange(update(this.props.range, { minOpen: { $set: minOpen } }))
+  /**
+   * Handles change in minimum open value
+   */
+  handleMinOpenChange = (minOpen: boolean) => {
+    return this.props.onChange(produce(this.props.range, draft => {
+      draft.minOpen = minOpen
+    }))
   }
 
-  handleMaxOpenChange = (maxOpen: any) => {
-    return this.props.onChange(update(this.props.range, { maxOpen: { $set: maxOpen } }))
+  /**
+   * Handles change in maximum open value
+   */
+  handleMaxOpenChange = (maxOpen: boolean) => {
+    return this.props.onChange(produce(this.props.range, draft => {
+      draft.maxOpen = maxOpen
+    }))
   }
-
+  
   render() {
     let placeholder = ""
     if (this.props.range.minValue != null) {
@@ -156,10 +167,10 @@ class RangeComponent extends React.Component<RangeComponentProps> {
               LinkComponent,
               {
                 dropdownItems: [
-                  { id: true, name: "greater than" },
-                  { id: false, name: "greater than or equal to" }
+                  { id: "true", name: "greater than" },
+                  { id: "false", name: "greater than or equal to" }
                 ],
-                onDropdownItemClicked: this.handleMinOpenChange
+                onDropdownItemClicked: (id: string) => this.handleMinOpenChange(id === "true")
               },
               this.props.range.minOpen ? "greater than" : "greater than or equal to"
             )
@@ -169,7 +180,7 @@ class RangeComponent extends React.Component<RangeComponentProps> {
             "td",
             { key: "minValue" },
             R(NumberInputComponent, {
-              value: this.props.range.minValue,
+              value: this.props.range.minValue ?? undefined,
               placeholder: "None",
               small: true,
               onChange: (v: any) => this.props.onChange(update(this.props.range, { minValue: { $set: v } }))
@@ -185,10 +196,10 @@ class RangeComponent extends React.Component<RangeComponentProps> {
               LinkComponent,
               {
                 dropdownItems: [
-                  { id: true, name: "less than" },
-                  { id: false, name: "less than or equal to" }
+                  { id: "true", name: "less than" },
+                  { id: "false", name: "less than or equal to" }
                 ],
-                onDropdownItemClicked: this.handleMaxOpenChange
+                onDropdownItemClicked: (id: string) => this.handleMaxOpenChange(id === "true")
               },
               this.props.range.maxOpen ? "less than" : "less than or equal to"
             )
@@ -198,7 +209,7 @@ class RangeComponent extends React.Component<RangeComponentProps> {
             "td",
             { key: "maxValue" },
             R(NumberInputComponent, {
-              value: this.props.range.maxValue,
+              value: this.props.range.maxValue ?? undefined,
               placeholder: "None",
               small: true,
               onChange: (v: any) => this.props.onChange(update(this.props.range, { maxValue: { $set: v } }))

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)
     }
   }
 
@@ -240,45 +237,6 @@ export default class DashboardComponent extends React.Component<DashboardCompone
     )
   }
 
-  renderStyleItem(style: any) {
-    const isActive = (this.props.design.style || "default") === style
-
-    const content = (() => {
-      switch (style) {
-        case "default":
-          return [
-            R("h4", { key: "name", className: "list-group-item-heading" }, "Classic Dashboard"),
-            R("p", { key: "description", className: "" }, "Ideal for data display with minimal text")
-          ]
-        case "greybg":
-          return [
-            R("h4", { key: "name", className: "list-group-item-heading" }, "Framed Dashboard"),
-            R("p", { key: "description", className: "" }, "Each widget is white on a grey background")
-          ]
-        case "story":
-          return [
-            R("h4", { key: "name", className: "list-group-item-heading" }, "Story"),
-            R(
-              "p",
-              { key: "description", className: "" },
-              "Ideal for data-driven storytelling with lots of text. Responsive and mobile-friendly"
-            )
-          ]
-      }
-      return null
-    })()
-
-    return R(
-      "a",
-      {
-        key: style,
-        className: `list-group-item ${isActive ? "active" : ""}`,
-        onClick: this.handleStyleChange.bind(null, style)
-      },
-      content
-    )
-  }
-
   renderStyle() {
     return R(
       "button",
@@ -382,7 +340,8 @@ export default class DashboardComponent extends React.Component<DashboardCompone
       locks: this.props.quickfilterLocks,
       filters: this.getCompiledFilters(),
       hideTopBorder: this.props.hideTitleBar,
-      onHide: () => this.setState({ hideQuickfilters: true })
+      // Don't hide if title bar is hidden as it can't be shown again
+      onHide: () => !this.props.hideTitleBar ? this.setState({ hideQuickfilters: true }) : undefined
     })
   }
 
@@ -428,41 +387,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>
   }
 }