@mwater/visualization 5.0.0

package/src/widgets/text/TextComponent.tsx

@@ -0,0 +1,151 @@
+import PropTypes from "prop-types"
+import React, { CSSProperties } from "react"
+const R = React.createElement
+import _ from "lodash"
+import RichTextComponent from "../../richtext/RichTextComponent"
+import ExprInsertModalComponent from "./ExprInsertModalComponent"
+import ExprUpdateModalComponent from "./ExprUpdateModalComponent"
+import ExprItemsHtmlConverter from "../../richtext/ExprItemsHtmlConverter"
+import { TextWidgetDesign } from "./TextWidgetDesign"
+import { DataSource, Schema } from "@mwater/expressions"
+
+export interface TextComponentProps {
+  design: TextWidgetDesign
+  onDesignChange?: (design: TextWidgetDesign) => void
+  schema: Schema
+  dataSource: DataSource
+  /** Expression values */
+  exprValues: { [key: string]: any }
+  width?: number
+  height?: number
+  
+  /** Table that is filtered to have one row */
+  singleRowTable?: string
+
+  /** Optional lookup of string name to value. Used for {{branding}} and other replacement strings in text widget */
+  namedStrings?: { [key: string]: string }
+}
+
+// Text component which is provided with the data it needs, rather than loading it.
+// Used by TextWidgetComponent and also by other components that embed text fields
+export default class TextComponent extends React.Component<TextComponentProps> {
+  static contextTypes = { locale: PropTypes.string }
+  exprInsertModal: ExprInsertModalComponent | null
+  exprUpdateModal: ExprUpdateModalComponent | null
+  editor: RichTextComponent | null
+
+  createItemsHtmlConverter() {
+    return new ExprItemsHtmlConverter(
+      this.props.schema,
+      this.props.onDesignChange != null,
+      this.props.exprValues,
+      // Display summaries if in design more and singleRowTable is set
+      this.props.onDesignChange != null && this.props.singleRowTable != null,
+      // Only replace named strings if not editing
+      this.props.onDesignChange == null ? this.props.namedStrings : undefined,
+      this.context.locale
+    )
+  }
+
+  handleItemsChange = (items: any) => {
+    const design = { ...this.props.design, items }
+    return this.props.onDesignChange!(design)
+  }
+
+  handleInsertExpr = (item: any) => {
+    const html = '<div data-embed="' + _.escape(JSON.stringify(item)) + '"></div>'
+
+    return this.editor!.pasteHTML(html)
+  }
+
+  replaceItem(item: any) {
+    var replaceItemInItems = (items: any[], item: any): any[] =>
+      _.map(items, function (i) {
+        if (i.id === item.id) {
+          return item
+        } else if (i.items) {
+          return _.extend({}, i, { items: replaceItemInItems(i.items, item) })
+        } else {
+          return i
+        }
+      })
+
+    const items = replaceItemInItems(this.props.design.items || [], item)
+    return this.props.onDesignChange!({ ...this.props.design, items })
+  }
+
+  handleItemClick = (item: any) => {
+    return this.exprUpdateModal!.open(item, (item: any) => {
+      // Replace in items
+      return this.replaceItem(item)
+    })
+  }
+
+  handleAddExpr = (ev: any) => {
+    ev.preventDefault()
+    return this.exprInsertModal!.open()
+  }
+
+  renderExtraPaletteButtons() {
+    return R(
+      "div",
+      { key: "expr", className: "mwater-visualization-text-palette-item", onMouseDown: this.handleAddExpr },
+      R("i", { className: "fa fa-plus" }),
+      " Field"
+    )
+  }
+
+  renderModals() {
+    return [
+      R(ExprInsertModalComponent, {
+        key: "exprInsertModal",
+        ref: (c: ExprInsertModalComponent | null) => {
+          this.exprInsertModal = c
+        },
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        onInsert: this.handleInsertExpr,
+        singleRowTable: this.props.singleRowTable
+      }),
+      R(ExprUpdateModalComponent, {
+        key: "exprUpdateModal",
+        ref: (c: ExprUpdateModalComponent | null) => {
+          this.exprUpdateModal = c
+        },
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        singleRowTable: this.props.singleRowTable
+      })
+    ]
+  }
+
+  refRichTextComponent = (c: RichTextComponent | null) => {
+    this.editor = c
+  }
+
+  render() {
+    const style: CSSProperties = {
+      position: "relative"
+    }
+
+    style.width = this.props.width
+    style.height = this.props.height
+
+    return R(
+      "div",
+      null,
+      this.renderModals(),
+      R(RichTextComponent, {
+        ref: this.refRichTextComponent,
+        className: `mwater-visualization-text-widget-style-${this.props.design.style || "default"}`,
+        style,
+        items: this.props.design.items,
+        onItemsChange: this.props.onDesignChange ? this.handleItemsChange : undefined,
+        onItemClick: this.handleItemClick,
+        itemsHtmlConverter: this.createItemsHtmlConverter(),
+        includeHeadings: this.props.design.style === "default" || !this.props.design.style,
+        extraPaletteButtons: this.renderExtraPaletteButtons()
+      })
+    )
+  }
+}

