@mwater/visualization 5.0.0

package/lib/dashboards/ServerDashboardDataSource.d.ts

@@ -0,0 +1,96 @@
+/// <reference types="jquery" />
+import { DataSource, Expr } from "@mwater/expressions";
+import { JsonQLFilter } from "../JsonQLFilter";
+import { QuickfiltersDataSource } from "../quickfilter/QuickfiltersDataSource";
+import { MapDesign, MapLayerView } from "../maps/MapDesign";
+import { MapDataSource } from "../maps/MapDataSource";
+import { MapLayerDataSource } from "../maps/MapLayerDataSource";
+import { WidgetDataSource } from "../widgets/WidgetDataSource";
+interface ServerDashboardDataSourceOptions {
+    /** API url to use for talking to mWater server */
+    apiUrl: string;
+    /** client id to use for talking to mWater server */
+    client?: string;
+    /** share id to use for talking to mWater server */
+    share?: string;
+    /** dashboard id to use on server */
+    dashboardId: string;
+    /** data source that is used for determining cache expiry */
+    dataSource: DataSource;
+    /** revision to use to allow caching */
+    rev: string;
+}
+interface ServerWidgetDataSourceOptions extends ServerDashboardDataSourceOptions {
+    widgetId: string;
+}
+interface ServerWidgetMapDataSourceOptions extends ServerDashboardDataSourceOptions {
+    widgetId: string;
+    design: MapDesign;
+}
+/** Uses mWater server to get widget data to allow sharing with unprivileged users */
+export default class ServerDashboardDataSource {
+    options: ServerDashboardDataSourceOptions;
+    constructor(options: ServerDashboardDataSourceOptions);
+    getWidgetDataSource(widgetType: string, widgetId: string): ServerWidgetDataSource;
+    getQuickfiltersDataSource(): ServerQuickfilterDataSource;
+}
+declare class ServerQuickfilterDataSource implements QuickfiltersDataSource {
+    options: ServerDashboardDataSourceOptions;
+    constructor(options: ServerDashboardDataSourceOptions);
+    getValues(index: number, expr: Expr, filters: JsonQLFilter[], offset: number, limit: number, callback: (error: any, values?: any[]) => void): void;
+}
+declare class ServerWidgetDataSource {
+    options: ServerWidgetDataSourceOptions;
+    constructor(options: ServerWidgetDataSourceOptions);
+    getData(design: any, filters: JsonQLFilter[], callback: (error: any, data?: any) => void): JQuery.jqXHR<any>;
+    getMapDataSource(design: any): ServerWidgetMapDataSource;
+    getImageUrl(imageId: string, height?: number): string;
+}
+declare class ServerWidgetMapDataSource implements MapDataSource {
+    options: ServerWidgetMapDataSourceOptions;
+    constructor(options: ServerWidgetMapDataSourceOptions);
+    getLayerDataSource(layerId: string): ServerWidgetLayerDataSource;
+    getBounds(design: MapDesign, filters: JsonQLFilter[], callback: (error: any, bounds?: {
+        w: number;
+        n: number;
+        e: number;
+        s: number;
+    } | null) => void): void;
+}
+interface ServerWidgetLayerDataSourceOptions extends ServerDashboardDataSourceOptions {
+    widgetId: string;
+    /** Layer view to use */
+    layerView: MapLayerView;
+}
+declare class ServerWidgetLayerDataSource implements MapLayerDataSource {
+    options: ServerWidgetLayerDataSourceOptions;
+    constructor(options: ServerWidgetLayerDataSourceOptions);
+    getTileUrl(design: any, filters: JsonQLFilter[]): any;
+    getUtfGridUrl(design: any, filters: JsonQLFilter[]): string | null;
+    /** Get the url for vector tile source with an expiry time. Only for layers of type "VectorTile"
+     * @param createdAfter ISO 8601 timestamp requiring that tile source on server is created after specified datetime
+     */
+    getVectorTileUrl(layerDesign: any, filters: JsonQLFilter[], createdAfter: string): Promise<{
+        url: string;
+        expires: string;
+    }>;
+    getPopupWidgetDataSource(design: any, widgetId: string): ServerWidgetLayerPopupWidgetDataSource;
+    createUrl(filters: JsonQLFilter[], extension: string): string;
+    createLegacyUrl(design: any, extension: string, filters: JsonQLFilter[]): string;
+}
+interface ServerWidgetLayerPopupDataSourceOptions extends ServerDashboardDataSourceOptions {
+    widgetId: string;
+    /** layer view of map inside widget */
+    layerView: MapLayerView;
+    /** id of popup widget */
+    popupWidgetId: string;
+}
+declare class ServerWidgetLayerPopupWidgetDataSource implements WidgetDataSource {
+    options: ServerWidgetLayerPopupDataSourceOptions;
+    constructor(options: ServerWidgetLayerPopupDataSourceOptions);
+    getData(design: any, filters: JsonQLFilter[], callback: (error: any, data?: any) => void): void;
+    /** For map widgets, the following is required */
+    getMapDataSource(design: MapDesign): MapDataSource;
+    getImageUrl(imageId: string, height?: number): string;
+}
+export {};

