@mwater/visualization 5.0.0

package/src/MWaterResponsesFilterComponent.ts

@@ -0,0 +1,194 @@
+import _ from "lodash"
+import PropTypes from "prop-types"
+import React from "react"
+const R = React.createElement
+
+import { ExprUtils, Schema } from "@mwater/expressions"
+import * as ui from "@mwater/react-library/lib/bootstrap"
+
+export interface MWaterResponsesFilterComponentProps {
+  schema: Schema
+  /** responses:xyz */
+  table: string
+  filter?: any
+  onFilterChange: any
+}
+
+// Implements common filters for responses tables. Allows filtering by final responses only and also
+// by latest for each site type linked to responses.
+export default class MWaterResponsesFilterComponent extends React.Component<MWaterResponsesFilterComponentProps> {
+  // Expand "and" and null filters into a list of filters
+  getFilters() {
+    if (!this.props.filter) {
+      return []
+    }
+
+    if (this.props.filter.type === "op" && this.props.filter.op === "and") {
+      return this.props.filter.exprs
+    }
+
+    return [this.props.filter]
+  }
+
+  // Set filters in most compact way possible
+  setFilters(filters: any) {
+    if (filters.length === 0) {
+      return this.props.onFilterChange(null)
+    } else if (filters.length === 1) {
+      return this.props.onFilterChange(filters[0])
+    } else {
+      return this.props.onFilterChange({
+        type: "op",
+        op: "and",
+        table: this.props.table,
+        exprs: filters
+      })
+    }
+  }
+
+  getFinalFilter() {
+    return {
+      type: "op",
+      op: "= any",
+      table: this.props.table,
+      exprs: [
+        { type: "field", table: this.props.table, column: "status" },
+        { type: "literal", valueType: "enumset", value: ["final"] }
+      ]
+    }
+  }
+
+  isFinal() {
+    // Determine if final
+    return _.any(this.getFilters(), (f) => {
+      return (
+        _.isEqual(f, this.getFinalFilter()) || (f?.op === "is latest" && _.isEqual(f.exprs[1], this.getFinalFilter()))
+      )
+    })
+  }
+
+  // Get column id of site filtering on latest
+  getSiteValue() {
+    const filters = this.getFilters()
+
+    // Get site columns
+    for (var column of this.props.schema.getColumns(this.props.table)) {
+      if (
+        column.type === "join" &&
+        column.join.type === "n-1" &&
+        column.join.toTable.startsWith("entities.") &&
+        column.id.match(/^data:/)
+      ) {
+        // Check for match
+        if (
+          _.any(
+            filters,
+            (f) =>
+              f?.op === "is latest" &&
+              _.isEqual(f.exprs[0], { type: "field", table: this.props.table, column: column.id })
+          )
+        ) {
+          return column.id
+        }
+      }
+    }
+
+    return null
+  }
+
+  handleSiteChange = (site: any) => {
+    return this.handleChange(this.isFinal(), site)
+  }
+
+  handleFinalChange = (final: any) => {
+    return this.handleChange(final, this.getSiteValue())
+  }
+
+  // Recreate all filters
+  handleChange = (final: any, site: any) => {
+    // Strip all filters
+    let filters = this.getFilters()
+
+    // Strip simple
+    filters = _.filter(filters, (f) => !_.isEqual(f, this.getFinalFilter()))
+
+    // Strip "is latest" (simplified. just removes all "is latest" from the filter since is a rare op)
+    filters = _.filter(filters, (f) => f?.op !== "is latest")
+
+    // If site, create is latest
+    if (site) {
+      const filter = {
+        type: "op",
+        op: "is latest",
+        table: this.props.table,
+        exprs: [{ type: "field", table: this.props.table, column: site }]
+      }
+      if (final) {
+        filter.exprs.push(this.getFinalFilter())
+      }
+
+      filters.push(filter)
+    } else if (final) {
+      filters.push(this.getFinalFilter())
+    }
+
+    return this.setFilters(filters)
+  }
+
+  render() {
+    // Get site columns
+    const siteColumns = _.filter(
+      this.props.schema.getColumns(this.props.table),
+      (col) =>
+        col.type === "join" &&
+        col.join.type === "n-1" &&
+        col.join.toTable.startsWith("entities.") &&
+        col.id.match(/^data:/)
+    )
+
+    const siteColumnId = this.getSiteValue()
+
+    return R(
+      "div",
+      { style: { paddingLeft: 5, paddingTop: 5 } },
+      R("div", { style: { paddingBottom: 5 } }, "Data Source Options:"),
+
+      R(
+        "div",
+        { style: { paddingLeft: 5 } },
+        siteColumns.length > 0
+          ? R(
+              "div",
+              null,
+              R("i", null, "This data source contains links to monitoring sites. Would you like to:"),
+              R(
+                "div",
+                { style: { paddingLeft: 8 } },
+                R(
+                  ui.Radio,
+                  { key: "all", value: siteColumnId, radioValue: null, onChange: this.handleSiteChange },
+                  "Show all survey responses (even if there are more than one per site)"
+                ),
+                _.map(siteColumns, (column) => {
+                  return R(
+                    ui.Radio,
+                    { key: column.id, value: siteColumnId, radioValue: column.id, onChange: this.handleSiteChange },
+                    "Show only the latest response for each ",
+                    R("i", null, `${ExprUtils.localizeString(this.props.schema.getTable(column.join.toTable)?.name)}`),
+                    " in the question ",
+                    R("i", null, `'${ExprUtils.localizeString(column.name)}'`)
+                  )
+                })
+              )
+            )
+          : undefined,
+
+        R(
+          ui.Checkbox,
+          { value: this.isFinal(), onChange: this.handleFinalChange },
+          "Only include final responses (recommended)"
+        )
+      )
+    )
+  }
+}

