@mwater/visualization 5.4.1 → 5.4.3

package/lib/dashboards/DashboardComponent.js

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const UndoStack_1 = __importDefault(require("../UndoStack"));
 const DashboardUtils = __importStar(require("./DashboardUtils"));
 const DashboardViewComponent_1 = __importDefault(require("./DashboardViewComponent"));
@@ -39,6 +38,7 @@ const LayoutManager_1 = __importDefault(require("../layouts/LayoutManager"));
 const LayoutOptionsComponent_1 = require("./LayoutOptionsComponent");
 const ModalWindowComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalWindowComponent"));
 const layoutOptions_1 = require("./layoutOptions");
+const __1 = require("..");
 const expressions_ui_1 = require("@mwater/expressions-ui");
 /** Dashboard component that includes an action bar at the top
  * Manages undo stack and quickfilter value
@@ -50,6 +50,15 @@ class DashboardComponent extends react_1.default.Component {
     constructor(props) {
         super(props);
         const layoutOptions = (0, layoutOptions_1.getLayoutOptions)(props.design);
+        // Prefer the T.en locale if available when loading the dashboard
+        let initialLocale = props.design.locale || "en";
+        const otherLocales = props.design.otherLocales || [];
+        if (props.preferredLocale && otherLocales.includes(props.preferredLocale)) {
+            initialLocale = props.preferredLocale;
+        }
+        else if (otherLocales.includes(T.locale)) {
+            initialLocale = T.locale;
+        }
         this.state = {
             undoStack: new UndoStack_1.default().push(props.design),
             quickfiltersValues: props.quickfiltersValues || null,
@@ -57,7 +66,8 @@ class DashboardComponent extends react_1.default.Component {
                 props.onDesignChange != null,
             layoutOptionsOpen: false,
             hideQuickfilters: layoutOptions.hideQuickfiltersWidth != null && layoutOptions.hideQuickfiltersWidth > document.body.clientWidth,
-            refreshKey: 1
+            refreshKey: 1,
+            locale: initialLocale
         };
         if (props.onEditModeChange) {
             props.onEditModeChange(this.state.editing);
@@ -141,58 +151,108 @@ class DashboardComponent extends react_1.default.Component {
         compiledFilters = compiledFilters.concat(this.props.filters || []);
         return compiledFilters;
     }
+    /** Translate function to use for display. Do not use when editing. */
+    translate = (input) => {
+        const designLocale = this.props.design.locale ?? "en";
+        const displayLocale = this.state.editing ? designLocale : (this.state.locale ?? designLocale ?? "en");
+        if (designLocale === displayLocale) {
+            return input;
+        }
+        return this.props.design.translations?.[displayLocale]?.[input] ?? input;
+    };
     renderEditingSwitch() {
-        return R("a", {
-            key: "edit",
-            className: `btn btn-primary btn-sm ${this.state.editing ? "active" : ""}`,
-            onClick: this.handleToggleEditing
-        }, R("span", { className: "fas fa-pencil-alt" }), this.state.editing ? T ` Editing` : T ` Edit`);
+        return (react_1.default.createElement("a", { key: "edit", className: `btn btn-primary btn-sm ${this.state.editing ? "active" : ""}`, onClick: this.handleToggleEditing },
+            react_1.default.createElement("span", { className: "fas fa-pencil-alt" }),
+            " ",
+            this.state.editing ? T `Editing` : T `Edit`));
     }
     renderStyle() {
-        return R("button", { type: "button", key: "style", className: "btn btn-link btn-sm", onClick: this.handleOpenLayoutOptions }, R("span", { className: "fa fa-mobile" }), R("span", { className: "hide-600px" }, T ` Layout `));
+        return (react_1.default.createElement("button", { type: "button", key: "style", className: "btn btn-link btn-sm", onClick: this.handleOpenLayoutOptions },
+            react_1.default.createElement("span", { className: "fa fa-mobile" }),
+            react_1.default.createElement("span", { className: "hide-600px" },
+                " ",
+                T `Layout`)));
     }
     renderActionLinks() {
-        return R("div", null, this.state.editing
-            ? [
-                R("a", {
-                    key: "undo",
-                    className: `btn btn-link btn-sm ${!this.state.undoStack.canUndo() ? "disabled" : ""}`,
-                    onClick: this.handleUndo
-                }, R("span", { className: "fas fa-caret-left" }), R("span", { className: "hide-600px" }, T ` Undo`)),
-                " ",
-                R("a", {
-                    key: "redo",
-                    className: `btn btn-link btn-sm ${!this.state.undoStack.canRedo() ? "disabled" : ""}`,
-                    onClick: this.handleRedo
-                }, R("span", { className: "fas fa-caret-right" }), R("span", { className: "hide-600px" }, T ` Redo`))
-            ]
-            : undefined, R("a", { key: "print", className: "btn btn-link btn-sm", onClick: this.handlePrint }, R("span", { className: "fas fa-print" }), R("span", { className: "hide-600px" }, T ` Print`)), R("a", { key: "refresh", className: "btn btn-link btn-sm", onClick: this.handleRefreshData }, R("span", { className: "fas fa-sync" }), R("span", { className: "hide-600px" }, T ` Refresh`)), this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
-            ? R("a", { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters }, R("span", { className: "fa fa-filter" }), R("span", { className: "hide-600px" }, T ` Show Quickfilters`))
-            : undefined, 
-        // R 'a', key: "export", className: "btn btn-link btn-sm", onClick: @handleSaveDesignFile,
-        //   R('span', className: "glyphicon glyphicon-download-alt")
-        //   " Export"
-        this.state.editing
-            ? R("a", { key: "settings", className: "btn btn-link btn-sm", onClick: this.handleSettings }, R("span", { className: "fas fa-cog" }), R("span", { className: "hide-600px" }, T ` Settings`))
-            : undefined, this.state.editing ? this.renderStyle() : undefined, this.props.extraTitleButtonsElem, this.props.onDesignChange != null ? this.renderEditingSwitch() : undefined);
+        return (react_1.default.createElement("div", null,
+            this.state.editing
+                ? [
+                    react_1.default.createElement("a", { key: "undo", className: `btn btn-link btn-sm ${!this.state.undoStack.canUndo() ? "disabled" : ""}`, onClick: this.handleUndo },
+                        react_1.default.createElement("span", { className: "fas fa-caret-left" }),
+                        react_1.default.createElement("span", { className: "hide-600px" },
+                            " ",
+                            T `Undo`)),
+                    " ",
+                    react_1.default.createElement("a", { key: "redo", className: `btn btn-link btn-sm ${!this.state.undoStack.canRedo() ? "disabled" : ""}`, onClick: this.handleRedo },
+                        react_1.default.createElement("span", { className: "fas fa-caret-right" }),
+                        react_1.default.createElement("span", { className: "hide-600px" },
+                            " ",
+                            T `Redo`))
+                ]
+                : undefined,
+            !this.state.editing && this.props.design.otherLocales && this.props.design.otherLocales.length > 0
+                ? react_1.default.createElement("div", { key: "translations", className: "dropdown d-inline-block" },
+                    react_1.default.createElement("a", { className: "btn btn-link btn-sm dropdown-toggle", "data-bs-toggle": "dropdown" },
+                        react_1.default.createElement("span", { className: "fal fa-globe" }),
+                        " ",
+                        this.state.locale),
+                    react_1.default.createElement("ul", { className: "dropdown-menu dropdown-menu-end" }, [this.props.design.locale || "en", ...this.props.design.otherLocales].map(locale => react_1.default.createElement("li", { key: locale },
+                        react_1.default.createElement("a", { className: "dropdown-item", onClick: () => this.setState({ locale: locale }) }, __1.languages.find(l => l.code === locale)?.name || locale)))))
+                : undefined,
+            react_1.default.createElement("a", { key: "print", className: "btn btn-link btn-sm", onClick: this.handlePrint },
+                react_1.default.createElement("span", { className: "fas fa-print" }),
+                react_1.default.createElement("span", { className: "hide-600px" },
+                    " ",
+                    T `Print`)),
+            react_1.default.createElement("a", { key: "refresh", className: "btn btn-link btn-sm", onClick: this.handleRefreshData },
+                react_1.default.createElement("span", { className: "fas fa-sync" }),
+                react_1.default.createElement("span", { className: "hide-600px" },
+                    " ",
+                    T `Refresh`)),
+            this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
+                ? react_1.default.createElement("a", { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters },
+                    react_1.default.createElement("span", { className: "fa fa-filter" }),
+                    react_1.default.createElement("span", { className: "hide-600px" },
+                        " ",
+                        T `Show Quickfilters`))
+                : undefined,
+            this.state.editing
+                ? react_1.default.createElement("a", { key: "settings", className: "btn btn-link btn-sm", onClick: this.handleSettings },
+                    react_1.default.createElement("span", { className: "fas fa-cog" }),
+                    react_1.default.createElement("span", { className: "hide-600px" },
+                        " ",
+                        T `Settings`))
+                : undefined,
+            this.state.editing ? this.renderStyle() : undefined,
+            this.props.extraTitleButtonsElem,
+            this.props.onDesignChange != null ? this.renderEditingSwitch() : undefined));
     }
     renderTitleBar() {
-        return R("div", { style: { height: 40, padding: 4 } }, R("div", { style: { float: "right" } }, this.renderActionLinks()), this.props.titleElem);
+        return (react_1.default.createElement("div", { style: { height: 40, padding: 4 } },
+            react_1.default.createElement("div", { style: { float: "right" } }, this.renderActionLinks()),
+            this.props.titleElem));
     }
     renderQuickfilter() {
-        return R(QuickfiltersComponent_1.default, {
-            design: this.props.design.quickfilters || [],
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            quickfiltersDataSource: this.props.dashboardDataSource.getQuickfiltersDataSource(),
-            values: this.state.quickfiltersValues || undefined,
-            onValuesChange: (values) => this.setState({ quickfiltersValues: values }),
-            locks: this.props.quickfilterLocks,
-            filters: this.getCompiledFilters(),
-            hideTopBorder: this.props.hideTitleBar,
+        return react_1.default.createElement(QuickfiltersComponent_1.default, { design: this.props.design.quickfilters || [], schema: this.props.schema, dataSource: this.props.dataSource, quickfiltersDataSource: this.props.dashboardDataSource.getQuickfiltersDataSource(), values: this.state.quickfiltersValues || undefined, onValuesChange: (values) => this.setState({ quickfiltersValues: values }), locks: this.props.quickfilterLocks, filters: this.getCompiledFilters(), hideTopBorder: this.props.hideTitleBar, 
             // Don't hide if title bar is hidden as it can't be shown again
-            onHide: () => !this.props.hideTitleBar ? this.setState({ hideQuickfilters: true }) : undefined
-        });
+            onHide: () => this.setState({ hideQuickfilters: true }), translate: this.translate });
+    }
+    renderFloatingShowQuickfiltersButton() {
+        // Only show if:
+        // 1. Quick filters exist
+        // 2. Quick filters are hidden
+        // 3. Title bar is hidden (since otherwise button is in title bar)
+        if (!this.props.design.quickfilters?.length || !this.state.hideQuickfilters || !this.props.hideTitleBar) {
+            return null;
+        }
+        return (react_1.default.createElement("div", { style: {
+                position: "absolute",
+                top: 5,
+                right: 20,
+                zIndex: 1000
+            } },
+            react_1.default.createElement("button", { className: "btn btn-link btn-sm", onClick: () => this.setState({ hideQuickfilters: false }) },
+                react_1.default.createElement("i", { className: "fa fa-angle-double-down" }))));
     }
     refDashboardView = (el) => {
         this.dashboardView = el;
@@ -201,33 +261,12 @@ class DashboardComponent extends react_1.default.Component {
         let filters = this.props.filters || [];
         // Compile quickfilters
         filters = filters.concat(new QuickfilterCompiler_1.default(this.props.schema).compile(this.props.design.quickfilters || [], this.state.quickfiltersValues, this.props.quickfilterLocks));
-        const dashboardView = R(DashboardViewComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            dashboardDataSource: this.props.dashboardDataSource,
-            ref: this.refDashboardView,
-            design: this.props.design,
-            onDesignChange: this.state.editing ? this.props.onDesignChange : undefined,
-            filters,
-            onRowClick: this.props.onRowClick,
-            namedStrings: this.props.namedStrings,
-            hideScopes: this.state.hideQuickfilters,
-            refreshKey: this.state.refreshKey
-        });
-        const readonlyDashboardView = R(DashboardViewComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            dashboardDataSource: this.props.dashboardDataSource,
-            ref: this.refDashboardView,
-            design: this.props.design,
-            filters,
-            onRowClick: this.props.onRowClick,
-            namedStrings: this.props.namedStrings,
-            hideScopes: this.state.hideQuickfilters
-        });
+        const displayLocale = this.state.editing ? this.props.design.locale || "en" : this.state.locale;
+        const dashboardView = react_1.default.createElement(DashboardViewComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, dashboardDataSource: this.props.dashboardDataSource, ref: this.refDashboardView, design: this.props.design, onDesignChange: this.state.editing ? this.props.onDesignChange : undefined, filters: filters, onRowClick: this.props.onRowClick, namedStrings: this.props.namedStrings, hideScopes: this.state.hideQuickfilters, refreshKey: this.state.refreshKey, locale: displayLocale });
+        const readonlyDashboardView = react_1.default.createElement(DashboardViewComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, dashboardDataSource: this.props.dashboardDataSource, ref: this.refDashboardView, design: this.props.design, filters: filters, onRowClick: this.props.onRowClick, namedStrings: this.props.namedStrings, hideScopes: this.state.hideQuickfilters, locale: displayLocale });
         // Pass active tables down to table select components so they can present a shorter list
         return react_1.default.createElement(expressions_ui_1.ActiveTablesContext.Provider, { value: DashboardUtils.getFilterableTables(this.props.design, this.props.schema) },
-            react_1.default.createElement(expressions_ui_1.LocaleContext.Provider, { value: this.props.design.locale ?? "en" },
+            react_1.default.createElement(expressions_ui_1.LocaleContext.Provider, { value: displayLocale },
                 react_1.default.createElement("div", { style: {
                         display: "grid",
                         gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
@@ -236,6 +275,7 @@ class DashboardComponent extends react_1.default.Component {
                     !this.props.hideTitleBar ? this.renderTitleBar() : undefined,
                     react_1.default.createElement("div", null, !this.state.hideQuickfilters ? this.renderQuickfilter() : undefined),
                     dashboardView,
+                    this.renderFloatingShowQuickfiltersButton(),
                     this.props.onDesignChange != null && (react_1.default.createElement(SettingsModalComponent_1.default, { onDesignChange: this.handleDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, ref: (c) => {
                             this.settings = c;
                         } })),

package/lib/dashboards/DashboardDesign.d.ts

@@ -2,13 +2,14 @@ import { Quickfilter } from "../quickfilter/Quickfilter";
 import { Expr } from "@mwater/expressions";
 import { BlocksLayoutOptions, DashboardTheme } from "./layoutOptions";
 import { GlobalFilter } from "../GlobalFilter";
+import { LayoutBlock } from "../layouts/blocks/blockUtils";
 /** Dashboard design
  * Each understands enough of the dashboard design to create widgets.
  * Widget refers to the widget itself, where *item* refers also to the layout and id that it has in the dashboard.
  */
 export interface DashboardDesign {
     /** dashboard items. Format depends on layout of dashboard. See layouts/.../README.md */
-    items: any;
+    items: LayoutBlock;
     /** array of quick filters (user-selectable filters). See quickfilter/README.md */
     quickfilters?: Quickfilter[];
     /** layout engine to use (`blocks` is new default)  */
@@ -21,8 +22,16 @@ export interface DashboardDesign {
     filters?: {
         [tableId: string]: Expr;
     };
-    /** optional locale (e.g. "fr") to use for display */
+    /** optional locale (e.g. "fr") to use for display. Defaults to "en" */
     locale?: string;
+    /** Other locales that the dashboard is available in. */
+    otherLocales?: string[];
+    /** Translation map for dashboard. Maps locale to translation map. Does not include default locale. */
+    translations?: {
+        [locale: string]: {
+            [key: string]: string;
+        };
+    };
     /** true to enable implicit filtering (see ImplicitFilterBuilder). Defaults to true for older dashboards. */
     implicitFiltersEnabled?: boolean;
     /** array of global filters. See below. */

package/lib/dashboards/DashboardUtils.d.ts

@@ -1,7 +1,12 @@
 import { Schema } from "@mwater/expressions";
 import { JsonQLFilter } from "..";
+import LayoutManager from "../layouts/LayoutManager";
 import { DashboardDesign } from "./DashboardDesign";
 /** Gets filterable tables for a dashboard */
 export declare function getFilterableTables(design: DashboardDesign, schema: Schema): string[];
+/** Gets all translatable strings from a dashboard */
+export declare function getTranslatableStringsFromDashboard(design: DashboardDesign, schema: Schema): string[];
+/** Gets translatable strings from a layout manager and items */
+export declare function getTranslatableStringsFromLayoutManager(layoutManager: LayoutManager, items: any, schema: Schema): string[];
 /** Get filters from props filters combined with dashboard filters */
 export declare function getCompiledFilters(design: DashboardDesign, schema: Schema, filterableTables: string[]): JsonQLFilter[];

package/lib/dashboards/DashboardUtils.js

@@ -4,6 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFilterableTables = getFilterableTables;
+exports.getTranslatableStringsFromDashboard = getTranslatableStringsFromDashboard;
+exports.getTranslatableStringsFromLayoutManager = getTranslatableStringsFromLayoutManager;
 exports.getCompiledFilters = getCompiledFilters;
 const lodash_1 = __importDefault(require("lodash"));
 const expressions_1 = require("@mwater/expressions");
@@ -24,6 +26,34 @@ function getFilterableTables(design, schema) {
     filterableTables = lodash_1.default.filter(lodash_1.default.uniq(filterableTables), (table) => schema.getTable(table));
     return filterableTables;
 }
+/** Gets all translatable strings from a dashboard */
+function getTranslatableStringsFromDashboard(design, schema) {
+    const layoutManager = LayoutManager_1.default.createLayoutManager(design.layout);
+    // Get translatable strings from layout manager
+    let strings = getTranslatableStringsFromLayoutManager(layoutManager, design.items, schema);
+    // Get translatable strings from quickfilters
+    if (design.quickfilters) {
+        for (let quickfilter of design.quickfilters) {
+            if (quickfilter.label) {
+                strings.push(quickfilter.label);
+            }
+        }
+    }
+    // Remove duplicates
+    return lodash_1.default.uniq(strings);
+}
+/** Gets translatable strings from a layout manager and items */
+function getTranslatableStringsFromLayoutManager(layoutManager, items, schema) {
+    let strings = [];
+    for (let widgetItem of layoutManager.getAllWidgets(items)) {
+        // Create widget
+        const widget = WidgetFactory_1.default.createWidget(widgetItem.type);
+        // Get translatable strings
+        strings = strings.concat(widget.getTranslatableStrings(widgetItem.design, schema));
+    }
+    // Remove duplicates
+    return lodash_1.default.uniq(strings);
+}
 /** Get filters from props filters combined with dashboard filters */
 function getCompiledFilters(design, schema, filterableTables) {
     let expr, jsonql, table;

package/lib/dashboards/DashboardViewComponent.d.ts

@@ -30,6 +30,8 @@ export interface DashboardViewComponentProps {
     printMode?: boolean;
     /** Change to force a refresh */
     refreshKey?: any;
+    /** Locale to use for display. Defaults to dashboard design locale. */
+    locale?: string;
 }
 export interface DashboardViewComponentHandle {
     print: () => Promise<void>;

package/lib/dashboards/DashboardViewComponent.js

@@ -154,6 +154,17 @@ const DashboardViewComponent = react_1.default.forwardRef((props, ref) => {
     const renderScopes = () => {
         return (react_1.default.createElement(WidgetScopesViewComponent_1.default, { scopes: widgetScoper.getScopes(), onRemoveScope: handleRemoveScope }));
     };
+    /** Locale that the dashboard design is in */
+    const designLocale = props.design.locale ?? "en";
+    /** Locale to display the dashboard in. If editing, always use design locale. */
+    const displayLocale = props.onDesignChange != null ? designLocale : (props.locale ?? designLocale ?? "en");
+    /** Translate function to use for display. Do not use when editing. */
+    const translate = (0, react_1.useCallback)((input) => {
+        if (designLocale === displayLocale) {
+            return input;
+        }
+        return props.design.translations?.[displayLocale]?.[input] ?? input;
+    }, [props.design.translations, designLocale, displayLocale]);
     const compRef = (widgetId, comp) => {
         return (widgetComps.current[widgetId] = comp);
     };
@@ -180,9 +191,11 @@ const DashboardViewComponent = react_1.default.forwardRef((props, ref) => {
             const implicitFilterBuilder = new ImplicitFilterBuilder_1.default(props.schema);
             filters = implicitFilterBuilder.extendFilters(filterableTables, filters);
         }
-        const widgetElem = (react_1.default.createElement(WidgetComponent_1.WidgetComponent, { key: options.id, id: options.id, type: options.type, schema: props.schema, dataSource: props.dataSource, widgetDataSource: widgetDataSource, design: options.design, scope: widgetScoper.getScope(options.id), filters: filters, onScopeChange: handleScopeChange.bind(null, options.id), onDesignChange: options.onDesignChange, width: options.width, height: options.height, onRowClick: props.onRowClick, namedStrings: props.namedStrings, tocEntries: tocEntries, onScrollToTOCEntry: handleScrollToTOCEntry, 
+        const widgetElem = (react_1.default.createElement(WidgetComponent_1.WidgetComponent, { key: options.id, type: options.type, schema: props.schema, dataSource: props.dataSource, widgetDataSource: widgetDataSource, design: options.design, scope: widgetScoper.getScope(options.id), filters: filters, onScopeChange: handleScopeChange.bind(null, options.id), onDesignChange: options.onDesignChange, width: options.width, height: options.height, onRowClick: props.onRowClick, namedStrings: props.namedStrings, tocEntries: tocEntries, onScrollToTOCEntry: handleScrollToTOCEntry, 
             // Keep references to widget elements
-            widgetRef: compRef.bind(null, options.id), refreshKey: props.refreshKey }));
+            widgetRef: compRef.bind(null, options.id), refreshKey: props.refreshKey, 
+            // Use locale from props, design, or default to en
+            locale: displayLocale, translate: translate }));
         return widgetElem;
     };
     const style = {
@@ -195,7 +208,7 @@ const DashboardViewComponent = react_1.default.forwardRef((props, ref) => {
         style.overflowX = "auto";
     }
     // Render widget container
-    return (react_1.default.createElement(expressions_ui_1.LocaleContext.Provider, { value: props.design.locale ?? "en" },
+    return (react_1.default.createElement(expressions_ui_1.LocaleContext.Provider, { value: displayLocale },
         react_1.default.createElement("div", { style: style },
             !props.hideScopes ? renderScopes() : undefined,
             layoutManager.renderLayout({

package/lib/dashboards/ServerDashboardDataSource.js

@@ -273,7 +273,8 @@ class ServerWidgetLayerDataSource {
             throw new Error("Error getting tiles token");
         }
         const { token, expires } = await response.json();
-        return { url: this.options.apiUrl + `vector_tiles/tiles/{z}/{x}/{y}?token=${token}`, expires };
+        // Client isn't necessary, but allows tracking of usage easier
+        return { url: this.options.apiUrl + `vector_tiles/tiles/{z}/{x}/{y}?token=${token}&client=${this.options.client ?? ""}`, expires };
     }
     // Gets widget data source for a popup widget
     getPopupWidgetDataSource(design, widgetId) {

package/lib/dashboards/SettingsModalComponent.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
 import { DashboardDesign } from "./DashboardDesign";
 export interface SettingsModalComponentProps {
-    onDesignChange: any;
+    onDesignChange: (design: DashboardDesign) => void;
     schema: Schema;
     dataSource: DataSource;
 }