@mwater/visualization 5.0.0

package/lib/axes/BinsComponent.js

@@ -0,0 +1,96 @@
+"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;
+const update_object_1 = __importDefault(require("update-object"));
+const expressions_1 = require("@mwater/expressions");
+const AxisBuilder_1 = __importDefault(require("./AxisBuilder"));
+const NumberInputComponent_1 = __importDefault(require("@mwater/react-library/lib/NumberInputComponent"));
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+// Allows setting of bins (min, max and number). Computes defaults if not present
+class BinsComponent extends react_1.default.Component {
+    unmounted;
+    constructor(props) {
+        super(props);
+        this.state = {
+            guessing: false // True when guessing ranges
+        };
+    }
+    componentDidMount() {
+        // Check if computing is needed
+        if (this.props.xform.min == null || this.props.xform.max == null) {
+            // Only do for individual (not aggregate) expressions
+            const exprUtils = new expressions_1.ExprUtils(this.props.schema);
+            if (exprUtils.getExprAggrStatus(this.props.expr) !== "individual") {
+                // Percent is a special case where 0-100
+                if (this.props.expr?.op === "percent where") {
+                    this.props.onChange((0, update_object_1.default)(this.props.xform, {
+                        min: { $set: 0 },
+                        max: { $set: 100 },
+                        excludeLower: { $set: true },
+                        excludeUpper: { $set: true }
+                    }));
+                }
+                return;
+            }
+            const axisBuilder = new AxisBuilder_1.default({ schema: this.props.schema });
+            // Get min and max from a query
+            const minMaxQuery = axisBuilder.compileBinMinMax(this.props.expr, this.props.expr.table, null, this.props.xform.numBins);
+            if (!minMaxQuery) {
+                return;
+            }
+            this.setState({ guessing: true });
+            return this.props.dataSource.performQuery(minMaxQuery, (error, rows) => {
+                let max, min;
+                if (this.unmounted) {
+                    return;
+                }
+                this.setState({ guessing: false });
+                if (error) {
+                    return; // Ignore
+                }
+                if (rows[0].min != null) {
+                    min = parseFloat(rows[0].min);
+                    max = parseFloat(rows[0].max);
+                }
+                return this.props.onChange((0, update_object_1.default)(this.props.xform, { min: { $set: min }, max: { $set: max } }));
+            });
+        }
+    }
+    componentWillUnmount() {
+        return (this.unmounted = true);
+    }
+    render() {
+        return R("div", null, R("div", { key: "vals" }, R(LabeledInlineComponent, { key: "min", label: "Min:" }, R(NumberInputComponent_1.default, {
+            small: true,
+            value: this.props.xform.min,
+            onChange: (v) => this.props.onChange((0, update_object_1.default)(this.props.xform, { min: { $set: v } }))
+        })), " ", R(LabeledInlineComponent, { key: "max", label: "Max:" }, R(NumberInputComponent_1.default, {
+            small: true,
+            value: this.props.xform.max,
+            onChange: (v) => this.props.onChange((0, update_object_1.default)(this.props.xform, { max: { $set: v } }))
+        })), " ", R(LabeledInlineComponent, { key: "numBins", label: "# of Bins:" }, R(NumberInputComponent_1.default, {
+            small: true,
+            value: this.props.xform.numBins,
+            decimal: false,
+            onChange: (v) => this.props.onChange((0, update_object_1.default)(this.props.xform, { numBins: { $set: v } }))
+        })), (() => {
+            if (this.state.guessing) {
+                return R("i", { className: "fa fa-spinner fa-spin" });
+            }
+            else if (this.props.xform.min == null || this.props.xform.max == null || !this.props.xform.numBins) {
+                return R("span", { className: "text-danger", style: { paddingLeft: 10 } }, "Min and max are required");
+            }
+            return null;
+        })()), this.props.xform.min != null && this.props.xform.max != null && this.props.xform.numBins ? (react_1.default.createElement("div", { key: "excludes" },
+            react_1.default.createElement(bootstrap_1.Checkbox, { key: "lower", inline: true, value: !this.props.xform.excludeLower, onChange: (value) => this.props.onChange((0, update_object_1.default)(this.props.xform, { excludeLower: { $set: !value } })) }, `Include < ${this.props.xform.min}`),
+            react_1.default.createElement(bootstrap_1.Checkbox, { key: "upper", inline: true, value: !this.props.xform.excludeUpper, onChange: (value) => this.props.onChange((0, update_object_1.default)(this.props.xform, { excludeUpper: { $set: !value } })) }, `Include > ${this.props.xform.max}`))) : undefined);
+    }
+}
+exports.default = BinsComponent;
+function LabeledInlineComponent(props) {
+    return R("div", { style: { display: "inline-block" } }, R("label", { className: "text-muted" }, props.label), props.children);
+}

