@mwater/visualization 5.0.0

package/src/maps/MapDesign.ts

@@ -0,0 +1,103 @@
+import { Expr, LiteralType } from "@mwater/expressions"
+import { Quickfilter } from "../quickfilter/Quickfilter"
+
+/** Maps are stored as a base layer, a series of layers and filters. */
+export interface MapDesign {
+  /** "bing_road"/"bing_aerial"/"cartodb_positron"/"cartodb_dark_matter"/"blank" */
+  baseLayer: "bing_road" | "bing_aerial" | "cartodb_positron" | "cartodb_dark_matter" | "blank"
+
+  /** 0-1 opacity. null/undefined = 1 */
+  baseLayerOpacity?: number | null
+
+  /** [ see layer view below ] */
+  layerViews: MapLayerView[]
+
+  /** filter expression indexed by table. e.g. { sometable: logical expression, etc. } */
+  filters: { [tableId: string]: Expr }
+
+  /** bounds as { w:, n:, e:, s: } */
+  bounds: MapBounds
+
+  /** User defined attribution string, added with other required attributions to the map */
+  attribution?: string
+
+  /** true to automatically zoom to bounds of data */
+  autoBounds?: boolean
+
+  /** maximum allowed zoom level */
+  maxZoom?: number | null
+
+  /** array of global filters. See below. */
+  globalFilters?: GlobalFilter[]
+
+  /** array of quick filters (user-selectable filters). See quickfilter/README.md 
+   * Note: these are not available when the map is a widget in a dashboard
+   */
+  quickfilters?: Quickfilter[]
+
+  /** True to display layer switcher */
+  showLayerSwitcher?: boolean
+
+  /** Mode of initial legend display. Default is "open" */
+  initialLegendDisplay?: "open" | "closed" | "closedIfSmall"
+
+  /** optional locale (e.g. "fr") to use for display */
+  locale?: string
+
+  /** True if design panel is hidden */
+  hideDesignPanel?: boolean
+}
+
+/** bounds as { w:, n:, e:, s: } */
+export interface MapBounds {
+  w: number
+  n: number
+  e: number
+  s: number
+}
+
+/** Is a view of a layer including whether visible, opacity. */
+export interface MapLayerView {
+  /** unique id */
+  id: string
+
+  /** string name */
+  name: string
+
+  /** string description (not currently shown used) */
+  desc?: string
+
+  /** type of the layer. Pass this to layer factory with design */
+  type: string
+
+  /** design of the layer. Layer-type specific */
+  design: any
+
+  /** true/false */
+  visible: boolean
+
+  /** 0.0-1.0 */
+  opacity: number
+
+  /** optional group. layers in the same group act as radio buttons */
+  group?: string | null
+
+  /** true to hide legend */
+  hideLegend?: boolean
+}
+
+/** Global filters apply to multiple tables at once if a certain column is present. User-interface to set them is application-specific
+and the default (non-mWater) dashboard applies them but does not allow editing. */
+export interface GlobalFilter {
+  /** id of column to filter */
+  columnId: string
+
+  /** type of column to filter (to ensure that consistent) */
+  columnType: LiteralType
+
+  /** op of expression for filtering */
+  op: string
+
+  /** array of expressions to use for filtering. field expression for column will be injected as expression 0 in the resulting filter expression */
+  exprs: Expr[]
+}

package/src/maps/MapDesignerComponent.ts

