@mwater/visualization 5.2.0 → 5.3.1

package/lib/dashboards/LayoutOptionsComponent.js

@@ -4,10 +4,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutOptionsComponent = void 0;
+const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const react_2 = require("react");
 const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
 const layoutOptions_1 = require("./layoutOptions");
+const ColorComponent_1 = __importDefault(require("../ColorComponent"));
+const FontStyleEditor_1 = require("./FontStyleEditor");
+const immer_1 = __importDefault(require("immer"));
+const file_saver_1 = __importDefault(require("file-saver"));
 const sizeOptions = [
     { value: { width: 360, height: 640 }, label: "Phone (360x640)" },
     { value: { width: 768, height: 1024 }, label: "Tablet (768x1024)" },
@@ -20,45 +25,20 @@ function LayoutOptionsComponent(props) {
     function setLayoutOptions(layoutOptions) {
         props.onDesignChange({ ...props.design, layoutOptions });
     }
-    function handleResetDefaults() {
-        props.onDesignChange({ ...props.design, layoutOptions: (0, layoutOptions_1.getDefaultLayoutOptions)(props.design.style) });
-    }
-    return (react_1.default.createElement("div", { style: { display: "grid", gridTemplateRows: "auto 1fr", gridTemplateColumns: "auto 1fr", height: "100%" } },
-        react_1.default.createElement("div", { style: { padding: 5, gridRow: "1 / 3" } },
-            react_1.default.createElement("div", { key: "back" },
-                react_1.default.createElement("button", { className: "btn btn-sm btn-link", onClick: props.onClose },
-                    react_1.default.createElement("i", { className: "fa fa-arrow-left" }),
-                    " Close")),
-            react_1.default.createElement("br", null),
+    const isCustomized = !lodash_1.default.isEqual(layoutOptions, (0, layoutOptions_1.getDefaultLayoutOptions)(props.design.style));
+    return (react_1.default.createElement("div", { style: { display: "grid", gridTemplateRows: "auto 1fr", gridTemplateColumns: "360px 1fr", height: "100%" } },
+        react_1.default.createElement("div", { style: { padding: "5px 10px 5px 0px", gridRow: "1 / 3", overflowY: "auto" } },
+            react_1.default.createElement("h5", null, "Theme"),
             react_1.default.createElement(ThemeToggle, { theme: props.design.style, onChange: (theme) => {
+                    if (isCustomized) {
+                        if (!confirm("Are you sure you want to change the theme? Your customizations will be lost."))
+                            return;
+                    }
                     props.onDesignChange({ ...props.design, style: theme, layoutOptions: (0, layoutOptions_1.getDefaultLayoutOptions)(theme) });
-                } }),
+                }, isCustomized: isCustomized }),
             react_1.default.createElement("br", null),
-            react_1.default.createElement("h4", null, "Advanced"),
-            react_1.default.createElement("a", { className: "btn btn-sm btn-link", style: { float: "right" }, onClick: handleResetDefaults }, "Reset to Defaults"),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Collapse to Single Column" },
-                react_1.default.createElement(WidthSelector, { value: layoutOptions.collapseColumnsWidth, onChange: (collapseColumnsWidth) => {
-                        setLayoutOptions({ ...layoutOptions, collapseColumnsWidth });
-                    }, sign: "< " })),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Hide Quickfilters" },
-                react_1.default.createElement(WidthSelector, { value: layoutOptions.hideQuickfiltersWidth, onChange: (hideQuickfiltersWidth) => {
-                        setLayoutOptions({ ...layoutOptions, hideQuickfiltersWidth });
-                    }, sign: "< " })),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Minimum Width (before scrolling or scaling)" },
-                react_1.default.createElement(WidthSelector, { value: layoutOptions.minimumWidth, onChange: (minimumWidth) => {
-                        setLayoutOptions({ ...layoutOptions, minimumWidth });
-                    }, sign: "< " }),
-                react_1.default.createElement(bootstrap_1.FormGroup, { label: "When Below Minimum Width" },
-                    react_1.default.createElement(bootstrap_1.Toggle, { value: layoutOptions.belowMinimumWidth, onChange: (belowMinimumWidth) => {
-                            setLayoutOptions({ ...layoutOptions, belowMinimumWidth: belowMinimumWidth });
-                        }, options: [
-                            { value: "scroll", label: "Scroll" },
-                            { value: "scale", label: "Scale" }
-                        ] }))),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Maximum Width (before padding)" },
-                react_1.default.createElement(WidthSelector, { value: layoutOptions.maximumWidth, onChange: (maximumWidth) => {
-                        setLayoutOptions({ ...layoutOptions, maximumWidth });
-                    }, sign: "> " }))),
+            react_1.default.createElement(bootstrap_1.CollapsibleSection, { label: react_1.default.createElement("h5", { style: { display: "inline-block" } }, "Customize Layout"), initiallyOpen: isCustomized },
+                react_1.default.createElement(CustomizeLayout, { layoutOptions: layoutOptions, onLayoutOptionsChange: setLayoutOptions }))),
         react_1.default.createElement("div", { style: { textAlign: "center", padding: 3 } },
             react_1.default.createElement("span", { className: "text-muted" }, "Preview As:\u00A0"),
             react_1.default.createElement(bootstrap_1.Toggle, { value: previewSize, onChange: setPreviewSize, size: "xs", options: sizeOptions.map((so, index) => ({ value: index, label: so.label })) })),
