@mwater/visualization 5.5.0 → 5.6.0

package/lib/widgets/text/ExprItemEditorComponent.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_1 = require("@mwater/expressions");
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_ui_2 = require("@mwater/expressions-ui");
@@ -53,40 +52,44 @@ class ExprItemEditorComponent 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.exprItem.format != null ? this.props.exprItem.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.exprItem.format != null ? this.props.exprItem.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() {
-        return R("div", { style: { paddingBottom: 200 } }, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T `Data Source`), ": ", R(expressions_ui_2.TableSelectComponent, {
-            schema: this.props.schema,
-            value: this.state.table,
-            onChange: this.handleTableChange
-        }), R("br")), this.state.table
-            ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Field`), ": ", R(expressions_ui_1.ExprComponent, {
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                table: this.state.table,
-                types: ["text", "number", "enum", "date", "datetime", "boolean", "enumset", "geometry"],
-                value: this.props.exprItem.expr,
-                aggrStatuses: ["individual", "literal", "aggregate"],
-                onChange: this.handleExprChange
-            }))
-            : undefined, this.state.table && this.props.exprItem.expr
-            ? R("div", { className: "mb-3" }, react_1.default.createElement(bootstrap_1.Checkbox, { key: "includeLabel", value: this.props.exprItem.includeLabel, onChange: this.handleIncludeLabelChange }, T `Include Label`), this.props.exprItem.includeLabel
-                ? R("input", {
-                    key: "labelText",
-                    className: "form-control",
-                    type: "text",
-                    value: this.props.exprItem.labelText || "",
-                    onChange: this.handleLabelTextChange,
-                    placeholder: new expressions_1.ExprUtils(this.props.schema).summarizeExpr(this.props.exprItem.expr) + ": "
-                })
-                : undefined)
-            : undefined, this.renderFormat());
+        const exprValidator = new expressions_1.ExprValidator(this.props.schema);
+        const error = exprValidator.validateExpr(this.props.exprItem.expr, {
+            table: this.state.table,
+            aggrStatuses: ["individual", "literal", "aggregate"]
+        });
+        return (react_1.default.createElement("div", { style: { paddingBottom: 200 } },
+            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_2.TableSelectComponent, { schema: this.props.schema, value: this.state.table, onChange: this.handleTableChange }),
+                react_1.default.createElement("br", null)),
+            this.state.table
+                ? (react_1.default.createElement("div", { className: "mb-3" },
+                    react_1.default.createElement("label", { className: "text-muted" }, T `Field`),
+                    ": ",
+                    react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.state.table, types: ["text", "number", "enum", "date", "datetime", "boolean", "enumset", "geometry"], value: this.props.exprItem.expr, aggrStatuses: ["individual", "literal", "aggregate"], onChange: this.handleExprChange })))
+                : undefined,
+            error ? react_1.default.createElement("div", { className: "alert alert-danger" },
+                react_1.default.createElement("i", { className: "fa fa-exclamation-circle" }),
+                " ",
+                error) : undefined,
+            this.state.table && this.props.exprItem.expr
+                ? (react_1.default.createElement("div", { className: "mb-3" },
+                    react_1.default.createElement(bootstrap_1.Checkbox, { key: "includeLabel", value: this.props.exprItem.includeLabel, onChange: this.handleIncludeLabelChange }, T `Include Label`),
+                    this.props.exprItem.includeLabel
+                        ? react_1.default.createElement("input", { key: "labelText", className: "form-control", type: "text", value: this.props.exprItem.labelText || "", onChange: this.handleLabelTextChange, placeholder: new expressions_1.ExprUtils(this.props.schema).summarizeExpr(this.props.exprItem.expr) + ": " })
+                        : undefined))
+                : undefined,
+            this.renderFormat()));
     }
 }
 exports.default = ExprItemEditorComponent;

package/lib/widgets/text/ExprUpdateModalComponent.d.ts

@@ -6,6 +6,7 @@ export interface ExprUpdateModalComponentProps {
     schema: Schema;
     /** Data source to use to get values */
     dataSource: DataSource;
+    /** Optional table that will be filtered to have a single row present. Widget designer should optionally account for this */
     singleRowTable?: string;
 }
 interface ExprUpdateModalComponentState {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mwater/visualization",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "description": "Visualization library",
   "main": "lib/index.js",
   "scripts": {
@@ -36,7 +36,7 @@
     "d3-tip": "^0.9.0",
     "dayjs": "^1.11.10",
     "dompurify": "^1.0.11",
-    "ez-localize": "^2.13.0",
+    "ez-localize": "^2.15.0",
     "file-saver": "^2.0.5",
     "immer": "^8.0.0",
     "immutable-setter": "^1.1.1",
@@ -74,7 +74,6 @@
     "xlsx-js-style": "^1.2.0"
   },
   "devDependencies": {
-    "@kadira/storybook": "^2.21.0",
     "@types/chai": "^4.3.0",
     "@types/color": "^3.0.2",
     "@types/d3": "^5.16.4",

package/src/MWaterContextComponent.tsx

@@ -18,7 +18,7 @@ export interface GlobalFiltersElementFactoryProps {
   dataSource: DataSource
   filterableTables: string[]
   globalFilters?: GlobalFilter[]
-  onChange: (globalFilters: GlobalFilter[]) => void
+  onChange?: (globalFilters: GlobalFilter[]) => void
 
   /** If true, return null element if not applicable to filterableTables */
   nullIfIrrelevant?: boolean

package/src/{MWaterGlobalFiltersComponent.ts → MWaterGlobalFiltersComponent.tsx}

@@ -1,6 +1,5 @@
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
 
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import { IdLiteralComponent } from "@mwater/expressions-ui"
@@ -14,12 +13,14 @@ export interface MWaterGlobalFiltersComponentProps {
   dataSource: DataSource
   filterableTables: string[]
   globalFilters?: GlobalFilter[]
-  onChange: (globalFilters: GlobalFilter[]) => void
+  onChange?: (globalFilters: GlobalFilter[]) => void
 }
 
 // Control to edit the global filters (_managed_by and admin_region)
 export default class MWaterGlobalFiltersComponent extends React.Component<MWaterGlobalFiltersComponentProps> {
   handleRegionsChange = (regions: any) => {
+    if (!this.props.onChange) { return }
+
     // Remove existing filter
     const globalFilters = _.filter(
       this.props.globalFilters || [],
@@ -40,6 +41,8 @@ export default class MWaterGlobalFiltersComponent extends React.Component<MWater
   }
 
   handleManagedByChange = (managedBy: any) => {
+    if (!this.props.onChange) { return }
+    
     // Remove existing filter
     const globalFilters = _.filter(
       this.props.globalFilters || [],
@@ -80,38 +83,34 @@ export default class MWaterGlobalFiltersComponent extends React.Component<MWater
       adminRegions = null
     }
 
-    return R(
-      "div",
-      null,
-      R(
-        ui.FormGroup,
-        { label: T`Only sites managed by`, labelMuted: true },
-        R(IdLiteralComponent, {
-          value: managedBy,
-          onChange: this.handleManagedByChange,
-          idTable: "groups",
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          placeholder: T`All Organizations`,
-          multi: false,
-          filter: { type: "field", tableAlias: "main", column: "canManageEntities" }
-        })
-      ),
+    return (
+      <div>
+        <ui.FormGroup label={T`Only sites managed by`} labelMuted={true}>
+          <IdLiteralComponent
+            value={managedBy}
+            onChange={ this.props.onChange ? this.handleManagedByChange : undefined}
+            idTable="groups"
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            placeholder={T`All Organizations`}
+            multi={false}
+            filter={{ type: "field", tableAlias: "main", column: "canManageEntities" }}
+          />
+        </ui.FormGroup>
 
-      R(
-        ui.FormGroup,
-        { label: T`Only sites located in`, labelMuted: true },
-        R(IdLiteralComponent, {
-          value: adminRegions,
-          onChange: this.handleRegionsChange,
-          idTable: "admin_regions",
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          placeholder: T`All Regions`,
-          multi: true,
-          orderBy: [{ expr: { type: "field", tableAlias: "main", column: "level" }, direction: "asc" }]
-        })
-      )
+        <ui.FormGroup label={T`Only sites located in`} labelMuted={true}>
+          <IdLiteralComponent
+            value={adminRegions}
+            onChange={this.props.onChange ? this.handleRegionsChange : undefined}
+            idTable="admin_regions"
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            placeholder={T`All Regions`}
+            multi={true}
+            orderBy={[{ expr: { type: "field", tableAlias: "main", column: "level" }, direction: "asc" }]}
+          />
+        </ui.FormGroup>
+      </div>
     )
   }
 }

package/src/{MWaterLoaderComponent.ts → MWaterLoaderComponent.tsx}

@@ -1,6 +1,5 @@
 import _ from "lodash"
-import React, { ReactElement } from "react"
-const R = React.createElement
+import React, { ReactElement, ReactNode } from "react"
 
 import { DataSource, Schema } from "@mwater/expressions"
 import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent"
@@ -26,7 +25,7 @@ export interface MWaterLoaderComponentProps {
   addLayerElementFactory?: AddLayerElementFactory
   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
+  errorFormatter?: (data: any, defaultError: ReactNode) => ReactNode
   /** Origin of usage. e.g. "dashboards:43445364..." */
   origin?: string
 }
@@ -110,21 +109,21 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<
     }
 
     // Inject context
-    return R(
-      MWaterContextComponent,
-      {
-        apiUrl: this.props.apiUrl,
-        client: this.props.client,
-        user: this.props.user,
-        schema: this.state.schema!,
-        extraTables: this.props.extraTables,
-        onExtraTablesChange: this.props.onExtraTablesChange,
-        addLayerElementFactory: this.props.addLayerElementFactory
-      },
-      this.props.children(this.state.error, {
-        schema: this.state.schema!,
-        dataSource: this.state.dataSource!
-      })
+    return (
+      <MWaterContextComponent
+        apiUrl={this.props.apiUrl}
+        client={this.props.client}
+        user={this.props.user}
+        schema={this.state.schema!}
+        extraTables={this.props.extraTables}
+        onExtraTablesChange={this.props.onExtraTablesChange}
+        addLayerElementFactory={this.props.addLayerElementFactory}
+      >
+        {this.props.children(this.state.error, {
+          schema: this.state.schema!,
+          dataSource: this.state.dataSource!
+        })}
+      </MWaterContextComponent>
     )
   }
 }

package/src/UndoStack.ts

@@ -4,24 +4,32 @@ import _ from "lodash"
 export default class UndoStack {
   undoStack: any[]
   redoStack: any[]
+  maxDepth?: number
 
-  constructor(undoStack?: any, redoStack?: any) {
+  constructor(undoStack?: any, redoStack?: any, maxDepth?: number) {
     this.undoStack = undoStack || []
     this.redoStack = redoStack || []
+    this.maxDepth = maxDepth
   }
 
   // Add a value to the stack
   push(value: any) {
     // No trivial pushes
-    if (_.isEqual(this.getValue(), value)) {
+    if (JSON.stringify(this.getValue()) === JSON.stringify(value)) {
       return this
     }
 
-    const undoStack = this.undoStack.slice()
+    let undoStack = this.undoStack.slice()
     undoStack.push(value)
+    
+    // Limit stack depth if maxDepth is set
+    if (this.maxDepth && undoStack.length > this.maxDepth) {
+      undoStack = undoStack.slice(undoStack.length - this.maxDepth)
+    }
+    
     const redoStack: any = []
 
-    return new UndoStack(undoStack, redoStack)
+    return new UndoStack(undoStack, redoStack, this.maxDepth)
   }
 
   canUndo() {
@@ -39,7 +47,7 @@ export default class UndoStack {
 
     const undoStack = _.initial(this.undoStack)
 
-    return new UndoStack(undoStack, redoStack)
+    return new UndoStack(undoStack, redoStack, this.maxDepth)
   }
 
   redo() {
@@ -49,7 +57,7 @@ export default class UndoStack {
 
     const redoStack = _.initial(this.redoStack)
 
-    return new UndoStack(undoStack, redoStack)
+    return new UndoStack(undoStack, redoStack, this.maxDepth)
   }
 
   // Get the current value

package/src/dashboards/DashboardComponent.tsx

@@ -304,23 +304,23 @@ export default class DashboardComponent extends React.Component<DashboardCompone
           : undefined}
         <a key="print" className="btn btn-link btn-sm" onClick={this.handlePrint}>
           <span className="fas fa-print"/>
-          <span className="hide-600px"> {T`Print`}</span>
+          <span className="hide-800px"> {T`Print`}</span>
         </a>
         <a key="refresh" className="btn btn-link btn-sm" onClick={this.handleRefreshData}>
           <span className="fas fa-sync"/>
-          <span className="hide-600px"> {T`Refresh`}</span>
+          <span className="hide-800px"> {T`Refresh`}</span>
         </a>
         {this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
           ? <a key="showQuickfilters" className="btn btn-link btn-sm" onClick={this.handleShowQuickfilters}>
             <span className="fa fa-filter"/>
-            <span className="hide-600px"> {T`Show Quickfilters`}</span>
+            <span className="hide-800px"> {T`Show Quickfilters`}</span>
           </a>
           : undefined}
 
         {this.state.editing
           ? <a key="settings" className="btn btn-link btn-sm" onClick={this.handleSettings}>
             <span className="fas fa-cog"/>
-            <span className="hide-600px"> {T`Settings`}</span>
+            <span className="hide-800px"> {T`Settings`}</span>
           </a>
           : undefined}
         {this.state.editing ? this.renderStyle() : undefined}
@@ -435,6 +435,7 @@ export default class DashboardComponent extends React.Component<DashboardCompone
         <div style={{
           display: "grid",
           gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
+          gridTemplateColumns: "minmax(0, 1fr)",
           height: "100%"
         }}>
           {!this.props.hideTitleBar ? this.renderTitleBar() : undefined}

package/src/dashboards/DashboardDesign.ts

@@ -39,6 +39,6 @@ export interface DashboardDesign {
   /** true to enable implicit filtering (see ImplicitFilterBuilder). Defaults to true for older dashboards. */
   implicitFiltersEnabled?: boolean
 
-  /** array of global filters. See below. */
+  /** Array of global filters */
   globalFilters?: GlobalFilter[]
 }

package/src/dashboards/ServerDashboardDataSource.ts

@@ -407,12 +407,6 @@ class ServerWidgetLayerDataSource implements MapLayerDataSource {
 
     let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?` + querystring.stringify(query)
 
