@mwater/visualization 5.5.0 → 5.6.0

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, "\\$&")
-}

package/stories/UpdateableComponent.js

@@ -1,29 +0,0 @@
-// TODO: This file was created by bulk-decaffeinate.
-// Sanity-check the conversion and remove this comment.
-let UpdateableComponent;
-import _ from 'lodash';
-import React from 'react';
-
-// Convenience wrapper that allows updating state
-export default UpdateableComponent = class UpdateableComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = _.clone(this.props || {});
-  }
-
-  // Creates update function
-  update = name => {
-    return value => {
-      const upt = {};
-      upt[name] = value;
-      this.setState(upt);
-      return console.log(JSON.stringify(upt, null, 2));
-    };
-  };
-  // action("update")(upt)
-
-  render() {
-    return this.props.children(this.state, this.update);
-  }
-};
-