@mwater/visualization 5.4.5 → 5.6.0

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])
-  }
-})

package/src/maps/MarkersLayerDesignerComponent.ts

@@ -1,374 +0,0 @@
-import _ from "lodash"
-import React from "react"
-const R = React.createElement
-import { FilterExprComponent } from "@mwater/expressions-ui"
-import { DataSource, ExprUtils, OpExpr, Schema } from "@mwater/expressions"
-import { ExprCompiler } from "@mwater/expressions"
-import AxisComponent from "./../axes/AxisComponent"
-import ColorComponent from "../ColorComponent"
-import { TableSelectComponent } from "@mwater/expressions-ui"
-import EditPopupComponent from "./EditPopupComponent"
-import ZoomLevelsComponent from "./ZoomLevelsComponent"
-import MarkerSymbolSelectComponent from "./MarkerSymbolSelectComponent"
-import * as PopupFilterJoinsUtils from "./PopupFilterJoinsUtils"
-import * as ui from "@mwater/react-library/lib/bootstrap"
-import EditHoverOver from "./EditHoverOver"
-import { MarkersLayerDesign } from "./MarkersLayerDesign"
-import { default as Rcslider } from "rc-slider"
-
-export interface MarkersLayerDesignerComponentProps {
-  /** Schema to use */
-  schema: Schema
-  dataSource: DataSource
-  /** Design of the marker layer */
-  design: MarkersLayerDesign
-  /** Called with new design */
-  onDesignChange: any
-  filters?: any
-}
-
-// Designer for a markers layer
-export default class MarkersLayerDesignerComponent extends React.Component<MarkersLayerDesignerComponentProps> {
-  // Apply updates to design
-  update(updates: any) {
-    return this.props.onDesignChange(_.extend({}, this.props.design, updates))
-  }
-
-  // Update axes with specified changes
-  updateAxes(changes: any) {
-    const axes = _.extend({}, this.props.design.axes, changes)
-    return this.update({ axes })
-  }
-
-  handleTableChange = (table: any) => {
-    return this.update({ table })
-  }
-  handleGeometryAxisChange = (axis: any) => {
-    return this.updateAxes({ geometry: axis })
-  }
-  handleColorAxisChange = (axis: any) => {
-    return this.updateAxes({ color: axis })
-  }
-  handleFilterChange = (expr: any) => {
-    return this.update({ filter: expr })
-  }
-  handleColorChange = (color: any) => {
-    return this.update({ color })
-  }
-  handlePolygonBorderColorChange = (polygonBorderColor: any) => {
-    return this.update({ polygonBorderColor })
-  }
-  handlePolygonFillOpacityChange = (polygonFillOpacity: any) => {
-    return this.update({ polygonFillOpacity: polygonFillOpacity / 100 })
-  }
-  handleSymbolChange = (symbol: any) => {
-    return this.update({ symbol })
-  }
-  handleNameChange = (e: any) => {
-    return this.update({ name: e.target.value })
-  }
-  handleMarkerSizeChange = (markerSize: any) => {
-    return this.update({ markerSize })
-  }
-  handleLineWidthChange = (lineWidth: any) => {
-    return this.update({ lineWidth })
-  }
-
-  renderTable() {
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T`Data Source`),
-      R(
-        "div",
-        { style: { marginLeft: 10 } },
-        R(TableSelectComponent, {
-          schema: this.props.schema,
-          value: this.props.design.table,
-          onChange: this.handleTableChange,
-          filter: this.props.design.filter,
-          onFilterChange: this.handleFilterChange
-        })
-      )
-    )
-  }
-
-  renderGeometryAxis() {
-    if (!this.props.design.table) {
-      return
-    }
-
-    const title = R("span", null, R("span", { className: "fas fa-map-marker-alt" }), " ", T`Location`)
-
-    const filters = _.clone(this.props.filters) || []
-
-    if (this.props.design.filter != null) {
-      const exprCompiler = new ExprCompiler(this.props.schema)
-      const jsonql = exprCompiler.compileExpr({ expr: this.props.design.filter, tableAlias: "{alias}" })
-      if (jsonql) {
-        filters.push({ table: (this.props.design.filter as OpExpr).table, jsonql })
-      }
-    }
-
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, title),
-      R(
-        "div",
-        { style: { marginLeft: 10 } },
-        R(AxisComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          table: this.props.design.table,
-          types: ["geometry"],
-          aggrNeed: "none",
-          value: this.props.design.axes.geometry,
-          onChange: this.handleGeometryAxisChange,
-          filters
-        })
-      )
-    )
-  }
-
-  renderColor() {
-    if (!this.props.design.axes.geometry) {
-      return
-    }
-
-    const filters = _.clone(this.props.filters) || []
-
-    if (this.props.design.filter != null) {
-      const exprCompiler = new ExprCompiler(this.props.schema)
-      const jsonql = exprCompiler.compileExpr({ expr: this.props.design.filter, tableAlias: "{alias}" })
-      if (jsonql) {
-        filters.push({ table: (this.props.design.filter as OpExpr).table, jsonql })
-      }
-    }
-
-    return R(
-      "div",
-      null,
-      !this.props.design.axes.color
-        ? R(
-            "div",
-            { className: "mb-3" },
-            R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Color`),
-
-            R(
-              "div",
-              null,
-              R(ColorComponent, {
-                color: this.props.design.color,
-                onChange: this.handleColorChange
-              })
-            )
-          )
-        : undefined,
-
-      R(
-        "div",
-        { className: "mb-3" },
-        R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Color By Data`),
-
-        R(AxisComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          table: this.props.design.table,
-          types: ["text", "enum", "boolean", "date"],
-          aggrNeed: "none",
-          value: this.props.design.axes.color,
-          defaultColor: this.props.design.color,
-          showColorMap: true,
-          onChange: this.handleColorAxisChange,
-          allowExcludedValues: true,
-          filters
-        })
-      )
-    )
-  }
-
-  renderSymbol() {
-    if (!this.props.design.axes.geometry) {
-      return
-    }
-
-    return R(MarkerSymbolSelectComponent, { symbol: this.props.design.symbol, onChange: this.handleSymbolChange })
-  }
-
-  renderMarkerSize() {
-    if (!this.props.design.axes.geometry) {
-      return
-    }
-
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, T`Marker Size`),
-      R(ui.Select, {
-        value: this.props.design.markerSize || 10,
-        options: [
-          { value: 5, label: T`Extra small` },
-          { value: 8, label: T`Small` },
-          { value: 10, label: T`Normal` },
-          { value: 13, label: T`Large` },
-          { value: 16, label: T`Extra large` }
-        ],
-        onChange: this.handleMarkerSizeChange
-      })
-    )
-  }
-
-  renderLineWidth() {
-    if (!this.props.design.axes.geometry) {
-      return
-    }
-
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, T`Line Width (for shapes)`),
-      R(ui.Select, {
-        value: this.props.design.lineWidth != null ? this.props.design.lineWidth : 3,
-        options: [
-          { value: 0, label: T`None` },
-          { value: 1, label: T`1 pixel` },
-          { value: 2, label: T`2 pixels` },
-          { value: 3, label: T`3 pixels` },
-          { value: 4, label: T`4 pixels` },
-          { value: 5, label: T`5 pixels` },
-          { value: 6, label: T`6 pixels` }
-        ],
-        onChange: this.handleLineWidthChange
-      })
-    )
-  }
-
-  renderPolygonBorderColor() {
-    if (!this.props.design.axes.geometry) {
-      return
-    }
-
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, T`Polygon border color (blank for same as fill color)`),
-      R(
-        "div",
-        null,
-        R(ColorComponent, {
-          color: this.props.design.polygonBorderColor,
-          onChange: this.handlePolygonBorderColorChange
-        })
-      )
-    )
-  }
-
-  renderPolygonFillOpacity() {
-    if (!this.props.design.axes.geometry) {
-      return
-    }
-
-    const opacity = this.props.design.polygonFillOpacity != null ? this.props.design.polygonFillOpacity : 0.25
-
-    return R(
-      "div",
-      { className: "mb-3"},
-      R("label", { className: "text-muted" }, R("span", null, T`Polygon Fill Opacity: ${Math.round(opacity * 100)}%`)),
-      R(
-        "div",
-        { style: { padding: "10px" } },
-        React.createElement(Rcslider, {
-          min: 0,
-          max: 100,
-          step: 1,
-          tipTransitionName: "rc-slider-tooltip-zoom-down",
-          value: opacity * 100,
-          onChange: this.handlePolygonFillOpacityChange
-        })
-      )
-    )
-      }
-
-  renderFilter() {
-    // If no data, hide
-    if (!this.props.design.axes.geometry) {
-      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 } },
-        R(FilterExprComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          onChange: this.handleFilterChange,
-          table: this.props.design.table,
-          value: this.props.design.filter
-        })
-      )
-    )
-  }
-
-  renderPopup() {
-    if (!this.props.design.table) {
-      return null
-    }
-
-    return R(EditPopupComponent, {
-      design: this.props.design,
-      onDesignChange: this.props.onDesignChange,
-      schema: this.props.schema,
-      dataSource: this.props.dataSource,
-      table: this.props.design.table,
-      idTable: this.props.design.table,
-      defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)
-    })
-  }
-
-  renderHoverOver() {
-    if (!this.props.design.table) {
-      return null
-    }
-
-    return R(EditHoverOver, {
-      design: this.props.design,
-      onDesignChange: this.props.onDesignChange,
-      schema: this.props.schema,
-      dataSource: this.props.dataSource,
-      table: this.props.design.table,
-      idTable: this.props.design.table,
-      defaultPopupFilterJoins: PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)
-    })
-  }
-
-  render() {
-    return R(
-      "div",
-      null,
-      this.renderTable(),
-      this.renderGeometryAxis(),
-      this.renderColor(),
-      this.renderSymbol(),
-      this.renderMarkerSize(),
-      R(ui.CollapsibleSection, {
-        label: T`Shape Options`,
-        labelMuted: true
-      }, [
-        this.renderLineWidth(),
-        this.renderPolygonBorderColor(),
-        this.renderPolygonFillOpacity(),
-      ]),
-      this.renderFilter(),
-      this.renderPopup(),
-      this.renderHoverOver(),
-      this.props.design.table
-        ? R(ZoomLevelsComponent, { design: this.props.design, onDesignChange: this.props.onDesignChange })
-        : undefined
-    )
-  }
-}

