@mwater/visualization 5.0.1 → 5.1.0

package/lib/widgets/charts/table/TableChartDesignerComponent.js

@@ -36,7 +36,7 @@ const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_ui_2 = require("@mwater/expressions-ui");
 const OrderingsComponent_1 = __importDefault(require("./OrderingsComponent"));
-const TableSelectComponent_1 = __importDefault(require("../../../TableSelectComponent"));
+const expressions_ui_3 = require("@mwater/expressions-ui");
 const ReorderableListComponent_1 = __importDefault(require("@mwater/react-library/lib/reorderable/ReorderableListComponent"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const valueFormatter_1 = require("../../../valueFormatter");
@@ -79,7 +79,7 @@ class TableChartDesignerComponent extends react_1.default.Component {
         this.updateDesign({ columns });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_3.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,

package/lib/widgets/text/ExprItemEditorComponent.js

@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const expressions_1 = require("@mwater/expressions");
 const expressions_ui_1 = require("@mwater/expressions-ui");
-const TableSelectComponent_1 = __importDefault(require("../../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const valueFormatter_1 = require("../../valueFormatter");
 const valueFormatter_2 = require("../../valueFormatter");
 const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
@@ -61,7 +61,7 @@ class ExprItemEditorComponent extends react_1.default.Component {
         }, lodash_1.default.map(formats, (format) => R("option", { key: format.value, value: format.value }, format.label))));
     }
     render() {
-        return R("div", { style: { paddingBottom: 200 } }, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, {
+        return R("div", { style: { paddingBottom: 200 } }, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.state.table,
             onChange: this.handleTableChange

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mwater/visualization",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "description": "Visualization library",
   "main": "lib/index.js",
   "scripts": {

package/src/MWaterAddRelatedFormComponent.ts

@@ -10,10 +10,10 @@ import querystring from "querystring"
 import { ExprUtils, Schema } from "@mwater/expressions"
 import * as ui from "./UIComponents"
 import * as formUtils from "@mwater/forms/lib/formUtils" // TODO requireing this directly because of bizarre backbone issue
-import { AssetQuestion, Form, FormDesign } from "@mwater/forms"
+import { Form, FormDesign } from "@mwater/forms"
 
 export interface MWaterAddRelatedFormComponentProps {
-  /** Entities or assets table id */
+  /** Entities table id */
   table: string
 
   apiUrl: string
@@ -33,7 +33,7 @@ interface MWaterAddRelatedFormComponentState {
 }
 
 // Link that when clicked popup up a modal window allowing user to select a form
-// with an Entity/Site question to the extraTables
+// with an Site question to the extraTables
 export default class MWaterAddRelatedFormComponent extends React.Component<
   MWaterAddRelatedFormComponentProps,
   MWaterAddRelatedFormComponentState
@@ -91,7 +91,7 @@ export default class MWaterAddRelatedFormComponent extends React.Component<
 }
 
 interface AddRelatedFormModalComponentProps {
-  /** Entities or assets table id */
+  /** Entities table id */
   table: string
 
   apiUrl: string
@@ -126,14 +126,19 @@ class AddRelatedFormModalComponent extends React.Component<
   }
 
   componentDidMount() {
-    // Get all forms visible to user
+    // Get all forms visible to user that have _entity_types that include table
     const query: any = {}
-    query.selector = JSON.stringify({ state: { $ne: "deleted" } })
+    query.selector = JSON.stringify({ 
+      state: { $ne: "deleted" },
+      _entity_types: { $in: [this.props.table.split(".")[1]] }
+    })
+    query.fields = JSON.stringify({ "_id": 1, "design.name": 1, "modified": 1, "created": 1 })
+
     if (this.props.client) {
       query.client = this.props.client
     }
 
-    // Get list of all form names
+    // Get list of related forms
     return $.getJSON(this.props.apiUrl + "forms?" + querystring.stringify(query), (forms: Form[]) => {
       // Sort by modified.on desc but first by user
       forms = _.sortByOrder(
@@ -142,16 +147,6 @@ class AddRelatedFormModalComponent extends React.Component<
         ["desc", "desc"]
       )
 
-      // Filter by Entity and Site questions of tableId type
-      if (this.props.table.startsWith("entities.")) {
-        forms = _.filter(forms, (form) => formUtils.findEntityQuestion(form.design, this.props.table.split(".")[1]))
-      } else if (this.props.table.startsWith("assets:")) {
-        const assetSystemId = parseInt(this.props.table.split(":")[1])
-        forms = forms.filter((form) => {
-          return formUtils.findAssetQuestion(form.design, assetSystemId) != null
-        })
-      }
-
       // Get _id, name, and description
       const items = _.map(forms, (form) => ({
         name: ExprUtils.localizeString(form.design.name, this.context.locale),
@@ -159,9 +154,9 @@ class AddRelatedFormModalComponent extends React.Component<
         onClick: this.props.onSelect.bind(null, "responses:" + form._id)
       }))
 
-      return this.setState({ items })
-    }).fail((xhr) => {
-      return this.setState({ error: xhr.responseText })
+      this.setState({ items })
+    }).fail((xhr: any) => {
+      this.setState({ error: xhr.responseText })
     })
   }
 

package/src/MWaterContextComponent.tsx

@@ -0,0 +1,140 @@
+import PropTypes from "prop-types"
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+
+import MWaterTableSelectComponent from "./MWaterTableSelectComponent"
+import MWaterAddRelatedFormComponent from "./MWaterAddRelatedFormComponent"
+import MWaterAddRelatedIndicatorComponent from "./MWaterAddRelatedIndicatorComponent"
+import MWaterGlobalFiltersComponent from "./MWaterGlobalFiltersComponent"
+import { Schema, Section } from "@mwater/expressions"
+import { CustomTableSelectComponentFactoryContext, CustomTableSelectComponentFactoryOptions, DecorateScalarExprTreeSectionChildrenContext, DecorateScalarExprTreeSectionChildrenOptions } from "@mwater/expressions-ui"
+import { IsScalarExprTreeSectionInitiallyOpenContext, IsScalarExprTreeSectionMatchContext } from "@mwater/expressions-ui"
+
+/** 
+ * Creates several contexts to allow selecting of a table in an mWater-friendly way
+ * and several other context items
+ */
+export default class MWaterContextComponent extends React.Component<{
+  apiUrl: string
+  client?: string
+  /**  user id of logged in user */
+  user?: string
+  schema: Schema
+  /**  Extra tables to load in schema. Forms are not loaded by default as they are too many */
+  extraTables?: string[]
+  /**  Called when extra tables are changed and schema will be reloaded */
+  onExtraTablesChange?: (extraTables: string[]) => void
+  /**  Override default add layer component. See AddLayerComponent for details */
+  addLayerElementFactory?: any
+}> {
+  static childContextTypes = {
+    addLayerElementFactory: PropTypes.func, // Call with props of AddLayerComponent
+    globalFiltersElementFactory: PropTypes.func, // Call with props { schema, dataSource, filterableTables, globalFilters, onChange, nullIfIrrelevant }.
+    // Displays a component to edit global filters. nullIfIrrelevant causes null element if not applicable to filterableTables
+  }
+
+  createTableSelectElementFactory = (options: CustomTableSelectComponentFactoryOptions) => {
+    return (
+      <MWaterTableSelectComponent
+        apiUrl={this.props.apiUrl}
+        client={this.props.client}
+        schema={options.schema}
+        user={this.props.user}
+        table={options.value ?? undefined}
+        onChange={options.onChange}
+        extraTables={this.props.extraTables}
+        onExtraTablesChange={this.props.onExtraTablesChange}
+        filter={options.filter}
+        onFilterChange={options.onFilterChange}
+      />
+    )
+  }
+
+  getChildContext() {
+    const context: any = {}
+
+    if (this.props.addLayerElementFactory) {
+      context.addLayerElementFactory = this.props.addLayerElementFactory
+    }
+
+    context.globalFiltersElementFactory = (props: any) => {
+      if (props.nullIfIrrelevant && !_.any(props.filterableTables, (t: string) => t.match(/^entities./))) {
+        return null
+      }
+
+      return React.createElement(MWaterGlobalFiltersComponent, props)
+    }
+
+    return context
+  }
+
+  isScalarExprTreeSectionMatch = (options: { tableId: string; section: Section; filter?: string }) => {
+    if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
+      return true
+    }
+    return null
+  }
+
+  isScalarExprTreeSectionInitiallyOpen = (options: { tableId: string; section: Section; filter?: string }) => {
+    return false
+  }
+
+  decorateScalarExprTreeSectionChildren = (options: DecorateScalarExprTreeSectionChildrenOptions) => {
+    // If related forms section of entities table or assets table
+    if (options.tableId.match(/^entities\./) && options.section.id === "!related_forms") {
+      return R(
+        "div",
+        { key: "_add_related_form_parent" },
+        options.children,
+        R(MWaterAddRelatedFormComponent, {
+          key: "_add_related_form",
+          table: options.tableId,
+          apiUrl: this.props.apiUrl,
+          client: this.props.client,
+          user: this.props.user,
+          schema: this.props.schema,
+          onSelect: this.handleAddTable
+        })
+      )
+    }
+
+    // If indicators section of entities table
+    if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
+      return R(
+        "div",
+        { key: "_add_related_indicator_parent" },
+        options.children,
+        R(MWaterAddRelatedIndicatorComponent, {
+          key: "_add_related_indicator",
+          table: options.tableId,
+          apiUrl: this.props.apiUrl,
+          client: this.props.client,
+          user: this.props.user,
+          schema: this.props.schema,
+          onSelect: this.handleAddTable,
+          filter: options.filter
+        })
+      )
+    } else {
+      return options.children
+    }
+  }
+
+  handleAddTable = (table: any) => {
+    const extraTables = _.union(this.props.extraTables || [], [table])
+    return this.props.onExtraTablesChange!(extraTables)
+  }
+
+  render() {
+    return <CustomTableSelectComponentFactoryContext.Provider value={this.createTableSelectElementFactory}>
+      <IsScalarExprTreeSectionMatchContext.Provider value={this.isScalarExprTreeSectionMatch}>
+        <IsScalarExprTreeSectionInitiallyOpenContext.Provider value={this.isScalarExprTreeSectionInitiallyOpen}>
+          <DecorateScalarExprTreeSectionChildrenContext.Provider value={this.decorateScalarExprTreeSectionChildren}>
+            {this.props.children}
+          </DecorateScalarExprTreeSectionChildrenContext.Provider>
+        </IsScalarExprTreeSectionInitiallyOpenContext.Provider>
+      </IsScalarExprTreeSectionMatchContext.Provider>
+    </CustomTableSelectComponentFactoryContext.Provider>
+  }
+}

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

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

@@ -253,7 +253,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 = {

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)
     }
   }
 
@@ -428,41 +425,41 @@ export default class DashboardComponent extends React.Component<DashboardCompone
       hideScopes: this.state.hideQuickfilters
     })
 
-    return R(
-      "div",
-      {
-        style: {
-          display: "grid",
-          gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
-          height: "100%"
-        }
-      },
-      !this.props.hideTitleBar ? this.renderTitleBar() : undefined,
-      R("div", null, !this.state.hideQuickfilters ? this.renderQuickfilter() : undefined),
-      dashboardView,
-      this.props.onDesignChange != null
-        ? R(SettingsModalComponent, {
-            onDesignChange: this.handleDesignChange,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            ref: (c: SettingsModalComponent | null) => {
-              this.settings = c
-            }
-          })
-        : undefined,
-      this.state.layoutOptionsOpen
-        ? R(
-            ModalWindowComponent,
-            { isOpen: true, outerPadding: 10, innerPadding: 10 },
-            R(LayoutOptionsComponent, {
-              design: this.props.design,
-              onDesignChange: this.props.onDesignChange!,
-              onClose: () => this.setState({ layoutOptionsOpen: false }),
-              dashboardView: readonlyDashboardView,
-              quickfiltersView: this.renderQuickfilter()
-            })
-          )
-        : undefined
-    )
+
+    // Pass active tables down to table select components so they can present a shorter list
+    return <ActiveTablesContext.Provider 
+      value={DashboardUtils.getFilterableTables(this.props.design, this.props.schema)}>
+        
+    <div style={{
+      display: "grid",
+      gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
+      height: "100%"
+    }}>
+      {!this.props.hideTitleBar ? this.renderTitleBar() : undefined}
+      <div>{!this.state.hideQuickfilters ? this.renderQuickfilter() : undefined}</div>
+      {dashboardView}
+      {this.props.onDesignChange != null && (
+        <SettingsModalComponent
+          onDesignChange={this.handleDesignChange}
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          ref={(c: SettingsModalComponent | null) => {
+            this.settings = c
+          }}
+        />
+      )}
+      {this.state.layoutOptionsOpen && (
+        <ModalWindowComponent isOpen={true} outerPadding={10} innerPadding={10}>
+          <LayoutOptionsComponent
+            design={this.props.design}
+            onDesignChange={this.props.onDesignChange!}
+            onClose={() => this.setState({ layoutOptionsOpen: false })}
+            dashboardView={readonlyDashboardView}
+            quickfiltersView={this.renderQuickfilter()}
+          />
+        </ModalWindowComponent>
+      )}
+    </div>
+    </ActiveTablesContext.Provider>
   }
 }