@mwater/visualization 5.5.0 → 5.6.1

package/lib/datagrids/DatagridDesignerComponent.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 = __importStar(require("react"));
-const R = react_1.default.createElement;
 const react_select_1 = __importDefault(require("react-select"));
 const languages_1 = require("../languages");
 const expressions_1 = require("@mwater/expressions");
@@ -36,6 +35,7 @@ const expressions_2 = require("@mwater/expressions");
 const TabbedComponent_1 = __importDefault(require("@mwater/react-library/lib/TabbedComponent"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_ui_2 = require("@mwater/expressions-ui");
+const SelectExprModalComponent_1 = __importDefault(require("@mwater/expressions-ui/lib/SelectExprModalComponent"));
 const OrderBysDesignerComponent_1 = __importDefault(require("./OrderBysDesignerComponent"));
 const ReorderableListComponent_1 = __importDefault(require("@mwater/react-library/lib/reorderable/ReorderableListComponent"));
 const QuickfiltersDesignComponent_1 = __importDefault(require("../quickfilter/QuickfiltersDesignComponent"));
@@ -70,80 +70,54 @@ class DatagridDesignerComponent extends react_1.default.Component {
     };
     // Render the tabs of the designer
     renderTabs() {
-        return R(TabbedComponent_1.default, {
-            initialTabId: "columns",
-            tabs: [
+        return react_1.default.createElement(TabbedComponent_1.default, { initialTabId: "columns", tabs: [
                 {
                     id: "columns",
                     label: T `Columns`,
-                    elem: R(ColumnsDesignerComponent, {
-                        schema: this.props.schema,
-                        dataSource: this.props.dataSource,
-                        table: this.props.design.table,
-                        columns: this.props.design.columns,
-                        onColumnsChange: this.handleColumnsChange
-                    })
+                    elem: react_1.default.createElement(ColumnsDesignerComponent, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, columns: this.props.design.columns, onColumnsChange: this.handleColumnsChange })
                 },
                 {
                     id: "filter",
                     label: T `Filter`,
                     // Here because of modal scroll issue
-                    elem: R("div", { style: { marginBottom: 200 } }, R(expressions_ui_2.FilterExprComponent, {
-                        schema: this.props.schema,
-                        dataSource: this.props.dataSource,
-                        table: this.props.design.table,
-                        value: this.props.design.filter,
-                        onChange: this.handleFilterChange
-                    }), react_1.default.createElement(MWaterContextComponent_1.GlobalFiltersElementFactoryContext.Consumer, null, (globalFiltersElementFactory) => globalFiltersElementFactory
-                        ? R("div", { style: { marginTop: 20 } }, globalFiltersElementFactory({
-                            schema: this.props.schema,
-                            dataSource: this.props.dataSource,
-                            filterableTables: [this.props.design.table],
-                            globalFilters: this.props.design.globalFilters,
-                            onChange: this.handleGlobalFiltersChange,
-                            nullIfIrrelevant: true
-                        }))
-                        : undefined))
+                    elem: react_1.default.createElement("div", { style: { marginBottom: 200 } },
+                        react_1.default.createElement(expressions_ui_2.FilterExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, value: this.props.design.filter, onChange: this.handleFilterChange }),
+                        react_1.default.createElement(MWaterContextComponent_1.GlobalFiltersElementFactoryContext.Consumer, null, (globalFiltersElementFactory) => globalFiltersElementFactory
+                            ? react_1.default.createElement("div", { style: { marginTop: 20 } }, globalFiltersElementFactory({
+                                schema: this.props.schema,
+                                dataSource: this.props.dataSource,
+                                filterableTables: [this.props.design.table],
+                                globalFilters: this.props.design.globalFilters,
+                                onChange: this.handleGlobalFiltersChange,
+                                nullIfIrrelevant: true
+                            }))
+                            : undefined))
                 },
                 {
                     id: "order",
                     label: T `Sorting`,
-                    elem: R("div", { style: { marginBottom: 200 } }, R(OrderBysDesignerComponent_1.default, {
-                        schema: this.props.schema,
-                        dataSource: this.props.dataSource,
-                        table: this.props.design.table,
-                        orderBys: this.props.design.orderBys,
-                        onChange: this.handleOrderBysChange
-                    }))
+                    elem: react_1.default.createElement("div", { style: { marginBottom: 200 } },
+                        react_1.default.createElement(OrderBysDesignerComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, orderBys: this.props.design.orderBys, onChange: this.handleOrderBysChange }))
                 },
                 {
                     id: "quickfilters",
                     label: T `Quickfilters`,
-                    elem: R("div", { style: { marginBottom: 200 } }, R(QuickfiltersDesignComponent_1.default, {
-                        design: this.props.design.quickfilters || [],
-                        onDesignChange: (design) => this.props.onDesignChange((0, update_object_1.default)(this.props.design, { quickfilters: { $set: design } })),
-                        schema: this.props.schema,
-                        dataSource: this.props.dataSource,
-                        tables: [this.props.design.table]
-                    }))
+                    elem: react_1.default.createElement("div", { style: { marginBottom: 200 } },
+                        react_1.default.createElement(QuickfiltersDesignComponent_1.default, { design: this.props.design.quickfilters || [], onDesignChange: (design) => this.props.onDesignChange((0, update_object_1.default)(this.props.design, { quickfilters: { $set: design } })), schema: this.props.schema, dataSource: this.props.dataSource, tables: [this.props.design.table] }))
                 },
                 {
                     id: "options",
                     label: T `Options`,
-                    elem: R("div", { style: { marginBottom: 200 } }, R(DatagridOptionsComponent, {
-                        design: this.props.design,
-                        onDesignChange: this.props.onDesignChange
-                    }))
+                    elem: react_1.default.createElement("div", { style: { marginBottom: 200 } },
+                        react_1.default.createElement(DatagridOptionsComponent, { design: this.props.design, onDesignChange: this.props.onDesignChange }))
                 }
-            ]
-        });
+            ] });
     }
     render() {
-        return R("div", null, R("label", null, T `Data Source:`), R(expressions_ui_3.TableSelectComponent, {
-            schema: this.props.schema,
-            value: this.props.design.table,
-            onChange: this.handleTableChange
-        }), this.props.design.table ? this.renderTabs() : undefined);
+        return react_1.default.createElement("div", null,
+            react_1.default.createElement("label", null, T `Data Source:`),
+            react_1.default.createElement(expressions_ui_3.TableSelectComponent, { schema: this.props.schema, value: this.props.design.table, onChange: this.handleTableChange }),
+            this.props.design.table ? this.renderTabs() : undefined);
     }
 }
 exports.default = DatagridDesignerComponent;
