@mwater/visualization 5.4.2 → 5.4.4

package/lib/dashboards/DashboardComponent.d.ts

@@ -2,7 +2,6 @@ import React, { ReactNode } from "react";
 import { DataSource, Schema } from "@mwater/expressions";
 import UndoStack from "../UndoStack";
 import { DashboardViewComponentHandle } from "./DashboardViewComponent";
-import QuickfiltersComponent from "../quickfilter/QuickfiltersComponent";
 import SettingsModalComponent from "./SettingsModalComponent";
 import { DashboardDesign } from "./DashboardDesign";
 import DashboardDataSource from "./DashboardDataSource";
@@ -78,25 +77,12 @@ export default class DashboardComponent extends React.Component<DashboardCompone
     getCompiledFilters(): JsonQLFilter[];
     /** Translate function to use for display. Do not use when editing. */
     translate: (input: string) => string;
-    renderEditingSwitch(): React.DetailedReactHTMLElement<{
-        key: string;
-        className: string;
-        onClick: () => void;
-    }, HTMLElement>;
-    renderStyle(): React.DetailedReactHTMLElement<{
-        type: string;
-        key: string;
-        className: string;
-        onClick: () => void;
-    }, HTMLElement>;
-    renderActionLinks(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-    renderTitleBar(): React.DetailedReactHTMLElement<{
-        style: {
-            height: number;
-            padding: number;
-        };
-    }, HTMLElement>;
-    renderQuickfilter(): React.CElement<import("../quickfilter/QuickfiltersComponent").QuickfiltersComponentProps, QuickfiltersComponent>;
+    renderEditingSwitch(): React.JSX.Element;
+    renderStyle(): React.JSX.Element;
+    renderActionLinks(): React.JSX.Element;
+    renderTitleBar(): React.JSX.Element;
+    renderQuickfilter(): React.JSX.Element;
+    renderFloatingShowQuickfiltersButton(): React.JSX.Element | null;
     refDashboardView: (el: any) => void;
     render(): React.JSX.Element;
 }

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"));
@@ -162,66 +161,98 @@ class DashboardComponent extends react_1.default.Component {
         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, !this.state.editing && this.props.design.otherLocales && this.props.design.otherLocales.length > 0
-            ? R("div", { key: "translations", className: "dropdown d-inline-block" }, R("a", {
-                className: "btn btn-link btn-sm dropdown-toggle",
-                "data-bs-toggle": "dropdown"
-            }, R("span", { className: "fal fa-globe" }), " ", this.state.locale), R("ul", { className: "dropdown-menu dropdown-menu-end" }, [this.props.design.locale || "en", ...this.props.design.otherLocales].map(locale => R("li", { key: locale }, R("a", {
-                className: "dropdown-item",
-                onClick: () => this.setState({ locale: locale })
-            }, __1.languages.find(l => l.code === locale)?.name || locale)))))
-            : 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,
-            translate: this.translate
-        });
+            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;
@@ -231,32 +262,8 @@ class DashboardComponent extends react_1.default.Component {
         // Compile quickfilters
         filters = filters.concat(new QuickfilterCompiler_1.default(this.props.schema).compile(this.props.design.quickfilters || [], this.state.quickfiltersValues, this.props.quickfilterLocks));
         const displayLocale = this.state.editing ? this.props.design.locale || "en" : this.state.locale;
-        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,
-            locale: displayLocale
-        });
-        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,
-            locale: displayLocale
-        });
+        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: displayLocale },
@@ -268,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/languages.js

