@mwater/visualization 5.5.0 → 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,3 +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">

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: "$"
-  }
-};

package/src/maps/BingLayer.ts

@@ -1,146 +0,0 @@
-/*
-Copyright (c) 2011-2014, Pavel Shramov, Bruno Bergot
-All rights reserved. 
-
-Redistribution and use in source and binary forms, with or without modification, are 
-permitted provided that the following conditions are met: 
-
-   1. Redistributions of source code must retain the above copyright notice, this list of 
-      conditions and the following disclaimer. 
-	  
-   2. Redistributions in binary form must reproduce the above copyright notice, this list 
-      of conditions and the following disclaimer in the documentation and/or other materials
-      provided with the distribution. 
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
-EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 
-MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE 
-COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 
-EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF 
-SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) 
-HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR 
-TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 
-SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-*/
-
-import L from "leaflet"
-
-module.exports = L.TileLayer.extend({
-  options: {
-    subdomains: [0, 1, 2, 3],
-    type: "Aerial",
-    attribution: "Bing",
-    culture: "",
-    maxZoom: 21,
-    maxNativeZoom: 19
-  },
-
-  initialize: function (key: any, options: any) {
-    L.Util.setOptions(this, options)
-
-    this._key = key
-    this._url = null
-    this.meta = {}
-    this.loadMetadata()
-  },
-
-  tile2quad: function (x: any, y: any, z: any) {
-    var quad = ""
-    for (var i = z; i > 0; i--) {
-      var digit = 0
-      var mask = 1 << (i - 1)
-      if ((x & mask) !== 0) digit += 1
-      if ((y & mask) !== 0) digit += 2
-      quad = quad + digit
-    }
-    return quad
-  },
-
-  getTileUrl: function (p: any, z: any) {
-    var zoom = this._getZoomForUrl()
-    var subdomains = this.options.subdomains,
-      s = this.options.subdomains[Math.abs((p.x + p.y) % subdomains.length)]
-    return this._url
-      .replace("{subdomain}", s)
-      .replace("{quadkey}", this.tile2quad(p.x, p.y, zoom))
-      .replace("{culture}", this.options.culture)
-  },
-
-  loadMetadata: function () {
-    var _this = this
-    var url = `https://dev.virtualearth.net/REST/v1/Imagery/Metadata/${this.options.type}?include=ImageryProviders&key=${this._key}&UriScheme=https`
-  
-    fetch(url)
-      .then(response => response.json())
-      .then(meta => {
-        _this.meta = meta
-        if (meta.errorDetails) {
-          return
-        }
-        _this.initMetadata()
-      })
-      .catch(error => console.error('Error loading Bing Maps metadata:', error))
-  },
-
-  initMetadata: function () {
-    var r = this.meta.resourceSets[0].resources[0]
-    if (!r) {
-      console.error("Error loading Bing Maps metadata")
-      return
-    }
-    this.options.subdomains = r.imageUrlSubdomains
-    this._url = r.imageUrl
-    this._providers = []
-    if (r.imageryProviders) {
-      for (var i = 0; i < r.imageryProviders.length; i++) {
-        var p = r.imageryProviders[i]
-        for (var j = 0; j < p.coverageAreas.length; j++) {
-          var c = p.coverageAreas[j]
-          var coverage: any = { zoomMin: c.zoomMin, zoomMax: c.zoomMax, active: false }
-          var bounds = new L.LatLngBounds(
-            new L.LatLng(c.bbox[0] + 0.01, c.bbox[1] + 0.01),
-            new L.LatLng(c.bbox[2] - 0.01, c.bbox[3] - 0.01)
-          )
-          coverage.bounds = bounds
-          coverage.attrib = p.attribution
-          this._providers.push(coverage)
-        }
-      }
-    }
-    this._update()
-  },
-
-  _update: function () {
-    if (this._url === null || !this._map) return
-    this._update_attribution()
-    ;(L.TileLayer.prototype as any)._update.apply(this, [])
-  },
-
-  _update_attribution: function () {
-    var bounds = this._map.getBounds()
-    var zoom = this._map.getZoom()
-    for (var i = 0; i < this._providers.length; i++) {
-      var p = this._providers[i]
-      if (zoom <= p.zoomMax && zoom >= p.zoomMin && bounds.intersects(p.bounds)) {
-        if (!p.active && this._map.attributionControl) this._map.attributionControl.addAttribution(p.attrib)
-        p.active = true
-      } else {
-        if (p.active && this._map.attributionControl) this._map.attributionControl.removeAttribution(p.attrib)
-        p.active = false
-      }
-    }
-  },
-
-  onRemove: function (map: any) {
-    if (this._providers) {
-      for (var i = 0; i < this._providers.length; i++) {
-        var p = this._providers[i]
-        if (p.active && this._map.attributionControl) {
-          this._map.attributionControl.removeAttribution(p.attrib)
-          p.active = false
-        }
-      }
-    }
-    L.TileLayer.prototype.onRemove.apply(this, [map])
-  }
-})