@@ -163,6 +137,9 @@ function DatagridOptionsComponent(props) {
 }
 // Columns list
 class ColumnsDesignerComponent extends react_1.default.Component {
+    state = {
+        showSelectExprModal: false
+    };
     handleColumnChange = (columnIndex, column) => {
         const columns = this.props.columns.slice();
         // Handle remove
@@ -171,7 +148,7 @@ class ColumnsDesignerComponent extends react_1.default.Component {
         }
         else if (lodash_1.default.isArray(column)) {
             // Handle array case
-            Array.prototype.splice.apply(columns, [columnIndex, 1].concat(column));
+            columns.splice(columnIndex, 1, ...column);
         }
         else {
             columns[columnIndex] = column;
@@ -179,9 +156,28 @@ class ColumnsDesignerComponent extends react_1.default.Component {
         return this.props.onColumnsChange(columns);
     };
     handleAddColumn = () => {
+        this.setState({ showSelectExprModal: true });
+    };
+    handleExprSelect = (expr) => {
+        // Clean the expression first
+        const exprCleaner = new expressions_1.ExprCleaner(this.props.schema);
+        const cleanedExpr = exprCleaner.cleanExpr(expr, {
+            aggrStatuses: ["individual", "literal", "aggregate"]
+        });
+        const exprUtils = new expressions_1.ExprUtils(this.props.schema);
         const columns = this.props.columns.slice();
-        columns.push({ id: (0, uuid_1.default)(), type: "expr", width: 150 });
-        return this.props.onColumnsChange(columns);
+        columns.push({
+            id: (0, uuid_1.default)(),
+            type: "expr",
+            width: 150,
+            expr: cleanedExpr,
+            label: exprUtils.summarizeExpr(cleanedExpr).slice(0, 30)
+        });
+        this.props.onColumnsChange(columns);
+        this.setState({ showSelectExprModal: false });
+    };
+    handleExprCancel = () => {
+        this.setState({ showSelectExprModal: false });
     };
     handleAddIdColumn = () => {
         const columns = this.props.columns.slice();
@@ -206,7 +202,7 @@ class ColumnsDesignerComponent extends react_1.default.Component {
                 id: (0, uuid_1.default)(),
                 width: 150,
                 type: "expr",
-                label: null, // Use default label instead. # labeledExpr.label
+                label: undefined, // Use default label instead. # labeledExpr.label
                 expr: labeledExpr.expr
             });
         }
@@ -217,45 +213,39 @@ class ColumnsDesignerComponent extends react_1.default.Component {
         return this.props.onColumnsChange([]);
     };
     renderColumn = (column, columnIndex, connectDragSource, connectDragPreview, connectDropTarget) => {
-        return R(ColumnDesignerComponent, {
-            key: columnIndex,
-            schema: this.props.schema,
-            table: this.props.table,
-            dataSource: this.props.dataSource,
-            column,
-            onColumnChange: this.handleColumnChange.bind(null, columnIndex),
-            connectDragSource,
-            connectDragPreview,
-            connectDropTarget
-        });
+        return react_1.default.createElement(ColumnDesignerComponent, { key: columnIndex, schema: this.props.schema, table: this.props.table, dataSource: this.props.dataSource, column: column, onColumnChange: this.handleColumnChange.bind(null, columnIndex), connectDragSource: connectDragSource, connectDragPreview: connectDragPreview, connectDropTarget: connectDropTarget });
     };
     render() {
-        return R("div", { style: { height: "auto", overflowY: "auto", overflowX: "hidden" } }, R("div", { style: { textAlign: "right" }, key: "options" }, R("button", {
-            key: "addAll",
-            type: "button",
-            className: "btn btn-link btn-sm",
-            onClick: this.handleAddDefaultColumns
-        }, R("span", { className: "fas fa-plus" }), " " + T `Add Default Columns`), R("button", {
-            key: "removeAll",
-            type: "button",
-            className: "btn btn-link btn-sm",
-            onClick: this.handleRemoveAllColumns
-        }, R("span", { className: "fas fa-times" }), " " + T `Remove All Columns`)), R(ReorderableListComponent_1.default, {
-            items: this.props.columns,
-            onReorder: this.props.onColumnsChange,
-            renderItem: this.renderColumn,
-            getItemId: (item) => item.id
-        }), R("div", { className: "p-2" }, R("button", {
-            key: "add",
-            type: "button",
-            className: "btn btn-link",
-            onClick: this.handleAddColumn
-        }, R("span", { className: "fas fa-plus" }), " " + T `Add Column`), R("button", {
-            key: "add-id",
-            type: "button",
-            className: "btn btn-link",
-            onClick: this.handleAddIdColumn
-        }, R("span", { className: "fas fa-plus" }), " " + T `Add Unique Id (advanced)`)));
+        return react_1.default.createElement("div", { style: { height: "auto", overflowY: "auto", overflowX: "hidden" } },
+            react_1.default.createElement("div", { style: { textAlign: "right" }, key: "options" },
+                react_1.default.createElement("button", { key: "addAll", type: "button", className: "btn btn-link btn-sm", onClick: this.handleAddDefaultColumns },
+                    react_1.default.createElement("span", { className: "fas fa-plus" }),
+                    " " + T `Add Default Columns`),
+                react_1.default.createElement("button", { key: "removeAll", type: "button", className: "btn btn-link btn-sm", onClick: this.handleRemoveAllColumns },
+                    react_1.default.createElement("span", { className: "fas fa-times" }),
+                    " " + T `Remove All Columns`)),
+            react_1.default.createElement(ReorderableListComponent_1.default, { items: this.props.columns, onReorder: this.props.onColumnsChange, renderItem: this.renderColumn, getItemId: (item) => item.id }),
+            react_1.default.createElement("div", { className: "p-2" },
+                react_1.default.createElement("button", { key: "add", type: "button", className: "btn btn-link", onClick: this.handleAddColumn },
+                    react_1.default.createElement("span", { className: "fas fa-plus" }),
+                    " " + T `Add Column`),
+                react_1.default.createElement("button", { key: "add-id", type: "button", className: "btn btn-link", onClick: this.handleAddIdColumn },
+                    react_1.default.createElement("span", { className: "fas fa-plus" }),
+                    " " + T `Add Unique Id (advanced)`)),
+            this.state.showSelectExprModal && (react_1.default.createElement(SelectExprModalComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.table, value: null, allowCase: true, onSelect: this.handleExprSelect, onCancel: this.handleExprCancel, types: [
+                    "text",
+                    "number",
+                    "enum",
+                    "enumset",
+                    "boolean",
+                    "date",
+                    "datetime",
+                    "image",
+                    "imagelist",
+                    "text[]",
+                    "geometry",
+                    "id"
+                ], aggrStatuses: ["literal", "individual", "aggregate"] })));
     }
 }
 // Column item