package/src/widgets/text/TextWidget.ts

@@ -0,0 +1,265 @@
+import React from "react"
+const R = React.createElement
+import _ from "lodash"
+import async from "async"
+import { DataSource, ExprUtils, OpExpr, Schema } from "@mwater/expressions"
+import { ExprCompiler } from "@mwater/expressions"
+import { ExprCleaner } from "@mwater/expressions"
+import { injectTableAlias } from "@mwater/expressions"
+import Widget, { CreateViewElementOptions } from "../Widget"
+import { JsonQLFilter } from "../../JsonQLFilter"
+import { JsonQLSelectQuery } from "@mwater/jsonql"
+import { HtmlItem } from "../../richtext/ItemsHtmlConverter"
+import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter"
+import { TextWidgetDesign } from "./TextWidgetDesign"
+
+export default class TextWidget extends Widget {
+  // Creates a React element that is a view of the widget
+  // options:
+  //  schema: schema to use
+  //  dataSource: data source to use
+  //  widgetDataSource: Gives data to the widget in a way that allows client-server separation and secure sharing. See definition in WidgetDataSource.
+  //  design: widget design
+  //  scope: scope of the widget (when the widget self-selects a particular scope)
+  //  filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
+  //  onScopeChange: called with scope of widget
+  //  onDesignChange: called with new design. null/undefined for readonly
+  //  width: width in pixels on screen
+  //  height: height in pixels on screen
+  //  singleRowTable: optional table name of table that will be filtered to have a single row present. Widget designer should optionally account for this
+  //  namedStrings: Optional lookup of string name to value. Used for {{branding}} and other replacement strings in text widget
+  createViewElement(options: CreateViewElementOptions) {
+    // Put here so TextWidget can be created on server
+    const TextWidgetComponent = require("./TextWidgetComponent").default
+
+    return R(TextWidgetComponent, {
+      schema: options.schema,
+      dataSource: options.dataSource,
+      widgetDataSource: options.widgetDataSource,
+      filters: options.filters,
+      design: options.design,
+      onDesignChange: options.onDesignChange,
+      width: options.width,
+      height: options.height,
+      singleRowTable: options.singleRowTable,
+      namedStrings: options.namedStrings,
+      ref: options.widgetRef
+    })
+  }
+
+  // Get the data that the widget needs. This will be called on the server, typically.
+  //   design: design of the chart
+  //   schema: schema to use
+  //   dataSource: data source to get data from
+  //   filters: array of { table: table id, jsonql: jsonql condition with {alias} for tableAlias }
+  //   callback: (error, data)
+  getData(design: any, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any) {
+    // Evaluates a single exprItem
+    const evalExprItem = (exprItem: any, cb: any) => {
+      let query: JsonQLSelectQuery, whereClauses
+      if (!exprItem.expr) {
+        return cb(null)
+      }
+
+      const { table } = exprItem.expr
+
+      // If table doesn't exist, return null
+      if (table && !schema.getTable(table)) {
+        return cb(null)
+      }
+
+      const exprCompiler = new ExprCompiler(schema)
+      const exprUtils = new ExprUtils(schema)
+
+      // Clean expression
+      const exprCleaner = new ExprCleaner(schema)
+      let expr = exprCleaner.cleanExpr(exprItem.expr, { aggrStatuses: ["individual", "literal", "aggregate"] })
+
+      // Get relevant filters
+      if (table) {
+        const relevantFilters = _.where(filters || [], { table })
+        whereClauses = _.map(relevantFilters, (f) => injectTableAlias(f.jsonql, "main"))
+      } else {
+        whereClauses = []
+      }
+
+      // In case of "sum where"/"count where", extract where clause to make faster
+      if (expr && expr.type == "op" && expr?.op === "sum where") {
+        whereClauses.push(exprCompiler.compileExpr({ expr: expr.exprs[1], tableAlias: "main" }))
+        expr = { type: "op", table: expr.table, op: "sum", exprs: [expr.exprs[0]] }
+      } else if (expr && expr.type == "op" && expr?.op === "count where") {
+        whereClauses.push(exprCompiler.compileExpr({ expr: expr.exprs[0], tableAlias: "main" }))
+        expr = { type: "op", table: expr.table, op: "count", exprs: [] }
+      }
+
+      let compiledExpr = exprCompiler.compileExpr({ expr, tableAlias: "main" })
+      const exprType = exprUtils.getExprType(expr)
+
+      // Handle special case of geometry, converting to GeoJSON
+      if (exprType === "geometry") {
+        // Convert to 4326 (lat/long). Force ::geometry for null
+        compiledExpr = {
+          type: "op",
+          op: "::jsonb",
+          exprs: [
+            {
+              type: "op",
+              op: "ST_AsGeoJSON",
+              exprs: [
+                {
+                  type: "op",
+                  op: "ST_Transform",
+                  exprs: [{ type: "op", op: "::geometry", exprs: [compiledExpr] }, 4326]
+                }
+              ]
+            }
+          ]
+        }
+      }
+
+      const aggrStatus = exprUtils.getExprAggrStatus(expr)
+      if (aggrStatus === "individual" || aggrStatus === "literal") {
+        // Get two distinct examples to know if unique if not aggregate
+        query = {
+          type: "query",
+          distinct: true,
+          selects: [{ type: "select", expr: compiledExpr, alias: "value" }],
+          from: table ? exprCompiler.compileTable(table, "main") : undefined,
+          limit: 2
+        }
+      } else {
+        query = {
+          type: "query",
+          selects: [{ type: "select", expr: compiledExpr, alias: "value" }],
+          from: table ? exprCompiler.compileTable(table, "main") : undefined
+        }
+      }
+
+      whereClauses = _.compact(whereClauses)
+
+      // Wrap if multiple
+      if (whereClauses.length > 1) {
+        query.where = { type: "op", op: "and", exprs: whereClauses }
+      } else {
+        query.where = whereClauses[0]
+      }
+
+      // Execute query
+      return dataSource.performQuery(query, (error: any, rows: any) => {
+        if (error) {
+          return cb(error)
+        } else {
+          // If multiple, use null
+          if (rows.length !== 1) {
+            return cb(null, null)
+          } else {
+            return cb(null, rows[0].value)
+          }
+        }
+      })
+    }
+
+    // Map of value by id
+    const exprValues = {}
+
+    return async.each(
+      this.getExprItems(design.items),
+      (exprItem, cb) => {
+        evalExprItem(exprItem, (error: any, value: any) => {
+          if (error) {
+            cb(error)
+          } else {
+            exprValues[exprItem.id] = value
+            cb(null)
+          }
+        })
+      },
+      (error) => {
+        if (error) {
+          callback(error)
+        } else {
+          callback(null, exprValues)
+        }
+      }
+    )
+  }
+
+  // Determine if widget is auto-height, which means that a vertical height is not required.
+  isAutoHeight() {
+    return true
+  }
+
+  // Get expression items recursively
+  getExprItems(items: HtmlItem[]): HtmlItemExpr[] {
+    let exprItems: any[] = []
+    for (let item of items || []) {
+      if ((item as any).type === "expr") {
+        exprItems.push(item)
+      }
+      if ((item as any).items) {
+        exprItems = exprItems.concat(this.getExprItems((item as any).items))
+      }
+    }
+    return exprItems
+  }
+
+  // Get a list of table ids that can be filtered on
+  getFilterableTables(design: TextWidgetDesign, schema: Schema) {
+    const exprItems = this.getExprItems(design.items)
+
+    let filterableTables = _.map(exprItems, (exprItem) => (exprItem.expr as OpExpr)?.table)
+
+    filterableTables = _.uniq(_.compact(filterableTables))
+    return filterableTables as string[]
+  }
+
+  // Get table of contents entries for the widget, entries that should be displayed in the TOC.
+  // returns `[{ id: "id that is unique within widget", text: "text of TOC entry", level: 1, 2, etc. }]
+  // For simplicity, the h1, h2, etc. have ids of 0, 1, 2 in the order they appear. h1, h2 will be given ids 0, 1 respectively.
+  getTOCEntries(design: any, namedStrings: any) {
+    // Find all items that are h1, h2, etc
+    const entries: any = []
+
+    // Convert items into flat text
+    function flattenText(items: any) {
+      let text = _.map(items, function (item) {
+        if (_.isString(item)) {
+          return item
+        }
+        if (item?.items) {
+          return flattenText(item.items)
+        }
+      }).join("")
+
+      // Handle named strings
+      return (text = text.replace(/\{\{.+?\}\}/g, (match: any) => {
+        const name = match.substr(2, match.length - 4)
+        if (namedStrings && namedStrings[name] != null) {
+          return namedStrings[name]
+        } else {
+          return match
+        }
+      }))
+    }
+
+    var findRecursive = (items: any) =>
+      (() => {
+        const result = []
+        for (let item of items || []) {
+          if (item?.type === "element" && item.tag.match(/^h[1-9]$/)) {
+            entries.push({ id: entries.length, level: parseInt(item.tag.substr(1)), text: flattenText(item.items) })
+          }
+          if (item?.items) {
+            result.push(findRecursive(item.items))
+          } else {
+            result.push(undefined)
+          }
+        }
+        return result
+      })()
+
+    findRecursive(design.items)
+
+    return entries
+  }
+}