@@ -816,7 +816,12 @@ exports.languages = [
     {
         "code": "tl",
         "name": "Tagalog",
-        "en": "Tagalog / Filipino"
+        "en": "Tagalog"
+    },
+    {
+        "code": "fil",
+        "name": "Filipino",
+        "en": "Filipino"
     },
     {
         "code": "tn",

package/lib/quickfilter/QuickfiltersDesignComponent.d.ts

@@ -11,36 +11,4 @@ export interface QuickfiltersDesignComponentProps {
     /** List of possible table ids to use */
     tables: string[];
 }
-export default class QuickfiltersDesignComponent extends React.Component<QuickfiltersDesignComponentProps> {
-    handleDesignChange: (design: any) => void;
-    isMergeable(design: any, index: any): boolean;
-    renderQuickfilter: (item: any, index: any) => React.CElement<any, QuickfilterDesignComponent>;
-    handleAdd: () => void;
-    handleRemove: (index: any) => void;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-}
-interface QuickfilterDesignComponentProps {
-    /** Design of a single quickfilters. See README.md */
-    design: Quickfilter;
-    onChange: (design: Quickfilter) => void;
-    onRemove: () => void;
-    /** True if can be merged */
-    mergeable?: boolean;
-    schema: Schema;
-    dataSource: DataSource;
-    tables: string[];
-}
-interface QuickfilterDesignComponentState {
-    table: any;
-}
-/** Single quickfilter design component */
-declare class QuickfilterDesignComponent extends React.Component<QuickfilterDesignComponentProps, QuickfilterDesignComponentState> {
-    constructor(props: any);
-    handleTableChange: (table: any) => void;
-    handleExprChange: (expr: any) => void;
-    handleLabelChange: (ev: any) => void;
-    handleMergedChange: (merged: any) => void;
-    handleMultiChange: (multi: any) => void;
-    render(): React.JSX.Element;
-}
-export {};
+export default function QuickfiltersDesignComponent(props: QuickfiltersDesignComponentProps): React.JSX.Element;

package/lib/quickfilter/QuickfiltersDesignComponent.js

@@ -26,32 +26,41 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = QuickfiltersDesignComponent;
 const lodash_1 = __importDefault(require("lodash"));
-const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
-const update_object_1 = __importDefault(require("update-object"));
+const react_1 = __importStar(require("react"));
+const immer_1 = require("immer");
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_1 = require("@mwater/expressions");
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const ListEditorComponent_1 = require("@mwater/react-library/lib/ListEditorComponent");
 // Displays quick filters and allows their value to be modified
-class QuickfiltersDesignComponent extends react_1.default.Component {
-    handleDesignChange = (design) => {
-        design = design.slice();
-        // Update merged, clearing if not mergeable
-        for (let index = 0, end = design.length, asc = 0 <= end; asc ? index < end : index > end; asc ? index++ : index--) {
-            if (design[index].merged && !this.isMergeable(design, index)) {
-                design[index] = lodash_1.default.extend({}, design[index], { merged: false });
+function QuickfiltersDesignComponent(props) {
+    // This counter is used to force a complete remount of the ListEditorComponent when items are reordered
+    // This is necessary because the ExprComponent inside the list has internal state that can get corrupted
+    // during reordering operations. By remounting, we ensure a clean slate for all expression components.
+    const [reorderCounter, setReorderCounter] = (0, react_1.useState)(0);
+    const handleDesignChange = (design) => {
+        const newDesign = (0, immer_1.produce)(design, draft => {
+            // Update merged flag, clearing if not mergeable
+            for (let i = 0; i < draft.length; i++) {
+                if (draft[i].merged && !isMergeable(draft, i)) {
+                    draft[i].merged = false;
+                }
             }
-        }
-        return this.props.onDesignChange(design);
+        });
+        props.onDesignChange(newDesign);
+    };
+    const handleReorder = (design) => {
+        setReorderCounter(c => c + 1);
+        handleDesignChange(design);
     };
     // Determine if quickfilter at index is mergeable with previous (same type, id table and enum values)
-    isMergeable(design, index) {
+    const isMergeable = (design, index) => {
         if (index === 0) {
             return false;
         }
-        const exprUtils = new expressions_1.ExprUtils(this.props.schema);
+        const exprUtils = new expressions_1.ExprUtils(props.schema);
         const type = exprUtils.getExprType(design[index].expr);
         const prevType = exprUtils.getExprType(design[index - 1].expr);
         const idTable = exprUtils.getExprIdTable(design[index].expr);
@@ -73,40 +82,30 @@ class QuickfiltersDesignComponent extends react_1.default.Component {
             return false;
         }
         return true;
-    }
-    renderQuickfilter = (item, index) => {
-        return R(QuickfilterDesignComponent, {
-            key: index,
-            design: item,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            tables: this.props.tables,
-            mergeable: this.isMergeable(this.props.design, index),
-            onChange: (newItem) => {
-                const design = this.props.design.slice();
+    };
+    const renderQuickfilter = (item, index) => {
+        return react_1.default.createElement(QuickfilterDesignComponent, { key: index, design: item, schema: props.schema, dataSource: props.dataSource, tables: props.tables, mergeable: isMergeable(props.design, index), onChange: (newItem) => {
+                const design = props.design.slice();
                 design[index] = newItem;
-                return this.handleDesignChange(design);
-            },
-            onRemove: this.handleRemove.bind(null, index)
-        });
+                handleDesignChange(design);
+            }, onRemove: () => handleRemove(index) });
     };
-    handleAdd = () => {
+    const handleAdd = () => {
         // Add blank to end
-        const design = this.props.design.concat([{ expr: null }]);
-        return this.props.onDesignChange(design);
+        const design = props.design.concat([{ expr: null }]);
+        props.onDesignChange(design);
     };
-    handleRemove = (index) => {
-        const design = this.props.design.slice();
+    const handleRemove = (index) => {
+        const design = props.design.slice();
         design.splice(index, 1);
-        return this.props.onDesignChange(design);
+        props.onDesignChange(design);
     };
-    render() {
-        return R("div", null, react_1.default.createElement(ListEditorComponent_1.ListEditorComponent, { items: this.props.design, onItemsChange: this.handleDesignChange, renderItem: this.renderQuickfilter, getReorderableKey: (item, index) => index }), this.props.tables.length > 0
-            ? R("button", { type: "button", className: "btn btn-sm btn-link", onClick: this.handleAdd }, R("span", { className: "fas fa-plus me-1" }), T `Add Quick Filter`)
-            : undefined);
-    }
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(ListEditorComponent_1.ListEditorComponent, { key: reorderCounter, items: props.design, onItemsChange: handleReorder, renderItem: renderQuickfilter, getReorderableKey: (item, index) => index }),
+        props.tables.length > 0 ? (react_1.default.createElement("button", { type: "button", className: "btn btn-sm btn-link", onClick: handleAdd },
+            react_1.default.createElement("span", { className: "fas fa-plus me-1" }),
+            T `Add Quick Filter`)) : undefined));
 }
-exports.default = QuickfiltersDesignComponent;
 /** Single quickfilter design component */
 class QuickfilterDesignComponent extends react_1.default.Component {
     constructor(props) {
@@ -118,22 +117,29 @@ class QuickfilterDesignComponent extends react_1.default.Component {
     }
     handleTableChange = (table) => {
         this.setState({ table });
-        const design = {
-            expr: null
-        };
-        return this.props.onChange(design);
+        this.props.onChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.expr = null;
+        }));
     };
     handleExprChange = (expr) => {
-        return this.props.onChange((0, update_object_1.default)(this.props.design, { expr: { $set: expr } }));
+        this.props.onChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.expr = expr;
+        }));
     };
     handleLabelChange = (ev) => {
-        return this.props.onChange((0, update_object_1.default)(this.props.design, { label: { $set: ev.target.value } }));
+        this.props.onChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.label = ev.target.value;
+        }));
     };
     handleMergedChange = (merged) => {
-        return this.props.onChange((0, update_object_1.default)(this.props.design, { merged: { $set: merged } }));
+        this.props.onChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.merged = merged;
+        }));
     };
     handleMultiChange = (multi) => {
-        return this.props.onChange((0, update_object_1.default)(this.props.design, { multi: { $set: multi } }));
+        this.props.onChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.multi = multi;
+        }));
     };
     render() {
         // Determine type of expression

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mwater/visualization",
-  "version": "5.4.2",
+  "version": "5.4.4",
   "description": "Visualization library",
   "main": "lib/index.js",
   "scripts": {

package/src/dashboards/DashboardComponent.tsx

@@ -1,7 +1,5 @@
 import _ from "lodash"
 import React, { ReactNode } from "react"
-const R = React.createElement
-
 import { DataSource, ExprCompiler, Schema } from "@mwater/expressions"
 import UndoStack from "../UndoStack"
 import * as DashboardUtils from "./DashboardUtils"
@@ -233,153 +231,154 @@ export default class DashboardComponent extends React.Component<DashboardCompone
   }
 
   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 (
+      <a
+        key="edit"
+        className={`btn btn-primary btn-sm ${this.state.editing ? "active" : ""}`}
+        onClick={this.handleToggleEditing}
+      >
+        <span className="fas fa-pencil-alt"/>
+        {" "}
+        {this.state.editing ? T`Editing` : T`Edit`}
+      </a>
     )
   }
 
   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 (
+      <button type="button" key="style" className="btn btn-link btn-sm" onClick={this.handleOpenLayoutOptions}>
+        <span className="fa fa-mobile"/>
+        <span className="hide-600px"> {T`Layout`}</span>
+      </button>
     )
   }
 
   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,