package/src/MWaterTableSelectComponent.ts

@@ -0,0 +1,316 @@
+import _ from "lodash"
+import PropTypes from "prop-types"
+import React from "react"
+const R = React.createElement
+import { ToggleEditComponent, OptionListComponent } from "./UIComponents"
+import { ExprUtils, Schema } from "@mwater/expressions"
+import MWaterResponsesFilterComponent from "./MWaterResponsesFilterComponent"
+import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent"
+import MWaterCompleteTableSelectComponent from "./MWaterCompleteTableSelectComponent"
+
+export interface MWaterTableSelectComponentProps {
+  /** Url to hit api */
+  apiUrl: string
+  /** Optional client */
+  client?: string
+  schema: Schema
+  /** User id */
+  user?: string
+  table?: string
+  /** Called with table selected */
+  onChange: any
+  extraTables: any
+  onExtraTablesChange: any
+  /** Can also perform filtering for some types. Include these props to enable this */
+  filter?: any
+  onFilterChange?: any
+}
+
+interface MWaterTableSelectComponentState {
+  pendingExtraTable: any
+}
+
+// Allows selection of a mwater-visualization table. Loads forms as well and calls event if modified
+export default class MWaterTableSelectComponent extends React.Component<
+  MWaterTableSelectComponentProps,
+  MWaterTableSelectComponentState
+> {
+  static contextTypes = {
+    locale: PropTypes.string, // e.g. "en"
+
+    // Optional list of tables (ids) being used. Use this to present an initially short list to select from
+    activeTables: PropTypes.arrayOf(PropTypes.string.isRequired)
+  }
+  toggleEdit: any
+
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      pendingExtraTable: null // Set when waiting for a table to load
+    }
+  }
+
+  componentWillReceiveProps(nextProps: any) {
+    // If received new schema with pending extra table, select it
+    let table
+    if (this.state.pendingExtraTable) {
+      table = this.state.pendingExtraTable
+      if (nextProps.schema.getTable(table)) {
+        // No longer waiting
+        this.setState({ pendingExtraTable: null })
+
+        // Close toggle edit
+        this.toggleEdit.close()
+
+        // Fire change
+        nextProps.onChange(table)
+      }
+    }
+
+    // If table is newly selected and is a responses table and no filters, set filters to final only
+    if (
+      nextProps.table &&
+      nextProps.table.match(/responses:/) &&
+      nextProps.table !== this.props.table &&
+      !nextProps.filter &&
+      nextProps.onFilterChange
+    ) {
+      return nextProps.onFilterChange({
+        type: "op",
+        op: "= any",
+        table: nextProps.table,
+        exprs: [
+          { type: "field", table: nextProps.table, column: "status" },
+          { type: "literal", valueType: "enumset", value: ["final"] }
+        ]
+      })
+    }
+  }
+
+  handleChange = (tableId: any) => {
+    // Close toggle edit
+    this.toggleEdit.close()
+
+    // Call onChange if different
+    if (tableId !== this.props.table) {
+      return this.props.onChange(tableId)
+    }
+  }
+
+  handleTableChange = (tableId: any) => {
+    // If not part of extra tables, add it and wait for new schema
+    if (tableId && !this.props.schema.getTable(tableId)) {
+      return this.setState({ pendingExtraTable: tableId }, () => {
+        return this.props.onExtraTablesChange(_.union(this.props.extraTables, [tableId]))
+      })
+    } else {
+      return this.handleChange(tableId)
+    }
+  }
+
+  render() {
+    const editor = R(EditModeTableSelectComponent, {
+      apiUrl: this.props.apiUrl,
+      client: this.props.client,
+      schema: this.props.schema,
+      user: this.props.user,
+      table: this.props.table,
+      onChange: this.handleTableChange,
+      extraTables: this.props.extraTables,
+      onExtraTablesChange: this.props.onExtraTablesChange
+    })
+
+    return R(
+      "div",
+      null,
+      // Show message if loading
+      this.state.pendingExtraTable
+        ? R(
+            "div",
+            { className: "alert alert-info", key: "pendingExtraTable" },
+            R("i", { className: "fa fa-spinner fa-spin" }),
+            "\u00a0Please wait..."
+          )
+        : undefined,
+
+      R(ToggleEditComponent, {
+        ref: (c: any) => {
+          this.toggleEdit = c
+        },
+        forceOpen: !this.props.table, // Must have table
+        label: this.props.table
+          ? ExprUtils.localizeString(this.props.schema.getTable(this.props.table)?.name, this.context.locale)
+          : "",
+        editor
+      }),
+
+      // Make sure table still exists
+      this.props.table &&
+        this.props.onFilterChange &&
+        this.props.table.match(/^responses:/) &&
+        this.props.schema.getTable(this.props.table)
+        ? R(MWaterResponsesFilterComponent, {
+            schema: this.props.schema,
+            table: this.props.table,
+            filter: this.props.filter,
+            onFilterChange: this.props.onFilterChange
+          })
+        : undefined
+    )
+  }
+}
+
+interface EditModeTableSelectComponentProps {
+  /** Url to hit api */
+  apiUrl: string
+  /** Optional client */
+  client?: string
+  schema: Schema
+  /** User id */
+  user?: string
+  table?: string
+  /** Called with table selected */
+  onChange: any
+  extraTables: any
+  onExtraTablesChange: any
+}
+
+interface EditModeTableSelectComponentState {
+  completeMode: any
+}
+
+// Is the table select component when in edit mode. Toggles between complete list and simplified list
+class EditModeTableSelectComponent extends React.Component<
+  EditModeTableSelectComponentProps,
+  EditModeTableSelectComponentState
+> {
+  static contextTypes = {
+    locale: PropTypes.string, // e.g. "en"
+
+    // Optional list of tables (ids) being used. Use this to present an initially short list to select from
+    activeTables: PropTypes.arrayOf(PropTypes.string.isRequired)
+  }
+
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      // True when in popup mode that shows all tables
+      completeMode: false
+    }
+  }
+
+  handleShowMore = () => {
+    return this.setState({ completeMode: true })
+  }
+
+  // Get list of tables that should be included in shortlist
+  // This is all active tables and all responses tables in schema (so as to include rosters) and all extra tables
+  // Also includes current table
+  getTableShortlist(): string[] {
+    let tables: string[] = this.context.activeTables || []
+
+    // Remove dead tables
+    tables = tables.filter(
+      (t: any) => this.props.schema.getTable(t) != null && !this.props.schema.getTable(t)!.deprecated
+    )
+    tables = _.union(
+      tables,
+      _.filter(_.pluck(this.props.schema.getTables(), "id"), (t) => t.match(/^responses:/))
+    )
+    if (this.props.table) {
+      tables = _.union(tables, [this.props.table])
+    }
+
+    for (let extraTable of this.props.extraTables || []) {
+      // Check if wildcard
+      if (extraTable.match(/\*$/)) {
+        for (let table of this.props.schema.getTables()) {
+          if (table.id.startsWith(extraTable.substr(0, extraTable.length - 1)) && !table.deprecated) {
+            tables = _.union(tables, [table.id])
+          }
+        }
+      } else {
+        // Add if exists
+        if (this.props.schema.getTable(extraTable) && !this.props.schema.getTable(extraTable)!.deprecated) {
+          tables = _.union(tables, [extraTable])
+        }
+      }
+    }
+
+    // Sort by name
+    tables = _.sortBy(tables, (tableId) =>
+      ExprUtils.localizeString(this.props.schema.getTable(tableId)!.name, this.context.locale)
+    )
+
+    return tables
+  }
+
+  handleCompleteChange = (tableId: any) => {
+    this.setState({ completeMode: false })
+    return this.props.onChange(tableId)
+  }
+
+  render() {
+    const items = _.map(this.getTableShortlist(), (tableId) => {
+      const table = this.props.schema.getTable(tableId)!
+
+      return {
+        name: ExprUtils.localizeString(table.name, this.context.locale),
+        desc: ExprUtils.localizeString(table.desc, this.context.locale),
+        onClick: this.props.onChange.bind(null, table.id)
+      }
+    })
+
+    return R(
+      "div",
+      null,
+      this.state.completeMode
+        ? R(
+            ModalPopupComponent,
+            {
+              header: "Select Data Source",
+              onClose: () => this.setState({ completeMode: false }),
+              showCloseX: true,
+              size: "x-large"
+            },
+            R(MWaterCompleteTableSelectComponent, {
+              apiUrl: this.props.apiUrl,
+              client: this.props.client,
+              schema: this.props.schema,
+              user: this.props.user,
+              table: this.props.table,
+              onChange: this.handleCompleteChange,
+              extraTables: this.props.extraTables,
+              onExtraTablesChange: this.props.onExtraTablesChange
+            })
+          )
+        : undefined,
+
+      items.length > 0
+        ? [
+            R("div", { className: "text-muted" }, "Select Data Source:"),
+
+            R(OptionListComponent, { items }),
+
+            R(
+              "div",
+              null,
+              items.length > 0
+                ? R(
+                    "button",
+                    { type: "button", className: "btn btn-link btn-sm", onClick: this.handleShowMore },
+                    "Show All Available Data Sources..."
+                  )
+                : undefined
+            )
+          ]
+        : R(
+            "button",
+            { type: "button", className: "btn btn-link", onClick: this.handleShowMore },
+            "Select Data Source..."
+          )
+    )
+  }
+}