package/lib/axes/CategoryMapComponent.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import { Schema } from "@mwater/expressions";
+import { Axis, AxisCategory } from "./Axis";
+export interface CategoryMapComponentProps {
+    schema: Schema;
+    axis: Axis;
+    onChange: (axis: Axis) => void;
+    categories?: AxisCategory[];
+    reorderable?: boolean;
+    /** True to allow editing the color map */
+    showColorMap?: boolean;
+    /** True to allow excluding of values via checkboxes */
+    allowExcludedValues?: boolean;
+    initiallyExpanded?: boolean;
+}
+interface CategoryMapComponentState {
+    collapsed: any;
+}
+export default class CategoryMapComponent extends React.Component<CategoryMapComponentProps, CategoryMapComponentState> {
+    constructor(props: any);
+    handleReorder: (map: any) => void;
+    handleColorChange: (value: any, color: any) => void;
+    handleExcludeChange: (value: any, ev: any) => void;
+    lookupColor(value: any): string | null;
+    handleNullLabelChange: (e: any) => void;
+    handleCategoryLabelChange: (category: any, e: any) => void;
+    handleToggle: () => void;
+    renderLabel(category: any): React.DetailedReactHTMLElement<{
+        className: string;
+        onClick: (e: any) => void;
+        style: {
+            cursor: "pointer";
+        };
+    }, HTMLElement>;
+    renderCategory: (category: any, index?: any, connectDragSource?: any, connectDragPreview?: any, connectDropTarget?: any) => React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderReorderable(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderNonReorderable(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderToggle(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}
+export {};

package/lib/axes/CategoryMapComponent.js

@@ -0,0 +1,175 @@
+"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 react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const update_object_1 = __importDefault(require("update-object"));
+const ColorComponent_1 = __importDefault(require("../ColorComponent"));
+const ReorderableListComponent_1 = __importDefault(require("@mwater/react-library/lib/reorderable/ReorderableListComponent"));
+const immer_1 = __importDefault(require("immer"));
+// Category map for an axis. Controls the colorMap values and excludedValues
+// Can be collapsed
+class CategoryMapComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            collapsed: !props.initiallyExpanded // Start collapsed
+        };
+    }
+    handleReorder = (map) => {
+        const order = lodash_1.default.pluck(map, "value");
+        return this.props.onChange((0, update_object_1.default)(this.props.axis, { drawOrder: { $set: order } }));
+    };
+    handleColorChange = (value, color) => {
+        // Delete if present for value
+        const colorMap = lodash_1.default.filter(this.props.axis.colorMap || [], (item) => item.value !== value);
+        // Add if color present
+        if (color) {
+            colorMap.push({ value, color });
+        }
+        return this.props.onChange((0, update_object_1.default)(this.props.axis, { colorMap: { $set: colorMap } }));
+    };
+    handleExcludeChange = (value, ev) => {
+        let excludedValues;
+        if (ev.target.checked) {
+            excludedValues = lodash_1.default.difference(this.props.axis.excludedValues || [], [value]);
+        }
+        else {
+            excludedValues = lodash_1.default.union(this.props.axis.excludedValues || [], [value]);
+        }
+        return this.props.onChange((0, update_object_1.default)(this.props.axis, { excludedValues: { $set: excludedValues } }));
+    };
+    // Gets the current color value if known
+    lookupColor(value) {
+        const item = lodash_1.default.find(this.props.axis.colorMap || [], (item) => item.value === value);
+        if (item) {
+            return item.color;
+        }
+        return null;
+    }
+    handleNullLabelChange = (e) => {
+        const name = prompt("Enter label for none value", this.props.axis.nullLabel || "None");
+        if (name) {
+            return this.props.onChange((0, update_object_1.default)(this.props.axis, { nullLabel: { $set: name } }));
+        }
+    };
+    handleCategoryLabelChange = (category, e) => {
+        let { label } = category;
+        if (this.props.axis.categoryLabels) {
+            label = this.props.axis.categoryLabels[JSON.stringify(category.value)] || label;
+        }
+        const name = prompt("Enter label or blank to reset", label);
+        if (name != null) {
+            if (name) {
+                return this.props.onChange((0, immer_1.default)(this.props.axis, (draft) => {
+                    draft.categoryLabels = draft.categoryLabels || {};
+                    draft.categoryLabels[JSON.stringify(category.value)] = name;
+                }));
+            }
+            else {
+                return this.props.onChange((0, immer_1.default)(this.props.axis, (draft) => {
+                    draft.categoryLabels = draft.categoryLabels || {};
+                    delete draft.categoryLabels[JSON.stringify(category.value)];
+                }));
+            }
+        }
+    };
+    handleToggle = () => {
+        return this.setState({ collapsed: !this.state.collapsed });
+    };
+    renderLabel(category) {
+        let { label } = category;
+        if (this.props.axis.categoryLabels) {
+            label = this.props.axis.categoryLabels[JSON.stringify(category.value)] || label;
+        }
+        if (category.value != null) {
+            return R("a", {
+                className: "link-plain",
+                onClick: this.handleCategoryLabelChange.bind(null, category),
+                style: { cursor: "pointer" }
+            }, label);
+        }
+        else {
+            return R("a", { className: "link-plain", onClick: this.handleNullLabelChange, style: { cursor: "pointer" } }, label, R("span", { style: { fontSize: 12, marginLeft: 4 } }, "(click to change label for none value)"));
+        }
+    }
+    // Category is { value: category value, label: category label }
+    renderCategory = (category, index, connectDragSource, connectDragPreview, connectDropTarget) => {
+        const labelStyle = {
+            verticalAlign: "middle",
+            marginLeft: 5
+        };
+        const iconStyle = {
+            cursor: "move",
+            marginRight: 8,
+            opacity: 0.5,
+            fontSize: 12,
+            height: 20
+        };
+        const colorPickerStyle = {
+            verticalAlign: "middle",
+            lineHeight: 1,
+            display: "inline-block",
+            marginLeft: 5
+        };
+        let elem = R("div", { key: category.value }, connectDragSource ? connectDragSource(R("i", { className: "fa fa-bars", style: iconStyle })) : undefined, this.props.allowExcludedValues
+            ? R("input", {
+                type: "checkbox",
+                style: { marginLeft: 5, marginBottom: 5, verticalAlign: "middle" },
+                checked: !lodash_1.default.includes(this.props.axis.excludedValues || [], category.value),
+                onChange: this.handleExcludeChange.bind(null, category.value)
+            })
+            : undefined, this.props.showColorMap
+            ? R("div", { style: colorPickerStyle }, R(ColorComponent_1.default, {
+                key: "color",
+                color: this.lookupColor(category.value),
+                onChange: (color) => this.handleColorChange(category.value, color)
+            }))
+            : undefined, R("span", { style: labelStyle }, this.renderLabel(category)));
+        if (connectDropTarget) {
+            elem = connectDropTarget(elem);
+        }
+        if (connectDragPreview) {
+            elem = connectDragPreview(elem);
+        }
+        return elem;
+    };
+    renderReorderable() {
+        const drawOrder = this.props.axis.drawOrder || lodash_1.default.pluck(this.props.axis.colorMap || [], "value");
+        const orderedCategories = lodash_1.default.sortBy(this.props.categories || [], (category) => {
+            return lodash_1.default.indexOf(drawOrder, category.value);
+        });
+        return R("div", null, this.renderToggle(), R(ReorderableListComponent_1.default, {
+            items: orderedCategories,
+            onReorder: this.handleReorder,
+            renderItem: this.renderCategory,
+            getItemId: (item) => item.value
+        }));
+    }
+    renderNonReorderable() {
+        return R("div", null, this.renderToggle(), lodash_1.default.map(this.props.categories || [], (category) => this.renderCategory(category)));
+    }
+    renderToggle() {
+        if (this.state.collapsed) {
+            return R("div", null, R("a", { className: "link-plain", onClick: this.handleToggle }, "Show Values ", R("i", { className: "fa fa-caret-down" })));
+        }
+        else {
+            return R("div", null, R("a", { className: "link-plain", onClick: this.handleToggle }, "Hide Values ", R("i", { className: "fa fa-caret-up" })));
+        }
+    }
+    render() {
+        if (this.state.collapsed) {
+            return this.renderToggle();
+        }
+        if (this.props.reorderable) {
+            return this.renderReorderable();
+        }
+        else {
+            return this.renderNonReorderable();
+        }
+    }
+}
+exports.default = CategoryMapComponent;