-    // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
-    // Used to speed queries
-    if (url.match(/^https:\/\/api\.mwater\.co\//)) {
-      url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/")
-    }
-
     return url
   }
 
@@ -421,12 +415,6 @@ class ServerWidgetLayerDataSource implements MapLayerDataSource {
     let where
     let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?type=${design.type}&radius=1000`
 
-    // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
-    // Used to speed queries
-    if (url.match(/^https:\/\/api\.mwater\.co\//)) {
-      url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/")
-    }
-
     if (this.options.client) {
       url += `&client=${this.options.client}`
     }

package/src/dashboards/SettingsModalComponent.tsx

@@ -259,7 +259,7 @@ function LanguageTab({ design, onDesignChange, schema }: LanguageTabProps) {
       ).length
 
       // Round down to nearest percent
-      percentages[locale] = Math.floor((translatedCount / totalStrings) * 100)
+      percentages[locale] = (totalStrings > 0) ? Math.floor((translatedCount / totalStrings) * 100) : 0
     }
 
     return percentages

package/src/datagrids/DatagridComponent.tsx

@@ -529,8 +529,36 @@ export default forwardRef<DatagridComponentRef, DatagridComponentProps>(function
               )
             } else if (onDesignChange) {
               return (
-                <div style={{ textAlign: "center", marginTop: size.height / 2 }}>
-                  <a className="btn btn-link" onClick={handleEdit}>{T`Click Here to Configure`}</a>
+                <div style={{ 
+                  display: "flex", 
+                  flexDirection: "column", 
+                  alignItems: "center", 
+                  justifyContent: "center", 
+                  height: "100%",
+                  padding: "40px"
+                }}>
+                  <div style={{
+                    textAlign: "center",
+                    marginBottom: "24px"
+                  }}>
+                    <i className="fas fa-table text-muted" style={{ 
+                      fontSize: "48px", 
+                      marginBottom: "16px"
+                    }} />
+                    <div style={{ 
+                      fontSize: "14px"
+                    }} className="text-muted">
+                      {T`Configure a data source and columns to get started.`}
+                    </div>
+                  </div>
+                  
+                  <button 
+                    className="btn btn-primary" 
+                    onClick={handleEdit}
+                  >
+                    <i className="fas fa-cog" style={{ marginRight: "8px" }} />
+                    {T`Configure`}
+                  </button>
                 </div>
               )
             } else {