package/src/MenuItemComponent.ts

@@ -0,0 +1,2 @@
+// TODO: This file was created by bulk-decaffeinate.
+// Sanity-check the conversion and remove this comment.

package/src/PopoverComponent.ts

@@ -0,0 +1,59 @@
+import _ from "lodash"
+import $ from "jquery"
+import React from "react"
+import ReactDOM from "react-dom"
+
+export interface PopoverComponentProps {
+  /** contents of popover */
+  content: any
+  /** See http://getbootstrap.com/javascript/#popovers */
+  placement?: string
+  visible: boolean
+}
+
+// Wraps a child with an optional popover
+export default class PopoverComponent extends React.Component<PopoverComponentProps> {
+  componentDidMount() {
+    return this.updatePopover(this.props, null)
+  }
+
+  componentWillUnmount() {
+    return this.updatePopover(null, this.props)
+  }
+
+  componentDidUpdate(prevProps: any) {
+    if (
+      !_.isEqual(prevProps.content, this.props.content) ||
+      prevProps.visible !== this.props.visible ||
+      prevProps.placement !== this.props.placement
+    ) {
+      return this.updatePopover(this.props, prevProps)
+    }
+  }
+
+  updatePopover(props: any, oldProps: any) {
+    // Destroy old popover
+    if (oldProps && oldProps.visible) {
+      $(ReactDOM.findDOMNode(this)).popover("destroy")
+    }
+
+    if (props && props.visible) {
+      const div = document.createElement("div")
+      return ReactDOM.render(this.props.content, div, () => {
+        $(ReactDOM.findDOMNode(this)).popover({
+          content() {
+            return $(div)
+          },
+          html: true,
+          trigger: "manual",
+          placement: this.props.placement
+        })
+        return $(ReactDOM.findDOMNode(this)).popover("show")
+      })
+    }
+  }
+
+  render() {
+    return React.Children.only(this.props.children)
+  }
+}