package/src/quickfilter/TextLiteralComponent.ts

@@ -1,165 +0,0 @@
-import _ from "lodash"
-import React from "react"
-const R = React.createElement
-import { default as AsyncReactSelect } from "react-select/async"
-import { ExprCompiler, Schema } from "@mwater/expressions"
-import { ExprUtils } from "@mwater/expressions"
-import { JsonQLFilter } from "../JsonQLFilter"
-import { QuickfiltersDataSource } from "./QuickfiltersDataSource"
-
-export interface TextLiteralComponentProps {
-  value?: any
-  onChange?: any
-  schema: Schema
-  /** See QuickfiltersDataSource */
-  quickfiltersDataSource: QuickfiltersDataSource
-  expr: any
-  index: number
-  /** true to display multiple values */
-  multi?: boolean
-
-  /** Filters to add to restrict quick filter data to */
-  filters?: JsonQLFilter[]
-}
-
-/** Displays a combo box that allows selecting single or multiple text values from an expression
- * The expression can be type `text` or `text[]`
- */
-export default class TextLiteralComponent extends React.Component<TextLiteralComponentProps> {
-  handleSingleChange = (val: any) => {
-    const value = val ? val.value || null : null // Blank is null
-    return this.props.onChange(value)
-  }
-
-  handleMultipleChange = (val: any) => {
-    const value = val ? _.pluck(val, "value") : []
-
-    if (value.length > 0) {
-      return this.props.onChange(value)
-    } else {
-      return this.props.onChange(null)
-    }
-  }
-
-  getOptions = (input: any, cb: any) => {
-    // Determine type of expression
-    const filters = (this.props.filters || []).slice()
-
-    const exprUtils = new ExprUtils(this.props.schema)
-    const exprType = exprUtils.getExprType(this.props.expr)
-
-    // Create query to get matches
-    const exprCompiler = new ExprCompiler(this.props.schema)
-
-    if(!this.props.expr.table) {
-      return 
-    }
-
-    // Add filter for input (simple if just text)
-    if (exprType === "text") {
-      if (input) {
-        filters.push({
-          table: this.props.expr.table,
-          jsonql: {
-            type: "op",
-            op: "~*",
-            exprs: [
-              exprCompiler.compileExpr({ expr: this.props.expr, tableAlias: "{alias}" }),
-              escapeRegex(input) // Don't use _.escapeRegExp as adds weird backslashes that postgres doesn't like
-            ]
-          }
-        })
-      }
-    } else if (exprType === "text[]") {
-      // Special filter for text[]
-      if (input) {
-        filters.push({
-          table: "values",
-          jsonql: {
-            type: "op",
-            op: "~*",
-            exprs: [
-              { type: "field", tableAlias: "{alias}", column: "value" },
-              "^" + escapeRegex(input) // Don't use _.escapeRegExp as adds weird backslashes that postgres doesn't like
-            ]
-          }
-        })
-      }
-    } else {
-      return
-    }
-
-    // Execute query
-    this.props.quickfiltersDataSource.getValues(
-      this.props.index,
-      this.props.expr,
-      filters,
-      null,
-      250,
-      (err: any, values: any) => {
-        if (err) {
-          return
-        }
-
-        // Filter null and blank
-        values = _.filter(values, (value) => value)
-
-        return cb(
-          _.map(values, (value) => ({
-            value,
-            label: value
-          }))
-        )
-      }
-    )
-  }
-
-  renderSingle() {
-    const currentValue = this.props.value ? { value: this.props.value, label: this.props.value } : null
-
-    return R(AsyncReactSelect, {
-      key: JSON.stringify(this.props.filters), // Include to force a change when filters change
-      placeholder: T`All`,
-      value: currentValue,
-      loadOptions: this.getOptions,
-      onChange: this.props.onChange ? this.handleSingleChange : undefined,
-      isClearable: true,
-      defaultOptions: true,
-      isDisabled: this.props.onChange == null,
-      noOptionsMessage: () => T`Type to search`,
-      styles: {
-        // Keep menu above fixed data table headers
-        menu: (style) => _.extend({}, style, { zIndex: 2000 })
-      }
-    })
-  }
-
-  renderMultiple() {
-    const currentValue = this.props.value ? _.map(this.props.value, (v) => ({ value: v, label: v })) : null
-
-    return R(AsyncReactSelect, {
-      placeholder: T`All`,
-      value: currentValue,
-      key: JSON.stringify(this.props.filters), // Include to force a change when filters change
-      isMulti: true,
-      loadOptions: this.getOptions,
-      defaultOptions: true,
-      onChange: this.props.onChange ? this.handleMultipleChange : undefined,
-      isClearable: true,
-      isDisabled: this.props.onChange == null,
-      noOptionsMessage: () => T`Type to search`,
-      styles: {
-        // Keep menu above fixed data table headers
-        menu: (style) => _.extend({}, style, { zIndex: 2000 })
-      }
-    })
-  }
-
-  render() {
-    return R("div", { style: { width: "100%" } }, this.props.multi ? this.renderMultiple() : this.renderSingle())
-  }
-}
-
-function escapeRegex(s: any) {
-  return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")
-}