package/src/widgets/text/TextWidgetComponent.ts

@@ -0,0 +1,120 @@
+import PropTypes from "prop-types"
+import React from "react"
+const R = React.createElement
+import _ from "lodash"
+import TextComponent from "./TextComponent"
+import TextWidget from "./TextWidget"
+import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent"
+import { DataSource, Schema } from "@mwater/expressions"
+import { JsonQLFilter } from "../../JsonQLFilter"
+import { TextWidgetDesign } from "./TextWidgetDesign"
+import { HtmlItem } from "../../richtext/ItemsHtmlConverter"
+import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter"
+
+export interface TextWidgetComponentProps {
+  design: TextWidgetDesign
+  /** Called with new design. null/undefined for readonly */
+  onDesignChange?: (design: TextWidgetDesign) => void
+  filters: JsonQLFilter[]
+  schema: Schema
+  /** Data source to use for chart */
+  dataSource: DataSource
+  widgetDataSource: any
+  width?: number
+  height?: number
+  /** Table that is filtered to have one row */
+  singleRowTable?: string
+  namedStrings?: any
+}
+
+// Widget which displays styled text with embedded expressions
+export default class TextWidgetComponent extends AsyncLoadComponent<TextWidgetComponentProps, { loading: boolean, exprValues: any, error: any, cacheExpiry: any }> {
+  divComp: HTMLElement | null
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      loading: false,
+      // Map of expression id to expression value
+      exprValues: {},
+      error: null,
+      cacheExpiry: props.dataSource.getCacheExpiry() // Save cache expiry to see if changes
+    }
+  }
+
+  // Override to determine if a load is needed. Not called on mounting
+  isLoadNeeded(newProps: any, oldProps: any) {
+    // Get expression items recursively
+    function getExprItems(items: HtmlItem[]): HtmlItemExpr[] {
+      let exprItems: HtmlItemExpr[] = []
+      for (let item of items || []) {
+        if (typeof item === "object") {
+          if (item.type === "expr") {
+            exprItems.push(item as HtmlItemExpr)
+          }
+          if (item.items) {
+            exprItems = exprItems.concat(getExprItems(item.items))
+          }
+        }
+      }
+      return exprItems
+    }
+
+    // Reload if filters or expressions have changed or cache expiry
+    return (
+      !_.isEqual(newProps.filters, oldProps.filters) ||
+      !_.isEqual(getExprItems(newProps.design.items), getExprItems(oldProps.design.items)) ||
+      newProps.dataSource.getCacheExpiry() !== this.state.cacheExpiry
+    )
+  }
+
+  // Call callback with state changes
+  load(props: any, prevProps: any, callback: any) {
+    // Shortcut if no expressions in text widget
+    const widget = new TextWidget()
+    if (widget.getExprItems(props.design.items).length === 0) {
+      callback({ error: null, exprValues: {} }, props.dataSource.getCacheExpiry())
+      return
+    }
+
+    // Get data
+    props.widgetDataSource.getData(props.design, props.filters, (error: any, data: any) => {
+      callback({ error, exprValues: data || {}, cacheExpiry: props.dataSource.getCacheExpiry() })
+    })
+  }
+
+  scrollToTOCEntry(entryId: any) {
+    // Find entry in divComp
+    const entries = this.divComp!.querySelectorAll("h1,h2,h3,h4,h5,h6,h7,h8,h9")
+
+    const entry = entries[entryId]
+    if (entry) {
+      return entry.scrollIntoView(true)
+    }
+  }
+
+  render() {
+    // If loading, don't display old values
+    const exprValues = !this.state.loading ? this.state.exprValues : {}
+
+    return R(
+      "div",
+      {
+        ref: (c) => {
+          this.divComp = c
+        }
+      },
+      R(TextComponent, {
+        design: this.props.design,
+        onDesignChange: this.props.onDesignChange,
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        exprValues,
+        width: this.props.width,
+        height: this.props.height,
+        singleRowTable: this.props.singleRowTable,
+        namedStrings: this.props.namedStrings
+      })
+    )
+  }
+}

package/src/widgets/text/TextWidgetDesign.ts

@@ -0,0 +1,7 @@
+export interface TextWidgetDesign {
+  /** Text widget stores its content as array of items. See ItemsHtmlConverter TODO */
+  items: any[]
+
+  /** "title" for title block. default is "default" */
+  style?: "title" | "default"
+}

package/stories/UpdateableComponent.js

@@ -0,0 +1,29 @@
+// 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);
+  }
+};
+