@mwater/visualization 5.3.1 → 5.4.0

package/lib/datagrids/DatagridComponent.js

@@ -18,6 +18,7 @@ const QuickfiltersComponent_1 = __importDefault(require("../quickfilter/Quickfil
 const QuickfilterCompiler_1 = __importDefault(require("../quickfilter/QuickfilterCompiler"));
 const FindReplaceModalComponent_1 = __importDefault(require("./FindReplaceModalComponent"));
 const d3_format_1 = require("d3-format");
+const expressions_ui_1 = require("@mwater/expressions-ui");
 // Datagrid with decorations
 // See README.md for description of datagrid format
 // Design should be cleaned already before being passed in (see DatagridUtils)
@@ -28,9 +29,9 @@ class DatagridComponent extends react_1.default.Component {
     constructor(props) {
         super(props);
         this.state = {
-            editingDesign: false,
-            cellEditingEnabled: false,
-            quickfiltersHeight: null,
+            editingDesign: false, // is design being edited
+            cellEditingEnabled: false, // True if cells can be edited directly
+            quickfiltersHeight: null, // Height of quickfilters
             quickfiltersValues: null,
             refreshKey: 1
         };
@@ -58,7 +59,7 @@ class DatagridComponent extends react_1.default.Component {
         this.props.datagridDataSource.countRows(this.props.design, filters, (error, numRows) => {
             if (error) {
                 console.error(error);
-                alert(T("Error loading data"));
+                alert(T `Error loading data`);
                 return;
             }
             console.log(numRows);
@@ -93,7 +94,7 @@ class DatagridComponent extends react_1.default.Component {
             return this.setState({ cellEditingEnabled: false });
         }
         else {
-            if (confirm(T("Turn on cell editing? This will allow you to edit the live data and is an advanced feature."))) {
+            if (confirm(T `Turn on cell editing? This will allow you to edit the live data and is an advanced feature.`)) {
                 return this.setState({ cellEditingEnabled: true });
             }
         }
@@ -157,7 +158,7 @@ class DatagridComponent extends react_1.default.Component {
         const label = [
             R("i", { className: this.state.cellEditingEnabled ? "fa fa-fw fa-check-square" : "fa fa-fw fa-square-o" }),
             " ",
-            T("Cell Editing")
+            T `Cell Editing`
         ];
         return R("a", {
             key: "cell-edit",
@@ -173,7 +174,7 @@ class DatagridComponent extends react_1.default.Component {
             type: "button",
             className: "btn btn-primary",
             onClick: this.handleEdit
-        }, R("span", { className: "fas fa-cog" }), " ", T("Settings"));
+        }, R("span", { className: "fas fa-cog" }), " ", T `Settings`);
     }
     renderFindReplace() {
         if (!this.state.cellEditingEnabled) {
@@ -183,10 +184,10 @@ class DatagridComponent extends react_1.default.Component {
             key: "findreplace",
             className: "btn btn-link btn-sm",
             onClick: () => this.findReplaceModal.show()
-        }, T("Find/Replace"));
+        }, T `Find/Replace`);
     }
     renderTitleBar() {
-        return R("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: 40, padding: 4 } }, R("div", { style: { float: "right" } }, this.props.design.showNumRows && this.state.numRows ? R("small", { className: 'text-muted text-sm' }, `${(0, d3_format_1.format)(',')(this.state.numRows)} rows`) : undefined, this.renderFindReplace(), this.renderCellEdit(), this.renderEditButton(), R("a", { key: "refresh", className: "btn btn-link btn-sm", onClick: this.handleRefreshData }, R("span", { className: "fas fa-sync" }), R("span", { className: "hide-600px" }, " Refresh")), this.props.extraTitleButtonsElem), this.props.titleElem);
+        return R("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: 40, padding: 4 } }, R("div", { style: { float: "right" } }, this.props.design.showNumRows && this.state.numRows ? R("small", { className: 'text-muted text-sm' }, `${(0, d3_format_1.format)(',')(this.state.numRows)} rows`) : undefined, this.renderFindReplace(), this.renderCellEdit(), this.renderEditButton(), 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.props.extraTitleButtonsElem), this.props.titleElem);
     }
     renderQuickfilter() {
         return R("div", {
@@ -246,7 +247,7 @@ class DatagridComponent extends react_1.default.Component {
         let filters = this.props.filters || [];
         // Compile quickfilters
         filters = filters.concat(this.getQuickfilterFilters());
-        return R("div", {
+        return R(expressions_ui_1.LocaleContext.Provider, { value: this.props.design.locale || "en" }, R("div", {
             style: {
                 width: "100%",
                 height: "100%",
@@ -261,7 +262,7 @@ class DatagridComponent extends react_1.default.Component {
                     ref: (view) => {
                         this.datagridView = view;
                     },
-                    width: size.width - 1,
+                    width: size.width - 1, // minus 1 px to test if it solves the jitter with scroll
                     height: size.height - 1,
                     pageSize: 100,
                     schema: this.props.schema,
@@ -278,12 +279,12 @@ class DatagridComponent extends react_1.default.Component {
                 });
             }
             else if (this.props.onDesignChange) {
-                return R("div", { style: { textAlign: "center", marginTop: size.height / 2 } }, R("a", { className: "btn btn-link", onClick: this.handleEdit }, T("Click Here to Configure")));
+                return R("div", { style: { textAlign: "center", marginTop: size.height / 2 } }, R("a", { className: "btn btn-link", onClick: this.handleEdit }, T `Click Here to Configure`));
             }
             else {
                 return null;
             }
-        }));
+        })));
     }
 }
 exports.default = DatagridComponent;

package/lib/datagrids/DatagridDesignerComponent.js

@@ -75,7 +75,7 @@ class DatagridDesignerComponent extends react_1.default.Component {
             tabs: [
                 {
                     id: "columns",
-                    label: T("Columns"),
+                    label: T `Columns`,
                     elem: R(ColumnsDesignerComponent, {
                         schema: this.props.schema,
                         dataSource: this.props.dataSource,
@@ -86,7 +86,7 @@ class DatagridDesignerComponent extends react_1.default.Component {
                 },
                 {
                     id: "filter",
-                    label: T("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,
@@ -107,7 +107,7 @@ class DatagridDesignerComponent extends react_1.default.Component {
                 },
                 {
                     id: "order",
-                    label: T("Sorting"),
+                    label: T `Sorting`,
                     elem: R("div", { style: { marginBottom: 200 } }, R(OrderBysDesignerComponent_1.default, {
                         schema: this.props.schema,
                         dataSource: this.props.dataSource,
@@ -118,7 +118,7 @@ class DatagridDesignerComponent extends react_1.default.Component {
                 },
                 {
                     id: "quickfilters",
-                    label: T("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 } })),
@@ -129,7 +129,7 @@ class DatagridDesignerComponent extends react_1.default.Component {
                 },
                 {
                     id: "options",
-                    label: T("Options"),
+                    label: T `Options`,
                     elem: R("div", { style: { marginBottom: 200 } }, R(DatagridOptionsComponent, {
                         design: this.props.design,
                         onDesignChange: this.props.onDesignChange
@@ -139,7 +139,7 @@ class DatagridDesignerComponent extends react_1.default.Component {
         });
     }
     render() {
-        return R("div", null, R("label", null, T("Data Source:")), R(expressions_ui_3.TableSelectComponent, {
+        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
@@ -156,9 +156,9 @@ function DatagridOptionsComponent(props) {
         })), "label");
     }, []);
     return react_1.default.createElement("div", null,
-        react_1.default.createElement(ui.Checkbox, { value: props.design.showRowNumbers, onChange: (showRowNumbers) => props.onDesignChange({ ...props.design, showRowNumbers }) }, T("Show row numbers")),
-        react_1.default.createElement(ui.Checkbox, { value: props.design.showNumRows, onChange: (showNumRows) => props.onDesignChange({ ...props.design, showNumRows }) }, T("Show number of rows")),
-        react_1.default.createElement(ui.FormGroup, { label: T("Language"), hint: T("Preferred language of the datagrid") },
+        react_1.default.createElement(ui.Checkbox, { value: props.design.showRowNumbers, onChange: (showRowNumbers) => props.onDesignChange({ ...props.design, showRowNumbers }) }, T `Show row numbers`),
+        react_1.default.createElement(ui.Checkbox, { value: props.design.showNumRows, onChange: (showNumRows) => props.onDesignChange({ ...props.design, showNumRows }) }, T `Show number of rows`),
+        react_1.default.createElement(ui.FormGroup, { label: T `Language`, hint: T `Preferred language of the datagrid` },
             react_1.default.createElement(react_select_1.default, { value: localeOptions.find(opt => opt.value == (props.design.locale || "en")) || null, options: localeOptions, onChange: (locale) => props.onDesignChange({ ...props.design, locale: locale.value }) })));
 }
 // Columns list
@@ -191,7 +191,7 @@ class ColumnsDesignerComponent extends react_1.default.Component {
             type: "expr",
             width: 150,
             expr: { type: "id", table: this.props.table },
-            label: T("Unique Id")
+            label: T `Unique Id`
         });
         return this.props.onColumnsChange(columns);
     };
@@ -206,7 +206,7 @@ class ColumnsDesignerComponent extends react_1.default.Component {
                 id: (0, uuid_1.default)(),
                 width: 150,
                 type: "expr",
-                label: null,
+                label: null, // Use default label instead. # labeledExpr.label
                 expr: labeledExpr.expr
             });
         }
@@ -235,12 +235,12 @@ class ColumnsDesignerComponent extends react_1.default.Component {
             type: "button",
             className: "btn btn-link btn-sm",
             onClick: this.handleAddDefaultColumns
-        }, R("span", { className: "fas fa-plus" }), " " + T("Add Default Columns")), R("button", {
+        }, 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, {
+        }, 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,
@@ -250,12 +250,12 @@ class ColumnsDesignerComponent extends react_1.default.Component {
             type: "button",
             className: "btn btn-link",
             onClick: this.handleAddColumn
-        }, R("span", { className: "fas fa-plus" }), " " + T("Add Column")), R("button", {
+        }, 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)"))));
+        }, R("span", { className: "fas fa-plus" }), " " + T `Add Unique Id (advanced)`)));
     }
 }
 // Column item
@@ -317,10 +317,10 @@ 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 R("a", { className: "btn btn-sm btn-link", onClick: this.handleSplitEnumset }, R("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 R("a", { className: "btn btn-sm btn-link", onClick: this.handleSplitGeometry }, R("i", { className: "fa fa-chain-broken" }), " " + T `Split by lat/lng`);
                 break;
         }
         return null;
@@ -335,7 +335,7 @@ 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", {
+        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" },

package/lib/datagrids/DatagridQueryBuilder.d.ts

@@ -47,13 +47,13 @@ export default class DatagridQueryBuilder {
     }): JsonQLQuery;
     createComplexSubtableQuery(design: DatagridDesign, options: {
         /** start at row offset */
-        offset?: number | undefined;
+        offset?: number;
         /** limit rows */
-        limit?: number | undefined;
+        limit?: number;
         /** array of additional filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. } */
-        extraFilters?: JsonQLFilter[] | undefined;
+        extraFilters?: JsonQLFilter[];
         /** repeat main level values in subtable rows instead of leaving blank */
-        fillSubtableRows?: boolean | undefined;
+        fillSubtableRows?: boolean;
     } | undefined, subtable: any, subtableIndex: any): JsonQLQuery;
     getMainOrderByExprs(design: DatagridDesign, isAggr?: boolean): JsonQLExpr[];
     getMainOrderByDirections(design: any, isAggr?: boolean): any[];

package/lib/datagrids/DatagridUtils.js

@@ -69,10 +69,10 @@ class DatagridUtils {
     }
     validateDesign(design) {
         if (!design.table) {
-            return "Missing table";
+            return T `Missing table`;
         }
         if (!design.columns || !design.columns[0]) {
-            return "No columns";
+            return T `No columns`;
         }
         // Validate column exprs
         for (const column of design.columns) {

package/lib/datagrids/DatagridViewComponent.js

@@ -24,7 +24,7 @@ class DatagridViewComponent extends react_1.default.Component {
         this.state = {
             rows: [],
             entirelyLoaded: false,
-            editingCell: null,
+            editingCell: null, // set to { rowIndex: 0, 1, 2, columnIndex: 0, 1, 2... } if editing a cell
             savingCell: false // True when saving a cell's contents
         };
     }
@@ -54,7 +54,7 @@ class DatagridViewComponent extends react_1.default.Component {
         this.props.datagridDataSource.getRows(loadState.design, loadState.offset, loadState.limit, loadState.filters, (error, newRows) => {
             if (error) {
                 console.error(error);
-                alert(T("Error loading data"));
+                alert(T `Error loading data`);
                 return;
             }
             // Check that the required load state has not changed
@@ -101,7 +101,7 @@ class DatagridViewComponent extends react_1.default.Component {
         this.props.datagridDataSource.getRows(this.props.design, 0, 1, filters, (error, rows) => {
             if (error) {
                 console.error(error);
-                alert(T("Error loading data"));
+                alert(T `Error loading data`);
                 callback();
                 return;
             }
@@ -189,7 +189,7 @@ class DatagridViewComponent extends react_1.default.Component {
                     this.setState({ editingCell: null, savingCell: false });
                 });
             }).catch(error => {
-                alert(T("Error saving data"));
+                alert(T `Error saving data`);
                 console.error(error);
             });
         });

package/lib/datagrids/ExprCellComponent.js

@@ -19,7 +19,7 @@ class ExprCellComponent extends react_1.default.Component {
     };
     renderImage(id) {
         const url = this.props.dataSource.getImageUrl(id);
-        return R("a", { href: url, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, "Image");
+        return R("a", { href: url, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, T `Image`);
     }
     render() {
         let node;

package/lib/datagrids/FindReplaceModalComponent.js

@@ -21,10 +21,10 @@ class FindReplaceModalComponent extends react_1.default.Component {
     constructor(props) {
         super(props);
         this.state = {
-            open: false,
-            replaceColumn: null,
-            withExpr: null,
-            conditionExpr: null,
+            open: false, // True if modal is open
+            replaceColumn: null, // Column id to replace
+            withExpr: null, // Replace with expression
+            conditionExpr: null, // Condition expr
             busy: false
         };
     }
@@ -112,7 +112,7 @@ class FindReplaceModalComponent extends react_1.default.Component {
         try {
             const rows = await this.props.dataSource.performQuery(query);
             // Confirm
-            if (!confirm(T("Replace {0} values? This cannot be undone.", rows.length))) {
+            if (!confirm(T `Replace ${rows.length} values? This cannot be undone.`)) {
                 return;
             }
             // Perform updates
@@ -121,7 +121,7 @@ class FindReplaceModalComponent extends react_1.default.Component {
                 expr: replaceExpr,
                 value: exprType === "geometry" ? JSON.parse(row.withValue) : row.withValue
             })));
-            alert(T("Successfully replaced {0} values", rows.length));
+            alert(T `Successfully replaced ${rows.length} values`);
             this.setState({ open: false });
             this.props.onUpdate();
         }
@@ -194,13 +194,13 @@ class FindReplaceModalComponent extends react_1.default.Component {
         }));
         // Show progress
         if (this.state.busy) {
-            return R("div", null, R("h3", null, T("Working...")), R("div", { className: "progress" }, R("div", { className: "progress-bar progress-bar-striped progress-bar-animated", style: { width: `100%` } })));
+            return R("div", null, R("h3", null, T `Working...`), R("div", { className: "progress" }, R("div", { className: "progress-bar progress-bar-striped progress-bar-animated", style: { width: `100%` } })));
         }
-        return R("div", null, R("div", { key: "replace", className: "mb-3" }, R("label", null, T("Column with data to replace") + ": "), R(react_select_1.default, {
+        return R("div", null, R("div", { key: "replace", className: "mb-3" }, R("label", null, T `Column with data to replace` + ": "), R(react_select_1.default, {
             options: replaceColumnOptions,
             value: lodash_1.default.findWhere(replaceColumnOptions, { value: this.state.replaceColumn }) || null,
             onChange: (opt) => this.setState({ replaceColumn: opt.value }),
-            placeholder: T("Select Column..."),
+            placeholder: T `Select Column...`,
             styles: {
                 // Keep menu above fixed data table headers
                 menu: style => lodash_1.default.extend({}, style, { zIndex: 2 })
@@ -209,7 +209,7 @@ class FindReplaceModalComponent extends react_1.default.Component {
             if (this.state.replaceColumn) {
                 // Get expr of replace column
                 const replaceExpr = lodash_1.default.findWhere(this.props.design.columns, { id: this.state.replaceColumn }).expr;
-                return R("div", { key: "with", className: "mb-3" }, R("label", null, T("Value to replace data with") + ": "), R(expressions_ui_1.ExprComponent, {
+                return R("div", { key: "with", className: "mb-3" }, R("label", null, T `Value to replace data with` + ": "), R(expressions_ui_1.ExprComponent, {
                     schema: this.props.schema,
                     dataSource: this.props.dataSource,
                     table: this.props.design.table,
@@ -219,20 +219,20 @@ class FindReplaceModalComponent extends react_1.default.Component {
                     enumValues: exprUtils.getExprEnumValues(replaceExpr) || undefined,
                     idTable: exprUtils.getExprIdTable(replaceExpr) || undefined,
                     preferLiteral: true,
-                    placeholder: T("(Blank)"),
+                    placeholder: T `(Blank)`,
                     refExpr: replaceExpr
                 }));
             }
             return null;
-        })(), R("div", { key: "condition", className: "mb-3" }, R("label", null, T("Only in rows that (optional)") + ":"), R(expressions_ui_1.ExprComponent, {
+        })(), R("div", { key: "condition", className: "mb-3" }, R("label", null, T `Only in rows that (optional)` + ":"), R(expressions_ui_1.ExprComponent, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
             table: this.props.design.table,
             value: this.state.conditionExpr,
             onChange: value => this.setState({ conditionExpr: value }),
             types: ["boolean"],
-            placeholder: T("All Rows")
-        })), R("div", { key: "preview" }, R("h4", null, T("Preview")), this.renderPreview()));
+            placeholder: T `All Rows`
+        })), R("div", { key: "preview" }, R("h4", null, T `Preview`), this.renderPreview()));
     }
     render() {
         if (!this.state.open) {
@@ -240,21 +240,21 @@ class FindReplaceModalComponent extends react_1.default.Component {
         }
         return R(ModalPopupComponent_1.default, {
             size: "large",
-            header: T("Find/Replace"),
+            header: T `Find/Replace`,
             footer: [
                 R("button", {
                     key: "cancel",
                     type: "button",
                     onClick: () => this.setState({ open: false }),
                     className: "btn btn-secondary"
-                }, T("Cancel")),
+                }, T `Cancel`),
                 R("button", {
                     key: "apply",
                     type: "button",
                     disabled: !this.state.replaceColumn || this.state.busy,
                     onClick: () => this.performReplace(),
                     className: "btn btn-primary"
-                }, T("Apply"))
+                }, T `Apply`)
             ]
         }, this.renderContents());
     }

package/lib/datagrids/OrderBysDesignerComponent.js

@@ -42,7 +42,7 @@ class OrderBysDesignerComponent extends react_1.default.Component {
             type: "button",
             className: "btn btn-link",
             onClick: this.handleAdd
-        }, R("span", { className: "fas fa-plus" }), " " + T("Add Ordering")));
+        }, R("span", { className: "fas fa-plus" }), " " + T `Add Ordering`));
     }
 }
 exports.default = OrderBysDesignerComponent;
@@ -62,6 +62,6 @@ class OrderByDesignerComponent extends react_1.default.Component {
             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" }))));
+        })), 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" }))));
     }
 }

package/lib/languages.js

@@ -790,8 +790,8 @@ exports.languages = [
     },
     {
         "code": "tet",
-        "name": "Tetun",
-        "en": "Tetun"
+        "name": "Tetum",
+        "en": "Tetum"
     },
     {
         "code": "tg",

package/lib/layouts/DecoratedBlockComponent.js

@@ -11,8 +11,8 @@ class DecoratedBlockComponent extends react_1.default.Component {
     constructor(props) {
         super(props);
         this.state = {
-            aspectDragY: null,
-            initialAspectDragY: null,
+            aspectDragY: null, // y position of aspect ratio drag
+            initialAspectDragY: null, // Initial y position of aspect ratio drag
             initialClientY: null // first y of mousemove (for calculating difference)
         };
     }

package/lib/layouts/blocks/BlocksDisplayComponent.js

@@ -123,15 +123,15 @@ class BlocksDisplayComponent extends react_1.default.Component {
     renderPalette() {
         return (react_1.default.createElement("div", { key: "palette", style: { width: 141, height: "100%", position: "absolute", top: 0, left: 0 } },
             react_1.default.createElement("div", { className: "mwater-visualization-palette", style: { height: "100%" } },
-                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "widget", widgetType: "Text", design: { style: "title" } }), title: react_1.default.createElement("i", { className: "fa fa-font" }), subtitle: "Title" }),
-                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "widget", widgetType: "Text", design: {} }), title: react_1.default.createElement("i", { className: "fa fa-align-left" }), subtitle: "Text" }),
-                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "widget", aspectRatio: 1.4, widgetType: "Image", design: {} }), title: react_1.default.createElement("i", { className: "fa fa-picture-o" }), subtitle: "Image" }),
+                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "widget", widgetType: "Text", design: { style: "title" } }), title: react_1.default.createElement("i", { className: "fa fa-font" }), subtitle: T `Title` }),
+                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "widget", widgetType: "Text", design: {} }), title: react_1.default.createElement("i", { className: "fa fa-align-left" }), subtitle: T `Text` }),
+                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "widget", aspectRatio: 1.4, widgetType: "Image", design: {} }), title: react_1.default.createElement("i", { className: "fa fa-picture-o" }), subtitle: T `Image` }),
                 react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({
                         type: "widget",
                         aspectRatio: 1.4,
                         widgetType: "LayeredChart",
                         design: {}
-                    }), title: react_1.default.createElement("i", { className: "fa fa-bar-chart" }), subtitle: "Chart" }),
+                    }), title: react_1.default.createElement("i", { className: "fa fa-bar-chart" }), subtitle: T `Chart` }),
                 !this.props.disableMaps && (react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({
                         type: "widget",
                         aspectRatio: 2,
@@ -142,33 +142,33 @@ class BlocksDisplayComponent extends react_1.default.Component {
                             filters: {},
                             bounds: { w: -40, n: 25, e: 40, s: -25 }
                         }
-                    }), title: react_1.default.createElement("i", { className: "fa fa-map-o" }), subtitle: "Map" })),
-                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "widget", aspectRatio: 1.4, widgetType: "TableChart", design: {} }), title: react_1.default.createElement("i", { className: "fa fa-table" }), subtitle: "Table" }),
-                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "widget", widgetType: "PivotChart", design: {} }), title: react_1.default.createElement("img", { width: 24, height: 24, src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAb0lEQVRIx91VQQrAIAwzo/7/ydllG0MQS21EzMW2ICFtoyBZlLDn/LOgySPAG1xFDDmBtZI6efoMvODozkyL2IlTCOisfS2KrqG0RXus6fkEVBIw08khE62aQY0ogMdEswqwYouwvQ8s+4M576m4Ae/tET/u1taEAAAAAElFTkSuQmCC" }), subtitle: "Pivot" }),
+                    }), title: react_1.default.createElement("i", { className: "fa fa-map-o" }), subtitle: T `Map` })),
+                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "widget", aspectRatio: 1.4, widgetType: "TableChart", design: {} }), title: react_1.default.createElement("i", { className: "fa fa-table" }), subtitle: T `Table` }),
+                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "widget", widgetType: "PivotChart", design: {} }), title: react_1.default.createElement("img", { width: 24, height: 24, src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAb0lEQVRIx91VQQrAIAwzo/7/ydllG0MQS21EzMW2ICFtoyBZlLDn/LOgySPAG1xFDDmBtZI6efoMvODozkyL2IlTCOisfS2KrqG0RXus6fkEVBIw08khE62aQY0ogMdEswqwYouwvQ8s+4M576m4Ae/tET/u1taEAAAAAElFTkSuQmCC" }), subtitle: T `Pivot` }),
                 react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({
                         type: "widget",
                         aspectRatio: 1.4,
                         widgetType: "CalendarChart",
                         design: {}
-                    }), title: react_1.default.createElement("i", { className: "fa fa-calendar" }), subtitle: "Calendar" }),
+                    }), title: react_1.default.createElement("i", { className: "fa fa-calendar" }), subtitle: T `Calendar` }),
                 react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({
                         type: "widget",
                         aspectRatio: 1.4,
                         widgetType: "ImageMosaicChart",
                         design: {}
-                    }), title: react_1.default.createElement("i", { className: "fa fa-th" }), subtitle: "Mosaic" }),
-                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "spacer", aspectRatio: 2 }), title: react_1.default.createElement("i", { className: "fa fa-square-o" }), subtitle: "Spacer" }),
+                    }), title: react_1.default.createElement("i", { className: "fa fa-th" }), subtitle: T `Mosaic` }),
+                react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({ type: "spacer", aspectRatio: 2 }), title: react_1.default.createElement("i", { className: "fa fa-square-o" }), subtitle: T `Spacer` }),
                 react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({
                         type: "widget",
                         aspectRatio: 16.0 / 9.0,
                         widgetType: "IFrame",
                         design: {}
-                    }), title: react_1.default.createElement("i", { className: "fa fa-youtube-play" }), subtitle: "Video" }),
+                    }), title: react_1.default.createElement("i", { className: "fa fa-youtube-play" }), subtitle: T `Video` }),
                 react_1.default.createElement(PaletteItemComponent_1.default, { createItem: this.createBlockItem({
                         type: "widget",
                         widgetType: "TOC",
-                        design: { numbering: false, borderWeight: 2, header: "Contents" }
-                    }), title: react_1.default.createElement("i", { className: "fa fa-list-ol" }), subtitle: "TOC" }),
+                        design: { numbering: false, borderWeight: 2, header: T `Contents` }
+                    }), title: react_1.default.createElement("i", { className: "fa fa-list-ol" }), subtitle: T `TOC` }),
                 this.props.onClipboardChange && (react_1.default.createElement(ClipboardPaletteItemComponent_1.default, { clipboard: this.props.clipboard, onClipboardChange: this.props.onClipboardChange, cantPasteMessage: this.props.cantPasteMessage })))));
     }
     render() {

package/lib/layouts/blocks/BlocksLayoutManager.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import LayoutManager, { RenderLayoutOptions } from "../LayoutManager";
 import BlocksDisplayComponent from "./BlocksDisplayComponent";
+import { LayoutBlock } from "./blockUtils";
 export default class BlocksLayoutManager extends LayoutManager {
     /**
      * Renders the layout as a react element
@@ -11,7 +12,7 @@ export default class BlocksLayoutManager extends LayoutManager {
         type: string;
         design: any;
     } | null;
-    getAllWidgets(items: any): {
+    getAllWidgets(items: LayoutBlock): {
         id: string;
         type: string;
         design: any;

package/lib/layouts/blocks/ClipboardPaletteItemComponent.js

@@ -16,7 +16,7 @@ class ClipboardPaletteItemComponent extends react_1.default.Component {
         return { block: lodash_1.default.extend({}, this.props.clipboard, { id: (0, uuid_1.default)() }) };
     };
     handleClear = () => {
-        if (confirm("Clear clipboard?")) {
+        if (confirm(T `Clear clipboard?`)) {
             return this.props.onClipboardChange(null);
         }
     };
@@ -26,9 +26,9 @@ class ClipboardPaletteItemComponent extends react_1.default.Component {
                 ? "mwater-visualization-palette-item"
                 : "mwater-visualization-palette-item disabled",
             style: this.props.isOver ? { backgroundColor: "#2485dd" } : undefined
-        }, R("div", { className: "title", key: "title" }, this.props.isOver ? R("i", { className: "fa fa-clone" }) : R("i", { className: "fa fa-clipboard" })), R("div", { className: "subtitle", key: "subtitle" }, this.props.isOver ? "Copy" : "Clipboard"), this.props.cantPasteMessage
+        }, R("div", { className: "title", key: "title" }, this.props.isOver ? R("i", { className: "fa fa-clone" }) : R("i", { className: "fa fa-clipboard" })), R("div", { className: "subtitle", key: "subtitle" }, this.props.isOver ? T `Copy` : T `Clipboard`), this.props.cantPasteMessage
             ? R("div", { className: "tooltiptext" }, this.props.cantPasteMessage)
-            : R("div", { className: "tooltiptext" }, "Clipboard allows copying widgets for pasting on this dashboard or another dashboard. Drag a widget on to this clipboard to copy it."), this.props.clipboard
+            : R("div", { className: "tooltiptext" }, T `Clipboard allows copying widgets for pasting on this dashboard or another dashboard. Drag a widget on to this clipboard to copy it.`), this.props.clipboard
             ? R("div", { className: "clearclipboard", onClick: this.handleClear }, R("i", { className: "fa fa-trash-o" }))
             : undefined));
         if (this.props.clipboard && !this.props.cantPasteMessage) {

package/lib/layouts/blocks/HorizontalBlockComponent.js

@@ -12,9 +12,9 @@ class HorizontalBlockComponent extends react_1.default.Component {
     constructor(props) {
         super(props);
         this.state = {
-            dragIndex: null,
-            dragInitialX: null,
-            dragXOffset: null,
+            dragIndex: null, // index of splitter being dragged
+            dragInitialX: null, // Initial drag x
+            dragXOffset: null, // Offset of drag (pixels dragged from start)
             leftSize: null,
             rightSize: null
         };

package/lib/layouts/blocks/blockUtils.js

@@ -3,7 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cleanBlock = exports.removeBlock = exports.updateBlock = exports.dropBlock = void 0;
+exports.dropBlock = dropBlock;
+exports.updateBlock = updateBlock;
+exports.removeBlock = removeBlock;
+exports.cleanBlock = cleanBlock;
 const lodash_1 = __importDefault(require("lodash"));
 const uuid_1 = __importDefault(require("uuid"));
 // When block is dropped on it. side is top, left, bottom, right)
@@ -79,7 +82,6 @@ function dropBlock(rootBlock, sourceBlock, targetBlock, side) {
     }
     return rootBlock;
 }
-exports.dropBlock = dropBlock;
 // Updates a block
 // returns new root block
 function updateBlock(rootBlock, block) {
@@ -101,7 +103,6 @@ function updateBlock(rootBlock, block) {
     }
     return rootBlock;
 }
-exports.updateBlock = updateBlock;
 // When block is removed
 // returns new root block
 function removeBlock(rootBlock, block) {
@@ -121,7 +122,6 @@ function removeBlock(rootBlock, block) {
     }
     return rootBlock;
 }
-exports.removeBlock = removeBlock;
 // Clean blocks, simplifying as needed
 function cleanBlock(rootBlock) {
     // If vertical or horizontal
@@ -152,4 +152,3 @@ function cleanBlock(rootBlock) {
     }
     return rootBlock;
 }
-exports.cleanBlock = cleanBlock;