@@ -317,10 +307,14 @@ class ColumnDesignerComponent extends react_1.default.Component {
         const exprType = exprUtils.getExprType(this.props.column.expr);
         switch (exprType) {
             case "enumset":
-                return R("a", { className: "btn btn-sm btn-link", onClick: this.handleSplitEnumset }, R("i", { className: "fa fa-chain-broken" }), " " + T `Split by options`);
+                return react_1.default.createElement("a", { className: "btn btn-sm btn-link", onClick: this.handleSplitEnumset },
+                    react_1.default.createElement("i", { className: "fa fa-chain-broken" }),
+                    " " + T `Split by options`);
                 break;
             case "geometry":
-                return R("a", { className: "btn btn-sm btn-link", onClick: this.handleSplitGeometry }, R("i", { className: "fa fa-chain-broken" }), " " + T `Split by lat/lng`);
+                return react_1.default.createElement("a", { className: "btn btn-sm btn-link", onClick: this.handleSplitGeometry },
+                    react_1.default.createElement("i", { className: "fa fa-chain-broken" }),
+                    " " + T `Split by lat/lng`);
                 break;
         }
         return null;
@@ -335,12 +329,10 @@ class ColumnDesignerComponent extends react_1.default.Component {
         if (!formats) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Format`), ": ", R("select", {
-            value: this.props.column.format != null ? this.props.column.format : (0, valueFormatter_2.getDefaultFormat)(exprType),
-            className: "form-select",
-            style: { width: "auto", display: "inline-block" },
-            onChange: this.handleFormatChange
-        }, lodash_1.default.map(formats, (format) => R("option", { key: format.value, value: format.value }, format.label))));
+        return react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Format`),
+            ": ",
+            react_1.default.createElement("select", { value: this.props.column.format != null ? this.props.column.format : (0, valueFormatter_2.getDefaultFormat)(exprType), className: "form-select", style: { width: "auto", display: "inline-block" }, onChange: this.handleFormatChange }, lodash_1.default.map(formats, (format) => react_1.default.createElement("option", { key: format.value, value: format.value }, format.label))));
     }
     render = () => {
         const exprUtils = new expressions_1.ExprUtils(this.props.schema);
@@ -368,25 +360,21 @@ class ColumnDesignerComponent extends react_1.default.Component {
         const error = exprValidator.validateExpr(this.props.column.expr, {
             aggrStatuses: ["individual", "literal", "aggregate"]
         });
-        const elem = R("div", { className: "row" }, R("div", { className: "col-1" }, this.props.connectDragSource(R("span", { className: "text-muted fa fa-bars _mviz-move" }))), R("div", { className: "col-6" }, // style: { border: "solid 1px #DDD", padding: 4 },
-        R(expressions_ui_1.ExprComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.table,
-            value: this.props.column.expr,
-            aggrStatuses: ["literal", "individual", "aggregate"],
-            types: allowedTypes,
-            onChange: this.handleExprChange
-        }), this.renderSplit(), this.renderFormat(), error ? react_1.default.createElement("span", { className: "text-danger" },
-            react_1.default.createElement("i", { className: "fa fa-exclamation-circle" }),
-            " ",
-            error) : undefined), R("div", { className: "col-4" }, R("input", {
-            type: "text",
-            className: "form-control",
-            placeholder: exprUtils.summarizeExpr(this.props.column.expr),
-            value: this.props.column.label,
-            onChange: (ev) => this.handleLabelChange(ev.target.value)
-        })), R("div", { className: "col-1" }, R("a", { className: "link-plain", onClick: this.props.onColumnChange.bind(null, null) }, R("span", { className: "fas fa-times" }))));
+        const elem = react_1.default.createElement("div", { className: "row" },
+            react_1.default.createElement("div", { className: "col-1" }, this.props.connectDragSource(react_1.default.createElement("span", { className: "text-muted fa fa-bars mwater-visualization-cursor-hover" }))),
+            react_1.default.createElement("div", { className: "col-6" },
+                react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.table, value: this.props.column.expr, aggrStatuses: ["literal", "individual", "aggregate"], types: allowedTypes, onChange: this.handleExprChange }),
+                this.renderSplit(),
+                this.renderFormat(),
+                error ? react_1.default.createElement("span", { className: "text-danger" },
+                    react_1.default.createElement("i", { className: "fa fa-exclamation-circle" }),
+                    " ",
+                    error) : undefined),
+            react_1.default.createElement("div", { className: "col-4" },
+                react_1.default.createElement("input", { type: "text", className: "form-control", placeholder: exprUtils.summarizeExpr(this.props.column.expr), value: this.props.column.label, onChange: (ev) => this.handleLabelChange(ev.target.value) })),
+            react_1.default.createElement("div", { className: "col-1" },
+                react_1.default.createElement("a", { className: "link-plain", onClick: this.props.onColumnChange.bind(null, null) },
+                    react_1.default.createElement("span", { className: "fas fa-times" }))));
         return this.props.connectDropTarget(this.props.connectDragPreview(elem));
     };
 }