package/lib/axes/ColorPaletteCollectionComponent.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { Axis, AxisCategory } from "./Axis";
+export interface ColorPaletteCollectionComponentProps {
+    onPaletteSelected: any;
+    axis: Axis;
+    categories: AxisCategory[];
+    onCancel: any;
+}
+export default class ColorPaletteCollectionComponent extends React.Component<ColorPaletteCollectionComponentProps> {
+    static palettes: {
+        type: string;
+        reversed: boolean;
+    }[];
+    onPaletteSelected: (index: any) => any;
+    renderCancel: () => React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | null;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}

package/lib/axes/ColorPaletteCollectionComponent.js

@@ -0,0 +1,130 @@
+"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 react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const ColorSchemeFactory_1 = __importDefault(require("../ColorSchemeFactory"));
+class ColorPaletteCollectionComponent extends react_1.default.Component {
+    static palettes = [
+        { type: "schemeSet1", reversed: false },
+        { type: "schemeSet2", reversed: false },
+        { type: "schemeSet3", reversed: false },
+        { type: "schemeAccent", reversed: false },
+        { type: "schemeDark2", reversed: false },
+        { type: "schemePaired", reversed: false },
+        { type: "schemePastel1", reversed: false },
+        { type: "schemePastel2", reversed: false },
+        { type: "interpolateSpectral", reversed: false },
+        { type: "interpolateSpectral", reversed: true },
+        { type: "interpolateBlues", reversed: false },
+        { type: "interpolateBlues", reversed: true },
+        { type: "interpolateGreens", reversed: false },
+        { type: "interpolateGreens", reversed: true },
+        { type: "interpolateGreys", reversed: false },
+        { type: "interpolateGreys", reversed: true },
+        { type: "interpolateOranges", reversed: false },
+        { type: "interpolateOranges", reversed: true },
+        { type: "interpolatePurples", reversed: false },
+        { type: "interpolatePurples", reversed: true },
+        { type: "interpolateReds", reversed: false },
+        { type: "interpolateReds", reversed: true },
+        { type: "interpolateBuGn", reversed: false },
+        { type: "interpolateBuGn", reversed: true },
+        { type: "interpolateBuPu", reversed: false },
+        { type: "interpolateBuPu", reversed: true },
+        { type: "interpolateGnBu", reversed: false },
+        { type: "interpolateGnBu", reversed: true },
+        { type: "interpolateOrRd", reversed: false },
+        { type: "interpolateOrRd", reversed: true },
+        { type: "interpolatePuBuGn", reversed: false },
+        { type: "interpolatePuBuGn", reversed: true },
+        { type: "interpolatePuBu", reversed: false },
+        { type: "interpolatePuBu", reversed: true },
+        { type: "interpolatePuRd", reversed: false },
+        { type: "interpolatePuRd", reversed: true },
+        { type: "interpolateRdPu", reversed: false },
+        { type: "interpolateRdPu", reversed: true },
+        { type: "interpolateYlGnBu", reversed: false },
+        { type: "interpolateYlGnBu", reversed: true },
+        { type: "interpolateYlGn", reversed: false },
+        { type: "interpolateYlGn", reversed: true },
+        { type: "interpolateYlOrBr", reversed: false },
+        { type: "interpolateYlOrBr", reversed: true },
+        { type: "interpolateYlOrRd", reversed: false },
+        { type: "interpolateYlOrRd", reversed: true },
+        { type: "interpolateBrBG", reversed: false },
+        { type: "interpolateBrBG", reversed: true },
+        { type: "interpolatePRGn", reversed: false },
+        { type: "interpolatePRGn", reversed: true },
+        { type: "interpolatePiYG", reversed: false },
+        { type: "interpolatePiYG", reversed: true },
+        { type: "interpolatePuOr", reversed: false },
+        { type: "interpolatePuOr", reversed: true },
+        { type: "interpolateRdBu", reversed: false },
+        { type: "interpolateRdBu", reversed: true },
+        { type: "interpolateRdGy", reversed: false },
+        { type: "interpolateRdGy", reversed: true },
+        { type: "interpolateRdYlBu", reversed: false },
+        { type: "interpolateRdYlBu", reversed: true },
+        { type: "interpolateRdYlGn", reversed: false },
+        { type: "interpolateRdYlGn", reversed: true }
+    ];
+    onPaletteSelected = (index) => {
+        // Generate color map
+        const scheme = ColorSchemeFactory_1.default.createColorScheme({
+            type: ColorPaletteCollectionComponent.palettes[index].type,
+            // Null doesn't count to length
+            number: lodash_1.default.any(this.props.categories, (c) => c.value == null)
+                ? this.props.categories.length - 1
+                : this.props.categories.length,
+            reversed: ColorPaletteCollectionComponent.palettes[index].reversed
+        });
+        const colorMap = lodash_1.default.map(this.props.categories, (category, i) => ({
+            value: category.value,
+            color: category.value === null ? "#aaaaaa" : scheme[i % scheme.length]
+        }));
+        return this.props.onPaletteSelected(colorMap);
+    };
+    renderCancel = () => {
+        if (this.props.axis.colorMap) {
+            return R("div", null, R("a", { className: "link-plain", onClick: this.props.onCancel, key: "cancel-customize" }, "Cancel"));
+        }
+        return null;
+    };
+    render() {
+        return R("div", null, R("p", null, "Please select a color scheme"), lodash_1.default.map(ColorPaletteCollectionComponent.palettes, (config, index) => {
+            return R(ColorPaletteComponent, {
+                key: index,
+                index,
+                colorSet: ColorSchemeFactory_1.default.createColorScheme({
+                    type: config.type,
+                    number: Math.min(this.props.categories.length - 1, 6),
+                    reversed: config.reversed
+                }),
+                onPaletteSelected: this.onPaletteSelected,
+                number: this.props.categories.length
+            });
+        }), this.renderCancel());
+    }
+}
+exports.default = ColorPaletteCollectionComponent;
+class ColorPaletteComponent extends react_1.default.Component {
+    static defaultProps = { number: 6 };
+    handleSelect = () => {
+        return this.props.onPaletteSelected(this.props.index);
+    };
+    render() {
+        return R("div", { onClick: this.handleSelect, className: "axis-palette" }, lodash_1.default.map(this.props.colorSet.slice(0, this.props.number), (color, i) => {
+            const cellStyle = {
+                display: "inline-block",
+                height: 20,
+                width: 20,
+                backgroundColor: color
+            };
+            return R("div", { style: cellStyle, key: i }, " ");
+        }));
+    }
+}

