@mwater/visualization 5.4.5 → 5.6.0

package/lib/MWaterContextComponent.d.ts

@@ -8,7 +8,7 @@ export interface GlobalFiltersElementFactoryProps {
     dataSource: DataSource;
     filterableTables: string[];
     globalFilters?: GlobalFilter[];
-    onChange: (globalFilters: GlobalFilter[]) => void;
+    onChange?: (globalFilters: GlobalFilter[]) => void;
     /** If true, return null element if not applicable to filterableTables */
     nullIfIrrelevant?: boolean;
 }

package/lib/MWaterContextComponent.js

@@ -30,7 +30,7 @@ exports.AddLayerElementFactoryContext = exports.GlobalFiltersElementFactoryConte
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importStar(require("react"));
 const R = react_1.default.createElement;
-const MWaterTableSelectComponent_1 = __importDefault(require("./MWaterTableSelectComponent"));
+const MWaterTableSelectComponent_1 = __importDefault(require("./mwater_table_selection/MWaterTableSelectComponent"));
 const MWaterAddRelatedFormComponent_1 = __importDefault(require("./MWaterAddRelatedFormComponent"));
 const MWaterAddRelatedIndicatorComponent_1 = __importDefault(require("./MWaterAddRelatedIndicatorComponent"));
 const MWaterGlobalFiltersComponent_1 = __importDefault(require("./MWaterGlobalFiltersComponent"));

package/lib/MWaterGlobalFiltersComponent.d.ts

@@ -8,10 +8,10 @@ export interface MWaterGlobalFiltersComponentProps {
     dataSource: DataSource;
     filterableTables: string[];
     globalFilters?: GlobalFilter[];
-    onChange: (globalFilters: GlobalFilter[]) => void;
+    onChange?: (globalFilters: GlobalFilter[]) => void;
 }
 export default class MWaterGlobalFiltersComponent extends React.Component<MWaterGlobalFiltersComponentProps> {
     handleRegionsChange: (regions: any) => void;
     handleManagedByChange: (managedBy: any) => void;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    render(): React.JSX.Element;
 }

package/lib/MWaterGlobalFiltersComponent.js

@@ -28,12 +28,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
 // Control to edit the global filters (_managed_by and admin_region)
 class MWaterGlobalFiltersComponent extends react_1.default.Component {
     handleRegionsChange = (regions) => {
+        if (!this.props.onChange) {
+            return;
+        }
         // Remove existing filter
         const globalFilters = lodash_1.default.filter(this.props.globalFilters || [], (gf) => !(gf.op === "within any" && gf.columnId === "admin_region"));
         // Add new filter if present
@@ -48,6 +50,9 @@ class MWaterGlobalFiltersComponent extends react_1.default.Component {
         this.props.onChange(globalFilters);
     };
     handleManagedByChange = (managedBy) => {
+        if (!this.props.onChange) {
+            return;
+        }
         // Remove existing filter
         const globalFilters = lodash_1.default.filter(this.props.globalFilters || [], (gf) => !(gf.op === "within" && gf.columnId === "_managed_by"));
         // Add new filter if present
@@ -79,25 +84,11 @@ class MWaterGlobalFiltersComponent extends react_1.default.Component {
         else {
             adminRegions = null;
         }
-        return R("div", null, R(ui.FormGroup, { label: T `Only sites managed by`, labelMuted: true }, R(expressions_ui_1.IdLiteralComponent, {
-            value: managedBy,
-            onChange: this.handleManagedByChange,
-            idTable: "groups",
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            placeholder: T `All Organizations`,
-            multi: false,
-            filter: { type: "field", tableAlias: "main", column: "canManageEntities" }
-        })), R(ui.FormGroup, { label: T `Only sites located in`, labelMuted: true }, R(expressions_ui_1.IdLiteralComponent, {
-            value: adminRegions,
-            onChange: this.handleRegionsChange,
-            idTable: "admin_regions",
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            placeholder: T `All Regions`,
-            multi: true,
-            orderBy: [{ expr: { type: "field", tableAlias: "main", column: "level" }, direction: "asc" }]
-        })));
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(ui.FormGroup, { label: T `Only sites managed by`, labelMuted: true },
+                react_1.default.createElement(expressions_ui_1.IdLiteralComponent, { value: managedBy, onChange: this.props.onChange ? this.handleManagedByChange : undefined, idTable: "groups", schema: this.props.schema, dataSource: this.props.dataSource, placeholder: T `All Organizations`, multi: false, filter: { type: "field", tableAlias: "main", column: "canManageEntities" } })),
+            react_1.default.createElement(ui.FormGroup, { label: T `Only sites located in`, labelMuted: true },
+                react_1.default.createElement(expressions_ui_1.IdLiteralComponent, { value: adminRegions, onChange: this.props.onChange ? this.handleRegionsChange : undefined, idTable: "admin_regions", schema: this.props.schema, dataSource: this.props.dataSource, placeholder: T `All Regions`, multi: true, orderBy: [{ expr: { type: "field", tableAlias: "main", column: "level" }, direction: "asc" }] }))));
     }
 }
 exports.default = MWaterGlobalFiltersComponent;