package/lib/datagrids/DatagridViewComponent.js

@@ -19,6 +19,10 @@ const DatagridViewComponent = (0, react_2.forwardRef)((props, ref) => {
     const [rows, setRows] = (0, react_2.useState)([]);
     const [entirelyLoaded, setEntirelyLoaded] = (0, react_2.useState)(false);
     const loadStateRef = (0, react_2.useRef)(null);
+    // Track which design key the current rows were loaded with to avoid rendering stale data
+    // with a mismatched column structure (e.g. after column reorder)
+    const [loadedDesignKey, setLoadedDesignKey] = (0, react_2.useState)(null);
+    const currentDesignKey = getDatagridReloadKey(props.design);
     // Get row header width based on selection and showRowNumbers
     const rowHeaderWidth = props.selectedRows
         ? (props.design.showRowNumbers ? 70 : 30) // With selection: 70 for both, 30 for just checkbox
@@ -75,13 +79,17 @@ const DatagridViewComponent = (0, react_2.forwardRef)((props, ref) => {
             whiteSpace: "nowrap",
             padding: "0 8px"
         };
-        const rowId = options.row < rows.length ? rows[options.row].id : null;
+        // If design key doesn't match, rows are stale - show loading state
+        if (loadedDesignKey !== currentDesignKey || options.row >= rows.length) {
+            return (react_1.default.createElement("div", { style: rowHeaderStyle }, props.design.showRowNumbers ? (react_1.default.createElement("div", { style: { flex: 1, textAlign: "right" } }, options.row + 1)) : null));
+        }
+        const rowId = rows[options.row].id;
         const isSelected = rowId != null && props.selectedRows ? props.selectedRows.isSelected(rowId) : false;
-        const isSubtable = options.row < rows.length ? rows[options.row].subtable >= 0 : false;
+        const isSubtable = rows[options.row].subtable >= 0;
         return (react_1.default.createElement("div", { style: rowHeaderStyle },
             props.selectedRows && !isSubtable && (react_1.default.createElement("input", { type: "checkbox", style: { marginRight: 4 }, checked: isSelected, onChange: rowId != null && props.onSelectedRowsChange ? () => handleRowSelect(rowId) : undefined, readOnly: !props.onSelectedRowsChange })),
             props.design.showRowNumbers ? (react_1.default.createElement("div", { style: { flex: 1, textAlign: "right" } }, options.row + 1)) : null));
-    }, [rows, props.selectedRows, props.onSelectedRowsChange, props.design.showRowNumbers, handleRowSelect]);
+    }, [rows, props.selectedRows, props.onSelectedRowsChange, props.design.showRowNumbers, handleRowSelect, loadedDesignKey, currentDesignKey]);
     const loadMoreRows = (0, useStableCallback_1.useStableCallback)((callback) => {
         const loadState = {
             design: props.design,
@@ -103,14 +111,15 @@ const DatagridViewComponent = (0, react_2.forwardRef)((props, ref) => {
                 loadStateRef.current = null;
                 setRows(prev => [...prev, ...newRows]);
                 setEntirelyLoaded(newRows.length < (props.pageSize || 100));
+                setLoadedDesignKey(getDatagridReloadKey(loadState.design));
                 callback?.();
             }
         });
     });
     function reload() {
-        console.log("reload");
         setRows([]);
         setEntirelyLoaded(false);
+        setLoadedDesignKey(null);
     }
     // Reset rows when design, filters or refreshKey changes
     (0, react_2.useEffect)(() => {
@@ -204,6 +213,10 @@ const DatagridViewComponent = (0, react_2.forwardRef)((props, ref) => {
         return false;
     });
     const handleCopy = (0, useStableCallback_1.useStableCallback)((rowIndex, colIndex) => {
+        // If design key doesn't match, rows are stale - don't copy
+        if (loadedDesignKey !== currentDesignKey || rowIndex >= rows.length) {
+            return;
+        }
         const row = rows[rowIndex];
         const col = props.design.columns[colIndex];
         const value = row[`c${colIndex}`];
@@ -228,6 +241,13 @@ const DatagridViewComponent = (0, react_2.forwardRef)((props, ref) => {
         navigator.clipboard.writeText(formattedValue || "");
     });
     const renderCell = (0, useStableCallback_1.useStableCallback)((options) => {
+        // If rows were loaded with a different design key, show loading state to avoid
+        // rendering stale data with mismatched column structure (e.g. after column reorder)
+        if (loadedDesignKey !== currentDesignKey) {
+            lodash_1.default.defer(() => loadMoreRows());
+            return react_1.default.createElement("div", { style: { padding: 8 } },
+                react_1.default.createElement("i", { className: "fa fa-spinner fa-spin text-muted" }));
+        }
         if (options.row >= rows.length) {
             lodash_1.default.defer(() => loadMoreRows());
             return react_1.default.createElement("div", { style: { padding: 8 } },
@@ -267,11 +287,14 @@ const DatagridViewComponent = (0, react_2.forwardRef)((props, ref) => {
                 fontWeight: "bold",
                 height: "100%",
                 display: "flex",
-                alignItems: "center"
+                alignItems: "center",
+                overflow: "hidden",
+                width: options.width
             } }, column.label || exprUtils.summarizeExpr(column.expr, props.design.locale)));
     });
     const renderCellEditor = (0, useStableCallback_1.useStableCallback)((options) => {
-        if (options.row >= rows.length) {
+        // If design key doesn't match, rows are stale - don't render editor
+        if (loadedDesignKey !== currentDesignKey || options.row >= rows.length) {
             return react_1.default.createElement("div", null);
         }
         const column = props.design.columns[options.col];
@@ -287,6 +310,10 @@ const DatagridViewComponent = (0, react_2.forwardRef)((props, ref) => {
         if (options.col === -1) {
             return false;
         }
+        // If design key doesn't match, rows are stale - don't allow edit
+        if (loadedDesignKey !== currentDesignKey || options.row >= rows.length) {
+            return false;
+        }
         const rowId = rows[options.row].id;
         if (rowId == null) {
             return false;

package/lib/datagrids/OrderBysDesignerComponent.d.ts

@@ -1,22 +1,22 @@
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
+import { DatagridDesignOrderBy } from "./DatagridDesign";
 export interface OrderBysDesignerComponentProps {
     /** schema to use */
     schema: Schema;
     /** dataSource to use */
     dataSource: DataSource;
     table: string;
-    /** Columns list See README.md of this folder */
-    orderBys: any;
+    orderBys: DatagridDesignOrderBy[];
     /** Called when columns changes */
-    onChange: any;
+    onChange: (orderBys: DatagridDesignOrderBy[]) => void;
 }
 export default class OrderBysDesignerComponent extends React.Component<OrderBysDesignerComponentProps> {
     static defaultProps: {
         orderBys: never[];
     };
-    handleChange: (index: any, orderBy: any) => any;
-    handleRemove: (index: any) => any;
-    handleAdd: () => any;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    handleChange: (index: any, orderBy: any) => void;
+    handleRemove: (index: any) => void;
+    handleAdd: () => void;
+    render(): React.JSX.Element;
 }

package/lib/datagrids/OrderBysDesignerComponent.js

@@ -5,7 +5,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 expressions_ui_1 = require("@mwater/expressions-ui");
 const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
 // Edits an orderBys which is a list of expressions and directions. See README.md
@@ -27,22 +26,13 @@ class OrderBysDesignerComponent extends react_1.default.Component {
         return this.props.onChange(orderBys);
     };
     render() {
-        return R("div", null, lodash_1.default.map(this.props.orderBys, (orderBy, index) => {
-            return R(OrderByDesignerComponent, {
-                key: index,
-                schema: this.props.schema,
-                table: this.props.table,
-                dataSource: this.props.dataSource,
-                orderBy,
-                onChange: this.handleChange.bind(null, index),
-                onRemove: this.handleRemove.bind(null, index)
-            });
-        }), R("button", {
-            key: "add",
-            type: "button",
-            className: "btn btn-link",
-            onClick: this.handleAdd
-        }, R("span", { className: "fas fa-plus" }), " " + T `Add Ordering`));
+        return (react_1.default.createElement("div", null,
+            lodash_1.default.map(this.props.orderBys, (orderBy, index) => {
+                return react_1.default.createElement(OrderByDesignerComponent, { key: index, schema: this.props.schema, table: this.props.table, dataSource: this.props.dataSource, orderBy: orderBy, onChange: this.handleChange.bind(null, index), onRemove: this.handleRemove.bind(null, index) });
+            }),
+            react_1.default.createElement("button", { key: "add", type: "button", className: "btn btn-link", onClick: this.handleAdd },
+                react_1.default.createElement("span", { className: "fas fa-plus" }),
+                " " + T `Add Ordering`)));
     }
 }
 exports.default = OrderBysDesignerComponent;
@@ -50,18 +40,19 @@ class OrderByDesignerComponent extends react_1.default.Component {
     handleExprChange = (expr) => {
         return this.props.onChange(lodash_1.default.extend({}, this.props.orderBy, { expr }));
     };
-    handleDirectionChange = (value) => {
-        return this.props.onChange(lodash_1.default.extend({}, this.props.orderBy, { direction: value ? "desc" : "asc" }));
+    handleDirectionChange = (direction) => {
+        return this.props.onChange(lodash_1.default.extend({}, this.props.orderBy, { direction }));
     };
     render() {
-        return R("div", { className: "row" }, R("div", { className: "col-7" }, R(expressions_ui_1.ExprComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.table,
-            types: ["text", "number", "boolean", "date", "datetime"],
-            aggrStatuses: ["individual", "literal", "aggregate"],
-            value: this.props.orderBy.expr,
-            onChange: this.handleExprChange
-        })), R("div", { className: "col-3" }, react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, value: this.props.orderBy.direction === "desc", onChange: this.handleDirectionChange }, T `Reverse`)), R("div", { className: "col-1" }, R("button", { className: "btn btn-sm btn-link", type: "button", onClick: this.props.onRemove }, R("span", { className: "fas fa-times" }))));
+        return (react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "8px" } },
+            react_1.default.createElement("div", { style: { flex: 1 } },
+                react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.table, types: ["text", "number", "boolean", "date", "datetime"], aggrStatuses: ["individual", "literal", "aggregate"], value: this.props.orderBy.expr, onChange: this.handleExprChange })),
+            react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } },
+                react_1.default.createElement(bootstrap_1.Toggle, { size: "xs", value: this.props.orderBy.direction, onChange: this.handleDirectionChange, options: [
+                        { value: "asc", label: T `Ascending` },
+                        { value: "desc", label: T `Descending` }
+                    ] }),
+                react_1.default.createElement("button", { className: "btn btn-sm btn-link", type: "button", onClick: this.props.onRemove },
+                    react_1.default.createElement("span", { className: "fas fa-times" })))));
     }
 }