package/lib/axes/RangesComponent.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { AxisXform } from "./Axis";
+import { Expr, Schema } from "@mwater/expressions";
+export interface RangesComponentProps {
+    schema: Schema;
+    /** Expression for computing min/max */
+    expr: Expr;
+    xform: AxisXform;
+    onChange: any;
+}
+export default class RangesComponent extends React.Component<RangesComponentProps> {
+    handleRangeChange: (index: any, range: any) => any;
+    handleAddRange: () => any;
+    handleRemoveRange: (index: any) => any;
+    renderRange: (range: any, index: any, connectDragSource: any, connectDragPreview: any, connectDropTarget: any) => React.CElement<RangeComponentProps, RangeComponent>;
+    handleReorder: (ranges: any) => any;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}
+interface RangeComponentProps {
+    /** Range to edit */
+    range: any;
+    onChange: any;
+    onRemove: any;
+    /** reorderable connector */
+    connectDragSource: any;
+    /** reorderable connector */
+    connectDragPreview: any;
+    connectDropTarget: any;
+}
+declare class RangeComponent extends React.Component<RangeComponentProps> {
+    handleMinOpenChange: (minOpen: any) => any;
+    handleMaxOpenChange: (maxOpen: any) => any;
+    render(): any;
+}
+export {};

