@mwater/visualization 5.4.4 → 5.5.0

package/lib/widgets/charts/table/TableChartDesignerComponent.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 uuid_1 = __importDefault(require("uuid"));
 const expressions_1 = require("@mwater/expressions");
 const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
@@ -79,22 +78,18 @@ class TableChartDesignerComponent extends react_1.default.Component {
         this.updateDesign({ columns });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T `Data Source`), ": ", R(expressions_ui_3.TableSelectComponent, {
-            schema: this.props.schema,
-            value: this.props.design.table,
-            onChange: this.handleTableChange,
-            filter: this.props.design.filter,
-            onFilterChange: this.handleFilterChange
-        }));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("i", { className: "fa fa-database" }),
+                " ",
+                T `Data Source`),
+            ": ",
+            react_1.default.createElement(expressions_ui_3.TableSelectComponent, { schema: this.props.schema, value: this.props.design.table, onChange: this.handleTableChange, filter: this.props.design.filter, onFilterChange: this.handleFilterChange })));
     }
     renderTitle() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Title`), R("input", {
-            type: "text",
-            className: "form-control form-control-sm",
-            value: this.props.design.titleText,
-            onChange: this.handleTitleTextChange,
-            placeholder: T `Untitled`
-        }));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Title`),
+            react_1.default.createElement("input", { type: "text", className: "form-control form-control-sm", value: this.props.design.titleText, onChange: this.handleTitleTextChange, placeholder: T `Untitled` })));
     }
     renderColumn = (column, index, connectDragSource, connectDragPreview, connectDropTarget) => {
         const style = {
@@ -102,15 +97,8 @@ class TableChartDesignerComponent extends react_1.default.Component {
             paddingTop: 10,
             paddingBottom: 10
         };
-        return connectDragPreview(connectDropTarget(R("div", { key: index, style }, react_1.default.createElement(TableChartColumnDesignerComponent, {
-            design: this.props.design,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            index,
-            onChange: this.handleColumnChange.bind(null, index),
-            onRemove: this.handleRemoveColumn.bind(null, index),
-            connectDragSource
-        }))));
+        return connectDragPreview(connectDropTarget(react_1.default.createElement("div", { key: index, style: style },
+            react_1.default.createElement(TableChartColumnDesignerComponent, { design: this.props.design, schema: this.props.schema, dataSource: this.props.dataSource, index: index, onChange: this.handleColumnChange.bind(null, index), onRemove: this.handleRemoveColumn.bind(null, index), connectDragSource: connectDragSource }))));
     };
     handleReorder = (map) => {
         return this.updateDesign({ columns: map });
@@ -119,12 +107,12 @@ class TableChartDesignerComponent extends react_1.default.Component {
         if (!this.props.design.table) {
             return;
         }
-        return R("div", null, R(ReorderableListComponent_1.default, {
-            items: this.props.design.columns,
-            onReorder: this.handleReorder,
-            renderItem: this.renderColumn,
-            getItemId: (item) => item.id
-        }), R("button", { className: "btn btn-secondary btn-sm", type: "button", onClick: this.handleAddColumn }, R("span", { className: "fas fa-plus" }), " ", T `Add Column`));
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(ReorderableListComponent_1.default, { items: this.props.design.columns, onReorder: this.handleReorder, renderItem: this.renderColumn, getItemId: (item) => item.id }),
+            react_1.default.createElement("button", { className: "btn btn-secondary btn-sm", type: "button", onClick: this.handleAddColumn },
+                react_1.default.createElement("span", { className: "fas fa-plus" }),
+                " ",
+                T `Add Column`)));
     }
     // return R 'div', className: "form-group",
     //   _.map(@props.design.columns, (column, i) => @renderColumn(i))
