@mwater/visualization 5.1.0 → 5.3.0

package/lib/dashboards/WidgetDataSourcePrioritizer.d.ts

@@ -0,0 +1,20 @@
+import DashboardDataSource from './DashboardDataSource';
+import { WidgetDataSource } from '../widgets/WidgetDataSource';
+/**
+ * A class that prioritizes widget data sources based on the priority of the data source
+ * and ensures that only N requests is made at a time for a given widget data source.
+ */
+export declare class WidgetDataSourcePrioritizer {
+    private queue;
+    private dashboardDataSource;
+    /**
+     * Key is widget type + ":" + widget id + ":" + priority
+     */
+    widgetDataSources: {
+        [key: string]: WidgetDataSource;
+    };
+    constructor(dashboardDataSource: DashboardDataSource, concurrency: number);
+    /** Get a widget data source with the given priority */
+    getWidgetDataSource(widgetType: string, widgetId: string, priority: number): WidgetDataSource;
+    cancel(): void;
+}

package/lib/dashboards/WidgetDataSourcePrioritizer.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetDataSourcePrioritizer = void 0;
+const p_queue_1 = __importDefault(require("p-queue"));
+/**
+ * A class that prioritizes widget data sources based on the priority of the data source
+ * and ensures that only N requests is made at a time for a given widget data source.
+ */
+class WidgetDataSourcePrioritizer {
+    queue;
+    dashboardDataSource;
+    /**
+     * Key is widget type + ":" + widget id + ":" + priority
+     */
+    widgetDataSources;
+    constructor(dashboardDataSource, concurrency) {
+        this.dashboardDataSource = dashboardDataSource;
+        this.queue = new p_queue_1.default({ concurrency: concurrency });
+        this.widgetDataSources = {};
+    }
+    /** Get a widget data source with the given priority */
+    getWidgetDataSource(widgetType, widgetId, priority) {
+        let widgetDataSource = this.widgetDataSources[widgetType + ":" + widgetId + ":" + priority];
+        if (!widgetDataSource) {
+            const innerWidgetDataSource = this.dashboardDataSource.getWidgetDataSource(widgetType, widgetId);
+            widgetDataSource = {
+                getData: (design, filters, callback) => {
+                    const task = () => new Promise((resolve, reject) => {
+                        innerWidgetDataSource.getData(design, filters, (error, data) => {
+                            if (error) {
+                                callback(error);
+                                reject(error);
+                            }
+                            else {
+                                callback(null, data);
+                                resolve(data);
+                            }
+                        });
+                    });
+                    // Create an abort controller for this task
+                    const taskAbortController = new AbortController();
+                    // Queue the task and handle errors
+                    this.queue.add(task, { priority: priority, signal: taskAbortController.signal }).catch((e) => {
+                        console.log("Task failed", e);
+                        callback(e);
+                    });
+                    return taskAbortController;
+                },
+                /** 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) => {
+                    return innerWidgetDataSource.getImageUrl(imageId, height);
+                }
+            };
+            if (innerWidgetDataSource.getMapDataSource) {
+                widgetDataSource.getMapDataSource = (design) => {
+                    return innerWidgetDataSource.getMapDataSource(design);
+                };
+            }
+            this.widgetDataSources[widgetType + ":" + widgetId + ":" + priority] = widgetDataSource;
+        }
+        return widgetDataSource;
+    }
+    cancel() {
+        // Clear the queue
+        this.queue.clear();
+    }
+}
+exports.WidgetDataSourcePrioritizer = WidgetDataSourcePrioritizer;

package/lib/dashboards/layoutOptions.d.ts

@@ -1,4 +1,5 @@
 import { DashboardDesign } from "./DashboardDesign";
+import React from "react";
 export type DashboardTheme = "default" | "greybg" | "story";
 /** Width buckets for dashboards */
 export type WidthBucket = "sm" | "md" | "lg" | "xl";
@@ -13,7 +14,89 @@ export interface BlocksLayoutOptions {
     maximumWidth: number | null;
     /** Width at which to hide quickfilters. Null for never */
     hideQuickfiltersWidth: number | null;
+    /** The padding around the entire dashboard */
+    outerPadding: number;
+    /** The background color of the dashboard */
+    backgroundColor: string;
+    /** Whether to collapse spacers on narrow screens */
+    collapseSpacers: boolean;
+    /** The font style for text widgets */
+    textWidgetFont: FontStyle;
+    /** The line height for text widgets */
+    textWidgetLineHeight: number | null;
+    /** The spacing between paragraphs in text widgets */
+    textWidgetParagraphSpacing: number;
+    /** The line height for text widgets */
+    textWidgetListLineHeight: number | null;
+    /** The margin top for H1 text widgets */
+    textWidgetH1MarginTop: number;
+    /** The font style for H1 text widgets */
+    textWidgetH1Font: FontStyle;
+    /** The margin top for H2 text widgets */
+    textWidgetH2MarginTop: number;
+    /** The font style for H2 text widgets */
+    textWidgetH2Font: FontStyle;
+    /** The font style for title widgets */
+    titleWidgetFont: FontStyle;
+    /** The margin around blocks */
+    blockMargin: Spacing;
+    /** The padding inside of blocks */
+    blockPadding: Spacing;
+    /** The border radius of blocks */
+    blockBorderRadius: number;
+    /** The background color of blocks */
+    blockBackgroundColor: string;
+    /** The font style for widget headers */
+    widgetHeaderFont: FontStyle;
+    /** The font style for widget footers */
+    widgetFooterFont: FontStyle;
+    /** The font style for charts */
+    chartFont: FontStyle;
+    /** The font style for tables */
+    tableFont: FontStyle;
+    /** The font style for pivot tables */
+    pivotTableFont: FontStyle;
+    /** Custom colors */
+    customColors: (string | null)[];
 }
+export interface Spacing {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+export interface FontStyle {
+    size: number;
+    color: string;
+    family: string;
+    weight: string;
+}
+/** React context for block layout options */
+export declare const BlocksLayoutOptionsContext: React.Context<BlocksLayoutOptions | null>;
 /** Get default layout options for a theme */
 export declare function getDefaultLayoutOptions(theme?: DashboardTheme | undefined): BlocksLayoutOptions;
+/** Gets the current layout options for a design */
 export declare function getLayoutOptions(design: DashboardDesign): BlocksLayoutOptions;
+/**
+ * Injects the dashboard style into the child component. Also provides a context for layout options.
+ * This is to allow modals to reinject the layout options when they are opened.
+ */
+export declare function DashboardStyleWrapper(props: {
+    layoutOptions: BlocksLayoutOptions;
+    children: React.ReactNode;
+    style: React.CSSProperties;
+}): React.JSX.Element;
+/**
+ * Expands a font family to include fallbacks
+ * @param fontFamily The font family to expand
+ * @returns The expanded font family
+ */
+export declare function expandFontFamily(fontFamily: string): string;
+/**
+ * Create a CSS style string from a LayoutOptions object
+ *
+ * @param scope The scope of the style (e.g. "#id_1234")
+ * @param layoutOptions The layout options
+ * @returns A CSS style string
+ */
+export declare function createDashboardStyles(scope: string, layoutOptions: BlocksLayoutOptions): string;

package/lib/dashboards/layoutOptions.js

@@ -1,19 +1,445 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getLayoutOptions = exports.getDefaultLayoutOptions = void 0;
+exports.createDashboardStyles = exports.expandFontFamily = exports.DashboardStyleWrapper = exports.getLayoutOptions = exports.getDefaultLayoutOptions = exports.BlocksLayoutOptionsContext = void 0;
+const react_1 = require("react");
+const react_2 = __importDefault(require("react"));
+const CustomColorsContext_1 = require("../CustomColorsContext");
+/** React context for block layout options */
+exports.BlocksLayoutOptionsContext = (0, react_1.createContext)(null);
 /** Get default layout options for a theme */
 function getDefaultLayoutOptions(theme) {
-    theme = theme || "default";
-    return {
-        collapseColumnsWidth: 600,
-        minimumWidth: theme == "story" ? 400 : 600,
-        belowMinimumWidth: "scale",
-        maximumWidth: theme == "story" ? 1000 : 1600,
-        hideQuickfiltersWidth: 600
-    };
+    if (!theme || theme === "default") {
+        return defaultTheme;
+    }
+    if (theme === "greybg") {
+        return greybgTheme;
+    }
+    if (theme === "story") {
+        return storyTheme;
+    }
+    throw new Error(`Unknown theme: ${theme}`);
 }
 exports.getDefaultLayoutOptions = getDefaultLayoutOptions;
+/** Gets the current layout options for a design */
 function getLayoutOptions(design) {
-    return design.layoutOptions || getDefaultLayoutOptions(design.style);
+    if (!design.layoutOptions) {
+        return getDefaultLayoutOptions(design.style);
+    }
+    return {
+        ...getDefaultLayoutOptions(design.style),
+        ...design.layoutOptions
+    };
 }
 exports.getLayoutOptions = getLayoutOptions;
+/**
+ * Injects the dashboard style into the child component. Also provides a context for layout options.
+ * This is to allow modals to reinject the layout options when they are opened.
+ */
+function DashboardStyleWrapper(props) {
+    const scope = (0, react_1.useMemo)(() => {
+        return `id_${Math.random().toString(36).substring(7)}`;
+    }, []);
+    // Get outer custom colors from context and merge with layout options
+    const outerCustomColors = (0, react_1.useContext)(CustomColorsContext_1.CustomColorsContext) || { customColors: [] };
+    const mergedCustomColors = outerCustomColors.customColors.map((outerColor, index) => props.layoutOptions.customColors[index] || outerColor).concat(props.layoutOptions.customColors.slice(outerCustomColors.customColors.length));
+    return react_2.default.createElement("div", { id: scope, style: props.style },
+        react_2.default.createElement("style", { dangerouslySetInnerHTML: { __html: createDashboardStyles("#" + scope, props.layoutOptions) } }),
+        react_2.default.createElement(CustomColorsContext_1.CustomColorsContext.Provider, { value: { customColors: mergedCustomColors } },
+            react_2.default.createElement(exports.BlocksLayoutOptionsContext.Provider, { value: props.layoutOptions }, props.children)));
+}
+exports.DashboardStyleWrapper = DashboardStyleWrapper;
+/** Bootstrap default font color */
+const defaultFontColor = "#212529";
+const defaultTheme = {
+    outerPadding: 30,
+    backgroundColor: "white",
+    collapseSpacers: false,
+    textWidgetFont: {
+        size: 15,
+        color: defaultFontColor,
+        family: "Helvetica Neue",
+        weight: "400"
+    },
+    textWidgetLineHeight: null,
+    textWidgetParagraphSpacing: 5,
+    textWidgetH1MarginTop: 10,
+    textWidgetH1Font: {
+        size: 19,
+        color: defaultFontColor,
+        family: "Helvetica Neue",
+        weight: "400"
+    },
+    textWidgetH2MarginTop: 8,
+    textWidgetH2Font: {
+        size: 17,
+        color: defaultFontColor,
+        family: "Helvetica Neue",
+        weight: "400"
+    },
+    titleWidgetFont: {
+        size: 25,
+        color: defaultFontColor,
+        family: "Helvetica Neue",
+        weight: "400"
+    },
+    textWidgetListLineHeight: null,
+    blockMargin: {
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+    },
+    blockPadding: {
+        top: 0,
+        bottom: 15,
+        left: 15,
+        right: 15,
+    },
+    blockBorderRadius: 5,
+    blockBackgroundColor: "white",
+    widgetHeaderFont: {
+        size: 14,
+        color: defaultFontColor,
+        family: "Helvetica Neue",
+        weight: "600"
+    },
+    widgetFooterFont: {
+        size: 13,
+        color: defaultFontColor,
+        family: "Helvetica Neue",
+        weight: "400"
+    },
+    chartFont: {
+        size: 10,
+        color: defaultFontColor,
+        family: "Helvetica Neue",
+        weight: "400"
+    },
+    tableFont: {
+        size: 13,
+        color: defaultFontColor,
+        family: "Helvetica Neue",
+        weight: "400"
+    },
+    pivotTableFont: {
+        size: 14,
+        color: defaultFontColor,
+        family: "Helvetica Neue",
+        weight: "400"
+    },
+    collapseColumnsWidth: 600,
+    minimumWidth: 600,
+    belowMinimumWidth: "scale",
+    maximumWidth: 1600,
+    hideQuickfiltersWidth: 600,
+    customColors: []
+};
+const greybgTheme = {
+    ...defaultTheme,
+    outerPadding: 10,
+    backgroundColor: "#ddd",
+    blockMargin: {
+        top: 9,
+        bottom: 9,
+        left: 9,
+        right: 9,
+    },
+    blockPadding: {
+        top: 8,
+        bottom: 8,
+        left: 8,
+        right: 8,
+    },
+};
+const storyTheme = {
+    ...defaultTheme,
+    textWidgetFont: {
+        size: 18,
+        color: "#333",
+        family: "Georgia",
+        weight: "400"
+    },
+    textWidgetLineHeight: 33,
+    textWidgetParagraphSpacing: 8,
+    textWidgetListLineHeight: 28,
+    textWidgetH1MarginTop: 40,
+    textWidgetH1Font: {
+        size: 32,
+        color: "black",
+        family: "Lucida Grande",
+        weight: "700"
+    },
+    textWidgetH2MarginTop: 30,
+    textWidgetH2Font: {
+        size: 24,
+        color: "black",
+        family: "Lucida Grande",
+        weight: "700"
+    },
+    titleWidgetFont: {
+        size: 38,
+        color: "black",
+        family: "Lucida Grande",
+        weight: "700"
+    },
+    minimumWidth: 400,
+    maximumWidth: 1000,
+};
+/**
+ * Expands a font family to include fallbacks
+ * @param fontFamily The font family to expand
+ * @returns The expanded font family
+ */
+function expandFontFamily(fontFamily) {
+    // Handle legacy font families
+    if (fontFamily === "Helvetica Neue") {
+        return `"${fontFamily}", Helvetica, Arial, sans-serif`;
+    }
+    if (fontFamily === "Lucida Grande") {
+        return `"${fontFamily}", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif`;
+    }
+    if (fontFamily === "Georgia") {
+        return `"${fontFamily}", Cambria, "Times New Roman", Times, serif`;
+    }
+    // Add fallback fonts
+    if (fontFamily === "Merriweather") {
+        return `"${fontFamily}", serif`;
+    }
+    return `"${fontFamily}", sans-serif`;
+}
+exports.expandFontFamily = expandFontFamily;
+/**
+ * Create a CSS style string from a LayoutOptions object
+ *
+ * @param scope The scope of the style (e.g. "#id_1234")
+ * @param layoutOptions The layout options
+ * @returns A CSS style string
+ */
+function createDashboardStyles(scope, layoutOptions) {
+    return `
+${scope} .mwater-visualization-block-parent-outer {
+  padding: ${layoutOptions.outerPadding}px;
+  background-color: ${layoutOptions.backgroundColor};
+}
+
+${scope} .mwater-visualization-block-parent-inner {
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media print {
+  /* Add a border on printing */
+  ${scope} .mwater-visualization-block-parent-outer .mwater-visualization-block {
+    border: solid 1px ${layoutOptions.backgroundColor};
+  }
+  ${scope} .mwater-visualization-block-parent-outer .mwater-visualization-block.mwater-visualization-block-spacer {
+    border: solid 1px transparent;
+  }
+}
+
+/* --- Text widget styles --- */
+${scope} .mwater-visualization-text-widget-style-default {
+  font-size: ${layoutOptions.textWidgetFont.size}px;
+  font-weight: ${layoutOptions.textWidgetFont.weight};
+  color: ${layoutOptions.textWidgetFont.color};
+  line-height: ${layoutOptions.textWidgetLineHeight ? `${layoutOptions.textWidgetLineHeight}px` : "inherit"};
+  font-family: ${expandFontFamily(layoutOptions.textWidgetFont.family)};
+}
+
+${scope} .mwater-visualization-text-widget-style-default div:not(:first-child) {
+  margin-top: ${layoutOptions.textWidgetParagraphSpacing}px;
+}
+
+${scope} .mwater-visualization-text-widget-style-default ul {
+  line-height: ${layoutOptions.textWidgetListLineHeight ? `${layoutOptions.textWidgetListLineHeight}px` : "inherit"};
+}
+
+${scope} .mwater-visualization-text-widget-style-default h1:not(:first-child) {
+  margin-top: ${layoutOptions.textWidgetH1MarginTop}px;
+}
+
+${scope} .mwater-visualization-text-widget-style-default h1 {
+  line-height: 1.2;
+  margin: 0px;
+  font-size: ${layoutOptions.textWidgetH1Font.size}px;
+  color: ${layoutOptions.textWidgetH1Font.color};
+  font-family: ${expandFontFamily(layoutOptions.textWidgetH1Font.family)};
+  font-weight: ${layoutOptions.textWidgetH1Font.weight};
+}
+
+${scope} .mwater-visualization-text-widget-style-default h2:not(:first-child) {
+  margin-top: ${layoutOptions.textWidgetH2MarginTop}px;
+}
+
+${scope} .mwater-visualization-text-widget-style-default h2 {
+  margin: 0px;
+  line-height: 1.2;
+
+  font-size: ${layoutOptions.textWidgetH2Font.size}px;
+  font-family: ${expandFontFamily(layoutOptions.textWidgetH2Font.family)};
+  font-weight: ${layoutOptions.textWidgetH2Font.weight};
+  color: ${layoutOptions.textWidgetH2Font.color};
+}
+
+/* NOTE: h3 is deprecated */
+${scope} .mwater-visualization-text-widget-style-default h3:not(:first-child) {
+  margin-top: 5px;
+}
+
+${scope} .mwater-visualization-text-widget-style-default h3 {
+  font-size: 15px;
+  margin: 0px;
+  font-weight: bold;
+  font-family: inherit;
+  line-height: 1.2;
+  color: inherit;
+
+  /* Story: TODO REMOVE
+  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif;
+  font-size: 20px;
+  font-weight: bold;
+  margin-top: 20px;
+  color: black;
+  */
+}
+
+/* --- Title block styles --- */
+${scope} .mwater-visualization-text-widget-style-title {
+  font-size: ${layoutOptions.titleWidgetFont.size}px;
+  color: ${layoutOptions.titleWidgetFont.color};
+  font-family: ${expandFontFamily(layoutOptions.titleWidgetFont.family)};
+  font-weight: ${layoutOptions.titleWidgetFont.weight};
+}
+
+/* --- InlineExprEditorComponent --- */
+${scope} .mwater-visualization-text-widget-expr {
+  cursor: pointer;
+  border-radius: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
+  background-color: rgba(212, 235, 255, 0.8);
+}
+
+/* --- Block styles --- */
+${scope} .mwater-visualization-block-parent-outer .mwater-visualization-block {
+  margin: ${layoutOptions.blockMargin.top}px ${layoutOptions.blockMargin.right}px ${layoutOptions.blockMargin.bottom}px ${layoutOptions.blockMargin.left}px;
+  padding: ${layoutOptions.blockPadding.top}px ${layoutOptions.blockPadding.right}px ${layoutOptions.blockPadding.bottom}px ${layoutOptions.blockPadding.left}px;
+  border-radius: ${layoutOptions.blockBorderRadius}px;
+  background-color: ${layoutOptions.blockBackgroundColor};
+}
+
+/* Hide spacers */
+${scope} .mwater-visualization-block-parent-outer .mwater-visualization-block-spacer {
+  background-color: ${layoutOptions.backgroundColor};
+}
+
+${layoutOptions.collapseSpacers ? `
+/* On narrow screens, optionally collapse spacers and make all horizontal blocks take up the whole width */
+@media only screen and (max-width: 1000px) {
+  /* Fill screen when small */
+  ${scope} .mwater-visualization-block-parent-outer.mwater-visualization-block-viewing
+    .mwater-visualization-horizontal-block-item {
+    width: 100% !important;
+  }
+
+  /* Hide spacers when small */
+  ${scope} .mwater-visualization-block-parent-outer.mwater-visualization-block-viewing .mwater-visualization-block-spacer {
+    display: none;
+  }
+}
+` : ""}
+
+/* --- TextWidgets inside of other widgets --- */
+${scope} .mwater-visualization-text-widget-style-header {
+  text-align: center;
+  font-size: ${layoutOptions.widgetHeaderFont.size}px;
+  font-weight: ${layoutOptions.widgetHeaderFont.weight};
+  font-family: ${expandFontFamily(layoutOptions.widgetHeaderFont.family)};
+  color: ${layoutOptions.widgetHeaderFont.color};
+}
+
+${scope} .mwater-visualization-text-widget-style-footer {
+  text-align: center;
+  font-size: ${layoutOptions.widgetFooterFont.size}px;
+  font-weight: ${layoutOptions.widgetFooterFont.weight};
+  font-family: ${expandFontFamily(layoutOptions.widgetFooterFont.family)};
+  color: ${layoutOptions.widgetFooterFont.color};
+}
+
+/** --- Chart styles --- */
+${scope} .bb text {
+  font-size: ${layoutOptions.chartFont.size}px;
+  fill: ${layoutOptions.chartFont.color};
+  font-family: ${expandFontFamily(layoutOptions.chartFont.family)};
+  font-weight: ${layoutOptions.chartFont.weight};
+}
+
+/* --- Table styles --- */
+${scope} .mwater-visualization-table {
+  font-size: ${layoutOptions.tableFont.size}px;
+  color: ${layoutOptions.tableFont.color};
+  font-family: ${expandFontFamily(layoutOptions.tableFont.family)};
+  font-weight: ${layoutOptions.tableFont.weight};
+}
+
+${scope} .mwater-visualization-table > thead > tr > th {
+  background-color: ${layoutOptions.blockBackgroundColor};
+}
+
+/* --- Pivot Table styles --- */
+${scope} .pivot-chart-table {
+  font-size: ${layoutOptions.pivotTableFont.size}px;
+  color: ${layoutOptions.pivotTableFont.color};
+  font-family: ${expandFontFamily(layoutOptions.pivotTableFont.family)};
+  font-weight: ${layoutOptions.pivotTableFont.weight};
+}
+
+${scope} .pivot-chart-table .cell {
+  padding: 5px;
+  vertical-align: top;
+  background-color: ${layoutOptions.blockBackgroundColor};
+}
+
+/* --- Placeholders --- */
+${scope} .mwater-visualization-widget-placeholder {
+  position: absolute;
+  bottom: 0;
+  left: 0px;
+  right: 0px;
+  text-align: center;
+  top: 0;
+  cursor: pointer;
+  background: #f8f8f8;
+}
+
+${scope} .mwater-visualization-widget-placeholder .fa,
+${scope} .mwater-visualization-widget-placeholder .glyphicon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #e0e0e0;
+  font-size: 60px;
+}
+
+${scope} .mwater-visualization-widget-placeholder:hover .fa,
+${scope} .mwater-visualization-widget-placeholder:hover .glyphicon {
+  color: #c0c0c0;
+}
+
+${scope} .mwater-visualization-widget-placeholder-message {
+  color: #666;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  right: 0px;
+  font-size: 11px;
+}
+
+`;
+}
+exports.createDashboardStyles = createDashboardStyles;

package/lib/datagrids/DatagridComponent.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactNode } from "react";
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent";
 import { DataSource, Expr, Schema } from "@mwater/expressions";
 import DatagridViewComponent, { RowUpdate } from "./DatagridViewComponent";
 import FindReplaceModalComponent from "./FindReplaceModalComponent";
@@ -115,14 +116,6 @@ declare class DatagridEditorComponent extends React.Component<DatagridEditorComp
     design: DatagridDesign;
 }> {
     constructor(props: DatagridEditorComponentProps);
-    render(): React.CElement<{
-        onAction: () => void;
-        onCancel: () => void;
-        size: string;
-    }, React.Component<{
-        onAction: () => void;
-        onCancel: () => void;
-        size: string;
-    }, any, any>>;
+    render(): React.CElement<import("@mwater/react-library/lib/ActionCancelModalComponent").ActionCancelModalComponentProps, ActionCancelModalComponent>;
 }
 export {};

package/lib/datagrids/DatagridDataSource.d.ts

@@ -1,10 +1,10 @@
 import { Row } from "@mwater/expressions";
 import { DatagridDesign, JsonQLFilter } from "..";
 import { QuickfiltersDataSource } from "../quickfilter/QuickfiltersDataSource";
-export default class DatagridDataSource {
+export default interface DatagridDataSource {
     /** Gets the rows specified */
-    getRows(design: DatagridDesign, offset: number, limit: number, filters: JsonQLFilter[] | undefined, callback: (error: any, rows: Row[]) => void): void;
-    countRows(design: DatagridDesign, filters: JsonQLFilter[] | undefined, callback: (error: any, numRows: number) => void): void;
+    getRows(design: DatagridDesign, offset: number, limit: number, filters: JsonQLFilter[] | undefined, callback: (error: any, rows?: Row[]) => void): void;
+    countRows(design: DatagridDesign, filters: JsonQLFilter[] | undefined, callback: (error: any, numRows?: number) => void): void;
     /** Gets the quickfilters data source */
     getQuickfiltersDataSource(): QuickfiltersDataSource;
 }

package/lib/datagrids/DatagridDataSource.js

@@ -1,16 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-class DatagridDataSource {
-    /** Gets the rows specified */
-    getRows(design, offset, limit, filters, callback) {
-        throw new Error("Not implemented");
-    }
-    countRows(design, filters, callback) {
-        throw new Error("Not implemented");
-    }
-    /** Gets the quickfilters data source */
-    getQuickfiltersDataSource() {
-        throw new Error("Not implemented");
-    }
-}
-exports.default = DatagridDataSource;