@mwater/visualization 5.1.0 → 5.2.0

package/lib/GlobalFilter.d.ts

@@ -0,0 +1,13 @@
+import { Expr, LiteralType } from "@mwater/expressions";
+/** 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/lib/GlobalFilter.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/MWaterCompleteTableSelectComponent.d.ts

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import React from "react";
 import * as uiComponents from "./UIComponents";
 import { Schema } from "@mwater/expressions";
+import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent";
 interface MWaterCompleteTableSelectComponentProps {
     /** Url to hit api */
     apiUrl: string;
@@ -180,15 +181,7 @@ declare class AddIndicatorConfirmPopupComponent extends React.Component<AddIndic
     renderContents(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedReactHTMLElement<{
         className: string;
     }, HTMLElement>;
-    render(): React.CElement<{
-        showCloseX: boolean;
-        onClose: () => void;
-        header: string;
-    }, React.Component<{
-        showCloseX: boolean;
-        onClose: () => void;
-        header: string;
-    }, any, any>> | null;
+    render(): React.CElement<import("@mwater/react-library/lib/ModalPopupComponent").ModalPopupComponentProps, ModalPopupComponent> | null;
 }
 interface IssuesListComponentProps {
     /** Url to hit api */

package/lib/MWaterContextComponent.d.ts

@@ -1,7 +1,19 @@
 import PropTypes from "prop-types";
 import React from "react";
-import { Schema, Section } from "@mwater/expressions";
+import { DataSource, Schema, Section } from "@mwater/expressions";
 import { CustomTableSelectComponentFactoryOptions, DecorateScalarExprTreeSectionChildrenOptions } from "@mwater/expressions-ui";
+import { GlobalFilter } from "./GlobalFilter";
+export interface GlobalFiltersElementFactoryProps {
+    schema: Schema;
+    dataSource: DataSource;
+    filterableTables: string[];
+    globalFilters?: GlobalFilter[];
+    onChange: (globalFilters: GlobalFilter[]) => void;
+    /** If true, return null element if not applicable to filterableTables */
+    nullIfIrrelevant?: boolean;
+}
+export type GlobalFiltersElementFactory = (props: GlobalFiltersElementFactoryProps) => React.ReactElement | null;
+export declare const GlobalFiltersElementFactoryContext: React.Context<GlobalFiltersElementFactory | null>;
 /**
  * Creates several contexts to allow selecting of a table in an mWater-friendly way
  * and several other context items
@@ -9,7 +21,7 @@ import { CustomTableSelectComponentFactoryOptions, DecorateScalarExprTreeSection
 export default class MWaterContextComponent extends React.Component<{
     apiUrl: string;
     client?: string;
-    /**  user id of logged in user */
+    /** 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 */
@@ -21,10 +33,10 @@ export default class MWaterContextComponent extends React.Component<{
 }> {
     static childContextTypes: {
         addLayerElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
-        globalFiltersElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
     };
     createTableSelectElementFactory: (options: CustomTableSelectComponentFactoryOptions) => React.JSX.Element;
     getChildContext(): any;
+    createGlobalFiltersElementFactory: (props: GlobalFiltersElementFactoryProps) => React.JSX.Element | null;
     isScalarExprTreeSectionMatch: (options: {
         tableId: string;
         section: Section;

package/lib/MWaterContextComponent.js

@@ -1,11 +1,35 @@
 "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 });
+exports.GlobalFiltersElementFactoryContext = void 0;
 const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = __importDefault(require("lodash"));
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const R = react_1.default.createElement;
 const MWaterTableSelectComponent_1 = __importDefault(require("./MWaterTableSelectComponent"));
 const MWaterAddRelatedFormComponent_1 = __importDefault(require("./MWaterAddRelatedFormComponent"));
@@ -13,15 +37,14 @@ const MWaterAddRelatedIndicatorComponent_1 = __importDefault(require("./MWaterAd
 const MWaterGlobalFiltersComponent_1 = __importDefault(require("./MWaterGlobalFiltersComponent"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_ui_2 = require("@mwater/expressions-ui");
+exports.GlobalFiltersElementFactoryContext = (0, react_1.createContext)(null);
 /**
  * Creates several contexts to allow selecting of a table in an mWater-friendly way
  * and several other context items
  */
 class MWaterContextComponent extends react_1.default.Component {
     static childContextTypes = {
-        addLayerElementFactory: prop_types_1.default.func,
-        globalFiltersElementFactory: prop_types_1.default.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
+        addLayerElementFactory: prop_types_1.default.func, // Call with props of AddLayerComponent
     };
     createTableSelectElementFactory = (options) => {
         return (react_1.default.createElement(MWaterTableSelectComponent_1.default, { 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 }));
@@ -31,14 +54,14 @@ class MWaterContextComponent extends react_1.default.Component {
         if (this.props.addLayerElementFactory) {
             context.addLayerElementFactory = this.props.addLayerElementFactory;
         }
-        context.globalFiltersElementFactory = (props) => {
-            if (props.nullIfIrrelevant && !lodash_1.default.any(props.filterableTables, (t) => t.match(/^entities./))) {
-                return null;
-            }
-            return react_1.default.createElement(MWaterGlobalFiltersComponent_1.default, props);
-        };
         return context;
     }
+    createGlobalFiltersElementFactory = (props) => {
+        if (props.nullIfIrrelevant && !lodash_1.default.any(props.filterableTables, (t) => t.match(/^entities./))) {
+            return null;
+        }
+        return react_1.default.createElement(MWaterGlobalFiltersComponent_1.default, { ...props });
+    };
     isScalarExprTreeSectionMatch = (options) => {
         if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
             return true;
@@ -84,9 +107,11 @@ class MWaterContextComponent extends react_1.default.Component {
     };
     render() {
         return react_1.default.createElement(expressions_ui_1.CustomTableSelectComponentFactoryContext.Provider, { value: this.createTableSelectElementFactory },
-            react_1.default.createElement(expressions_ui_2.IsScalarExprTreeSectionMatchContext.Provider, { value: this.isScalarExprTreeSectionMatch },
-                react_1.default.createElement(expressions_ui_2.IsScalarExprTreeSectionInitiallyOpenContext.Provider, { value: this.isScalarExprTreeSectionInitiallyOpen },
-                    react_1.default.createElement(expressions_ui_1.DecorateScalarExprTreeSectionChildrenContext.Provider, { value: this.decorateScalarExprTreeSectionChildren }, this.props.children))));
+            react_1.default.createElement(exports.GlobalFiltersElementFactoryContext.Provider, { value: this.createGlobalFiltersElementFactory },
+                react_1.default.createElement(expressions_ui_2.IsScalarExprTreeSectionMatchContext.Provider, { value: this.isScalarExprTreeSectionMatch },
+                    react_1.default.createElement(expressions_ui_2.IsScalarExprTreeSectionInitiallyOpenContext.Provider, { value: this.isScalarExprTreeSectionInitiallyOpen },
+                        react_1.default.createElement(expressions_ui_1.DecorateScalarExprTreeSectionChildrenContext.Provider, { value: this.decorateScalarExprTreeSectionChildren }, this.props.children)))),
+            "    ");
     }
 }
 exports.default = MWaterContextComponent;

package/lib/MWaterCustomTablesetListComponent.js

@@ -15,13 +15,16 @@ const MWaterCustomTablesetListComponent = (props) => {
     const [tablesets, setTablesets] = (0, react_1.useState)();
     const [search, setSearch] = (0, react_1.useState)("");
     const [extraTableNeeded, setExtraTableNeeded] = (0, react_1.useState)();
+    const [showSystem, setShowSystem] = (0, react_1.useState)(false);
     // Get list of all tablesets
     (0, react_1.useEffect)(() => {
         fetch(`${props.apiUrl}custom_tablesets?client=${props.client || ""}`)
             .then((response) => response.json())
-            .then((body) => {
+            .then((tablesets) => {
+            // Filter out non-normal
+            tablesets = tablesets.filter((ts) => ts.type === "normal");
             // Put included ones first
-            setTablesets(lodash_1.default.sortByAll(body, [
+            setTablesets(lodash_1.default.sortByAll(tablesets, [
                 (ts) => (props.extraTables.some((t) => (t || "").startsWith(`custom.${ts.code}.`)) ? 0 : 1),
                 (ts) => expressions_1.ExprUtils.localizeString(ts.design.name, props.locale)
             ]));
@@ -80,8 +83,11 @@ const MWaterCustomTablesetListComponent = (props) => {
             react_2.default.createElement("h4", { className: "text-muted" }, name),
             react_2.default.createElement(UIComponents_1.OptionListComponent, { items: items })));
     };
+    const visibleTablesets = tablesets.filter((ts) => (showSystem || !ts.design.system) && !ts.design.deprecated);
     return (react_2.default.createElement("div", null,
         react_2.default.createElement(bootstrap_1.TextInput, { value: search, onChange: setSearch, placeholder: "Search..." }),
-        tablesets.map((ts) => renderTableset(ts))));
+        visibleTablesets.map((ts) => renderTableset(ts)),
+        react_2.default.createElement("div", null,
+            react_2.default.createElement("button", { className: "btn btn-link btn-sm", onClick: () => setShowSystem(!showSystem) }, showSystem ? "Hide system tables" : "Show system tables"))));
 };
 exports.MWaterCustomTablesetListComponent = MWaterCustomTablesetListComponent;

package/lib/MWaterGlobalFiltersComponent.d.ts

@@ -1,16 +1,17 @@
 import React from "react";
 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;
 }
 export default class MWaterGlobalFiltersComponent extends React.Component<MWaterGlobalFiltersComponentProps> {
-    handleRegionsChange: (regions: any) => any;
-    handleManagedByChange: (managedBy: any) => any;
+    handleRegionsChange: (regions: any) => void;
+    handleManagedByChange: (managedBy: any) => void;
     render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
 }

package/lib/MWaterGlobalFiltersComponent.js

@@ -45,7 +45,7 @@ class MWaterGlobalFiltersComponent extends react_1.default.Component {
                 exprs: [{ type: "literal", valueType: "id[]", idTable: "admin_regions", value: regions }]
             });
         }
-        return this.props.onChange(globalFilters);
+        this.props.onChange(globalFilters);
     };
     handleManagedByChange = (managedBy) => {
         // Remove existing filter
@@ -59,12 +59,12 @@ class MWaterGlobalFiltersComponent extends react_1.default.Component {
                 exprs: [{ type: "literal", valueType: "id", idTable: "subjects", value: "group:" + managedBy }]
             });
         }
-        return this.props.onChange(globalFilters);
+        this.props.onChange(globalFilters);
     };
     render() {
         // Find managed by
         let adminRegions, managedBy;
-        const managedByEntry = lodash_1.default.find(this.props.globalFilters, (gf) => gf.op === "within" && gf.columnId === "_managed_by");
+        const managedByEntry = lodash_1.default.find(this.props.globalFilters || [], (gf) => gf.op === "within" && gf.columnId === "_managed_by");
         if (managedByEntry) {
             managedBy = managedByEntry.exprs[0].value.split(":")[1];
         }
@@ -72,7 +72,7 @@ class MWaterGlobalFiltersComponent extends react_1.default.Component {
             managedBy = null;
         }
         // Find admin region
-        const adminRegionEntry = lodash_1.default.find(this.props.globalFilters, (gf) => gf.op === "within any" && gf.columnId === "admin_region");
+        const adminRegionEntry = lodash_1.default.find(this.props.globalFilters || [], (gf) => gf.op === "within any" && gf.columnId === "admin_region");
         if (adminRegionEntry) {
             adminRegions = adminRegionEntry.exprs[0].value;
         }

package/lib/MWaterLoaderComponent.d.ts

@@ -1,6 +1,8 @@
-import { ReactElement } from "react";
+import React, { ReactElement } from "react";
 import { DataSource, Schema } from "@mwater/expressions";
 import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent";
+import LoadingComponent from "@mwater/react-library/lib/LoadingComponent";
+import MWaterContextComponent from "./MWaterContextComponent";
 /**
  * Loads an mWater schema from the server and creates child with schema and dataSource
  * Also creates context to allow selecting of a table in an mWater-friendly way
@@ -38,5 +40,13 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<{
     constructor(props: any);
     isLoadNeeded(newProps: any, oldProps: any): boolean;
     load(props: any, prevProps: any, callback: any): void;
-    render(): any;
+    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.CElement<import("@mwater/react-library/lib/LoadingComponent").LoadingComponentProps, LoadingComponent> | React.CElement<{
+        apiUrl: string;
+        client?: string | undefined;
+        user?: string | undefined;
+        schema: Schema;
+        extraTables?: string[] | undefined;
+        onExtraTablesChange?: ((extraTables: string[]) => void) | undefined;
+        addLayerElementFactory?: any;
+    }, MWaterContextComponent>;
 }

package/lib/MWaterLoaderComponent.js

@@ -45,7 +45,15 @@ class MWaterLoaderComponent extends AsyncLoadComponent_1.default {
             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/lib/axes/Axis.d.ts

@@ -4,35 +4,15 @@ 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[];
@@ -42,9 +22,11 @@ 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;
 }
 /**
@@ -63,6 +45,19 @@ export interface AxisCategory {
     value: any;
 }
 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/lib/axes/AxisBuilder.js

@@ -38,6 +38,7 @@ const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const immer_1 = __importDefault(require("immer"));
 const valueFormatter_1 = require("../valueFormatter");
+const dayjs_1 = __importDefault(require("../dayjs"));
 const xforms = [
     { type: "bin", input: "number", output: "enum" },
     { type: "ranges", input: "number", output: "enum" },
@@ -827,7 +828,7 @@ class AxisBuilder {
                 }
                 if (options.onlyValuesPresent) {
                     // Sort and take only present
-                    categories = lodash_1.default.sortBy(lodash_1.default.uniq(values), item => item).map(value => ({ value, label: (0, moment_1.default)(value, "YYYY-MM-DD").format("ll") }));
+                    categories = lodash_1.default.sortBy(lodash_1.default.uniq(values), item => item).map(value => ({ value, label: (0, valueFormatter_1.formatValue)("date", value, axis.format) }));
                     if (hasNone) {
                         categories.push(noneCategory);
                     }
@@ -837,12 +838,12 @@ class AxisBuilder {
                 min = values.sort()[0];
                 max = values.sort().slice(-1)[0];
                 // Use moment to get range
-                current = (0, moment_1.default)(min, "YYYY-MM-DD");
-                end = (0, moment_1.default)(max, "YYYY-MM-DD");
+                current = (0, dayjs_1.default)(min);
+                end = (0, dayjs_1.default)(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;
                     }
@@ -947,9 +948,10 @@ class AxisBuilder {
                 }
                 return R("div", null, lodash_1.default.map(value, (v, i) => R("div", { key: i }, v)));
             case "date":
-                return (0, moment_1.default)(value, moment_1.default.ISO_8601).format("ll");
+                console.log(axis);
+                return (0, valueFormatter_1.formatValue)(type, value, axis.format);
             case "datetime":
-                return (0, moment_1.default)(value, moment_1.default.ISO_8601).format("lll");
+                return (0, valueFormatter_1.formatValue)(type, value, axis.format);
         }
         return "" + value;
     }

package/lib/axes/AxisComponent.d.ts

@@ -50,10 +50,10 @@ export default class AxisComponent extends AsyncLoadComponent<AxisComponentProps
     constructor(props: any);
     isLoadNeeded(newProps: any, oldProps: any): boolean;
     load(props: any, prevProps: any, callback: any): any;
-    handleExprChange: (expr: any) => any;
-    handleFormatChange: (ev: any) => any;
-    handleXformTypeChange: (type: any) => any;
-    handleXformChange: (xform: any) => any;
+    handleExprChange: (expr: any) => void;
+    handleFormatChange: (ev: any) => void;
+    handleXformTypeChange: (type: any) => void;
+    handleXformChange: (xform: any) => void;
     cleanAxis(axis: any): Axis | null;
     renderXform(axis: any): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<ui.RadioToggleComponentProps, ui.RadioToggleComponent> | null;
     renderColorMap(axis: any): (React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<any, AxisColorEditorComponent>)[] | null;

package/lib/dashboards/DashboardComponent.d.ts

@@ -83,11 +83,6 @@ export default class DashboardComponent extends React.Component<DashboardCompone
         className: string;
         onClick: () => void;
     }, HTMLElement>;
-    renderStyleItem(style: any): React.DetailedReactHTMLElement<{
-        key: any;
-        className: string;
-        onClick: () => void;
-    }, HTMLElement>;
     renderStyle(): React.DetailedReactHTMLElement<{
         type: string;
         key: string;

package/lib/dashboards/DashboardComponent.js

@@ -160,34 +160,6 @@ class DashboardComponent extends react_1.default.Component {
             onClick: this.handleToggleEditing
         }, R("span", { className: "fas fa-pencil-alt" }), this.state.editing ? " Editing" : " Edit");
     }
-    renderStyleItem(style) {
-        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", { type: "button", key: "style", className: "btn btn-link btn-sm", onClick: this.handleOpenLayoutOptions }, R("span", { className: "fa fa-mobile" }), R("span", { className: "hide-600px" }, " Layout "));
     }
@@ -232,7 +204,8 @@ class DashboardComponent extends react_1.default.Component {
             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
         });
     }
     refDashboardView = (el) => {

package/lib/dashboards/DashboardDesign.d.ts

@@ -1,6 +1,7 @@
 import { Quickfilter } from "../quickfilter/Quickfilter";
-import { LiteralType, Expr } from "@mwater/expressions";
+import { Expr } from "@mwater/expressions";
 import { BlocksLayoutOptions, DashboardTheme } from "./layoutOptions";
+import { GlobalFilter } from "../GlobalFilter";
 /** Dashboard design
  * Each understands enough of the dashboard design to create widgets.
  * Widget refers to the widget itself, where *item* refers also to the layout and id that it has in the dashboard.
@@ -27,19 +28,3 @@ export interface DashboardDesign {
     /** array of global filters. See below. */
     globalFilters?: GlobalFilter[];
 }
-/** Global Filters:
-
-Global filters apply to multiple tables at once if a certain column is present. User-interface to set them is application-specific
-and the default (non-mWater) dashboard applies them but does not allow editing.
-
-*/
-export interface GlobalFilter {
-    /** id of column to filter */
-    columnId: string;
-    /** type of column to filter (to ensure that consistent) */
-    columnType: LiteralType;
-    /** op of expression for filtering */
-    op: string;
-    /** array of expressions to use for filtering. field expression for column will be injected as expression 0 in the resulting filter expression */
-    exprs: Expr[];
-}

package/lib/dashboards/DashboardViewComponent.js

@@ -114,17 +114,16 @@ class DashboardViewComponent extends react_1.default.Component {
     }
     // Call to print the dashboard
     print = async () => {
-        // Temporarily disable vector maps as WebGL is not supported in print mode
-        const mapTilerAPIKey = (0, vectorMaps_1.getMapTilerApiKey)();
+        // Temporarily enable print mode for vector maps
         try {
-            (0, vectorMaps_1.setMapTilerApiKey)("");
+            (0, vectorMaps_1.setPrintingModeEnabled)(true);
             // Create element at 1080 wide (use as standard printing width)
             const elem = R("div", { style: { width: 1080 } }, R(DashboardViewComponent, lodash_1.default.extend({}, this.props, { onDesignChange: null, printMode: true })));
             const printer = new ReactElementPrinter_1.default();
             await printer.print(elem, { delay: 5000 });
         }
         finally {
-            (0, vectorMaps_1.setMapTilerApiKey)(mapTilerAPIKey);
+            (0, vectorMaps_1.setPrintingModeEnabled)(false);
         }
     };
     // Get filters from props filters combined with dashboard filters

package/lib/dashboards/LayoutOptionsComponent.js

@@ -103,9 +103,10 @@ function ThemeToggle(props) {
         return null;
     }
     return (react_1.default.createElement(bootstrap_1.FormGroup, { label: "Theme" },
-        renderStyleItem("default"),
-        renderStyleItem("greybg"),
-        renderStyleItem("story")));
+        react_1.default.createElement("div", { className: "list-group" },
+            renderStyleItem("default"),
+            renderStyleItem("greybg"),
+            renderStyleItem("story"))));
 }
 function WidthSelector(props) {
     return (react_1.default.createElement(bootstrap_1.Select, { value: props.value, onChange: props.onChange, nullLabel: "N/A", options: [

package/lib/dashboards/SettingsModalComponent.d.ts

@@ -1,33 +1,22 @@
-import PropTypes from "prop-types";
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
+import { DashboardDesign } from "./DashboardDesign";
 export interface SettingsModalComponentProps {
     onDesignChange: any;
     schema: Schema;
     dataSource: DataSource;
 }
 interface SettingsModalComponentState {
-    design: any;
+    design: DashboardDesign | null;
 }
 export default class SettingsModalComponent extends React.Component<SettingsModalComponentProps, SettingsModalComponentState> {
-    static contextTypes: {
-        globalFiltersElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    constructor(props: any);
+    constructor(props: SettingsModalComponentProps);
     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;
+    render(): React.JSX.Element | null;
 }
 export {};