@mwater/visualization 5.0.0

package/lib/MWaterResponsesFilterComponent.js

@@ -0,0 +1,145 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const expressions_1 = require("@mwater/expressions");
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+// Implements common filters for responses tables. Allows filtering by final responses only and also
+// by latest for each site type linked to responses.
+class MWaterResponsesFilterComponent extends react_1.default.Component {
+    // 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) {
+        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 lodash_1.default.any(this.getFilters(), (f) => {
+            return (lodash_1.default.isEqual(f, this.getFinalFilter()) || (f?.op === "is latest" && lodash_1.default.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 (lodash_1.default.any(filters, (f) => f?.op === "is latest" &&
+                    lodash_1.default.isEqual(f.exprs[0], { type: "field", table: this.props.table, column: column.id }))) {
+                    return column.id;
+                }
+            }
+        }
+        return null;
+    }
+    handleSiteChange = (site) => {
+        return this.handleChange(this.isFinal(), site);
+    };
+    handleFinalChange = (final) => {
+        return this.handleChange(final, this.getSiteValue());
+    };
+    // Recreate all filters
+    handleChange = (final, site) => {
+        // Strip all filters
+        let filters = this.getFilters();
+        // Strip simple
+        filters = lodash_1.default.filter(filters, (f) => !lodash_1.default.isEqual(f, this.getFinalFilter()));
+        // Strip "is latest" (simplified. just removes all "is latest" from the filter since is a rare op)
+        filters = lodash_1.default.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 = lodash_1.default.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)"), lodash_1.default.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, `${expressions_1.ExprUtils.localizeString(this.props.schema.getTable(column.join.toTable)?.name)}`), " in the question ", R("i", null, `'${expressions_1.ExprUtils.localizeString(column.name)}'`));
+            })))
+            : undefined, R(ui.Checkbox, { value: this.isFinal(), onChange: this.handleFinalChange }, "Only include final responses (recommended)")));
+    }
+}
+exports.default = MWaterResponsesFilterComponent;

package/lib/MWaterTableSelectComponent.d.ts

@@ -0,0 +1,36 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { Schema } from "@mwater/expressions";
+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;
+}
+export default class MWaterTableSelectComponent extends React.Component<MWaterTableSelectComponentProps, MWaterTableSelectComponentState> {
+    static contextTypes: {
+        locale: PropTypes.Requireable<string>;
+        activeTables: PropTypes.Requireable<string[]>;
+    };
+    toggleEdit: any;
+    constructor(props: any);
+    componentWillReceiveProps(nextProps: any): any;
+    handleChange: (tableId: any) => any;
+    handleTableChange: (tableId: any) => any;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}
+export {};

package/lib/MWaterTableSelectComponent.js