package/lib/axes/RangesComponent.js

@@ -0,0 +1,119 @@
+"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;
+const uuid_1 = __importDefault(require("uuid"));
+const update_object_1 = __importDefault(require("update-object"));
+const expressions_ui_1 = require("@mwater/expressions-ui");
+const NumberInputComponent_1 = __importDefault(require("@mwater/react-library/lib/NumberInputComponent"));
+const ReorderableListComponent_1 = __importDefault(require("@mwater/react-library/lib/reorderable/ReorderableListComponent"));
+// Allows setting of ranges
+class RangesComponent extends react_1.default.Component {
+    handleRangeChange = (index, range) => {
+        const ranges = this.props.xform.ranges.slice();
+        ranges[index] = range;
+        return this.props.onChange((0, update_object_1.default)(this.props.xform, { ranges: { $set: ranges } }));
+    };
+    handleAddRange = () => {
+        const ranges = this.props.xform.ranges.slice();
+        ranges.push({ id: (0, uuid_1.default)(), minOpen: false, maxOpen: true });
+        return this.props.onChange((0, update_object_1.default)(this.props.xform, { ranges: { $set: ranges } }));
+    };
+    handleRemoveRange = (index) => {
+        const ranges = this.props.xform.ranges.slice();
+        ranges.splice(index, 1);
+        return this.props.onChange((0, update_object_1.default)(this.props.xform, { ranges: { $set: ranges } }));
+    };
+    renderRange = (range, index, connectDragSource, connectDragPreview, connectDropTarget) => {
+        return R(RangeComponent, {
+            key: range.id,
+            range,
+            onChange: this.handleRangeChange.bind(null, index),
+            onRemove: this.handleRemoveRange.bind(null, index),
+            connectDragSource,
+            connectDragPreview,
+            connectDropTarget
+        });
+    };
+    handleReorder = (ranges) => {
+        return this.props.onChange((0, update_object_1.default)(this.props.xform, { ranges: { $set: ranges } }));
+    };
+    render() {
+        return R("div", null, R("table", null, this.props.xform.ranges.length > 0
+            ? R("thead", null, R("tr", null, R("th", null, " "), R("th", { key: "min", colSpan: 2, style: { textAlign: "center" } }, "From"), R("th", { key: "and" }, ""), R("th", { key: "max", colSpan: 2, style: { textAlign: "center" } }, "To"), R("th", { key: "label", colSpan: 1, style: { textAlign: "center" } }, "Label"), R("th", { key: "remove" })))
+            : undefined, react_1.default.createElement(ReorderableListComponent_1.default, {
+            items: this.props.xform.ranges,
+            onReorder: this.handleReorder,
+            renderItem: this.renderRange,
+            getItemId: (range) => range.id,
+            element: R("tbody", null)
+        })), 
+        //          _.map @props.xform.ranges, (range, i) =>
+        //            R RangeComponent, key: range.id, range: range, onChange: @handleRangeChange.bind(null, i), onRemove: @handleRemoveRange.bind(null, i)
+        R("button", { className: "btn btn-link btn-sm", type: "button", onClick: this.handleAddRange }, R("span", { className: "fas fa-plus" }), " Add Range"));
+    }
+}
+exports.default = RangesComponent;
+// Single range (row)
+class RangeComponent extends react_1.default.Component {
+    handleMinOpenChange = (minOpen) => {
+        return this.props.onChange((0, update_object_1.default)(this.props.range, { minOpen: { $set: minOpen } }));
+    };
+    handleMaxOpenChange = (maxOpen) => {
+        return this.props.onChange((0, update_object_1.default)(this.props.range, { maxOpen: { $set: maxOpen } }));
+    };
+    render() {
+        let placeholder = "";
+        if (this.props.range.minValue != null) {
+            if (this.props.range.minOpen) {
+                placeholder = `> ${this.props.range.minValue}`;
+            }
+            else {
+                placeholder = `>= ${this.props.range.minValue}`;
+            }
+        }
+        if (this.props.range.maxValue != null) {
+            if (placeholder) {
+                placeholder += " and ";
+            }
+            if (this.props.range.maxOpen) {
+                placeholder += `< ${this.props.range.maxValue}`;
+            }
+            else {
+                placeholder += `<= ${this.props.range.maxValue}`;
+            }
+        }
+        return this.props.connectDragPreview(this.props.connectDropTarget(R("tr", null, R("td", null, this.props.connectDragSource(R("span", { className: "fa fa-bars" }))), R("td", { key: "minOpen" }, R(expressions_ui_1.LinkComponent, {
+            dropdownItems: [
+                { id: true, name: "greater than" },
+                { id: false, name: "greater than or equal to" }
+            ],
+            onDropdownItemClicked: this.handleMinOpenChange
+        }, this.props.range.minOpen ? "greater than" : "greater than or equal to")), R("td", { key: "minValue" }, R(NumberInputComponent_1.default, {
+            value: this.props.range.minValue,
+            placeholder: "None",
+            small: true,
+            onChange: (v) => this.props.onChange((0, update_object_1.default)(this.props.range, { minValue: { $set: v } }))
+        })), R("td", { key: "and" }, "\u00A0and\u00A0"), R("td", { key: "maxOpen" }, R(expressions_ui_1.LinkComponent, {
+            dropdownItems: [
+                { id: true, name: "less than" },
+                { id: false, name: "less than or equal to" }
+            ],
+            onDropdownItemClicked: this.handleMaxOpenChange
+        }, this.props.range.maxOpen ? "less than" : "less than or equal to")), R("td", { key: "maxValue" }, R(NumberInputComponent_1.default, {
+            value: this.props.range.maxValue,
+            placeholder: "None",
+            small: true,
+            onChange: (v) => this.props.onChange((0, update_object_1.default)(this.props.range, { maxValue: { $set: v } }))
+        })), R("td", { key: "label" }, R("input", {
+            type: "text",
+            className: "form-control form-control-sm",
+            value: this.props.range.label || "",
+            placeholder,
+            onChange: (ev) => this.props.onChange((0, update_object_1.default)(this.props.range, { label: { $set: ev.target.value || null } }))
+        })), R("td", { key: "remove" }, R("button", { className: "btn btn-sm btn-link", type: "button", onClick: this.props.onRemove }, R("span", { className: "fas fa-times" }))))));
+    }
+}