-      !this.state.editing && this.props.design.otherLocales && this.props.design.otherLocales.length > 0
-        ? R(
-          "div",
-          { key: "translations", className: "dropdown d-inline-block" },
-          R(
-            "a", 
-            { 
-              className: "btn btn-link btn-sm dropdown-toggle",
-              "data-bs-toggle": "dropdown"
-            },
-            R("span", { className: "fal fa-globe" }),
+    return (
+      <div>
+        {this.state.editing
+          ? [
+            <a
+              key="undo"
+              className={`btn btn-link btn-sm ${!this.state.undoStack.canUndo() ? "disabled" : ""}`}
+              onClick={this.handleUndo}
+            >
+              <span className="fas fa-caret-left"/>
+              <span className="hide-600px"> {T`Undo`}</span>
+            </a>,
             " ",
-            this.state.locale
-          ),
-          R(
-            "ul",
-            { className: "dropdown-menu dropdown-menu-end" },
-            [this.props.design.locale || "en", ...this.props.design.otherLocales].map(locale => 
-              R(
-                "li",
-                { key: locale },
-                R(
-                  "a",
-                  { 
-                    className: "dropdown-item",
-                    onClick: () => this.setState({ locale: locale })
-                  },
-                  languages.find(l => l.code === locale)?.name || locale
-                )
-              )
-            )
-          )
-        )
-        : 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
+            <a
+              key="redo"
+              className={`btn btn-link btn-sm ${!this.state.undoStack.canRedo() ? "disabled" : ""}`}
+              onClick={this.handleRedo}
+            >
+              <span className="fas fa-caret-right"/>
+              <span className="hide-600px"> {T`Redo`}</span>
+            </a>
+          ]
+          : undefined}
+        {!this.state.editing && this.props.design.otherLocales && this.props.design.otherLocales.length > 0
+          ? <div key="translations" className="dropdown d-inline-block">
+            <a 
+              className="btn btn-link btn-sm dropdown-toggle"
+              data-bs-toggle="dropdown"
+            >
+              <span className="fal fa-globe"/>
+              {" "}
+              {this.state.locale}
+            </a>
+            <ul className="dropdown-menu dropdown-menu-end">
+              {[this.props.design.locale || "en", ...this.props.design.otherLocales].map(locale => 
+                <li key={locale}>
+                  <a
+                    className="dropdown-item"
+                    onClick={() => this.setState({ locale: locale })}
+                  >
+                    {languages.find(l => l.code === locale)?.name || locale}
+                  </a>
+                </li>
+              )}
+            </ul>
+          </div>
+          : undefined}
+        <a key="print" className="btn btn-link btn-sm" onClick={this.handlePrint}>
+          <span className="fas fa-print"/>
+          <span className="hide-600px"> {T`Print`}</span>
+        </a>
+        <a key="refresh" className="btn btn-link btn-sm" onClick={this.handleRefreshData}>
+          <span className="fas fa-sync"/>
+          <span className="hide-600px"> {T`Refresh`}</span>
+        </a>
+        {this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
+          ? <a key="showQuickfilters" className="btn btn-link btn-sm" onClick={this.handleShowQuickfilters}>
+            <span className="fa fa-filter"/>
+            <span className="hide-600px"> {T`Show Quickfilters`}</span>
+          </a>
+          : undefined}
+
+        {this.state.editing
+          ? <a key="settings" className="btn btn-link btn-sm" onClick={this.handleSettings}>
+            <span className="fas fa-cog"/>
+            <span className="hide-600px"> {T`Settings`}</span>
+          </a>
+          : undefined}
+        {this.state.editing ? this.renderStyle() : undefined}
+        {this.props.extraTitleButtonsElem}
+        {this.props.onDesignChange != null ? this.renderEditingSwitch() : undefined}
+      </div>
     )
   }
 
   renderTitleBar() {
-    return R(
-      "div",
-      { style: { height: 40, padding: 4 } },
-      R("div", { style: { float: "right" } }, this.renderActionLinks()),
-      this.props.titleElem
+    return (
+      <div style={{ height: 40, padding: 4 }}>
+        <div style={{ float: "right" }}>{this.renderActionLinks()}</div>
+        {this.props.titleElem}
+      </div>
     )
   }
 
   renderQuickfilter() {
-    return R(QuickfiltersComponent, {
-      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: any) => this.setState({ quickfiltersValues: values }),
-      locks: this.props.quickfilterLocks,
-      filters: this.getCompiledFilters(),
-      hideTopBorder: this.props.hideTitleBar,
+    return <QuickfiltersComponent
+      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: any) => 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,
-      translate: this.translate
-    })
+      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 (
+      <div style={{ 
+        position: "absolute",
+        top: 5,
+        right: 20,
+        zIndex: 1000
+      }}>
+        <button 
+          className="btn btn-link btn-sm" 
+          onClick={() => this.setState({ hideQuickfilters: false })}
+        >
+          <i className="fa fa-angle-double-down"/>
+        </button>
+      </div>
+    )
   }
 
   refDashboardView = (el: any) => {
@@ -400,34 +399,33 @@ export default class DashboardComponent extends React.Component<DashboardCompone
 
     const displayLocale = this.state.editing ? this.props.design.locale || "en" : this.state.locale
 
-    const dashboardView = R(DashboardViewComponent, {
-      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,
-      locale: displayLocale
-    })
-
-    const readonlyDashboardView = R(DashboardViewComponent, {
-      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,
-      locale: displayLocale
-    })
-
+    const dashboardView = <DashboardViewComponent
+      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 = <DashboardViewComponent
+      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 <ActiveTablesContext.Provider
@@ -441,6 +439,7 @@ export default class DashboardComponent extends React.Component<DashboardCompone
           {!this.props.hideTitleBar ? this.renderTitleBar() : undefined}
           <div>{!this.state.hideQuickfilters ? this.renderQuickfilter() : undefined}</div>
           {dashboardView}
+          {this.renderFloatingShowQuickfiltersButton()}
           {this.props.onDesignChange != null && (
             <SettingsModalComponent
               onDesignChange={this.handleDesignChange}

package/src/languages.ts

@@ -821,7 +821,12 @@ export const languages: {
   {
       "code": "tl",
       "name": "Tagalog",
-      "en": "Tagalog / Filipino"
+      "en": "Tagalog"
+  },
+  {
+    "code": "fil",
+    "name": "Filipino",
+    "en": "Filipino"
   },
   {
       "code": "tn",

package/src/quickfilter/QuickfiltersDesignComponent.tsx

@@ -1,9 +1,9 @@
 import _ from "lodash"
-import React from "react"
-const R = React.createElement
-import update from "update-object"
+import React, { useState } from "react"
+import uuid from "uuid"
+import { produce } from "immer"
 import { ExprComponent } from "@mwater/expressions-ui"
-import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
+import { DataSource, Expr, ExprUtils, FieldExpr, Schema } from "@mwater/expressions"
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import { ListEditorComponent } from "@mwater/react-library/lib/ListEditorComponent"
 import { Quickfilter } from "./Quickfilter"
@@ -20,27 +20,37 @@ export interface QuickfiltersDesignComponentProps {
 }
 
 // Displays quick filters and allows their value to be modified
-export default class QuickfiltersDesignComponent extends React.Component<QuickfiltersDesignComponentProps> {
-  handleDesignChange = (design: any) => {
-    design = design.slice()
-
-    // Update merged, clearing if not mergeable
-    for (let index = 0, end = design.length, asc = 0 <= end; asc ? index < end : index > end; asc ? index++ : index--) {
-      if (design[index].merged && !this.isMergeable(design, index)) {
-        design[index] = _.extend({}, design[index], { merged: false })
+export default function QuickfiltersDesignComponent(props: QuickfiltersDesignComponentProps) {
+  // This counter is used to force a complete remount of the ListEditorComponent when items are reordered
+  // This is necessary because the ExprComponent inside the list has internal state that can get corrupted
+  // during reordering operations. By remounting, we ensure a clean slate for all expression components.
+  const [reorderCounter, setReorderCounter] = useState(0)
+
+  const handleDesignChange = (design: Quickfilter[]) => {
+    const newDesign = produce(design, draft => {
+      // Update merged flag, clearing if not mergeable
+      for (let i = 0; i < draft.length; i++) {
+        if (draft[i].merged && !isMergeable(draft, i)) {
+          draft[i].merged = false
+        }
       }
-    }
+    })
+
+    props.onDesignChange(newDesign)
+  }
 
-    return this.props.onDesignChange(design)
+  const handleReorder = (design: Quickfilter[]) => {
+    setReorderCounter(c => c + 1)
+    handleDesignChange(design)
   }
 
   // Determine if quickfilter at index is mergeable with previous (same type, id table and enum values)
-  isMergeable(design: any, index: any) {
+  const isMergeable = (design: Quickfilter[], index: number) => {
     if (index === 0) {
       return false
     }
 
-    const exprUtils = new ExprUtils(this.props.schema)
+    const exprUtils = new ExprUtils(props.schema)
 
     const type = exprUtils.getExprType(design[index].expr)
     const prevType = exprUtils.getExprType(design[index - 1].expr)
@@ -73,56 +83,52 @@ export default class QuickfiltersDesignComponent extends React.Component<Quickfi
     return true
   }
 
-  renderQuickfilter = (item: any, index: any) => {
-    return R(QuickfilterDesignComponent, {
-      key: index,
-      design: item,
-      schema: this.props.schema,
-      dataSource: this.props.dataSource,
-      tables: this.props.tables,
-      mergeable: this.isMergeable(this.props.design, index),
-      onChange: (newItem: any) => {
-        const design = this.props.design.slice()
+  const renderQuickfilter = (item: Quickfilter, index: number) => {
+    return <QuickfilterDesignComponent
+      key={index}
+      design={item}
+      schema={props.schema}
+      dataSource={props.dataSource}
+      tables={props.tables}
+      mergeable={isMergeable(props.design, index)}
+      onChange={(newItem: Quickfilter) => {
+        const design = props.design.slice()
         design[index] = newItem
-        return this.handleDesignChange(design)
-      },
-
-      onRemove: this.handleRemove.bind(null, index)
-    })
+        handleDesignChange(design)
+      }}
+      onRemove={() => handleRemove(index)}
+    />
   }
 
-  handleAdd = () => {
+  const handleAdd = () => {
     // Add blank to end
-    const design = this.props.design.concat([{ expr: null }])
-    return this.props.onDesignChange(design)
+    const design = props.design.concat([{ expr: null }])
+    props.onDesignChange(design)
   }
 
-  handleRemove = (index: any) => {
-    const design = this.props.design.slice()
+  const handleRemove = (index: number) => {
+    const design = props.design.slice()
     design.splice(index, 1)
-    return this.props.onDesignChange(design)
+    props.onDesignChange(design)
   }
 
-  render() {
-    return R(
-      "div",
-      null,
+  return (
+    <div>
       <ListEditorComponent
-        items={this.props.design}
-        onItemsChange={this.handleDesignChange}
-        renderItem={this.renderQuickfilter}
+        key={reorderCounter}
+        items={props.design}
+        onItemsChange={handleReorder}
+        renderItem={renderQuickfilter}
         getReorderableKey={(item, index) => index}
-      />,
-      this.props.tables.length > 0
-        ? R(
-            "button",
-            { type: "button", className: "btn btn-sm btn-link", onClick: this.handleAdd },
-            R("span", { className: "fas fa-plus me-1" }),
-            T`Add Quick Filter`
-          )
-        : undefined
-    )
-  }
+      />
+      {props.tables.length > 0 ? (
+        <button type="button" className="btn btn-sm btn-link" onClick={handleAdd}>
+          <span className="fas fa-plus me-1" />
+          {T`Add Quick Filter`}
+        </button>
+      ) : undefined}
+    </div>
+  )
 }
 
 interface QuickfilterDesignComponentProps {
@@ -138,7 +144,7 @@ interface QuickfilterDesignComponentProps {
 }
 
 interface QuickfilterDesignComponentState {
-  table: any
+  table: string
 }
 
 /** Single quickfilter design component */
@@ -146,35 +152,46 @@ class QuickfilterDesignComponent extends React.Component<
   QuickfilterDesignComponentProps,
   QuickfilterDesignComponentState
 > {
-  constructor(props: any) {
+  constructor(props: QuickfilterDesignComponentProps) {
     super(props)
 
     // Store table to allow selecting table first, then expression
     this.state = {
-      table: props.design.expr?.table || props.tables[0]
+      table: (props.design.expr as FieldExpr)?.table || props.tables[0]
     }
   }
 
-  handleTableChange = (table: any) => {
+  handleTableChange = (table: string) => {
     this.setState({ table })
-    const design = {
-      expr: null
-    }
-    return this.props.onChange(design)
+    this.props.onChange(produce(this.props.design, draft => {
+      draft.expr = null
+    }))
   }
 
-  handleExprChange = (expr: any) => {
-    return this.props.onChange(update(this.props.design, { expr: { $set: expr } }))
+  handleExprChange = (expr: Expr) => {
+    this.props.onChange(produce(this.props.design, draft => {
+      draft.expr = expr
+    }))
   }
+
   handleLabelChange = (ev: any) => {
-    return this.props.onChange(update(this.props.design, { label: { $set: ev.target.value } }))
+    this.props.onChange(produce(this.props.design, draft => {
+      draft.label = ev.target.value
+    }))
   }
-  handleMergedChange = (merged: any) => {
-    return this.props.onChange(update(this.props.design, { merged: { $set: merged } }))
+
+  handleMergedChange = (merged: boolean) => {
+    this.props.onChange(produce(this.props.design, draft => {
+      draft.merged = merged
+    }))
   }
-  handleMultiChange = (multi: any) => {
-    return this.props.onChange(update(this.props.design, { multi: { $set: multi } }))
+
+  handleMultiChange = (multi: boolean) => {
+    this.props.onChange(produce(this.props.design, draft => {
+      draft.multi = multi
+    }))
   }
+
   render() {
     // Determine type of expression
     const exprType = new ExprUtils(this.props.schema).getExprType(this.props.design.expr)