@@ -134,41 +122,47 @@ class TableChartDesignerComponent extends react_1.default.Component {
         if (!this.props.design.table) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-sort-amount-down" }), " ", T `Ordering`), R("div", { style: { marginLeft: 8 } }, react_1.default.createElement(OrderingsComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            orderings: this.props.design.orderings,
-            onOrderingsChange: this.handleOrderingsChange,
-            table: this.props.design.table
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("span", { className: "fas fa-sort-amount-down" }),
+                " ",
+                T `Ordering`),
+            react_1.default.createElement("div", { style: { marginLeft: 8 } },
+                react_1.default.createElement(OrderingsComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, orderings: this.props.design.orderings, onOrderingsChange: this.handleOrderingsChange, table: this.props.design.table }))));
     }
     renderFilter() {
         // If no table, hide
         if (!this.props.design.table) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", T `Filters`), R("div", { style: { marginLeft: 8 } }, react_1.default.createElement(expressions_ui_2.FilterExprComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            onChange: this.handleFilterChange,
-            table: this.props.design.table,
-            value: this.props.design.filter
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" },
+                react_1.default.createElement("span", { className: "fas fa-filter" }),
+                " ",
+                T `Filters`),
+            react_1.default.createElement("div", { style: { marginLeft: 8 } },
+                react_1.default.createElement(expressions_ui_2.FilterExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, onChange: this.handleFilterChange, table: this.props.design.table, value: this.props.design.filter }))));
     }
     renderLimit() {
         // If no table, hide
         if (!this.props.design.table) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Maximum Number of Rows (up to 1000)`), R("div", { style: { marginLeft: 8 } }, R(ui.NumberInput, {
-            value: this.props.design.limit,
-            onChange: this.handleLimitChange,
-            decimal: false,
-            placeholder: "1000"
-        })));
+        return (react_1.default.createElement("div", { className: "mb-3" },
+            react_1.default.createElement("label", { className: "text-muted" }, T `Maximum Number of Rows (up to 1000)`),
+            react_1.default.createElement("div", { style: { marginLeft: 8 } },
+                react_1.default.createElement(ui.NumberInput, { value: this.props.design.limit, onChange: this.handleLimitChange, decimal: false, placeholder: "1000" }))));
     }
     render() {
-        return R("div", null, this.renderTable(), this.renderColumns(), this.props.design.table ? R("hr") : undefined, this.renderOrderings(), this.renderFilter(), this.renderLimit(), R("hr"), this.renderTitle());
+        return (react_1.default.createElement("div", null,
+            this.renderTable(),
+            this.renderColumns(),
+            this.props.design.table ? react_1.default.createElement("hr", null) : undefined,
+            this.renderOrderings(),
+            this.renderFilter(),
+            this.renderLimit(),
+            react_1.default.createElement("hr", null),
+            this.renderTitle()));
     }
 }
 exports.default = TableChartDesignerComponent;
@@ -197,21 +191,18 @@ class TableChartColumnDesignerComponent extends react_1.default.Component {
     };
     renderRemove() {
         if (this.props.design.columns.length > 1) {
-            return R("button", { className: "btn btn-sm btn-link float-end", type: "button", onClick: this.props.onRemove }, R("span", { className: "fas fa-times" }));
+            return (react_1.default.createElement("button", { className: "btn btn-sm btn-link float-end", type: "button", onClick: this.props.onRemove },
+                react_1.default.createElement("span", { className: "fas fa-times" })));
         }
         return null;
     }
     renderExpr() {
         const column = this.props.design.columns[this.props.index];
         const title = T `Value`;
-        return R("div", null, R("label", { className: "text-muted" }, title), ": ", react_1.default.createElement(expressions_ui_1.ExprComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            value: column.textAxis ? column.textAxis.expr : null,
-            onChange: this.handleExprChange,
-            aggrStatuses: ["literal", "individual", "aggregate"]
-        }));
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("label", { className: "text-muted" }, title),
+            ": ",
+            react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, value: column.textAxis ? column.textAxis.expr : null, onChange: this.handleExprChange, aggrStatuses: ["literal", "individual", "aggregate"] })));
     }
     renderFormat() {
         const column = this.props.design.columns[this.props.index];
@@ -225,25 +216,19 @@ class TableChartColumnDesignerComponent 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: column.format != null ? 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: column.format != null ? 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)))));
     }
     renderHeader() {
         const column = this.props.design.columns[this.props.index];
         const axisBuilder = new AxisBuilder_1.default({ schema: this.props.schema });
         const placeholder = column.textAxis ? axisBuilder.summarizeAxis(column.textAxis ?? null, this.context) : "";
-        return R("div", null, R("label", { className: "text-muted" }, T `Header`), ": ", R("input", {
-            type: "text",
-            className: "form-control form-control-sm",
-            style: { display: "inline-block", width: "15em" },
-            value: column.headerText,
-            onChange: this.handleHeaderTextChange,
-            placeholder
-        }));
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("label", { className: "text-muted" }, T `Header`),
+            ": ",
+            react_1.default.createElement("input", { type: "text", className: "form-control form-control-sm", style: { display: "inline-block", width: "15em" }, value: column.headerText, onChange: this.handleHeaderTextChange, placeholder: placeholder })));
     }
     renderSummarize() {
         const column = this.props.design.columns[this.props.index];
@@ -252,31 +237,21 @@ class TableChartColumnDesignerComponent extends react_1.default.Component {
         if (!exprType || exprType !== 'number') {
             return null;
         }
-        return R('div', null, R(ui.Checkbox, { value: column.summarize, inline: true, onChange: (summarize) => this.updateColumn({ summarize, summaryType: column.summaryType ?? 'sum' }) }, T `Summarize`), column.summarize ?
-            R('div', null, R("label", { className: "text-muted" }, T `Summary Type`), ": ", R(ui.Select, {
-                inline: true,
-                value: column.summaryType,
-                onChange: (summaryType) => this.updateColumn({ summaryType }),
-                options: [{ value: 'avg', label: T `Average` }, { value: 'sum', label: T `Sum` }, { value: 'min', label: T `Minimum` }, { value: 'max', label: T `Maximum` }]
-            })) : undefined);
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(ui.Checkbox, { value: column.summarize, inline: true, onChange: (summarize) => this.updateColumn({ summarize, summaryType: column.summaryType ?? 'sum' }) }, T `Summarize`),
+            column.summarize ?
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { className: "text-muted" }, T `Summary Type`),
+                    ": ",
+                    react_1.default.createElement(ui.Select, { inline: true, value: column.summaryType, onChange: (summaryType) => this.updateColumn({ summaryType }), options: [{ value: 'avg', label: T `Average` }, { value: 'sum', label: T `Sum` }, { value: 'min', label: T `Minimum` }, { value: 'max', label: T `Maximum` }] }))
+                : undefined));
     }
     renderBackgroundColorAxis() {
         const column = this.props.design.columns[this.props.index];
         if (!column.textAxis)
             return null;
-        return R(ui.CollapsibleSection, {
-            label: T `Background color by data`,
-            labelMuted: true
-        }, R(AxisComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            types: ["enum", "text", "boolean", "date"],
-            value: column.backgroundColorAxis,
-            onChange: (backgroundColorAxis) => this.updateColumn({ backgroundColorAxis }),
-            showColorMap: true,
-            aggrNeed: "optional"
-        }));
+        return (react_1.default.createElement(ui.CollapsibleSection, { label: T `Background color by data`, labelMuted: true },
+            react_1.default.createElement(AxisComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.design.table, types: ["enum", "text", "boolean", "date"], value: column.backgroundColorAxis, onChange: (backgroundColorAxis) => this.updateColumn({ backgroundColorAxis }), showColorMap: true, aggrNeed: "optional" })));
     }
     render() {
         const iconStyle = {
@@ -286,6 +261,15 @@ class TableChartColumnDesignerComponent extends react_1.default.Component {
             fontSize: 12,
             height: 20
         };
-        return R("div", null, this.props.connectDragSource(R("i", { className: "fa fa-bars", style: iconStyle })), this.renderRemove(), R("label", null, T `Column ${this.props.index + 1}`), R("div", { style: { marginLeft: 5 } }, this.renderExpr(), this.renderFormat(), this.renderHeader(), this.renderSummarize(), this.renderBackgroundColorAxis()));
+        return (react_1.default.createElement("div", null,
+            this.props.connectDragSource(react_1.default.createElement("i", { className: "fa fa-bars", style: iconStyle })),
+            this.renderRemove(),
+            react_1.default.createElement("label", null, T `Column ${this.props.index + 1}`),
+            react_1.default.createElement("div", { style: { marginLeft: 5 } },
+                this.renderExpr(),
+                this.renderFormat(),
+                this.renderHeader(),
+                this.renderSummarize(),
+                this.renderBackgroundColorAxis())));
     }
 }

package/lib/widgets/charts/table/TableChartViewComponent.d.ts

@@ -19,11 +19,5 @@ export interface TableChartViewComponentProps {
 }
 export default class TableChartViewComponent extends React.Component<TableChartViewComponentProps> {
     shouldComponentUpdate(prevProps: TableChartViewComponentProps): boolean;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            width: number | undefined;
-            height: number | undefined;
-        };
-        className: string;
-    }, HTMLElement>;
+    render(): React.JSX.Element;
 }

package/lib/widgets/charts/table/TableChartViewComponent.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 react_linkify_1 = __importDefault(require("react-linkify"));
 const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
 const expressions_1 = require("@mwater/expressions");
@@ -21,14 +20,9 @@ class TableChartViewComponent extends react_1.default.Component {
             width: this.props.width,
             height: this.props.height
         };
-        return R("div", { style, className: "overflow-auto-except-print" }, R("div", { style: { fontWeight: "bold", textAlign: "center" } }, this.props.design.titleText), R(TableContentsComponent, {
-            columns: this.props.design.columns,
-            table: this.props.design.table,
-            data: this.props.data,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            onRowClick: this.props.onRowClick
-        }));
+        return (react_1.default.createElement("div", { style: style, className: "overflow-auto-except-print" },
+            react_1.default.createElement("div", { style: { fontWeight: "bold", textAlign: "center" } }, this.props.design.titleText),
+            react_1.default.createElement(TableContentsComponent, { columns: this.props.design.columns, table: this.props.design.table, data: this.props.data, schema: this.props.schema, dataSource: this.props.dataSource, onRowClick: this.props.onRowClick })));
     }
 }
 exports.default = TableChartViewComponent;
@@ -90,19 +84,13 @@ class TableContentsComponent extends react_1.default.Component {
         const column = this.props.columns[index];
         //(this.state.sort?.direction === 'asc' ? "":"")
         const text = column.headerText ?? (column.textAxis ? axisBuilder.summarizeAxis(column.textAxis, this.context) : "");
-        return R("th", {
-            key: index,
-            style: { cursor: "pointer" },
-            onClick: () => this.handleSort(index)
-        }, text, this.state.sort?.column === index
-            ? R("span", {
-                style: { marginLeft: 10 },
-                className: `fa ${this.state.sort?.direction === "asc" ? "fa-sort-asc" : "fa-sort-desc"}`
-            })
-            : undefined);
+        return (react_1.default.createElement("th", { key: index, style: { cursor: "pointer" }, onClick: () => this.handleSort(index) },
+            text,
+            this.state.sort?.column === index ? (react_1.default.createElement("span", { style: { marginLeft: 10 }, className: `fa ${this.state.sort?.direction === "asc" ? "fa-sort-asc" : "fa-sort-desc"}` })) : undefined));
     }
     renderHeader() {
-        return R("thead", { key: "head" }, R("tr", { key: "head" }, lodash_1.default.map(this.props.columns, (column, i) => this.renderHeaderCell(i))));
+        return (react_1.default.createElement("thead", { key: "head" },
+            react_1.default.createElement("tr", { key: "head" }, lodash_1.default.map(this.props.columns, (column, i) => this.renderHeaderCell(i)))));
     }
     renderFooterCell(index) {
         const exprUtils = new expressions_1.ExprUtils(this.props.schema);
@@ -120,11 +108,12 @@ class TableContentsComponent extends react_1.default.Component {
         if (!this.props.data.summary) {
             return null;
         }
-        return R("tfoot", { key: "foot" }, R("tr", { key: "foot" }, lodash_1.default.map(this.props.columns, (column, i) => R("th", { key: i }, this.renderFooterCell(i)))));
+        return (react_1.default.createElement("tfoot", { key: "foot" },
+            react_1.default.createElement("tr", { key: "foot" }, lodash_1.default.map(this.props.columns, (column, i) => react_1.default.createElement("th", { key: i }, this.renderFooterCell(i))))));
     }
     renderImage(id) {
         const url = this.props.dataSource.getImageUrl(id);
-        return R("a", { href: url, onClick: (e) => { e.stopPropagation(); }, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, T `Image`);
+        return (react_1.default.createElement("a", { href: url, onClick: (e) => { e.stopPropagation(); }, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, T `Image`));
     }
     renderCell(rowIndex, columnIndex) {
         const axisBuilder = new AxisBuilder_1.default({ schema: this.props.schema });
@@ -163,7 +152,7 @@ class TableContentsComponent extends react_1.default.Component {
                 switch (exprType) {
                     case "text":
                         if (lodash_1.default.isString(value)) {
-                            node = R(react_linkify_1.default, { properties: { target: "_blank" } }, value);
+                            node = react_1.default.createElement(react_linkify_1.default, { properties: { target: "_blank" } }, value);
                         }
                         break;
                     case "number":
@@ -211,15 +200,18 @@ class TableContentsComponent extends react_1.default.Component {
             const lightness = 1 - (1 - c.luminosity()) * c.alpha();
             textColor = lightness < 0.3 ? "rgb(204,204,204)" : "inherit";
         }
-        return R("td", { key: columnIndex, style: { backgroundColor, color: textColor } }, node);
+        return react_1.default.createElement("td", { key: columnIndex, style: { backgroundColor, color: textColor } }, node);
     }
     renderRow(index) {
-        return R("tr", { key: index, onClick: this.handleRowClick.bind(null, index) }, lodash_1.default.map(this.props.columns, (column, i) => this.renderCell(index, i)));
+        return (react_1.default.createElement("tr", { key: index, onClick: this.handleRowClick.bind(null, index) }, lodash_1.default.map(this.props.columns, (column, i) => this.renderCell(index, i))));
     }
     renderBody() {
-        return R("tbody", { key: "body" }, lodash_1.default.map(this.state.data, (row, i) => this.renderRow(i)));
+        return (react_1.default.createElement("tbody", { key: "body" }, lodash_1.default.map(this.state.data, (row, i) => this.renderRow(i))));
     }
     render() {
-        return R("table", { className: "mwater-visualization-table", style: { marginBottom: 0 } }, this.renderHeader(), this.renderBody(), this.renderFooter());
+        return (react_1.default.createElement("table", { className: "mwater-visualization-table", style: { marginBottom: 0 } },
+            this.renderHeader(),
+            this.renderBody(),
+            this.renderFooter()));
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mwater/visualization",
-  "version": "5.4.4",
+  "version": "5.5.0",
   "description": "Visualization library",
   "main": "lib/index.js",
   "scripts": {
@@ -10,11 +10,6 @@
     "build": "rsync -av --exclude '*.ts' --exclude '*.tsx' src/ lib/ ; tsc -p tsconfig.build.json",
     "prepublish": "npm run build"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm test"
-    }
-  },
   "style": "lib/index.css",
   "author": "mWater",
   "license": "MIT",
@@ -75,7 +70,8 @@
     "shallowequal": "^0.2.2",
     "update-object": "^1.0.0",
     "utm": "^1.1.1",
-    "uuid": "^3.4.0"
+    "uuid": "^3.4.0",
+    "xlsx-js-style": "^1.2.0"
   },
   "devDependencies": {
     "@kadira/storybook": "^2.21.0",
@@ -101,7 +97,6 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "esbuild": "^0.8.34",
-    "husky": "^1.0.0-rc.13",
     "ignore-styles": "^5.0.1",
     "jsdom": "^15.2.1",
     "react-addons-test-utils": "^0.14.0",

package/src/MWaterContextComponent.tsx

@@ -2,7 +2,7 @@ import _ from "lodash"
 import React, { createContext } from "react"
 const R = React.createElement
 
-import MWaterTableSelectComponent from "./MWaterTableSelectComponent"
+import MWaterTableSelectComponent from "./mwater_table_selection/MWaterTableSelectComponent"
 import MWaterAddRelatedFormComponent from "./MWaterAddRelatedFormComponent"
 import MWaterAddRelatedIndicatorComponent from "./MWaterAddRelatedIndicatorComponent"
 import MWaterGlobalFiltersComponent from "./MWaterGlobalFiltersComponent"

package/src/MWaterLoaderComponent.ts

@@ -24,7 +24,7 @@ export interface MWaterLoaderComponentProps {
   locales?: string[]
   /**  Override default add layer component. See AddLayerComponent for details */
   addLayerElementFactory?: AddLayerElementFactory
-  children: (error: any, config?: { schema: Schema; dataSource: DataSource }) => ReactElement<any>
+  children: (error: any, config?: { schema: Schema; dataSource: DataSource }) => ReactElement<any> | null
   /** Custom error formatter that returns React node or string, gets passed the error response from server */
   errorFormatter?: (data: any, defaultError: string) => string
   /** Origin of usage. e.g. "dashboards:43445364..." */

package/src/dashboards/DashboardComponent.tsx

@@ -107,7 +107,8 @@ export default class DashboardComponent extends React.Component<DashboardCompone
         props.onDesignChange != null,
       layoutOptionsOpen: false,
       hideQuickfilters:
-        layoutOptions.hideQuickfiltersWidth != null && layoutOptions.hideQuickfiltersWidth > document.body.clientWidth,
+        layoutOptions.hideQuickfiltersWidth === 0 || 
+        (layoutOptions.hideQuickfiltersWidth != null && layoutOptions.hideQuickfiltersWidth > document.body.clientWidth),
       refreshKey: 1,
       locale: initialLocale
     }

package/src/dashboards/LayoutOptionsComponent.tsx

@@ -91,8 +91,9 @@ export function LayoutOptionsComponent(props: {
           <div style={{ backgroundColor: "#888" }}></div>
           <div style={{ height: "100%", display: "grid", gridTemplateRows: "auto 1fr" }}>
             <div key="quickfilters">
-              {layoutOptions.hideQuickfiltersWidth == null ||
-                sizeOptions[previewSize].value.width > layoutOptions.hideQuickfiltersWidth
+              {(layoutOptions.hideQuickfiltersWidth !== 0) && 
+                (layoutOptions.hideQuickfiltersWidth == null ||
+                 sizeOptions[previewSize].value.width > layoutOptions.hideQuickfiltersWidth)
                 ? props.quickfiltersView
                 : null}
             </div>
@@ -376,6 +377,7 @@ function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOp
               onLayoutOptionsChange({ ...layoutOptions, hideQuickfiltersWidth })
             }}
             sign="< "
+            includeAlways
           />
         </FormGroup>
         <FormGroup label={T`Minimum Width (before scrolling or scaling)`}>
@@ -515,20 +517,30 @@ function WidthSelector(props: {
   onChange: (value: number | null) => void
   /** E.g. >=, <= */
   sign: string
+  /** If true, include an "Always" option with value 0 */
+  includeAlways?: boolean
 }) {
+  // Create options array with conditional "Always" option
+  const options = [
+    { value: 400, label: `${props.sign}400px (${T`Phone`})` },
+    { value: 600, label: `${props.sign}600px (${T`Small tablet`})` },
+    { value: 800, label: `${props.sign}800px (${T`Tablet`})` },
+    { value: 1000, label: `${props.sign}1000px (${T`Laptop`})` },
+    { value: 1200, label: `${props.sign}1200px (${T`Desktop`})` },
+    { value: 1600, label: `${props.sign}1600px (${T`Wide Desktop`})` }
+  ]
+
+  // Add "Always" option if requested
+  if (props.includeAlways) {
+    options.push({ value: 0, label: T`Always` })
+  }
+
   return (
     <Select
       value={props.value}
       onChange={props.onChange}
       nullLabel={T`N/A`}
-      options={[
-        { value: 400, label: `${props.sign}400px (${T`Phone`})` },
-        { value: 600, label: `${props.sign}600px (${T`Small tablet`})` },
-        { value: 800, label: `${props.sign}800px (${T`Tablet`})` },
-        { value: 1000, label: `${props.sign}1000px (${T`Laptop`})` },
-        { value: 1200, label: `${props.sign}1200px (${T`Desktop`})` },
-        { value: 1600, label: `${props.sign}1600px (${T`Wide Desktop`})` }
-      ]}
+      options={options}
     />
   )
 }

package/src/dashboards/ServerDashboardDataSource.ts

@@ -28,7 +28,7 @@ interface ServerDashboardDataSourceOptions {
   dataSource: DataSource
 
   /** revision to use to allow caching */
-  rev: string
+  rev?: number
 }
 
 interface ServerWidgetDataSourceOptions extends ServerDashboardDataSourceOptions {
@@ -454,6 +454,41 @@ class ServerWidgetLayerDataSource implements MapLayerDataSource {
 
     return url
   }
+
+  /** Gets hover over data for hover over items
+   * @param design The design of the layer
+   * @param data The data of the current item being hovered over. e.g. { id: 123 }
+   * @param filters The filters to apply to the layer does not include filters that narrow down to a specific item
+   * @returns A promise that resolves to the hover over data, indexed by the id of the hover over item
+   */
+  async getHoverOverData(design: any, data: any, filters: JsonQLFilter[]): Promise<{ [key: string]: any }> {
+    const query = {
+      client: this.options.client,
+      share: this.options.share,
+      filters: compressJson(filters || []),
+      data: compressJson(data),
+      rev: this.options.rev
+    }
+
+    const url =
+      `${this.options.apiUrl}dashboards/${this.options.dashboardId}/widgets/${this.options.widgetId}/layers/${this.options.layerView.id}/hoverdata?` +
+      querystring.stringify(query)
+
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        Accept: "application/json"
+      }
+    })
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      console.error(errorText)
+      throw new Error(`Error fetching hover data: ${response.statusText}`)
+    }
+
+    return await response.json()
+  }
 }
 
 interface ServerWidgetLayerPopupDataSourceOptions extends ServerDashboardDataSourceOptions {

package/src/dashboards/layoutOptions.tsx

@@ -21,7 +21,11 @@ export interface BlocksLayoutOptions {
   /** Width above which pads */
   maximumWidth: number | null
 
-  /** Width at which to hide quickfilters. Null for never */
+  /** Width at which to hide quickfilters. 
+   * Null for never hide
+   * 0 for always hide 
+   * Positive number for responsive hiding based on width
+   */
   hideQuickfiltersWidth: number | null
 
   /** The padding around the entire dashboard */

package/src/datagrids/DatagridComponent.tsx

@@ -380,7 +380,7 @@ export default forwardRef<DatagridComponentRef, DatagridComponentProps>(function
     return (
       <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 40, padding: 4 }}>
         <div style={{ float: "right" }}>
-          {design.showNumRows && numRows ? <small className='text-muted text-sm'>{`${d3Format(',')(numRows)} rows`}</small> : undefined}
+          {design.showNumRows && numRows ? <small className='text-muted text-sm me-2'>{`${d3Format(',')(numRows)} rows`}</small> : undefined}
           {renderDeleteRows()}
           {renderFindReplace()}
           {renderCellEdit()}