package/lib/MWaterLoaderComponent.d.ts

@@ -1,8 +1,7 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, ReactNode } 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, { AddLayerElementFactory } from "./MWaterContextComponent";
+import { AddLayerElementFactory } from "./MWaterContextComponent";
 export interface MWaterLoaderComponentProps {
     apiUrl: string;
     client?: string;
@@ -22,9 +21,9 @@ export interface MWaterLoaderComponentProps {
     children: (error: any, config?: {
         schema: Schema;
         dataSource: DataSource;
-    }) => ReactElement<any>;
+    }) => ReactElement<any> | null;
     /** 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: ReactNode) => ReactNode;
     /** Origin of usage. e.g. "dashboards:43445364..." */
     origin?: string;
 }
@@ -43,13 +42,5 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<MWaterLoad
     constructor(props: MWaterLoaderComponentProps);
     isLoadNeeded(newProps: MWaterLoaderComponentProps, oldProps: MWaterLoaderComponentProps): boolean;
     load(props: MWaterLoaderComponentProps, prevProps: MWaterLoaderComponentProps, callback: any): void;
-    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.CElement<import("@mwater/react-library/lib/LoadingComponent").LoadingComponentProps, LoadingComponent> | React.CElement<{
-        apiUrl: string;
-        client?: string;
-        user?: string;
-        schema: Schema;
-        extraTables?: string[];
-        onExtraTablesChange?: (extraTables: string[]) => void;
-        addLayerElementFactory?: AddLayerElementFactory;
-    }, MWaterContextComponent>;
+    render(): React.JSX.Element | null;
 }

package/lib/MWaterLoaderComponent.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const AsyncLoadComponent_1 = __importDefault(require("@mwater/react-library/lib/AsyncLoadComponent"));
 const LoadingComponent_1 = __importDefault(require("@mwater/react-library/lib/LoadingComponent"));
 const mWaterLoader_1 = __importDefault(require("./mWaterLoader"));
@@ -69,18 +68,10 @@ class MWaterLoaderComponent extends AsyncLoadComponent_1.default {
             return this.props.children(this.state.error);
         }
         // Inject context
-        return R(MWaterContextComponent_1.default, {
-            apiUrl: this.props.apiUrl,
-            client: this.props.client,
-            user: this.props.user,
-            schema: this.state.schema,
-            extraTables: this.props.extraTables,
-            onExtraTablesChange: this.props.onExtraTablesChange,
-            addLayerElementFactory: this.props.addLayerElementFactory
-        }, this.props.children(this.state.error, {
+        return (react_1.default.createElement(MWaterContextComponent_1.default, { apiUrl: this.props.apiUrl, client: this.props.client, user: this.props.user, schema: this.state.schema, extraTables: this.props.extraTables, onExtraTablesChange: this.props.onExtraTablesChange, addLayerElementFactory: this.props.addLayerElementFactory }, this.props.children(this.state.error, {
             schema: this.state.schema,
             dataSource: this.state.dataSource
-        }));
+        })));
     }
 }
 exports.default = MWaterLoaderComponent;

package/lib/UndoStack.d.ts