@@ -0,0 +1,206 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const prop_types_1 = __importDefault(require("prop-types"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const UIComponents_1 = require("./UIComponents");
+const expressions_1 = require("@mwater/expressions");
+const MWaterResponsesFilterComponent_1 = __importDefault(require("./MWaterResponsesFilterComponent"));
+const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalPopupComponent"));
+const MWaterCompleteTableSelectComponent_1 = __importDefault(require("./MWaterCompleteTableSelectComponent"));
+// Allows selection of a mwater-visualization table. Loads forms as well and calls event if modified
+class MWaterTableSelectComponent extends react_1.default.Component {
+    static contextTypes = {
+        locale: prop_types_1.default.string,
+        // Optional list of tables (ids) being used. Use this to present an initially short list to select from
+        activeTables: prop_types_1.default.arrayOf(prop_types_1.default.string.isRequired)
+    };
+    toggleEdit;
+    constructor(props) {
+        super(props);
+        this.state = {
+            pendingExtraTable: null // Set when waiting for a table to load
+        };
+    }
+    componentWillReceiveProps(nextProps) {
+        // 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) => {
+        // Close toggle edit
+        this.toggleEdit.close();
+        // Call onChange if different
+        if (tableId !== this.props.table) {
+            return this.props.onChange(tableId);
+        }
+    };
+    handleTableChange = (tableId) => {
+        // 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(lodash_1.default.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(UIComponents_1.ToggleEditComponent, {
+            ref: (c) => {
+                this.toggleEdit = c;
+            },
+            forceOpen: !this.props.table,
+            label: this.props.table
+                ? expressions_1.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_1.default, {
+                schema: this.props.schema,
+                table: this.props.table,
+                filter: this.props.filter,
+                onFilterChange: this.props.onFilterChange
+            })
+            : undefined);
+    }
+}
+exports.default = MWaterTableSelectComponent;
+// Is the table select component when in edit mode. Toggles between complete list and simplified list
+class EditModeTableSelectComponent extends react_1.default.Component {
+    static contextTypes = {
+        locale: prop_types_1.default.string,
+        // Optional list of tables (ids) being used. Use this to present an initially short list to select from
+        activeTables: prop_types_1.default.arrayOf(prop_types_1.default.string.isRequired)
+    };
+    constructor(props) {
+        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() {
+        let tables = this.context.activeTables || [];
+        // Remove dead tables
+        tables = tables.filter((t) => this.props.schema.getTable(t) != null && !this.props.schema.getTable(t).deprecated);
+        tables = lodash_1.default.union(tables, lodash_1.default.filter(lodash_1.default.pluck(this.props.schema.getTables(), "id"), (t) => t.match(/^responses:/)));
+        if (this.props.table) {
+            tables = lodash_1.default.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 = lodash_1.default.union(tables, [table.id]);
+                    }
+                }
+            }
+            else {
+                // Add if exists
+                if (this.props.schema.getTable(extraTable) && !this.props.schema.getTable(extraTable).deprecated) {
+                    tables = lodash_1.default.union(tables, [extraTable]);
+                }
+            }
+        }
+        // Sort by name
+        tables = lodash_1.default.sortBy(tables, (tableId) => expressions_1.ExprUtils.localizeString(this.props.schema.getTable(tableId).name, this.context.locale));
+        return tables;
+    }
+    handleCompleteChange = (tableId) => {
+        this.setState({ completeMode: false });
+        return this.props.onChange(tableId);
+    };
+    render() {
+        const items = lodash_1.default.map(this.getTableShortlist(), (tableId) => {
+            const table = this.props.schema.getTable(tableId);
+            return {
+                name: expressions_1.ExprUtils.localizeString(table.name, this.context.locale),
+                desc: expressions_1.ExprUtils.localizeString(table.desc, this.context.locale),
+                onClick: this.props.onChange.bind(null, table.id)
+            };
+        });
+        return R("div", null, this.state.completeMode
+            ? R(ModalPopupComponent_1.default, {
+                header: "Select Data Source",
+                onClose: () => this.setState({ completeMode: false }),
+                showCloseX: true,
+                size: "x-large"
+            }, R(MWaterCompleteTableSelectComponent_1.default, {
+                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(UIComponents_1.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/lib/MenuItemComponent.js

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

package/lib/PopoverComponent.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface PopoverComponentProps {
+    /** contents of popover */
+    content: any;
+    /** See http://getbootstrap.com/javascript/#popovers */
+    placement?: string;
+    visible: boolean;
+}
+export default class PopoverComponent extends React.Component<PopoverComponentProps> {
+    componentDidMount(): Element | undefined;
+    componentWillUnmount(): Element | undefined;
+    componentDidUpdate(prevProps: any): Element | undefined;
+    updatePopover(props: any, oldProps: any): Element | undefined;
+    render(): boolean | {} | React.ReactChild | React.ReactPortal | null | undefined;
+}

package/lib/PopoverComponent.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const jquery_1 = __importDefault(require("jquery"));
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+// Wraps a child with an optional popover
+class PopoverComponent extends react_1.default.Component {
+    componentDidMount() {
+        return this.updatePopover(this.props, null);
+    }
+    componentWillUnmount() {
+        return this.updatePopover(null, this.props);
+    }
+    componentDidUpdate(prevProps) {
+        if (!lodash_1.default.isEqual(prevProps.content, this.props.content) ||
+            prevProps.visible !== this.props.visible ||
+            prevProps.placement !== this.props.placement) {
+            return this.updatePopover(this.props, prevProps);
+        }
+    }
+    updatePopover(props, oldProps) {
+        // Destroy old popover
+        if (oldProps && oldProps.visible) {
+            (0, jquery_1.default)(react_dom_1.default.findDOMNode(this)).popover("destroy");
+        }
+        if (props && props.visible) {
+            const div = document.createElement("div");
+            return react_dom_1.default.render(this.props.content, div, () => {
+                (0, jquery_1.default)(react_dom_1.default.findDOMNode(this)).popover({
+                    content() {
+                        return (0, jquery_1.default)(div);
+                    },
+                    html: true,
+                    trigger: "manual",
+                    placement: this.props.placement
+                });
+                return (0, jquery_1.default)(react_dom_1.default.findDOMNode(this)).popover("show");
+            });
+        }
+    }
+    render() {
+        return react_1.default.Children.only(this.props.children);
+    }
+}
+exports.default = PopoverComponent;

package/lib/RadioButtonComponent.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+interface RadioButtonComponentProps {
+    /** True to check */
+    checked?: boolean;
+    /** Called when clicked */
+    onClick?: any;
+    onChange?: any;
+}
+export default class RadioButtonComponent extends React.Component<RadioButtonComponentProps> {
+    handleClick: () => any;
+    render(): React.DetailedReactHTMLElement<{
+        className: string;
+        onClick: () => any;
+    }, HTMLElement>;
+}
+export {};

package/lib/RadioButtonComponent.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+// Pretty radio button component
+class RadioButtonComponent extends react_1.default.Component {
+    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);
+    }
+}
+exports.default = RadioButtonComponent;

package/lib/TableSelectComponent.d.ts

@@ -0,0 +1,21 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { Expr, Schema } from "@mwater/expressions";
+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.Requireable<(...args: any[]) => any>;
+        locale: PropTypes.Requireable<string>;
+        activeTables: PropTypes.Requireable<string[]>;
+    };
+    render(): any;
+}

package/lib/TableSelectComponent.js

@@ -0,0 +1,68 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const prop_types_1 = __importDefault(require("prop-types"));
+const react_1 = __importDefault(require("react"));
+const ui = __importStar(require("./UIComponents"));
+const expressions_1 = require("@mwater/expressions");
+const R = react_1.default.createElement;
+class TableSelectComponent extends react_1.default.Component {
+    static contextTypes = {
+        tableSelectElementFactory: prop_types_1.default.func,
+        locale: prop_types_1.default.string,
+        // 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: prop_types_1.default.arrayOf(prop_types_1.default.string.isRequired)
+    };
+    render() {
+        if (this.context.tableSelectElementFactory) {
+            return this.context.tableSelectElementFactory(this.props);
+        }
+        return react_1.default.createElement(ui.ToggleEditComponent, {
+            forceOpen: !this.props.value,
+            label: this.props.value
+                ? expressions_1.ExprUtils.localizeString(this.props.schema.getTable(this.props.value)?.name || "(not found)", this.context.locale)
+                : R("i", null, "Select..."),
+            editor: (onClose) => {
+                return react_1.default.createElement(ui.OptionListComponent, {
+                    hint: "Select source to get data from",
+                    items: lodash_1.default.map(lodash_1.default.filter(this.props.schema.getTables(), (table) => !table.deprecated), (table) => ({
+                        name: expressions_1.ExprUtils.localizeString(table.name, this.context.locale),
+                        desc: expressions_1.ExprUtils.localizeString(table.desc, this.context.locale),
+                        onClick: () => {
+                            onClose();
+                            return this.props.onChange(table.id);
+                        }
+                    }))
+                });
+            }
+        });
+    }
+}
+exports.default = TableSelectComponent;