@mwater/visualization 5.4.5 → 5.6.0

package/src/widgets/text/ExprItemEditorComponent.tsx

@@ -1,9 +1,8 @@
 import PropTypes from "prop-types"
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
 
-import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
+import { DataSource, ExprUtils, ExprValidator, Schema } from "@mwater/expressions"
 import { ExprComponent } from "@mwater/expressions-ui"
 import { TableSelectComponent } from "@mwater/expressions-ui"
 import { getFormatOptions } from "../../valueFormatter"
@@ -20,6 +19,7 @@ export interface ExprItemEditorComponentProps {
   exprItem: HtmlItemExpr
   /** Called with expr item */
   onChange: (exprItem: HtmlItemExpr) => void
+  /** Optional table that will be filtered to have a single row present. Widget designer should optionally account for this */
   singleRowTable?: string
 }
 
@@ -80,85 +80,91 @@ export default class ExprItemEditorComponent extends React.Component<
       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 : getDefaultFormat(exprType),
-          className: "form-select",
-          style: { width: "auto", display: "inline-block" },
-          onChange: this.handleFormatChange
-        },
-        _.map(formats, (format) => R("option", { key: format.value, value: format.value }, format.label))
-      )
+    return (
+      <div className="mb-3">
+        <label className="text-muted">{T`Format`}</label>
+        {": "}
+        <select
+          value={this.props.exprItem.format != null ? this.props.exprItem.format : getDefaultFormat(exprType)}
+          className="form-select"
+          style={{ width: "auto", display: "inline-block" }}
+          onChange={this.handleFormatChange}
+        >
+          {_.map(formats, (format) => <option key={format.value} value={format.value}>{format.label}</option>)}
+        </select>
+      </div>
     )
   }
 
   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(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(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" },
-            <Checkbox
-              key="includeLabel"
-              value={this.props.exprItem.includeLabel}
-              onChange={this.handleIncludeLabelChange}
-            >
-              {T`Include Label`}
-            </Checkbox>,
-
-            this.props.exprItem.includeLabel
-              ? R("input", {
-                  key: "labelText",
-                  className: "form-control",
-                  type: "text",
-                  value: this.props.exprItem.labelText || "",
-                  onChange: this.handleLabelTextChange,
-                  placeholder: new ExprUtils(this.props.schema).summarizeExpr(this.props.exprItem.expr) + ": "
-                })
-              : undefined
-          )
-        : undefined,
-
-      this.renderFormat()
+    const exprValidator = new ExprValidator(this.props.schema)
+    const error = exprValidator.validateExpr(this.props.exprItem.expr, {
+      table: this.state.table, 
+      aggrStatuses: ["individual", "literal", "aggregate"]
+    })
+
+    return (
+      <div style={{ paddingBottom: 200 }}>
+        <div className="mb-3">
+          <label className="text-muted"><i className="fa fa-database" /> {T`Data Source`}</label>
+          {": "}
+          <TableSelectComponent
+            schema={this.props.schema}
+            value={this.state.table}
+            onChange={this.handleTableChange}
+          />
+          <br />
+        </div>
+
+        {this.state.table
+          ? (
+              <div className="mb-3">
+                <label className="text-muted">{T`Field`}</label>
+                {": "}
+                <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}
+                />
+              </div>
+            )
+          : undefined}
+
+        {error ? <div className="alert alert-danger">
+          <i className="fa fa-exclamation-circle" /> {error}
+        </div> : undefined}
+
+        {this.state.table && this.props.exprItem.expr
+          ? (
+              <div className="mb-3">
+                <Checkbox
+                  key="includeLabel"
+                  value={this.props.exprItem.includeLabel}
+                  onChange={this.handleIncludeLabelChange}
+                >
+                  {T`Include Label`}
+                </Checkbox>
+
+                {this.props.exprItem.includeLabel
+                  ? <input
+                      key="labelText"
+                      className="form-control"
+                      type="text"
+                      value={this.props.exprItem.labelText || ""}
+                      onChange={this.handleLabelTextChange}
+                      placeholder={new ExprUtils(this.props.schema).summarizeExpr(this.props.exprItem.expr) + ": "}
+                    />
+                  : undefined}
+              </div>
+            )
+          : undefined}
+
+        {this.renderFormat()}
+      </div>
     )
   }
 }

package/src/widgets/text/ExprUpdateModalComponent.tsx

@@ -9,6 +9,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
 }
 

package/test/UndoStackTests.ts

@@ -58,7 +58,7 @@ describe("UndoStack", function () {
     return assert.equal(us.getValue(), this.b)
   })
 
-  return it("pushing new value clears redo stack", function () {
+  it("pushing new value clears redo stack", function () {
     let us = this.undoStack.push(this.a)
     us = us.push(this.b)
     us = us.undo()
@@ -70,4 +70,55 @@ describe("UndoStack", function () {
     us = us.push(this.c)
     return assert.isFalse(us.canRedo())
   })
+
+  it("limits stack depth when maxDepth is set", function () {
+    let us = new UndoStack(undefined, undefined, 3)
+    us = us.push({ x: 1 })
+    us = us.push({ x: 2 })
+    us = us.push({ x: 3 })
+    us = us.push({ x: 4 })
+    
+    // Should only keep last 3 values
+    assert.equal(us.undoStack.length, 3)
+    assert.equal(us.getValue().x, 4)
+    
+    // Can undo twice (3 values means 2 undo operations)
+    assert.isTrue(us.canUndo())
+    us = us.undo()
+    assert.equal(us.getValue().x, 3)
+    assert.isTrue(us.canUndo())
+    us = us.undo()
+    assert.equal(us.getValue().x, 2)
+    
+    // Cannot undo anymore (only 1 value left)
+    return assert.isFalse(us.canUndo())
+  })
+
+  it("preserves maxDepth through undo and redo operations", function () {
+    let us = new UndoStack(undefined, undefined, 5)
+    us = us.push({ x: 1 })
+    us = us.push({ x: 2 })
+    
+    us = us.undo()
+    assert.equal(us.maxDepth, 5)
+    
+    us = us.redo()
+    assert.equal(us.maxDepth, 5)
+    
+    us = us.push({ x: 3 })
+    return assert.equal(us.maxDepth, 5)
+  })
+
+  return it("works without maxDepth (unlimited)", function () {
+    let us = new UndoStack()
+    
+    // Push many values
+    for (let i = 0; i < 100; i++) {
+      us = us.push({ x: i })
+    }
+    
+    // Should keep all values
+    assert.equal(us.undoStack.length, 100)
+    return assert.equal(us.getValue().x, 99)
+  })
 })

package/.storybook/config.js

@@ -1,7 +0,0 @@
-import { configure } from '@kadira/storybook';
-
-function loadStories() {
-  require('../stories');
-}
-
-configure(loadStories, module);

package/.storybook/head.html

@@ -1,4 +0,0 @@
-<link rel="stylesheet" type="text/css" href="dist/css/libs.css">
-<link rel="stylesheet" type="text/css" href="dist/css/index.css">
-<link rel="stylesheet" type="text/css" href="assets/font-awesome/css/font-awesome.min.css">
-<script src="dist/js/libs.js"></script>

package/.storybook/webpack.config.js

@@ -1,15 +0,0 @@
-path = require('path');
-
-module.exports = {
-  module: {
-    loaders: [
-      { test: /\.coffee$/, loader: "coffee-loader" },
-    ],
-  },
-  resolve: {
-    extensions: ["", ".coffee", ".js", ".json"],
-  },
-  externals: {
-  	jquery: "$"
-  }
-};