package/lib/index.css

@@ -55,6 +55,12 @@ Lato, Lora, Inter, Merriweather, Roboto
   }
 }
 
+@media only screen and (max-width: 800px) {
+  .hide-800px {
+    display: none;
+  }
+}
+
 /* Dashed thresholds */
 .bb-grid line {
   stroke-dasharray: 3;
@@ -133,6 +139,20 @@ Lato, Lora, Inter, Merriweather, Roboto
   visibility: visible;
 }
 
+/* Use these to make a grandchild that displays only when parent is hovered */
+.hover-display-parent > * > .hover-display-grandchild {
+  visibility: hidden;
+}
+
+.hover-display-parent:hover > * > .hover-display-grandchild {
+  visibility: visible;
+}
+
+/* Use these to set a faint background on hover */
+.hover-grey:hover {
+  background-color: #f8f8f8;
+}
+
 .bb-title {
   font: 14px sans-serif;
   font-weight: bold;
@@ -342,6 +362,29 @@ Lato, Lora, Inter, Merriweather, Roboto
   background-color: #363b3e;
   padding: 5px;
   padding-top: 6px;
+  transform: translateX(-100%);
+  animation: slideIn 0.3s ease-in-out;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.mwater-visualization-palette-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  z-index: 1000;
+}
+
+.mwater-visualization-palette-container:not(.hidden) .mwater-visualization-palette {
+  transform: translateX(0);
 }
 
 .mwater-visualization-palette-item {
@@ -543,11 +586,11 @@ Lato, Lora, Inter, Merriweather, Roboto
   background-color: rgba(0, 0, 0, 0.075);
 }
 
-._mviz-move:hover {
+.mwater-visualization-cursor-hover:hover {
   cursor: move;
 }
 
-._mviz-map-hover-content {
+.mwater-visualization-map-hover-content {
   display: grid;
   grid-template-columns: 1fr 2fr;
   grid-auto-rows: min-content;