package/src/RadioButtonComponent.ts

@@ -0,0 +1,34 @@
+import PropTypes from "prop-types"
+import React from "react"
+const R = React.createElement
+
+interface RadioButtonComponentProps {
+  /** True to check */
+  checked?: boolean
+  /** Called when clicked */
+  onClick?: any
+  onChange?: any
+}
+
+// Pretty radio button component
+export default class RadioButtonComponent extends React.Component<RadioButtonComponentProps> {
+  handleClick = () => {
+    if (this.props.onChange) {
+      this.props.onChange(!this.props.checked)
+    }
+    if (this.props.onClick) {
+      return this.props.onClick()
+    }
+  }
+
+  render() {
+    return R(
+      "div",
+      {
+        className: this.props.checked ? "mwater-visualization-radio checked" : "mwater-visualization-radio",
+        onClick: this.handleClick
+      },
+      this.props.children
+    )
+  }
+}

package/src/TableSelectComponent.ts

@@ -0,0 +1,60 @@
+import _ from "lodash"
+import PropTypes from "prop-types"
+import React from "react"
+import * as ui from "./UIComponents"
+import { Expr, ExprUtils, Schema } from "@mwater/expressions"
+const R = React.createElement
+
+export interface TableSelectComponentProps {
+  schema: Schema
+  /** Current table id */
+  value?: string | null
+  /** Newly selected table id */
+  onChange: (tableId: string) => void
+  /** Some table select components (not the default) can also perform filtering. Include these props to enable this */
+  filter?: Expr
+  onFilterChange?: (filter: Expr) => void
+}
+
+export default class TableSelectComponent extends React.Component<TableSelectComponentProps> {
+  static contextTypes = {
+    tableSelectElementFactory: PropTypes.func, // Can be overridden by setting tableSelectElementFactory in context that takes ({ schema, value, onChange, filter, onFilterChange })
+    locale: PropTypes.string, // e.g. "en"
+
+    // Optional list of tables (ids) being used. Some overrides of the table select component may use this to present
+    // an initially short list to select from
+    activeTables: PropTypes.arrayOf(PropTypes.string.isRequired)
+  }
+
+  render() {
+    if (this.context.tableSelectElementFactory) {
+      return this.context.tableSelectElementFactory(this.props)
+    }
+
+    return React.createElement(ui.ToggleEditComponent, {
+      forceOpen: !this.props.value,
+      label: this.props.value
+        ? ExprUtils.localizeString(
+            this.props.schema.getTable(this.props.value)?.name || "(not found)",
+            this.context.locale
+          )
+        : R("i", null, "Select..."),
+      editor: (onClose: any) => {
+        return React.createElement(ui.OptionListComponent, {
+          hint: "Select source to get data from",
+          items: _.map(
+            _.filter(this.props.schema.getTables(), (table) => !table.deprecated),
+            (table) => ({
+              name: ExprUtils.localizeString(table.name, this.context.locale),
+              desc: ExprUtils.localizeString(table.desc, this.context.locale),
+              onClick: () => {
+                onClose()
+                return this.props.onChange(table.id)
+              }
+            })
+          )
+        })
+      }
+    })
+  }
+}