@mwater/visualization 5.1.0 → 5.3.0

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,12 +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" },
+    return (react_1.default.createElement("div", { className: "list-group" },
         renderStyleItem("default"),
         renderStyleItem("greybg"),
-        renderStyleItem("story")));
+        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/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 {};

package/lib/dashboards/SettingsModalComponent.js

@@ -26,7 +26,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
@@ -38,9 +37,9 @@ const DashboardUtils = __importStar(require("./DashboardUtils"));
 const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
 const QuickfiltersDesignComponent_1 = __importDefault(require("../quickfilter/QuickfiltersDesignComponent"));
 const FiltersDesignerComponent_1 = __importDefault(require("../FiltersDesignerComponent"));
+const MWaterContextComponent_1 = require("../MWaterContextComponent");
 // Popup with settings for dashboard
 class SettingsModalComponent extends react_1.default.Component {
-    static contextTypes = { globalFiltersElementFactory: prop_types_1.default.func };
     constructor(props) {
         super(props);
         this.state = {
@@ -81,42 +80,29 @@ class SettingsModalComponent extends react_1.default.Component {
                 label: language.en + " (" + language.name + ")"
             };
         });
-        return R(ActionCancelModalComponent_1.default, {
-            size: "large",
-            onCancel: this.handleCancel,
-            onAction: this.handleSave
-        }, R("div", { style: { paddingBottom: 200 } }, R("h4", null, "Quick Filters"), R("div", { className: "text-muted" }, "Quick filters are shown to the user as a dropdown at the top of the dashboard and can be used to filter data of widgets."), filterableTables.length > 0
-            ? R(QuickfiltersDesignComponent_1.default, {
-                design: this.state.design.quickfilters || [],
-                onDesignChange: (design) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { quickfilters: { $set: design } })),
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                tables: filterableTables
-            })
-            : "Nothing to quickfilter. Add widgets to the dashboard", R("h4", { style: { paddingTop: 10 } }, "Filters"), R("div", { className: "text-muted" }, "Filters are built in to the dashboard and cannot be changed by viewers of the dashboard."), filterableTables.length > 0
-            ? R(FiltersDesignerComponent_1.default, {
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                filters: this.state.design.filters,
-                onFiltersChange: this.handleFiltersChange,
-                filterableTables
-            })
-            : "Nothing to filter. Add widgets to the dashboard", this.context.globalFiltersElementFactory
-            ? R("div", null, R("h4", { style: { paddingTop: 10 } }, "Global Filters"), this.context.globalFiltersElementFactory({
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                filterableTables,
-                globalFilters: this.state.design.globalFilters || [],
-                onChange: this.handleGlobalFiltersChange
-            }))
-            : undefined, R("h4", { style: { paddingTop: 10 } }, "Language"), R("div", { className: "text-muted" }, "Controls the preferred language of widgets and uses specified language when available"), R(react_select_1.default, {
-            value: lodash_1.default.findWhere(localeOptions, { value: this.state.design.locale || "en" }) || null,
-            options: localeOptions,
-            onChange: (locale) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { locale: { $set: locale.value } }))
-        }), R("h4", { style: { paddingTop: 10 } }, "Advanced"), R(ui.Checkbox, {
-            value: this.state.design.implicitFiltersEnabled != null ? this.state.design.implicitFiltersEnabled : true,
-            onChange: (value) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { implicitFiltersEnabled: { $set: value } }))
-        }, "Enable Implicit Filtering (leave unchecked for new dashboards)")));
+        return (react_1.default.createElement(ActionCancelModalComponent_1.default, { size: "large", onCancel: this.handleCancel, onAction: this.handleSave },
+            react_1.default.createElement("div", { style: { paddingBottom: 200 } },
+                react_1.default.createElement("h4", null, "Quick Filters"),
+                react_1.default.createElement("div", { className: "text-muted" }, "Quick filters are shown to the user as a dropdown at the top of the dashboard and can be used to filter data of widgets."),
+                filterableTables.length > 0 ? (react_1.default.createElement(QuickfiltersDesignComponent_1.default, { design: this.state.design.quickfilters || [], onDesignChange: (design) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { quickfilters: { $set: design } })), schema: this.props.schema, dataSource: this.props.dataSource, tables: filterableTables })) : ("Nothing to quickfilter. Add widgets to the dashboard"),
+                react_1.default.createElement("h4", { style: { paddingTop: 10 } }, "Filters"),
+                react_1.default.createElement("div", { className: "text-muted" }, "Filters are built in to the dashboard and cannot be changed by viewers of the dashboard."),
+                filterableTables.length > 0 ? (react_1.default.createElement(FiltersDesignerComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, filters: this.state.design.filters, onFiltersChange: this.handleFiltersChange, filterableTables: filterableTables })) : ("Nothing to filter. Add widgets to the dashboard"),
+                react_1.default.createElement(MWaterContextComponent_1.GlobalFiltersElementFactoryContext.Consumer, null, globalFiltersElementFactory => globalFiltersElementFactory ? (react_1.default.createElement("div", null,
+                    react_1.default.createElement("h4", { style: { paddingTop: 10 } }, "Global Filters"),
+                    globalFiltersElementFactory({
+                        schema: this.props.schema,
+                        dataSource: this.props.dataSource,
+                        filterableTables,
+                        globalFilters: this.state.design.globalFilters || [],
+                        onChange: this.handleGlobalFiltersChange
+                    }))) : undefined),
+                react_1.default.createElement("h4", { style: { paddingTop: 10 } }, "Language"),
+                react_1.default.createElement("div", { className: "text-muted" }, "Controls the preferred language of widgets and uses specified language when available"),
+                react_1.default.createElement(react_select_1.default, { value: lodash_1.default.findWhere(localeOptions, { value: this.state.design.locale || "en" }) || null, options: localeOptions, onChange: (locale) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { locale: { $set: locale.value } })) }),
+                this.state.design.implicitFiltersEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("h4", { style: { paddingTop: 10 } }, "Advanced"),
+                    react_1.default.createElement(ui.Checkbox, { value: this.state.design.implicitFiltersEnabled != null ? this.state.design.implicitFiltersEnabled : true, onChange: (value) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { implicitFiltersEnabled: { $set: value } })) }, "Enable Implicit Filtering (leave unchecked for new dashboards)"))))));
     }
 }
 exports.default = SettingsModalComponent;

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;