@@ -0,0 +1,356 @@
+import _ from "lodash"
+import PropTypes from "prop-types"
+import React, { ReactElement } from "react"
+const R = React.createElement
+
+import TabbedComponent, { TabbedComponentTab } from "@mwater/react-library/lib/TabbedComponent"
+import NumberInputComponent from "@mwater/react-library/lib/NumberInputComponent"
+import CheckboxComponent from "../CheckboxComponent"
+import ClickOutHandler from "react-onclickout"
+import MapLayersDesignerComponent from "./MapLayersDesignerComponent"
+import MapFiltersDesignerComponent from "./MapFiltersDesignerComponent"
+import BaseLayerDesignerComponent from "./BaseLayerDesignerComponent"
+import PopoverHelpComponent from "@mwater/react-library/lib/PopoverHelpComponent"
+import * as MapUtils from "./MapUtils"
+import { DataSource, ExprCompiler, Schema } from "@mwater/expressions"
+import * as ui from "@mwater/react-library/lib/bootstrap"
+import { MapDesign } from "./MapDesign"
+import { JsonQLFilter } from "../JsonQLFilter"
+import QuickfiltersDesignComponent from "../quickfilter/QuickfiltersDesignComponent"
+import produce from "immer"
+
+export interface MapDesignerComponentProps {
+  /** Schema to use */
+  schema: Schema
+  /** Data source to use */
+  dataSource: DataSource
+  /** See Map Design.md */
+  design: MapDesign
+  /** Called with new design */
+  onDesignChange: (design: MapDesign) => void
+  /** array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct */
+  filters?: JsonQLFilter[]
+
+  /** True to enable quickfilters */
+  enableQuickfilters?: boolean
+}
+
+export default class MapDesignerComponent extends React.Component<MapDesignerComponentProps> {
+  static childContextTypes = { activeTables: PropTypes.arrayOf(PropTypes.string.isRequired) }
+
+  getChildContext() {
+    return {
+      // Pass active tables down to table select components so they can present a shorter list
+      activeTables: MapUtils.getFilterableTables(this.props.design, this.props.schema)
+    }
+  }
+
+  handleAttributionChange = (text: any) => {
+    const design = { ...this.props.design, attribution: text }
+    return this.props.onDesignChange(design)
+  }
+
+  handleAutoBoundsChange = (value: any) => {
+    const design = { ...this.props.design, autoBounds: value }
+    return this.props.onDesignChange(design)
+  }
+
+  handleShowLayerSwitcherChange = (value: any) => {
+    const design = { ...this.props.design, showLayerSwitcher: value }
+    return this.props.onDesignChange(design)
+  }
+
+  handleConvertToClusterMap = () => {
+    return this.props.onDesignChange(MapUtils.convertToClusterMap(this.props.design))
+  }
+
+  handleConvertToMarkersMap = () => {
+    return this.props.onDesignChange(MapUtils.convertToMarkersMap(this.props.design))
+  }
+
+  handleInitialLegendDisplayChange = (value: any) => {
+    const design = { ...this.props.design, initialLegendDisplay: value }
+    return this.props.onDesignChange(design)
+  }
+
+  renderOptionsTab() {
+    return R(
+      "div",
+      null,
+      R(BaseLayerDesignerComponent, {
+        design: this.props.design,
+        onDesignChange: this.props.onDesignChange
+      }),
+
+      R(
+        CheckboxComponent,
+        {
+          checked: this.props.design.autoBounds,
+          onChange: this.handleAutoBoundsChange
+        },
+        R(
+          "span",
+          { className: "text-muted" },
+          "Automatic zoom ",
+          R(
+            PopoverHelpComponent,
+            { placement: "left" },
+            "Automatically zoom to the complete data whenever the map is loaded or the filters change"
+          )
+        )
+      ),
+
+      R(
+        CheckboxComponent,
+        {
+          checked: this.props.design.showLayerSwitcher,
+          onChange: this.handleShowLayerSwitcherChange
+        },
+        R(
+          "span",
+          { className: "text-muted" },
+          "Show Layer Switcher ",
+          R(PopoverHelpComponent, { placement: "left" }, "Show a control in the map allowing switching layers")
+        )
+      ),
+
+      R(
+        ui.FormGroup,
+        { label: "Initial Legend Display", labelMuted: true },
+        R(ui.Select, {
+          value: this.props.design.initialLegendDisplay || "open",
+          onChange: this.handleInitialLegendDisplayChange,
+          options: [
+            { value: "open", label: "Open" },
+            { value: "closed", label: "Closed" },
+            { value: "closedIfSmall", label: "Open if wide enough" }
+          ],
+          style: { width: "auto" }
+        })
+      ),
+
+      MapUtils.canConvertToClusterMap(this.props.design)
+        ? R(
+          "div",
+          { key: "tocluster" },
+          R(
+            "a",
+            { onClick: this.handleConvertToClusterMap, className: "btn btn-link btn-sm" },
+            "Convert to cluster map"
+          )
+        )
+        : undefined,
+
+      MapUtils.canConvertToMarkersMap(this.props.design)
+        ? R(
+          "div",
+          { key: "toMarker" },
+          R(
+            "a",
+            { onClick: this.handleConvertToMarkersMap, className: "btn btn-link btn-sm" },
+            "Convert to markers map"
+          )
+        )
+        : undefined,
+
+      R(AttributionComponent, {
+        text: this.props.design.attribution,
+        onTextChange: this.handleAttributionChange
+      }),
+
+      R("br"),
+
+      R(AdvancedOptionsComponent, {
+        design: this.props.design,
+        onDesignChange: this.props.onDesignChange
+      })
+    )
+  }
+
+  render() {
+    const filterableTables = MapUtils.getFilterableTables(this.props.design, this.props.schema)
+    const filters = (this.props.filters || []).concat(
+      MapUtils.getCompiledFilters(
+        this.props.design,
+        this.props.schema,
+        filterableTables
+      )
+    )
+
+    const tabs: TabbedComponentTab[] = [
+      {
+        id: "layers",
+        label: [R("i", { className: "fa fa-bars" }), " Layers"],
+        elem: R(MapLayersDesignerComponent, {
+          schema: this.props.schema,
+          dataSource: this.props.dataSource,
+          design: this.props.design,
+          onDesignChange: this.props.onDesignChange,
+          allowEditingLayers: true,
+          filters: _.compact(filters)
+        })
+      },
+      {
+        id: "filters",
+        label: [R("i", { className: "fa fa-filter" }), " Filters"],
+        elem: R(MapFiltersDesignerComponent, {
+          schema: this.props.schema,
+          dataSource: this.props.dataSource,
+          design: this.props.design,
+          onDesignChange: this.props.onDesignChange
+        })
+      },
+      {
+        id: "options",
+        label: [R("i", { className: "fa fa-cog" }), " Options"],
+        elem: this.renderOptionsTab()
+      }
+    ]
+
+    if (this.props.enableQuickfilters) {
+      tabs.splice(2, 0, {
+        id: "quickfilters",
+        label: [R("i", { className: "fa fa-bolt" }), " ", T("Quickfilters")],
+        elem: R(
+          "div",
+          { style: { marginBottom: 200 } },
+          R(QuickfiltersDesignComponent, {
+            design: this.props.design.quickfilters || [],
+            onDesignChange: (qfDesign) => {
+              this.props.onDesignChange(produce(this.props.design, (draft) => {
+                draft.quickfilters = qfDesign
+              }))
+            },
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            tables: filterableTables
+          })
+        )
+      })
+    }
+
+
+    return R(
+      "div",
+      { style: { padding: 5 } },
+      R(TabbedComponent, {
+        initialTabId: "layers",
+        tabs
+      })
+    )
+  }
+}
+
+interface AttributionComponentProps {
+  text?: string
+  onTextChange: any
+}
+
+interface AttributionComponentState {
+  editing: any
+}
+
+// Attribution inline editing
+class AttributionComponent extends React.Component<AttributionComponentProps, AttributionComponentState> {
+  static defaultProps = { text: null }
+
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      editing: false
+    }
+  }
+
+  handleTextChange = (e: any) => {
+    return this.props.onTextChange(e.target.value)
+  }
+
+  handleClickOut = () => {
+    return this.setState({ editing: false })
+  }
+
+  renderEditor() {
+    return R(
+      ClickOutHandler,
+      { onClickOut: this.handleClickOut },
+      R("input", { onChange: this.handleTextChange, value: this.props.text, className: "form-control" })
+    )
+  }
+
+  handleTextClick = () => {
+    return this.setState({ editing: true })
+  }
+
+  render() {
+    let elem: ReactElement = R(
+      "div",
+      { style: { marginLeft: 5 } },
+      this.state.editing
+        ? this.renderEditor()
+        : this.props.text
+          ? R("span", { onClick: this.handleTextClick, style: { cursor: "pointer" } }, this.props.text)
+          : R("a", { onClick: this.handleTextClick, className: "btn btn-link btn-sm" }, "+ Add attribution")
+    )
+
+    if (this.props.text || this.state.editing) {
+      elem = R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Attribution"), elem)
+    }
+
+    return elem
+  }
+}
+
+interface AdvancedOptionsComponentProps {
+  design: any
+  onDesignChange: any
+}
+
+interface AdvancedOptionsComponentState {
+  expanded: any
+}
+
+// Advanced options control
+class AdvancedOptionsComponent extends React.Component<AdvancedOptionsComponentProps, AdvancedOptionsComponentState> {
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      expanded: false
+    }
+  }
+
+  render() {
+    if (!this.state.expanded) {
+      return R(
+        "div",
+        null,
+        R(
+          "a",
+          { className: "btn btn-link btn-sm", onClick: () => this.setState({ expanded: true }) },
+          "Advanced options..."
+        )
+      )
+    }
+
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, "Advanced"),
+
+      R(
+        "div",
+        null,
+        R("span", { className: "text-muted" }, "Maximum Zoom Level: "),
+        " ",
+        R(NumberInputComponent, {
+          small: true,
+          style: { display: "inline-block" },
+          placeholder: "None",
+          value: this.props.design.maxZoom,
+          onChange: (v: any) => this.props.onDesignChange(_.extend({}, this.props.design, { maxZoom: v }))
+        })
+      )
+    )
+  }
+}