@@ -1,7 +1,8 @@
 export default class UndoStack {
     undoStack: any[];
     redoStack: any[];
-    constructor(undoStack?: any, redoStack?: any);
+    maxDepth?: number;
+    constructor(undoStack?: any, redoStack?: any, maxDepth?: number);
     push(value: any): UndoStack;
     canUndo(): boolean;
     canRedo(): boolean;

package/lib/UndoStack.js

@@ -8,20 +8,26 @@ const lodash_1 = __importDefault(require("lodash"));
 class UndoStack {
     undoStack;
     redoStack;
-    constructor(undoStack, redoStack) {
+    maxDepth;
+    constructor(undoStack, redoStack, maxDepth) {
         this.undoStack = undoStack || [];
         this.redoStack = redoStack || [];
+        this.maxDepth = maxDepth;
     }
     // Add a value to the stack
     push(value) {
         // No trivial pushes
-        if (lodash_1.default.isEqual(this.getValue(), value)) {
+        if (JSON.stringify(this.getValue()) === JSON.stringify(value)) {
             return this;
         }
-        const undoStack = this.undoStack.slice();
+        let undoStack = this.undoStack.slice();
         undoStack.push(value);
+        // Limit stack depth if maxDepth is set
+        if (this.maxDepth && undoStack.length > this.maxDepth) {
+            undoStack = undoStack.slice(undoStack.length - this.maxDepth);
+        }
         const redoStack = [];
-        return new UndoStack(undoStack, redoStack);
+        return new UndoStack(undoStack, redoStack, this.maxDepth);
     }
     canUndo() {
         return this.undoStack.length > 1;
@@ -34,14 +40,14 @@ class UndoStack {
         const redoStack = this.redoStack.slice();
         redoStack.push(lodash_1.default.last(this.undoStack));
         const undoStack = lodash_1.default.initial(this.undoStack);
-        return new UndoStack(undoStack, redoStack);
+        return new UndoStack(undoStack, redoStack, this.maxDepth);
     }
     redo() {
         // Put last redo on to undoStack
         const undoStack = this.undoStack.slice();
         undoStack.push(lodash_1.default.last(this.redoStack));
         const redoStack = lodash_1.default.initial(this.redoStack);
-        return new UndoStack(undoStack, redoStack);
+        return new UndoStack(undoStack, redoStack, this.maxDepth);
     }
     // Get the current value
     getValue() {

package/lib/dashboards/DashboardComponent.js

@@ -65,7 +65,8 @@ class DashboardComponent extends react_1.default.Component {
             editing: LayoutManager_1.default.createLayoutManager(props.design.layout).isEmpty(props.design.items) &&
                 props.onDesignChange != null,
             layoutOptionsOpen: false,
-            hideQuickfilters: layoutOptions.hideQuickfiltersWidth != null && layoutOptions.hideQuickfiltersWidth > document.body.clientWidth,
+            hideQuickfilters: layoutOptions.hideQuickfiltersWidth === 0 ||
+                (layoutOptions.hideQuickfiltersWidth != null && layoutOptions.hideQuickfiltersWidth > document.body.clientWidth),
             refreshKey: 1,
             locale: initialLocale
         };
@@ -201,25 +202,25 @@ class DashboardComponent extends react_1.default.Component {
                 : undefined,
             react_1.default.createElement("a", { key: "print", className: "btn btn-link btn-sm", onClick: this.handlePrint },
                 react_1.default.createElement("span", { className: "fas fa-print" }),
-                react_1.default.createElement("span", { className: "hide-600px" },
+                react_1.default.createElement("span", { className: "hide-800px" },
                     " ",
                     T `Print`)),
             react_1.default.createElement("a", { key: "refresh", className: "btn btn-link btn-sm", onClick: this.handleRefreshData },
                 react_1.default.createElement("span", { className: "fas fa-sync" }),
-                react_1.default.createElement("span", { className: "hide-600px" },
+                react_1.default.createElement("span", { className: "hide-800px" },
                     " ",
                     T `Refresh`)),
             this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
                 ? react_1.default.createElement("a", { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters },
                     react_1.default.createElement("span", { className: "fa fa-filter" }),
-                    react_1.default.createElement("span", { className: "hide-600px" },
+                    react_1.default.createElement("span", { className: "hide-800px" },
                         " ",
                         T `Show Quickfilters`))
                 : undefined,
             this.state.editing
                 ? react_1.default.createElement("a", { key: "settings", className: "btn btn-link btn-sm", onClick: this.handleSettings },
                     react_1.default.createElement("span", { className: "fas fa-cog" }),
-                    react_1.default.createElement("span", { className: "hide-600px" },
+                    react_1.default.createElement("span", { className: "hide-800px" },
                         " ",
                         T `Settings`))
                 : undefined,
@@ -270,6 +271,7 @@ class DashboardComponent extends react_1.default.Component {
                 react_1.default.createElement("div", { style: {
                         display: "grid",
                         gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
+                        gridTemplateColumns: "minmax(0, 1fr)",
                         height: "100%"
                     } },
                     !this.props.hideTitleBar ? this.renderTitleBar() : undefined,

package/lib/dashboards/DashboardDesign.d.ts

@@ -34,6 +34,6 @@ export interface DashboardDesign {
     };
     /** true to enable implicit filtering (see ImplicitFilterBuilder). Defaults to true for older dashboards. */
     implicitFiltersEnabled?: boolean;
-    /** array of global filters. See below. */
+    /** Array of global filters */
     globalFilters?: GlobalFilter[];
 }

package/lib/dashboards/LayoutOptionsComponent.js

@@ -78,8 +78,9 @@ function LayoutOptionsComponent(props) {
                 react_1.default.createElement("div", { style: { backgroundColor: "#888", gridColumn: "1 / 4" } }),
                 react_1.default.createElement("div", { style: { backgroundColor: "#888" } }),
                 react_1.default.createElement("div", { style: { height: "100%", display: "grid", gridTemplateRows: "auto 1fr" } },
-                    react_1.default.createElement("div", { key: "quickfilters" }, layoutOptions.hideQuickfiltersWidth == null ||
-                        sizeOptions[previewSize].value.width > layoutOptions.hideQuickfiltersWidth
+                    react_1.default.createElement("div", { key: "quickfilters" }, (layoutOptions.hideQuickfiltersWidth !== 0) &&
+                        (layoutOptions.hideQuickfiltersWidth == null ||
+                            sizeOptions[previewSize].value.width > layoutOptions.hideQuickfiltersWidth)
                         ? props.quickfiltersView
                         : null),
                     props.dashboardView),
@@ -240,7 +241,7 @@ function CustomizeLayout(props) {
             react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Hide Quickfilters` },
                 react_1.default.createElement(WidthSelector, { value: layoutOptions.hideQuickfiltersWidth, onChange: (hideQuickfiltersWidth) => {
                         onLayoutOptionsChange({ ...layoutOptions, hideQuickfiltersWidth });
-                    }, sign: "< " })),
+                    }, sign: "< ", includeAlways: true })),
             react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Minimum Width (before scrolling or scaling)` },
                 react_1.default.createElement(WidthSelector, { value: layoutOptions.minimumWidth, onChange: (minimumWidth) => {
                         onLayoutOptionsChange({ ...layoutOptions, minimumWidth });
@@ -305,12 +306,18 @@ function PixelsInput(props) {
                     "px")))))));
 }
 function WidthSelector(props) {
-    return (react_1.default.createElement(bootstrap_1.Select, { value: props.value, onChange: props.onChange, nullLabel: T `N/A`, options: [
-            { value: 400, label: `${props.sign}400px (${T `Phone`})` },
-            { value: 600, label: `${props.sign}600px (${T `Small tablet`})` },
-            { value: 800, label: `${props.sign}800px (${T `Tablet`})` },
-            { value: 1000, label: `${props.sign}1000px (${T `Laptop`})` },
-            { value: 1200, label: `${props.sign}1200px (${T `Desktop`})` },
-            { value: 1600, label: `${props.sign}1600px (${T `Wide Desktop`})` }
-        ] }));
+    // Create options array with conditional "Always" option
+    const options = [
+        { value: 400, label: `${props.sign}400px (${T `Phone`})` },
+        { value: 600, label: `${props.sign}600px (${T `Small tablet`})` },
+        { value: 800, label: `${props.sign}800px (${T `Tablet`})` },
+        { value: 1000, label: `${props.sign}1000px (${T `Laptop`})` },
+        { value: 1200, label: `${props.sign}1200px (${T `Desktop`})` },
+        { value: 1600, label: `${props.sign}1600px (${T `Wide Desktop`})` }
+    ];
+    // Add "Always" option if requested
+    if (props.includeAlways) {
+        options.push({ value: 0, label: T `Always` });
+    }
+    return (react_1.default.createElement(bootstrap_1.Select, { value: props.value, onChange: props.onChange, nullLabel: T `N/A`, options: options }));
 }

package/lib/dashboards/ServerDashboardDataSource.d.ts

@@ -17,7 +17,7 @@ interface ServerDashboardDataSourceOptions {
     /** data source that is used for determining cache expiry */
     dataSource: DataSource;
     /** revision to use to allow caching */
-    rev: string;
+    rev?: number;
 }
 interface ServerWidgetDataSourceOptions extends ServerDashboardDataSourceOptions {
     widgetId: string;
@@ -77,6 +77,15 @@ declare class ServerWidgetLayerDataSource implements MapLayerDataSource {
     getPopupWidgetDataSource(design: any, widgetId: string): ServerWidgetLayerPopupWidgetDataSource;
     createUrl(filters: JsonQLFilter[], extension: string): string;
     createLegacyUrl(design: any, extension: string, filters: JsonQLFilter[]): string;
+    /** Gets hover over data for hover over items
+     * @param design The design of the layer
+     * @param data The data of the current item being hovered over. e.g. { id: 123 }
+     * @param filters The filters to apply to the layer does not include filters that narrow down to a specific item
+     * @returns A promise that resolves to the hover over data, indexed by the id of the hover over item
+     */
+    getHoverOverData(design: any, data: any, filters: JsonQLFilter[]): Promise<{
+        [key: string]: any;
+    }>;
 }
 interface ServerWidgetLayerPopupDataSourceOptions extends ServerDashboardDataSourceOptions {
     widgetId: string;

package/lib/dashboards/ServerDashboardDataSource.js

@@ -298,22 +298,12 @@ class ServerWidgetLayerDataSource {
             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}`;
         }
@@ -336,6 +326,35 @@ class ServerWidgetLayerDataSource {
         }
         return url;
     }
+    /** Gets hover over data for hover over items
+     * @param design The design of the layer
+     * @param data The data of the current item being hovered over. e.g. { id: 123 }
+     * @param filters The filters to apply to the layer does not include filters that narrow down to a specific item
+     * @returns A promise that resolves to the hover over data, indexed by the id of the hover over item
+     */
+    async getHoverOverData(design, data, filters) {
+        const query = {
+            client: this.options.client,
+            share: this.options.share,
+            filters: (0, compressJson_1.default)(filters || []),
+            data: (0, compressJson_1.default)(data),
+            rev: this.options.rev
+        };
+        const url = `${this.options.apiUrl}dashboards/${this.options.dashboardId}/widgets/${this.options.widgetId}/layers/${this.options.layerView.id}/hoverdata?` +
+            querystring_1.default.stringify(query);
+        const response = await fetch(url, {
+            method: "GET",
+            headers: {
+                Accept: "application/json"
+            }
+        });
+        if (!response.ok) {
+            const errorText = await response.text();
+            console.error(errorText);
+            throw new Error(`Error fetching hover data: ${response.statusText}`);
+        }
+        return await response.json();
+    }
 }
 class ServerWidgetLayerPopupWidgetDataSource {
     options;

package/lib/dashboards/SettingsModalComponent.js

@@ -149,7 +149,7 @@ function LanguageTab({ design, onDesignChange, schema }) {
         for (const locale of design.otherLocales || []) {
             const translatedCount = translatableStrings.filter(str => design.translations?.[locale]?.[str] != null).length;
             // Round down to nearest percent
-            percentages[locale] = Math.floor((translatedCount / totalStrings) * 100);
+            percentages[locale] = (totalStrings > 0) ? Math.floor((translatedCount / totalStrings) * 100) : 0;
         }
         return percentages;
     }, [design.translations, design.otherLocales, translatableStrings]);

package/lib/dashboards/layoutOptions.d.ts

@@ -12,7 +12,11 @@ export interface BlocksLayoutOptions {
     belowMinimumWidth: "scale" | "scroll";
     /** Width above which pads */
     maximumWidth: number | null;
-    /** Width at which to hide quickfilters. Null for never */
+    /** Width at which to hide quickfilters.
+     * Null for never hide
+     * 0 for always hide
+     * Positive number for responsive hiding based on width
+     */
     hideQuickfiltersWidth: number | null;
     /** The padding around the entire dashboard */
     outerPadding: number;

package/lib/datagrids/DatagridComponent.js

@@ -276,7 +276,7 @@ exports.default = (0, react_1.forwardRef)(function DatagridComponent(props, ref)
     const renderTitleBar = () => {
         return (react_1.default.createElement("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: 40, padding: 4 } },
             react_1.default.createElement("div", { style: { float: "right" } },
-                design.showNumRows && numRows ? react_1.default.createElement("small", { className: 'text-muted text-sm' }, `${(0, d3_format_1.format)(',')(numRows)} rows`) : undefined,
+                design.showNumRows && numRows ? react_1.default.createElement("small", { className: 'text-muted text-sm me-2' }, `${(0, d3_format_1.format)(',')(numRows)} rows`) : undefined,
                 renderDeleteRows(),
                 renderFindReplace(),
                 renderCellEdit(),
@@ -342,8 +342,28 @@ exports.default = (0, react_1.forwardRef)(function DatagridComponent(props, ref)
                     return (react_1.default.createElement(DatagridViewComponent_1.default, { ref: datagridViewRef, width: size.width - 1, height: size.height - 1, pageSize: 100, schema: schema, dataSource: dataSource, datagridDataSource: datagridDataSource, design: cleanedDesign, filters: activeFilters, onDesignChange: onDesignChange, onRowClick: onRowClick, onRowDoubleClick: onRowDoubleClick, selectedRows: dataEditingEnabled && props.onRowsDelete != null ? selectedRows : undefined, onSelectedRowsChange: dataEditingEnabled && props.onRowsDelete != null ? setSelectedRows : undefined, canEditExpr: dataEditingEnabled ? canEditExpr : undefined, updateExprValues: dataEditingEnabled ? updateExprValues : undefined, refreshKey: refreshKey }));
                 }
                 else if (onDesignChange) {
-                    return (react_1.default.createElement("div", { style: { textAlign: "center", marginTop: size.height / 2 } },
-                        react_1.default.createElement("a", { className: "btn btn-link", onClick: handleEdit }, T `Click Here to Configure`)));
+                    return (react_1.default.createElement("div", { style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            height: "100%",
+                            padding: "40px"
+                        } },
+                        react_1.default.createElement("div", { style: {
+                                textAlign: "center",
+                                marginBottom: "24px"
+                            } },
+                            react_1.default.createElement("i", { className: "fas fa-table text-muted", style: {
+                                    fontSize: "48px",
+                                    marginBottom: "16px"
+                                } }),
+                            react_1.default.createElement("div", { style: {
+                                    fontSize: "14px"
+                                }, className: "text-muted" }, T `Configure a data source and columns to get started.`)),
+                        react_1.default.createElement("button", { className: "btn btn-primary", onClick: handleEdit },
+                            react_1.default.createElement("i", { className: "fas fa-cog", style: { marginRight: "8px" } }),
+                            T `Configure`)));
                 }
                 else {
                     return null;

package/lib/datagrids/DatagridDesignerComponent.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
-import TabbedComponent from "@mwater/react-library/lib/TabbedComponent";
 import { DatagridDesign } from "..";
 export interface DatagridDesignerComponentProps {
     /** schema to use */
@@ -18,6 +17,6 @@ export default class DatagridDesignerComponent extends React.Component<DatagridD
     handleFilterChange: (filter: any) => void;
     handleGlobalFiltersChange: (globalFilters: any) => void;
     handleOrderBysChange: (orderBys: any) => void;
-    renderTabs(): React.CElement<any, TabbedComponent>;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderTabs(): React.JSX.Element;
+    render(): React.JSX.Element;
 }