package/lib/componenttest.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/componenttest.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// TODO: This file was created by bulk-decaffeinate.
+// Sanity-check the conversion and remove this comment.
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const R = react_1.default.createElement;
+const jquery_1 = __importDefault(require("jquery"));
+// LargeListComponent = require './LargeListComponent'
+const VerticalLayoutComponent_1 = __importDefault(require("./VerticalLayoutComponent"));
+class Parent extends react_1.default.Component {
+    componentDidMount() {
+        return console.log(this.refs);
+    }
+    render() {
+        return R("div", null, R("div", { ref: "simple" }, R("div", { ref: "complex" })), react_1.default.createElement(Child, {}, R("div", { ref: "simple2" }, R("div", { ref: "complex2" }))));
+    }
+}
+class Child extends react_1.default.Component {
+    render() {
+        return R("div", { style: { height: this.props.height, backgroundColor: this.props.backgroundColor } }, this.props.children);
+    }
+}
+(0, jquery_1.default)(function () {
+    const sample = react_1.default.createElement(VerticalLayoutComponent_1.default, {
+        height: 200,
+        relativeHeights: { a: 0.6, b: 0.4 }
+    }, react_1.default.createElement(Child, { key: "a", backgroundColor: "red" }), react_1.default.createElement(Child, { key: "b", backgroundColor: "green" }), react_1.default.createElement(Child, { key: "c", backgroundColor: "blue", height: 50 }));
+    // sample = React.createElement(LargeListComponent, {
+    //   loadRows: (start, number, cb) =>
+    //     # console.log start
+    //     # console.log number
+    //     setTimeout () =>
+    //       cb(null, _.range(start, start + number))
+    //     , 200
+    //   renderRow: (row, index) -> R('div', style: { height: 25 }, key: index + "", "" + row)
+    //   rowHeight: 25
+    //   pageSize: 100
+    //   height: 500
+    //   rowCount: 10000
+    //   bufferSize: 100
+    //   })
+    return react_dom_1.default.render(sample, document.body);
+});