package/lib/dashboards/ServerDashboardDataSource.js

@@ -0,0 +1,383 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const jquery_1 = __importDefault(require("jquery"));
+const expressions_1 = require("@mwater/expressions");
+const querystring_1 = __importDefault(require("querystring"));
+const LayerFactory_1 = __importDefault(require("../maps/LayerFactory"));
+const compressJson_1 = __importDefault(require("../compressJson"));
+/** Uses mWater server to get widget data to allow sharing with unprivileged users */
+class ServerDashboardDataSource {
+    options;
+    constructor(options) {
+        this.options = options;
+    }
+    // Gets the widget data source for a specific widget
+    getWidgetDataSource(widgetType, widgetId) {
+        return new ServerWidgetDataSource({ ...this.options, widgetId });
+    }
+    getQuickfiltersDataSource() {
+        return new ServerQuickfilterDataSource(this.options);
+    }
+}
+exports.default = ServerDashboardDataSource;
+class ServerQuickfilterDataSource {
+    options;
+    // options:
+    //   apiUrl: API url to use for talking to mWater server
+    //   client: client id to use for talking to mWater server
+    //   share: share id to use for talking to mWater server
+    //   dashboardId: dashboard id to use on server
+    //   dataSource: data source that is used for determining cache expiry
+    //   rev: revision to use to allow caching
+    constructor(options) {
+        this.options = options;
+    }
+    // Gets the values of the quickfilter at index
+    getValues(index, expr, filters, offset, limit, callback) {
+        const query = {
+            client: this.options.client,
+            share: this.options.share,
+            filters: (0, compressJson_1.default)(filters),
+            offset,
+            limit,
+            rev: this.options.rev
+        };
+        const url = this.options.apiUrl +
+            `dashboards/${this.options.dashboardId}/quickfilters/${index}/values?` +
+            querystring_1.default.stringify(query);
+        const headers = {};
+        const cacheExpiry = this.options.dataSource.getCacheExpiry();
+        if (cacheExpiry) {
+            const seconds = Math.floor((new Date().getTime() - cacheExpiry) / 1000);
+            headers["Cache-Control"] = `max-age=${seconds}`;
+        }
+        jquery_1.default.ajax({
+            dataType: "json",
+            method: "GET",
+            url,
+            headers
+        })
+            .done((data) => {
+            return callback(null, data);
+        })
+            .fail((xhr) => {
+            console.log(xhr.responseText);
+            return callback(new Error(xhr.responseText));
+        });
+    }
+}
+class ServerWidgetDataSource {
+    options;
+    // options:
+    //   apiUrl: API url to use for talking to mWater server
+    //   client: client id to use for talking to mWater server
+    //   share: share id to use for talking to mWater server
+    //   dashboardId: dashboard id to use on server
+    //   dataSource: data source that is used for determining cache expiry
+    //   rev: revision to use to allow caching
+    //   widgetId: widget id to use
+    constructor(options) {
+        this.options = options;
+    }
+    // Get the data that the widget needs. The widget should implement getData method (see above) to get the data from the server
+    //  design: design of the widget. Ignored in the case of server-side rendering
+    //  filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
+    getData(design, filters, callback) {
+        const query = {
+            client: this.options.client,
+            share: this.options.share,
+            filters: (0, compressJson_1.default)(filters),
+            rev: this.options.rev
+        };
+        const url = this.options.apiUrl +
+            `dashboards/${this.options.dashboardId}/widgets/${this.options.widgetId}/data?` +
+            querystring_1.default.stringify(query);
+        const headers = {};
+        const cacheExpiry = this.options.dataSource.getCacheExpiry();
+        if (cacheExpiry) {
+            const seconds = Math.floor((new Date().getTime() - cacheExpiry) / 1000);
+            headers["Cache-Control"] = `max-age=${seconds}`;
+        }
+        return jquery_1.default.ajax({
+            dataType: "json",
+            method: "GET",
+            url,
+            headers
+        })
+            .done((data) => {
+            return callback(null, data);
+        })
+            .fail((xhr) => {
+            console.log(xhr.responseText);
+            return callback(new Error(xhr.responseText));
+        });
+    }
+    // For map widgets, the following is required
+    getMapDataSource(design) {
+        return new ServerWidgetMapDataSource({ ...this.options, design });
+    }
+    // Get the url to download an image (by id from an image or imagelist column)
+    // Height, if specified, is minimum height needed. May return larger image
+    getImageUrl(imageId, height) {
+        let url = this.options.apiUrl + `images/${imageId}`;
+        if (height) {
+            url += `?h=${height}`;
+        }
+        return url;
+    }
+}
+class ServerWidgetMapDataSource {
+    options;
+    // options:
+    //   apiUrl: API url to use for talking to mWater server
+    //   design: design of the map widget
+    //   client: client id to use for talking to mWater server
+    //   share: share id to use for talking to mWater server
+    //   dashboardId: dashboard id to use on server
+    //   dataSource: data source that is used for determining cache expiry
+    //   rev: revision to use to allow caching
+    //   widgetId: widget id to use
+    constructor(options) {
+        this.options = options;
+    }
+    // Gets the data source for a layer
+    getLayerDataSource(layerId) {
+        // Get layerView
+        const layerView = lodash_1.default.findWhere(this.options.design.layerViews, { id: layerId });
+        if (!layerView) {
+            throw new Error("No such layer");
+        }
+        return new ServerWidgetLayerDataSource({ ...this.options, layerView });
+    }
+    // Gets the bounds for the map. Null for no opinion. Callback as { n:, s:, w:, e: }
+    getBounds(design, filters, callback) {
+        const query = {
+            client: this.options.client,
+            share: this.options.share,
+            filters: (0, compressJson_1.default)(filters),
+            rev: this.options.rev
+        };
+        const url = this.options.apiUrl +
+            `dashboards/${this.options.dashboardId}/widgets/${this.options.widgetId}/bounds?` +
+            querystring_1.default.stringify(query);
+        const headers = {};
+        const cacheExpiry = this.options.dataSource.getCacheExpiry();
+        if (cacheExpiry) {
+            const seconds = Math.floor((new Date().getTime() - cacheExpiry) / 1000);
+            headers["Cache-Control"] = `max-age=${seconds}`;
+        }
+        jquery_1.default.ajax({
+            dataType: "json",
+            method: "GET",
+            url,
+            headers
+        })
+            .done((data) => {
+            return callback(null, data);
+        })
+            .fail((xhr) => {
+            console.log(xhr.responseText);
+            return callback(new Error(xhr.responseText));
+        });
+    }
+}
+class ServerWidgetLayerDataSource {
+    options;
+    // options:
+    //   apiUrl: API url to use for talking to mWater server
+    //   client: client id to use for talking to mWater server
+    //   share: share id to use for talking to mWater server
+    //   dashboardId: dashboard id to use on server
+    //   dataSource: data source that is used for determining cache expiry
+    //   rev: revision to use to allow caching
+    //   widgetId: widget id to use
+    //   layerView: layer view of map inside widget
+    constructor(options) {
+        this.options = options;
+    }
+    // Get the url for the image tiles with the specified filters applied
+    // Called with (design, filters) where design is the layer design and filters are filters to apply. Returns URL
+    getTileUrl(design, filters) {
+        // Handle special cases
+        if (this.options.layerView.type === "MWaterServer") {
+            return this.createLegacyUrl(this.options.layerView.design, "png", filters);
+        }
+        // Create layer
+        const layer = LayerFactory_1.default.createLayer(this.options.layerView.type);
+        // If layer has tiles url directly available
+        if (layer.getLayerDefinitionType() === "TileUrl") {
+            return layer.getTileUrl(this.options.layerView.design, filters);
+        }
+        return this.createUrl(filters, "png");
+    }
+    // Get the url for the interactivity tiles with the specified filters applied
+    // Called with (design, filters) where design is the layer design and filters are filters to apply. Returns URL
+    getUtfGridUrl(design, filters) {
+        // Handle special cases
+        if (this.options.layerView.type === "MWaterServer") {
+            return this.createLegacyUrl(this.options.layerView.design, "grid.json", filters);
+        }
+        // Create layer
+        const layer = LayerFactory_1.default.createLayer(this.options.layerView.type);
+        // If layer has tiles url directly available
+        if (layer.getLayerDefinitionType() === "TileUrl") {
+            return layer.getUtfGridUrl(this.options.layerView.design, filters);
+        }
+        return this.createUrl(filters, "grid.json");
+    }
+    /** Get the url for vector tile source with an expiry time. Only for layers of type "VectorTile"
+     * @param createdAfter ISO 8601 timestamp requiring that tile source on server is created after specified datetime
+     */
+    async getVectorTileUrl(layerDesign, filters, createdAfter) {
+        const qs = querystring_1.default.stringify({
+            client: this.options.client,
+            share: this.options.share
+        });
+        const url = `${this.options.apiUrl}vector_tiles/create_token/dashboards/${this.options.dashboardId}/widgets/${this.options.widgetId}/layers/${this.options.layerView.id}?${qs}`;
+        const request = {
+            createdAfter: createdAfter,
+            // 12 hours
+            expiresAfter: new Date(Date.now() + 1000 * 3600 * 12).toISOString(),
+            filters: (0, compressJson_1.default)(filters || [])
+        };
+        const response = await fetch(url, {
+            method: "POST",
+            body: JSON.stringify(request),
+            headers: {
+                Accept: "application/json",
+                "Content-Type": "application/json"
+            }
+        });
+        if (!response.ok) {
+            throw new Error("Error getting tiles token");
+        }
+        const { token, expires } = await response.json();
+        return { url: this.options.apiUrl + `vector_tiles/tiles/{z}/{x}/{y}?token=${token}`, expires };
+    }
+    // Gets widget data source for a popup widget
+    getPopupWidgetDataSource(design, widgetId) {
+        return new ServerWidgetLayerPopupWidgetDataSource({ ...this.options, popupWidgetId: widgetId });
+    }
+    // Create url
+    createUrl(filters, extension) {
+        const query = {
+            type: "dashboard_widget",
+            client: this.options.client,
+            share: this.options.share,
+            dashboard: this.options.dashboardId,
+            widget: this.options.widgetId,
+            layer: this.options.layerView.id,
+            rev: this.options.rev,
+            filters: (0, compressJson_1.default)(filters || [])
+        };
+        // Make URL change when cache expired
+        const cacheExpiry = this.options.dataSource.getCacheExpiry();
+        if (cacheExpiry) {
+            query.cacheExpiry = cacheExpiry;
+        }
+        let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?` + querystring_1.default.stringify(query);
+        // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
+        // Used to speed queries
+        if (url.match(/^https:\/\/api\.mwater\.co\//)) {
+            url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/");
+        }
+        return url;
+    }
+    // Create query string
+    createLegacyUrl(design, extension, filters) {
+        let where;
+        let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?type=${design.type}&radius=1000`;
+        // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
+        // Used to speed queries
+        if (url.match(/^https:\/\/api\.mwater\.co\//)) {
+            url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/");
+        }
+        if (this.options.client) {
+            url += `&client=${this.options.client}`;
+        }
+        if (this.options.share) {
+            url += `&share=${this.options.share}`;
+        }
+        // Add where for any relevant filters
+        const relevantFilters = lodash_1.default.where(filters, { table: design.table });
+        // If any, create and
+        const whereClauses = lodash_1.default.map(relevantFilters, (f) => (0, expressions_1.injectTableAlias)(f.jsonql, "main"));
+        // Wrap if multiple
+        if (whereClauses.length > 1) {
+            where = { type: "op", op: "and", exprs: whereClauses };
+        }
+        else {
+            where = whereClauses[0];
+        }
+        if (where) {
+            url += "&where=" + encodeURIComponent((0, compressJson_1.default)(where));
+        }
+        return url;
+    }
+}
+class ServerWidgetLayerPopupWidgetDataSource {
+    options;
+    // options:
+    //   apiUrl: API url to use for talking to mWater server
+    //   client: client id to use for talking to mWater server
+    //   share: share id to use for talking to mWater server
+    //   dashboardId: dashboard id to use on server
+    //   dataSource: data source that is used for determining cache expiry
+    //   rev: revision to use to allow caching
+    //   widgetId: widget id to use
+    //   layerView: layer view of map inside widget
+    //   popupWidgetId: id of popup widget
+    constructor(options) {
+        this.options = options;
+    }
+    // Get the data that the widget needs. The widget should implement getData method (see above) to get the actual data on the server
+    //  filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
+    //  callback: (error, data)
+    getData(design, filters, callback) {
+        const query = {
+            client: this.options.client,
+            share: this.options.share,
+            filters: (0, compressJson_1.default)(filters),
+            rev: this.options.rev
+        };
+        const url = this.options.apiUrl +
+            `dashboards/${this.options.dashboardId}/widgets/${this.options.widgetId}/layers/${this.options.layerView.id}/widgets/${this.options.popupWidgetId}/data?` +
+            querystring_1.default.stringify(query);
+        const headers = {};
+        const cacheExpiry = this.options.dataSource.getCacheExpiry();
+        if (cacheExpiry) {
+            const seconds = Math.floor((new Date().getTime() - cacheExpiry) / 1000);
+            headers["Cache-Control"] = `max-age=${seconds}`;
+        }
+        jquery_1.default.ajax({
+            dataType: "json",
+            method: "GET",
+            url,
+            headers
+        })
+            .done((data) => {
+            return callback(null, data);
+        })
+            .fail((xhr) => {
+            console.log(xhr.responseText);
+            return callback(new Error(xhr.responseText));
+        });
+    }
+    /** For map widgets, the following is required */
+    getMapDataSource(design) {
+        throw new Error("TODO!");
+    }
+    // Get the url to download an image (by id from an image or imagelist column)
+    // Height, if specified, is minimum height needed. May return larger image
+    getImageUrl(imageId, height) {
+        let url = this.options.apiUrl + `images/${imageId}`;
+        if (height) {
+            url += `?h=${height}`;
+        }
+        return url;
+    }
+}

package/lib/dashboards/SettingsModalComponent.d.ts

@@ -0,0 +1,33 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+export interface SettingsModalComponentProps {
+    onDesignChange: any;
+    schema: Schema;
+    dataSource: DataSource;
+}
+interface SettingsModalComponentState {
+    design: any;
+}
+export default class SettingsModalComponent extends React.Component<SettingsModalComponentProps, SettingsModalComponentState> {
+    static contextTypes: {
+        globalFiltersElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    constructor(props: any);
+    show(design: any): void;
+    handleSave: () => void;
+    handleCancel: () => void;
+    handleDesignChange: (design: any) => void;
+    handleFiltersChange: (filters: any) => void;
+    handleGlobalFiltersChange: (globalFilters: any) => void;
+    render(): React.CElement<{
+        size: string;
+        onCancel: () => void;
+        onAction: () => void;
+    }, React.Component<{
+        size: string;
+        onCancel: () => void;
+        onAction: () => void;
+    }, any, any>> | null;
+}
+export {};

package/lib/dashboards/SettingsModalComponent.js

@@ -0,0 +1,122 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const prop_types_1 = __importDefault(require("prop-types"));
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const update_object_1 = __importDefault(require("update-object"));
+const languages_1 = require("../languages");
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const react_select_1 = __importDefault(require("react-select"));
+const DashboardUtils = __importStar(require("./DashboardUtils"));
+const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
+const QuickfiltersDesignComponent_1 = __importDefault(require("../quickfilter/QuickfiltersDesignComponent"));
+const FiltersDesignerComponent_1 = __importDefault(require("../FiltersDesignerComponent"));
+// Popup with settings for dashboard
+class SettingsModalComponent extends react_1.default.Component {
+    static contextTypes = { globalFiltersElementFactory: prop_types_1.default.func };
+    constructor(props) {
+        super(props);
+        this.state = {
+            design: null // Set when being edited
+        };
+    }
+    show(design) {
+        return this.setState({ design });
+    }
+    handleSave = () => {
+        this.props.onDesignChange(this.state.design);
+        return this.setState({ design: null });
+    };
+    handleCancel = () => {
+        return this.setState({ design: null });
+    };
+    handleDesignChange = (design) => {
+        return this.setState({ design });
+    };
+    handleFiltersChange = (filters) => {
+        const design = lodash_1.default.extend({}, this.state.design, { filters });
+        return this.handleDesignChange(design);
+    };
+    handleGlobalFiltersChange = (globalFilters) => {
+        const design = lodash_1.default.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 = lodash_1.default.map(languages_1.languages, (language) => {
+            return {
+                value: language.code,
+                label: language.en + " (" + language.name + ")"
+            };
+        });
+        return R(ActionCancelModalComponent_1.default, {
+            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_1.default, {
+                design: this.state.design.quickfilters || [],
+                onDesignChange: (design) => this.handleDesignChange((0, update_object_1.default)(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_1.default, {
+                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(react_select_1.default, {
+            value: lodash_1.default.findWhere(localeOptions, { value: this.state.design.locale || "en" }) || null,
+            options: localeOptions,
+            onChange: (locale) => this.handleDesignChange((0, update_object_1.default)(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((0, update_object_1.default)(this.state.design, { implicitFiltersEnabled: { $set: value } }))
+        }, "Enable Implicit Filtering (leave unchecked for new dashboards)")));
+    }
+}
+exports.default = SettingsModalComponent;