package/src/maps/MapFiltersDesignerComponent.ts

@@ -0,0 +1,95 @@
+import _ from "lodash"
+import PropTypes from "prop-types"
+import React from "react"
+const R = React.createElement
+import { FilterExprComponent } from "@mwater/expressions-ui"
+import { DataSource, ExprCleaner, Schema } from "@mwater/expressions"
+import { ExprUtils } from "@mwater/expressions"
+import PopoverHelpComponent from "@mwater/react-library/lib/PopoverHelpComponent"
+import FiltersDesignerComponent from "../FiltersDesignerComponent"
+import * as MapUtils from "./MapUtils"
+
+export interface MapFiltersDesignerComponentProps {
+  /** Schema to use */
+  schema: Schema
+  /** Data source to use */
+  dataSource: DataSource
+  /** See Map Design.md */
+  design: any
+  /** Called with new design */
+  onDesignChange: any
+}
+
+// Designer for filters for a map
+export default class MapFiltersDesignerComponent extends React.Component<MapFiltersDesignerComponentProps> {
+  static contextTypes = { globalFiltersElementFactory: PropTypes.func }
+
+  handleFiltersChange = (filters: any) => {
+    const design = _.extend({}, this.props.design, { filters })
+    return this.props.onDesignChange(design)
+  }
+
+  handleGlobalFiltersChange = (globalFilters: any) => {
+    const design = _.extend({}, this.props.design, { globalFilters })
+    return this.props.onDesignChange(design)
+  }
+
+  render() {
+    // Get filterable tables
+    const filterableTables = MapUtils.getFilterableTables(this.props.design, this.props.schema)
+    if (filterableTables.length === 0) {
+      return null
+    }
+
+    return R(
+      "div",
+      null,
+      R(
+        "div",
+        { className: "mb-3" },
+        R(
+          "label",
+          { className: "text-muted" },
+          "Filters ",
+          R(
+            PopoverHelpComponent,
+            { placement: "left" },
+            "Filters all layers in the map. Individual layers can be filtered by clicking on Customize..."
+          )
+        ),
+
+        R(
+          "div",
+          { style: { margin: 5 } },
+          R(FiltersDesignerComponent, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            filters: this.props.design.filters,
+            onFiltersChange: this.handleFiltersChange,
+            filterableTables
+          })
+        )
+      ),
+
+      this.context.globalFiltersElementFactory
+        ? R(
+            "div",
+            { className: "mb-3" },
+            R("label", { className: "text-muted" }, "Global Filters "),
+
+            R(
+              "div",
+              { style: { margin: 5 } },
+              this.context.globalFiltersElementFactory({
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                filterableTables,
+                globalFilters: this.props.design.globalFilters || [],
+                onChange: this.handleGlobalFiltersChange
+              })
+            )
+          )
+        : undefined
+    )
+  }
+}