@@ -84,7 +64,7 @@ function LayoutOptionsComponent(props) {
 exports.LayoutOptionsComponent = LayoutOptionsComponent;
 function ThemeToggle(props) {
     function renderStyleItem(theme) {
-        const isActive = (props.theme || "default") == theme;
+        const isActive = props.isCustomized ? theme == "custom" : (props.theme || "default") == theme;
         if (theme == "default") {
             return (react_1.default.createElement("a", { key: theme, className: isActive ? "list-group-item active" : "list-group-item", onClick: props.onChange.bind(null, "default") },
                 react_1.default.createElement("div", null, "Classic Dashboard"),
@@ -100,13 +80,202 @@ function ThemeToggle(props) {
                 react_1.default.createElement("div", null, "Story"),
                 react_1.default.createElement("div", { style: { opacity: 0.6 } }, "Ideal for data-driven storytelling with lots of text")));
         }
+        if (theme == "custom") {
+            return (react_1.default.createElement("a", { key: theme, className: isActive ? "list-group-item active" : "list-group-item" },
+                react_1.default.createElement("div", null, "Custom"),
+                react_1.default.createElement("div", { style: { opacity: 0.6 } }, "Customized theme")));
+        }
         return null;
     }
-    return (react_1.default.createElement(bootstrap_1.FormGroup, { label: "Theme" },
-        react_1.default.createElement("div", { className: "list-group" },
-            renderStyleItem("default"),
-            renderStyleItem("greybg"),
-            renderStyleItem("story"))));
+    return (react_1.default.createElement("div", { className: "list-group" },
+        renderStyleItem("default"),
+        renderStyleItem("greybg"),
+        renderStyleItem("story"),
+        props.isCustomized && renderStyleItem("custom")));
+}
+function CustomizeLayout(props) {
+    const { layoutOptions, onLayoutOptionsChange } = props;
+    const handleDownloadTheme = () => {
+        const blob = new Blob([JSON.stringify(layoutOptions, null, 2)], { type: "application/json" });
+        file_saver_1.default.saveAs(blob, "custom_theme.theme");
+    };
+    const handleUploadTheme = (event) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                try {
+                    const uploadedTheme = JSON.parse(e.target?.result);
+                    onLayoutOptionsChange(uploadedTheme);
+                }
+                catch (error) {
+                    alert("Invalid theme file");
+                }
+            };
+            reader.readAsText(file);
+        }
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(bootstrap_1.CollapsiblePanel, { title: "Text" },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Title" },
+                react_1.default.createElement(FontStyleEditor_1.FontStyleEditor, { value: layoutOptions.titleWidgetFont, onChange: (titleWidgetFont) => {
+                        onLayoutOptionsChange({ ...layoutOptions, titleWidgetFont });
+                    } })),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Heading H1" },
+                react_1.default.createElement(FontStyleEditor_1.FontStyleEditor, { value: layoutOptions.textWidgetH1Font, onChange: (textWidgetH1Font) => {
+                        onLayoutOptionsChange({ ...layoutOptions, textWidgetH1Font });
+                    } }),
+                react_1.default.createElement("div", { className: "mt-1" },
+                    react_1.default.createElement(bootstrap_1.FormGroup, { label: "Top Margin:", horizontal: true, labelMuted: true },
+                        react_1.default.createElement(PixelsInput, { value: layoutOptions.textWidgetH1MarginTop, onChange: (textWidgetH1MarginTop) => {
+                                onLayoutOptionsChange({ ...layoutOptions, textWidgetH1MarginTop: textWidgetH1MarginTop });
+                            } })))),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Heading H2" },
+                react_1.default.createElement(FontStyleEditor_1.FontStyleEditor, { value: layoutOptions.textWidgetH2Font, onChange: (textWidgetH2Font) => {
+                        onLayoutOptionsChange({ ...layoutOptions, textWidgetH2Font });
+                    } }),
+                react_1.default.createElement("div", { className: "mt-1" },
+                    react_1.default.createElement(bootstrap_1.FormGroup, { label: "Top Margin:", horizontal: true, labelMuted: true },
+                        react_1.default.createElement(PixelsInput, { value: layoutOptions.textWidgetH2MarginTop, onChange: (textWidgetH2MarginTop) => {
+                                onLayoutOptionsChange({ ...layoutOptions, textWidgetH2MarginTop: textWidgetH2MarginTop });
+                            } })))),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Text" },
+                react_1.default.createElement(FontStyleEditor_1.FontStyleEditor, { value: layoutOptions.textWidgetFont, onChange: (textWidgetFont) => {
+                        onLayoutOptionsChange({ ...layoutOptions, textWidgetFont });
+                    } }),
+                react_1.default.createElement("div", { className: "mt-1" },
+                    react_1.default.createElement(bootstrap_1.FormGroup, { label: "Line Height:", horizontal: true, labelMuted: true },
+                        react_1.default.createElement(PixelsInput, { value: layoutOptions.textWidgetLineHeight, onChange: (textWidgetLineHeight) => {
+                                onLayoutOptionsChange({ ...layoutOptions, textWidgetLineHeight: textWidgetLineHeight });
+                            }, allowDefault: true, defaultLabel: "Default" })),
+                    react_1.default.createElement(bootstrap_1.FormGroup, { label: "Paragraph Spacing:", horizontal: true, labelMuted: true },
+                        react_1.default.createElement(PixelsInput, { value: layoutOptions.textWidgetParagraphSpacing, onChange: (textWidgetParagraphSpacing) => {
+                                onLayoutOptionsChange({ ...layoutOptions, textWidgetParagraphSpacing: textWidgetParagraphSpacing });
+                            } })))),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "List Line Height:", horizontal: true },
+                react_1.default.createElement(PixelsInput, { value: layoutOptions.textWidgetListLineHeight, onChange: (textWidgetListLineHeight) => {
+                        onLayoutOptionsChange({ ...layoutOptions, textWidgetListLineHeight: textWidgetListLineHeight });
+                    }, allowDefault: true, defaultLabel: "Default" })),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Chart Header Font" },
+                react_1.default.createElement(FontStyleEditor_1.FontStyleEditor, { value: layoutOptions.widgetHeaderFont, onChange: (widgetHeaderFont) => {
+                        onLayoutOptionsChange({ ...layoutOptions, widgetHeaderFont });
+                    } })),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Chart Footer Font" },
+                react_1.default.createElement(FontStyleEditor_1.FontStyleEditor, { value: layoutOptions.widgetFooterFont, onChange: (widgetFooterFont) => {
+                        onLayoutOptionsChange({ ...layoutOptions, widgetFooterFont });
+                    } })),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Chart Font" },
+                react_1.default.createElement(FontStyleEditor_1.FontStyleEditor, { value: layoutOptions.chartFont, onChange: (chartFont) => {
+                        onLayoutOptionsChange({ ...layoutOptions, chartFont });
+                    } })),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Table Font" },
+                react_1.default.createElement(FontStyleEditor_1.FontStyleEditor, { value: layoutOptions.tableFont, onChange: (tableFont) => {
+                        onLayoutOptionsChange({ ...layoutOptions, tableFont });
+                    } })),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Pivot Table Font" },
+                react_1.default.createElement(FontStyleEditor_1.FontStyleEditor, { value: layoutOptions.pivotTableFont, onChange: (pivotTableFont) => {
+                        onLayoutOptionsChange({ ...layoutOptions, pivotTableFont });
+                    } }))),
+        react_1.default.createElement(bootstrap_1.CollapsiblePanel, { title: "Spacing" },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Outer Padding:", horizontal: true },
+                react_1.default.createElement(PixelsInput, { value: layoutOptions.outerPadding, onChange: (outerPadding) => {
+                        onLayoutOptionsChange({ ...layoutOptions, outerPadding: outerPadding });
+                    } })),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Block Margins" },
+                react_1.default.createElement(SpacingInput, { value: layoutOptions.blockMargin, onChange: (blockMargin) => {
+                        onLayoutOptionsChange({ ...layoutOptions, blockMargin });
+                    } })),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Block Padding" },
+                react_1.default.createElement(SpacingInput, { value: layoutOptions.blockPadding, onChange: (blockPadding) => {
+                        onLayoutOptionsChange({ ...layoutOptions, blockPadding });
+                    } })),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Block Border Radius:", horizontal: true },
+                react_1.default.createElement(PixelsInput, { value: layoutOptions.blockBorderRadius, onChange: (blockBorderRadius) => {
+                        onLayoutOptionsChange({ ...layoutOptions, blockBorderRadius: blockBorderRadius });
+                    } }))),
+        react_1.default.createElement(bootstrap_1.CollapsiblePanel, { title: "Colors" },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Background Color:", horizontal: true },
+                react_1.default.createElement(ColorComponent_1.default, { color: layoutOptions.backgroundColor, onChange: (backgroundColor) => {
+                        onLayoutOptionsChange({ ...layoutOptions, backgroundColor: backgroundColor ?? "white" });
+                    } })),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Block Background Color:", horizontal: true },
+                react_1.default.createElement(ColorComponent_1.default, { color: layoutOptions.blockBackgroundColor, onChange: (blockBackgroundColor) => {
+                        onLayoutOptionsChange({ ...layoutOptions, blockBackgroundColor: blockBackgroundColor ?? "white" });
+                    } })),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Custom Colors" },
+                react_1.default.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '5px' } }, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((colorIndex) => (react_1.default.createElement(ColorComponent_1.default, { key: colorIndex, color: layoutOptions.customColors[colorIndex], onChange: (color) => {
+                        onLayoutOptionsChange((0, immer_1.default)(layoutOptions, (draft) => {
+                            draft.customColors[colorIndex] = color;
+                        }));
+                    } })))))),
+        react_1.default.createElement(bootstrap_1.CollapsiblePanel, { title: "Responsive Layout" },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Collapse to Single Column" },
+                react_1.default.createElement(WidthSelector, { value: layoutOptions.collapseColumnsWidth, onChange: (collapseColumnsWidth) => {
+                        onLayoutOptionsChange({ ...layoutOptions, collapseColumnsWidth });
+                    }, sign: "< " })),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Hide Quickfilters" },
+                react_1.default.createElement(WidthSelector, { value: layoutOptions.hideQuickfiltersWidth, onChange: (hideQuickfiltersWidth) => {
+                        onLayoutOptionsChange({ ...layoutOptions, hideQuickfiltersWidth });
+                    }, sign: "< " })),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Minimum Width (before scrolling or scaling)" },
+                react_1.default.createElement(WidthSelector, { value: layoutOptions.minimumWidth, onChange: (minimumWidth) => {
+                        onLayoutOptionsChange({ ...layoutOptions, minimumWidth });
+                    }, sign: "< " }),
+                react_1.default.createElement(bootstrap_1.FormGroup, { label: "When Below Minimum Width" },
+                    react_1.default.createElement(bootstrap_1.Toggle, { value: layoutOptions.belowMinimumWidth, onChange: (belowMinimumWidth) => {
+                            onLayoutOptionsChange({ ...layoutOptions, belowMinimumWidth: belowMinimumWidth });
+                        }, size: "sm", options: [
+                            { value: "scroll", label: "Scroll" },
+                            { value: "scale", label: "Scale" }
+                        ] }))),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Maximum Width (before padding)" },
+                react_1.default.createElement(WidthSelector, { value: layoutOptions.maximumWidth, onChange: (maximumWidth) => {
+                        onLayoutOptionsChange({ ...layoutOptions, maximumWidth });
+                    }, sign: "> " })),
+            react_1.default.createElement(bootstrap_1.Checkbox, { value: layoutOptions.collapseSpacers, onChange: (collapseSpacers) => {
+                    onLayoutOptionsChange({ ...layoutOptions, collapseSpacers });
+                } }, "Collapse Spacers on Mobile")),
+        react_1.default.createElement(bootstrap_1.CollapsiblePanel, { title: "Download/Upload Theme", initiallyClosed: true },
+            react_1.default.createElement("div", { className: "mb-2 text-muted" }, "Download or upload a custom theme to use for this dashboard. This saves the current theme as a theme file that you can then use on other dashboards by uploading it there."),
+            react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", marginTop: "10px", gap: "10px" } },
+                react_1.default.createElement("button", { className: "btn btn-sm btn-secondary", onClick: handleDownloadTheme },
+                    react_1.default.createElement("i", { className: "fas fa-download" }),
+                    " Download Custom Theme"),
+                react_1.default.createElement("label", { className: "btn btn-sm btn-secondary" },
+                    react_1.default.createElement("i", { className: "fas fa-upload" }),
+                    " Upload Custom Theme",
+                    react_1.default.createElement("input", { type: "file", accept: ".theme", style: { display: "none" }, onChange: handleUploadTheme }))))));
+}
+function SpacingInput(props) {
+    return (react_1.default.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', width: '100%' } },
+        react_1.default.createElement("div", null, "Top"),
+        react_1.default.createElement("div", null, "Bottom"),
+        react_1.default.createElement("div", null, "Left"),
+        react_1.default.createElement("div", null, "Right"),
+        react_1.default.createElement(PixelsInput, { value: props.value.top, onChange: (top) => props.onChange({ ...props.value, top: top }) }),
+        react_1.default.createElement(PixelsInput, { value: props.value.bottom, onChange: (bottom) => props.onChange({ ...props.value, bottom: bottom }) }),
+        react_1.default.createElement(PixelsInput, { value: props.value.left, onChange: (left) => props.onChange({ ...props.value, left: left }) }),
+        react_1.default.createElement(PixelsInput, { value: props.value.right, onChange: (right) => props.onChange({ ...props.value, right: right }) })));
+}
+function PixelsInput(props) {
+    const options = [
+        0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 25, 30, 35, 40
+    ];
+    return (react_1.default.createElement("div", { className: "dropdown" },
+        react_1.default.createElement("a", { className: "dropdown-toggle", type: "button", id: "pixelsInputDropdown", "data-bs-toggle": "dropdown", "aria-expanded": "false" }, props.value === null ? (props.defaultLabel || "Default") : `${props.value}px`),
+        react_1.default.createElement("ul", { className: "dropdown-menu", "aria-labelledby": "pixelsInputDropdown" },
+            props.allowDefault && (react_1.default.createElement("li", { key: "default" },
+                react_1.default.createElement("a", { className: "dropdown-item", href: "#", onClick: (e) => {
+                        e.preventDefault();
+                        props.onChange(null);
+                    } }, props.defaultLabel || "Default"))),
+            options.map(option => (react_1.default.createElement("li", { key: option },
+                react_1.default.createElement("a", { className: "dropdown-item", href: "#", onClick: (e) => {
+                        e.preventDefault();
+                        props.onChange(option);
+                    } },
+                    option,
+                    "px")))))));
 }
 function WidthSelector(props) {
     return (react_1.default.createElement(bootstrap_1.Select, { value: props.value, onChange: props.onChange, nullLabel: "N/A", options: [

package/lib/dashboards/ServerDashboardDataSource.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="jquery" />
 import { DataSource, Expr } from "@mwater/expressions";
 import { JsonQLFilter } from "../JsonQLFilter";
 import { QuickfiltersDataSource } from "../quickfilter/QuickfiltersDataSource";
@@ -42,7 +41,7 @@ declare class ServerQuickfilterDataSource implements QuickfiltersDataSource {
 declare class ServerWidgetDataSource {
     options: ServerWidgetDataSourceOptions;
     constructor(options: ServerWidgetDataSourceOptions);
-    getData(design: any, filters: JsonQLFilter[], callback: (error: any, data?: any) => void): JQuery.jqXHR<any>;
+    getData(design: any, filters: JsonQLFilter[], callback: (error: any, data?: any) => void): void;
     getMapDataSource(design: any): ServerWidgetMapDataSource;
     getImageUrl(imageId: string, height?: number): string;
 }

package/lib/dashboards/ServerDashboardDataSource.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (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"));
@@ -55,18 +54,23 @@ class ServerQuickfilterDataSource {
             const seconds = Math.floor((new Date().getTime() - cacheExpiry) / 1000);
             headers["Cache-Control"] = `max-age=${seconds}`;
         }
-        jquery_1.default.ajax({
-            dataType: "json",
+        fetch(url, {
             method: "GET",
-            url,
-            headers
+            headers: headers
+        })
+            .then(async (response) => {
+            if (!response.ok) {
+                const text = await response.text();
+                throw new Error(text);
+            }
+            return response.json();
         })
-            .done((data) => {
+            .then(data => {
             return callback(null, data);
         })
-            .fail((xhr) => {
-            console.log(xhr.responseText);
-            return callback(new Error(xhr.responseText));
+            .catch(error => {
+            console.log(error.message);
+            return callback(error);
         });
     }
 }
@@ -102,18 +106,23 @@ class ServerWidgetDataSource {
             const seconds = Math.floor((new Date().getTime() - cacheExpiry) / 1000);
             headers["Cache-Control"] = `max-age=${seconds}`;
         }
-        return jquery_1.default.ajax({
-            dataType: "json",
+        fetch(url, {
             method: "GET",
-            url,
-            headers
+            headers: headers
+        })
+            .then(async (response) => {
+            if (!response.ok) {
+                const text = await response.text();
+                throw new Error(text);
+            }
+            return response.json();
         })
-            .done((data) => {
+            .then(data => {
             return callback(null, data);
         })
-            .fail((xhr) => {
-            console.log(xhr.responseText);
-            return callback(new Error(xhr.responseText));
+            .catch(error => {
+            console.log(error.message);
+            return callback(error);
         });
     }
     // For map widgets, the following is required
@@ -170,18 +179,23 @@ class ServerWidgetMapDataSource {
             const seconds = Math.floor((new Date().getTime() - cacheExpiry) / 1000);
             headers["Cache-Control"] = `max-age=${seconds}`;
         }
-        jquery_1.default.ajax({
-            dataType: "json",
+        fetch(url, {
             method: "GET",
-            url,
             headers
         })
-            .done((data) => {
+            .then(async (response) => {
+            if (!response.ok) {
+                const text = await response.text();
+                throw new Error(text);
+            }
+            return response.json();
+        })
+            .then(data => {
             return callback(null, data);
         })
-            .fail((xhr) => {
-            console.log(xhr.responseText);
-            return callback(new Error(xhr.responseText));
+            .catch(error => {
+            console.log(error.message);
+            return callback(error);
         });
     }
     getQuickfiltersDataSource() {
@@ -356,18 +370,23 @@ class ServerWidgetLayerPopupWidgetDataSource {
             const seconds = Math.floor((new Date().getTime() - cacheExpiry) / 1000);
             headers["Cache-Control"] = `max-age=${seconds}`;
         }
-        jquery_1.default.ajax({
-            dataType: "json",
+        fetch(url, {
             method: "GET",
-            url,
-            headers
+            headers: headers
         })
-            .done((data) => {
-            return callback(null, data);
+            .then(async (response) => {
+            if (!response.ok) {
+                const text = await response.text();
+                throw new Error(text);
+            }
+            return response.json();
+        })
+            .then(data => {
+            callback(null, data);
         })
-            .fail((xhr) => {
-            console.log(xhr.responseText);
-            return callback(new Error(xhr.responseText));
+            .catch(error => {
+            console.log(error.message);
+            callback(error);
         });
     }
     /** For map widgets, the following is required */

package/lib/dashboards/WidgetComponent.d.ts

@@ -2,7 +2,7 @@
 import { Schema, DataSource } from "@mwater/expressions";
 import { JsonQLFilter } from "../JsonQLFilter";
 import { WidgetScope } from "../WidgetScope";
-import DashboardDataSource from "./DashboardDataSource";
+import { WidgetDataSource } from "../widgets/WidgetDataSource";
 /**
  * Component which renders a widget and ensures that props do not change
  * unnecessarily.
@@ -18,8 +18,8 @@ export declare function WidgetComponent(props: {
     onDesignChange?: {
         (design: object): void;
     } | null;
-    /** Data source for dashboard */
-    dashboardDataSource: DashboardDataSource;
+    /** Data source for widget */
+    widgetDataSource: WidgetDataSource;
     /** schema to use **/
     schema: Schema;
     /** data source to use. Only used when designing, for display uses widgetDataSource **/

package/lib/dashboards/WidgetComponent.js

@@ -11,10 +11,6 @@ const WidgetFactory_1 = __importDefault(require("../widgets/WidgetFactory"));
  * unnecessarily.
  */
 function WidgetComponent(props) {
-    // Get and stabilize widget data source
-    // TODO!!! There is a global problem with DashboardDataSources being re-created on each render.
-    // TODO!!! This now only uses the type of the dashboard data source. They should be more stable in the future.
-    const widgetDataSource = (0, react_1.useMemo)(() => props.dashboardDataSource.getWidgetDataSource(props.type, props.id), [props.dashboardDataSource.constructor, props.type, props.id, props.schema, props.dataSource, props.refreshKey]);
     const widget = WidgetFactory_1.default.createWidget(props.type);
     // Stabilize functions
     const onDesignChange = useStabilizeFunction(props.onDesignChange);
@@ -27,7 +23,7 @@ function WidgetComponent(props) {
     return widget.createViewElement({
         schema: props.schema,
         dataSource: props.dataSource,
-        widgetDataSource,
+        widgetDataSource: props.widgetDataSource,
         design: props.design,
         scope,
         filters,
@@ -40,7 +36,8 @@ function WidgetComponent(props) {
         namedStrings: props.namedStrings,
         tocEntries: props.tocEntries,
         onScrollToTOCEntry: props.onScrollToTOCEntry,
-        widgetRef
+        widgetRef,
+        refreshKey: props.refreshKey
     });
 }
 exports.WidgetComponent = WidgetComponent;

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;