@mwater/visualization 5.5.0 → 5.6.1

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/maps/RasterMapViewComponent.ts

@@ -1,345 +0,0 @@
-import _ from "lodash"
-import React, { ReactNode } from "react"
-const R = React.createElement
-import LeafletMapComponent, { TileLayer } from "./LeafletMapComponent"
-import { ExprUtils, Schema, DataSource } from "@mwater/expressions"
-import LayerFactory from "./LayerFactory"
-import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent"
-import * as MapUtils from "./MapUtils"
-import { LayerSwitcherComponent } from "./LayerSwitcherComponent"
-import { default as LegendComponent } from "./LegendComponent"
-import { JsonQLFilter } from "../JsonQLFilter"
-import { MapDesign } from "./MapDesign"
-import { LocaleContext } from "@mwater/expressions-ui"
-import { MapViewComponentProps } from "./MapViewComponent"
-
-export interface RasterMapViewComponentProps extends MapViewComponentProps {
-  /** Called with underlying leaflet map component */
-  leafletMapRef?: (map: LeafletMapComponent | null) => void
-}
-
-/** Component that displays just the map, using raster tile technology */
-export default class RasterMapViewComponent extends React.Component<
-  RasterMapViewComponentProps,
-  {
-    popupContents: ReactNode
-    legendHidden: boolean
-  }
-> {
-  static contextType = LocaleContext
-
-  leafletMap?: LeafletMapComponent | null
-
-  constructor(props: any) {
-    super(props)
-
-    const initialLegendDisplay = props.design.initialLegendDisplay || "open"
-
-    this.state = {
-      popupContents: null, // Element in the popup
-      legendHidden: initialLegendDisplay === "closed" || (props.width < 500 && initialLegendDisplay === "closedIfSmall")
-    }
-  }
-
-  componentDidMount() {
-    // Autozoom
-    if (this.props.design.autoBounds) {
-      return this.performAutoZoom()
-    }
-  }
-
-  componentDidUpdate(prevProps: any) {
-    if (this.props.design.autoBounds) {
-      // Autozoom if filters or autozoom changed
-      if (
-        !_.isEqual(this.props.design.filters, prevProps.design.filters) ||
-        !_.isEqual(this.props.design.globalFilters, prevProps.design.globalFilters) ||
-        !_.isEqual(this.props.extraFilters, prevProps.extraFilters) ||
-        !prevProps.design.autoBounds
-      ) {
-        return this.performAutoZoom()
-      }
-    } else {
-      // Update bounds
-      if (!_.isEqual(this.props.design.bounds, prevProps.design.bounds)) {
-        return this.leafletMap?.setBounds(this.props.design.bounds)
-      }
-    }
-  }
-
-  performAutoZoom() {
-    return this.props.mapDataSource.getBounds(
-      this.props.design,
-      this.getCompiledFilters(),
-      (error: any, bounds: any) => {
-        if (bounds) {
-          this.leafletMap?.setBounds(bounds, 0.2)
-
-          // Also record if editable as part of bounds
-          if (this.props.onDesignChange != null) {
-            return this.props.onDesignChange(_.extend({}, this.props.design, { bounds }))
-          }
-        }
-      }
-    )
-  }
-
-  handleBoundsChange = (bounds: any) => {
-    // Ignore if readonly
-    if (this.props.onDesignChange == null) {
-      return
-    }
-
-    if (this.props.zoomLocked) {
-      return
-    }
-
-    // Ignore if autoBounds
-    if (this.props.design.autoBounds) {
-      return
-    }
-
-    const design = _.extend({}, this.props.design, { bounds }) as MapDesign
-    return this.props.onDesignChange(design)
-  }
-
-  handleGridClick = (layerViewId: any, ev: any) => {
-    const layerView = _.findWhere(this.props.design.layerViews, { id: layerViewId })!
-
-    // Create layer
-    const layer = LayerFactory.createLayer(layerView.type)
-
-    // Clean design (prevent ever displaying invalid/legacy designs)
-    const design = layer.cleanDesign(layerView.design, this.props.schema)
-
-    // Handle click of layer
-    // TODO not translated
-    const results = layer.onGridClick(ev, {
-      design,
-      schema: this.props.schema,
-      dataSource: this.props.dataSource,
-      layerDataSource: this.props.mapDataSource.getLayerDataSource(layerViewId),
-      scopeData: this.props.scope?.data?.layerViewId === layerViewId ? this.props.scope!.data.data : undefined,
-      filters: this.getCompiledFilters(),
-      locale: this.context,
-      translate: (input: string) => input
-    })
-
-    if (!results) {
-      return
-    }
-
-    // Handle popup first
-    if (results.popup) {
-      this.setState({ popupContents: results.popup })
-    }
-
-    // Handle onRowClick case
-    if (results.row && this.props.onRowClick) {
-      this.props.onRowClick(results.row.tableId, results.row.primaryKey)
-    }
-
-    // Handle scoping
-    if (this.props.onScopeChange && _.has(results, "scope")) {
-      let scope
-      if (results.scope) {
-        // Encode layer view id into scope
-        scope = {
-          name: results.scope.name,
-          filter: results.scope.filter,
-          data: { layerViewId, data: results.scope.data }
-        }
-      } else {
-        scope = null
-      }
-
-      return this.props.onScopeChange(scope)
-    }
-  }
-
-  // Get filters from extraFilters combined with map filters
-  getCompiledFilters() {
-    return (this.props.extraFilters || []).concat(
-      MapUtils.getCompiledFilters(
-        this.props.design,
-        this.props.schema,
-        MapUtils.getFilterableTables(this.props.design, this.props.schema)
-      )
-    )
-  }
-
-  renderLegend() {
-    if (this.state.legendHidden) {
-      return R(HiddenLegend, { onShow: () => this.setState({ legendHidden: false }) })
-    } else {
-      return R(LegendComponent, {
-        schema: this.props.schema,
-        layerViews: this.props.design.layerViews,
-        filters: this.getCompiledFilters(),
-        dataSource: this.props.dataSource,
-        locale: this.context,
-        translate: this.props.translate ?? ((input: string) => input),
-        onHide: () => this.setState({ legendHidden: true }),
-        zoom: null
-      })
-    }
-  }
-
-  renderPopup() {
-    if (!this.state.popupContents) {
-      return null
-    }
-
-    return R(
-      ModalPopupComponent,
-      {
-        onClose: () => this.setState({ popupContents: null }),
-        showCloseX: true,
-        size: "x-large"
-      },
-      // Render in fixed height div so that dashboard doesn't collapse to nothing
-      R("div", { style: { height: "80vh" } }, this.state.popupContents),
-      R(
-        "div",
-        { style: { textAlign: "right", marginTop: 10 } },
-        R("button", { className: "btn btn-secondary", onClick: () => this.setState({ popupContents: null }) }, T`Close`)
-      )
-    )
-  }
-
-  render() {
-    let design, scopedCompiledFilters
-    const compiledFilters = this.getCompiledFilters()
-
-    // Determine scoped filters
-    if (this.props.scope) {
-      scopedCompiledFilters = compiledFilters.concat([this.props.scope.filter])
-    } else {
-      scopedCompiledFilters = compiledFilters
-    }
-
-    // Convert to leaflet layers, if layers are valid
-    const leafletLayers = []
-    for (let index = 0; index < this.props.design.layerViews.length; index++) {
-      // Create layer
-      const layerView = this.props.design.layerViews[index]
-      const layer = LayerFactory.createLayer(layerView.type)
-
-      // Clean design (prevent ever displaying invalid/legacy designs)
-      design = layer.cleanDesign(layerView.design, this.props.schema)
-
-      // Ignore if invalid
-      if (layer.validateDesign(design, this.props.schema)) {
-        continue
-      }
-
-      // Get layer data source
-      const layerDataSource = this.props.mapDataSource.getLayerDataSource(layerView.id)
-
-      // If layer is scoping, fade opacity and add extra filtered version
-      const isScoping = this.props.scope && this.props.scope.data.layerViewId === layerView.id
-
-      // Create leafletLayer
-      let leafletLayer: TileLayer = {
-        tileUrl: layerDataSource.getTileUrl(design, isScoping ? compiledFilters : scopedCompiledFilters)!,
-        utfGridUrl: this.props.disableInteraction
-          ? undefined
-          : layerDataSource.getUtfGridUrl(design, isScoping ? compiledFilters : scopedCompiledFilters) ?? undefined,
-        visible: layerView.visible,
-        opacity: isScoping ? layerView.opacity * 0.3 : layerView.opacity,
-        minZoom: layer.getMinZoom(design) ?? undefined,
-        maxZoom: layer.getMaxZoom(design) ?? undefined,
-        onGridClick: this.handleGridClick.bind(null, layerView.id)
-      }
-
-      leafletLayers.push(leafletLayer)
-
-      // Add scoped layer if scoping
-      if (isScoping) {
-        leafletLayer = {
-          tileUrl: layerDataSource.getTileUrl(design, scopedCompiledFilters)!,
-          utfGridUrl: this.props.disableInteraction
-            ? undefined
-            : layerDataSource.getUtfGridUrl(design, scopedCompiledFilters) ?? undefined,
-          visible: layerView.visible,
-          opacity: layerView.opacity,
-          minZoom: layer.getMinZoom(design) ?? undefined,
-          maxZoom: layer.getMaxZoom(design) ?? undefined,
-          onGridClick: this.handleGridClick.bind(null, layerView.id)
-        }
-
-        leafletLayers.push(leafletLayer)
-      }
-    }
-
-    return R(
-      "div",
-      { style: { width: this.props.width, height: this.props.height, position: "relative" } },
-      this.renderPopup(),
-      R(
-        "div",
-        { style: { position: "absolute", maxWidth: 250, top: 10, right: 10, zIndex: 999, userSelect: "none" } },
-        R(
-          "div",
-          { style: { display: "flex", gap: 6, position: "relative", flexDirection: "column", alignItems: "right" } },
-          this.props.onDesignChange && this.props.design.showLayerSwitcher
-            ? R(LayerSwitcherComponent, {
-                design: this.props.design,
-                onDesignChange: this.props.onDesignChange,
-                translate: this.props.translate ?? (() => "")
-              })
-            : undefined
-        )
-      ),
-
-      R(LeafletMapComponent, {
-        ref: (c: LeafletMapComponent | null) => {
-          this.leafletMap = c
-          if (this.props.leafletMapRef) {
-            this.props.leafletMapRef(c)
-          }
-        },
-        initialBounds: this.props.design.bounds,
-        baseLayerId: this.props.design.baseLayer,
-        baseLayerOpacity: this.props.design.baseLayerOpacity ?? undefined,
-        layers: leafletLayers,
-        width: this.props.width,
-        height: this.props.height,
-        legend: this.renderLegend(),
-        dragging: this.props.dragging,
-        touchZoom: this.props.touchZoom,
-        scrollWheelZoom: this.props.scrollWheelZoom,
-        onBoundsChange: this.handleBoundsChange,
-        extraAttribution: this.props.design.attribution,
-        loadingSpinner: true,
-        maxZoom: this.props.design.maxZoom ?? undefined,
-        showZoomControlOnHover: true
-      })
-    )
-  }
-}
-
-// Legend display tab at bottom right
-class HiddenLegend extends React.Component<{ onShow: () => void }> {
-  render() {
-    const style = {
-      zIndex: 1000,
-      backgroundColor: "white",
-      position: "absolute",
-      bottom: 34,
-      right: 0,
-      fontSize: 14,
-      color: "#337ab7",
-      cursor: "pointer",
-      paddingTop: 4,
-      paddingBottom: 3,
-      paddingLeft: 3,
-      paddingRight: 3,
-      borderRadius: "4px 0px 0px 4px",
-      border: "solid 1px #AAA",
-      borderRight: "none"
-    }
-
-    return R("div", { style, onClick: this.props.onShow }, R("i", { className: "fa fa-angle-double-left" }))
-  }
-}