package/src/maps/MapLayerDataSource.ts

@@ -0,0 +1,27 @@
+import { JsonQLFilter } from "../JsonQLFilter"
+import { WidgetDataSource } from "../widgets/WidgetDataSource"
+
+/** Data source for a layer of a map. Gives urls, popup data */
+export interface MapLayerDataSource {
+  /** Get the url for the image tiles with the specified filters applied
+   * Called with (design, filters) where design is the design of the layer and filters are filters to apply. Returns URL
+   * Only called on layers that are valid */
+  getTileUrl(design: any, filters: JsonQLFilter[]): string | null
+
+  /** Get the url for the interactivity tiles with the specified filters applied
+   * Called with (design, filters) where design is the design of the layer and filters are filters to apply. Returns URL
+   * Only called on layers that are valid */
+  getUtfGridUrl(design: any, filters: JsonQLFilter[]): string | null
+
+  /** Get the url for vector tile source with an expiry time. Only for layers of type "VectorTile"
+   * @param createdAfter ISO 8601 timestamp requiring that tile source on server is created after specified datetime
+   */
+  getVectorTileUrl(
+    layerDesign: any,
+    filters: JsonQLFilter[],
+    createdAfter: string
+  ): Promise<{ url: string; expires: string }>
+
+  /** Gets widget data source for a popup widget */
+  getPopupWidgetDataSource(design: any, widgetId: string): WidgetDataSource
+}