@mwater/visualization 5.0.0

package/lib/layouts/grid/WidgetContainerComponent.js

@@ -0,0 +1,333 @@
+"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 react_dom_1 = __importDefault(require("react-dom"));
+const lodash_1 = __importDefault(require("lodash"));
+const R = react_1.default.createElement;
+const react_dnd_1 = require("react-dnd");
+const DecoratedBlockComponent_1 = __importDefault(require("../DecoratedBlockComponent"));
+// Render a child element as draggable, resizable block, injecting handle connectors
+// to child element
+class LayoutComponent extends react_1.default.Component {
+    render() {
+        if (this.props.canDrag) {
+            return react_1.default.cloneElement(react_1.default.Children.only(this.props.children), {
+                connectMoveHandle: this.props.connectMoveHandle,
+                connectResizeHandle: this.props.connectResizeHandle
+            });
+        }
+        else {
+            return this.props.children;
+        }
+    }
+}
+const moveSpec = {
+    beginDrag(props, monitor, component) {
+        return props.dragInfo;
+    },
+    canDrag(props, monitor) {
+        return props.canDrag;
+    }
+};
+function moveCollect(connect, monitor) {
+    return {
+        connectMoveHandle: connect.dragSource()
+    };
+}
+const MoveLayoutComponent = (0, react_dnd_1.DragSource)("block-move", moveSpec, moveCollect)(LayoutComponent);
+const resizeSpec = {
+    beginDrag(props, monitor, component) {
+        return props.dragInfo;
+    },
+    canDrag(props, monitor) {
+        return props.canDrag;
+    }
+};
+function resizeCollect(connect, monitor) {
+    return {
+        connectResizeHandle: connect.dragSource()
+    };
+}
+const MoveResizeLayoutComponent = (0, react_dnd_1.DragSource)("block-resize", resizeSpec, resizeCollect)(MoveLayoutComponent);
+// Container contains layouts to layout. It renders widgets at the correct location.
+class Container extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = { moveHover: null, resizeHover: null };
+    }
+    setMoveHover(hoverInfo) {
+        return this.setState({ moveHover: hoverInfo });
+    }
+    setResizeHover(hoverInfo) {
+        return this.setState({ resizeHover: hoverInfo });
+    }
+    dropLayout(id, droppedRect, widget) {
+        // Stop hover
+        this.setState({ moveHover: null, resizeHover: null });
+        // Convert rect to layout
+        const droppedLayout = this.props.layoutEngine.rectToLayout(droppedRect);
+        // Insert dropped layout
+        let items = lodash_1.default.clone(this.props.items);
+        items[id] = { layout: droppedLayout, widget };
+        let layouts = {};
+        for (id in items) {
+            const item = items[id];
+            layouts[id] = item.layout;
+        }
+        // Perform layout
+        layouts = this.props.layoutEngine.performLayout(layouts, id);
+        // Update item layouts
+        items = lodash_1.default.mapValues(items, (item, id) => {
+            return lodash_1.default.extend({}, item, { layout: layouts[id] });
+        });
+        return this.props.onItemsChange(items);
+    }
+    // Called when a block is dropped
+    dropMoveLayout(dropInfo) {
+        // Get rectangle of dropped block
+        const droppedRect = {
+            x: dropInfo.x,
+            y: dropInfo.y,
+            width: dropInfo.dragInfo.bounds.width,
+            height: dropInfo.dragInfo.bounds.height
+        };
+        return this.dropLayout(dropInfo.dragInfo.id, droppedRect, dropInfo.dragInfo.widget);
+    }
+    dropResizeLayout(dropInfo) {
+        // Get rectangle of hovered block
+        const droppedRect = {
+            x: dropInfo.dragInfo.bounds.x,
+            y: dropInfo.dragInfo.bounds.y,
+            width: dropInfo.width,
+            height: dropInfo.height
+        };
+        return this.dropLayout(dropInfo.dragInfo.id, droppedRect, dropInfo.dragInfo.widget);
+    }
+    componentWillReceiveProps(nextProps) {
+        // Reset hover if not over
+        if (!nextProps.isOver && (this.state.moveHover || this.state.resizeHover)) {
+            // Defer to prevent "Cannot dispatch in the middle of a dispatch." error
+            lodash_1.default.defer(() => {
+                this.setState({ moveHover: null, resizeHover: null });
+            });
+        }
+    }
+    handleRemove = (id) => {
+        // Update item layouts
+        const items = lodash_1.default.omit(this.props.items, id);
+        return this.props.onItemsChange(items);
+    };
+    handleWidgetDesignChange = (id, widgetDesign) => {
+        let { widget } = this.props.items[id];
+        widget = lodash_1.default.extend({}, widget, { design: widgetDesign });
+        let item = this.props.items[id];
+        item = lodash_1.default.extend({}, item, { widget });
+        const items = lodash_1.default.clone(this.props.items);
+        items[id] = item;
+        return this.props.onItemsChange(items);
+    };
+    renderPlaceholder(bounds) {
+        return R("div", {
+            key: "placeholder",
+            style: {
+                position: "absolute",
+                left: bounds.x,
+                top: bounds.y,
+                width: bounds.width,
+                height: bounds.height,
+                border: "dashed 3px #AAA",
+                borderRadius: 5,
+                padding: 5
+            }
+        });
+    }
+    // Render a particular layout. Allow visible to be false so that
+    // dragged elements can retain state
+    renderItem = (id, item, layout, visible = true) => {
+        // Calculate bounds
+        const bounds = this.props.layoutEngine.getLayoutBounds(layout);
+        // Position absolutely
+        const style = {
+            position: "absolute",
+            left: bounds.x,
+            top: bounds.y
+        };
+        if (!visible) {
+            style.display = "none";
+        }
+        // Create dragInfo which is all the info needed to drop the layout
+        const dragInfo = {
+            id,
+            bounds,
+            widget: item.widget
+        };
+        let elem = this.props.renderWidget({
+            id,
+            type: item.widget.type,
+            design: item.widget.design,
+            onDesignChange: this.props.onItemsChange != null ? this.handleWidgetDesignChange.bind(null, id) : undefined,
+            width: bounds.width - 10,
+            height: bounds.height - 10
+        });
+        // Render decorated if editable
+        if (this.props.onItemsChange) {
+            elem = react_1.default.createElement(DecoratedBlockComponent_1.default, 
+            // style: { width: bounds.width, height: bounds.height }
+            { onBlockRemove: this.handleRemove.bind(null, id) }, elem);
+        }
+        else {
+            elem = R("div", { className: "mwater-visualization-block-view" }, 
+            // style: { width: bounds.width, height: bounds.height },
+            elem);
+        }
+        // Clone element, injecting width, height and enclosing in a dnd block
+        return R("div", { style, key: id }, react_1.default.createElement(MoveResizeLayoutComponent, { dragInfo, canDrag: this.props.onItemsChange != null }, elem));
+    };
+    // Calculate a lookup of layouts incorporating hover info
+    calculateLayouts(props, state) {
+        // Get hovered block if present
+        let hoveredRect, id;
+        let hoveredDragInfo = null;
+        let hoveredLayout = null; // Layout of hovered block
+        if (state.moveHover) {
+            hoveredDragInfo = state.moveHover.dragInfo;
+            hoveredRect = {
+                x: state.moveHover.x,
+                y: state.moveHover.y,
+                width: state.moveHover.dragInfo.bounds.width,
+                height: state.moveHover.dragInfo.bounds.height
+            };
+            hoveredLayout = props.layoutEngine.rectToLayout(hoveredRect);
+        }
+        if (state.resizeHover) {
+            hoveredDragInfo = state.resizeHover.dragInfo;
+            hoveredRect = {
+                x: state.resizeHover.dragInfo.bounds.x,
+                y: state.resizeHover.dragInfo.bounds.y,
+                width: state.resizeHover.width,
+                height: state.resizeHover.height
+            };
+            hoveredLayout = props.layoutEngine.rectToLayout(hoveredRect);
+        }
+        let layouts = {};
+        for (id in props.items) {
+            const item = props.items[id];
+            layouts[id] = item.layout;
+        }
+        // Add hovered layout
+        if (hoveredDragInfo) {
+            layouts[hoveredDragInfo.id] = hoveredLayout;
+        }
+        // Perform layout
+        layouts = props.layoutEngine.performLayout(layouts, hoveredDragInfo ? hoveredDragInfo.id : undefined);
+        return layouts;
+    }
+    renderItems(items) {
+        let id;
+        const layouts = this.calculateLayouts(this.props, this.state);
+        const renderElems = [];
+        const hover = this.state.moveHover || this.state.resizeHover;
+        // Render blocks in their adjusted position
+        const ids = [];
+        for (id in items) {
+            ids.push(id);
+        }
+        if (hover && !ids.includes(hover.dragInfo.id)) {
+            ids.push(hover.dragInfo.id);
+        }
+        for (id of lodash_1.default.sortBy(ids)) {
+            const item = items[id];
+            if (!hover || id !== hover.dragInfo.id) {
+                renderElems.push(this.renderItem(id, item, layouts[id]));
+            }
+            else {
+                // Render it anyway so that its state is retained
+                if (item) {
+                    renderElems.push(this.renderItem(id, item, layouts[id], false));
+                }
+                renderElems.push(this.renderPlaceholder(this.props.layoutEngine.getLayoutBounds(layouts[id])));
+            }
+        }
+        return renderElems;
+    }
+    // This gets called 100s of times when dragging
+    shouldComponentUpdate(nextProps, nextState) {
+        if (this.props.width !== nextProps.width) {
+            return true;
+        }
+        if (this.props.layoutEngine !== nextProps.layoutEngine) {
+            return true;
+        }
+        const layouts = this.calculateLayouts(this.props, this.state);
+        const nextLayouts = this.calculateLayouts(nextProps, nextState);
+        if (!lodash_1.default.isEqual(layouts, nextLayouts)) {
+            return true;
+        }
+        return false;
+    }
+    render() {
+        // Determine height using layout engine
+        const style = {
+            width: this.props.width,
+            height: "100%",
+            position: "relative"
+        };
+        // Connect as a drop target
+        return this.props.connectDropTarget(R("div", { style }, this.renderItems(this.props.items)));
+    }
+}
+const targetSpec = {
+    drop(props, monitor, component) {
+        if (monitor.getItemType() === "block-move") {
+            const rect = react_dom_1.default.findDOMNode(component).getBoundingClientRect();
+            component.dropMoveLayout({
+                dragInfo: monitor.getItem(),
+                x: monitor.getClientOffset().x -
+                    (monitor.getInitialClientOffset().x - monitor.getInitialSourceClientOffset().x) -
+                    rect.left,
+                y: monitor.getClientOffset().y -
+                    (monitor.getInitialClientOffset().y - monitor.getInitialSourceClientOffset().y) -
+                    rect.top
+            });
+        }
+        if (monitor.getItemType() === "block-resize") {
+            component.dropResizeLayout({
+                dragInfo: monitor.getItem(),
+                width: monitor.getItem().bounds.width + monitor.getDifferenceFromInitialOffset().x,
+                height: monitor.getItem().bounds.height + monitor.getDifferenceFromInitialOffset().y
+            });
+        }
+    },
+    hover(props, monitor, component) {
+        if (monitor.getItemType() === "block-move") {
+            const rect = react_dom_1.default.findDOMNode(component).getBoundingClientRect();
+            component.setMoveHover({
+                dragInfo: monitor.getItem(),
+                x: monitor.getClientOffset().x -
+                    (monitor.getInitialClientOffset().x - monitor.getInitialSourceClientOffset().x) -
+                    rect.left,
+                y: monitor.getClientOffset().y -
+                    (monitor.getInitialClientOffset().y - monitor.getInitialSourceClientOffset().y) -
+                    rect.top
+            });
+        }
+        if (monitor.getItemType() === "block-resize") {
+            component.setResizeHover({
+                dragInfo: monitor.getItem(),
+                width: monitor.getItem().bounds.width + monitor.getDifferenceFromInitialOffset().x,
+                height: monitor.getItem().bounds.height + monitor.getDifferenceFromInitialOffset().y
+            });
+        }
+    }
+};
+function targetCollect(connect, monitor) {
+    return {
+        connectDropTarget: connect.dropTarget(),
+        isOver: monitor.isOver(),
+        clientOffset: monitor.getClientOffset()
+    };
+}
+exports.default = (0, react_dnd_1.DropTarget)(["block-move", "block-resize"], targetSpec, targetCollect)(Container);

package/lib/mWaterLoader.d.ts

@@ -0,0 +1,26 @@
+import { DataSource, Schema } from "@mwater/expressions";
+export interface MWaterLoaderOptions {
+    /** e.g. "https://api.mwater.co/v3/". required */
+    apiUrl: string;
+    /** client id if logged in. optional */
+    client?: string;
+    /** share if using a share to get schema. optional */
+    share?: string;
+    /** Load schema as a specific user (for shared dashboards, etc). optional */
+    asUser?: string;
+    /** Extra tables to load in schema. Forms are not loaded by default as they are too many */
+    extraTables: string[];
+    /** False to disable local caching of queries. Default true */
+    localCaching?: boolean;
+    /** Locales of the schema to load. Default is all. */
+    locales?: string[];
+}
+/** Loads a schema and data source that is specific to mWater server */
+export default function mWaterLoader(options: MWaterLoaderOptions, callback: (error: any, config?: {
+    schema: Schema;
+    dataSource: DataSource;
+}) => void): void;
+export default function mWaterLoader(options: MWaterLoaderOptions): Promise<{
+    schema: Schema;
+    dataSource: DataSource;
+}>;

package/lib/mWaterLoader.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jquery_1 = __importDefault(require("jquery"));
+const expressions_1 = require("@mwater/expressions");
+const MWaterDataSource_1 = __importDefault(require("@mwater/expressions/lib/MWaterDataSource"));
+const querystring_1 = __importDefault(require("querystring"));
+function mWaterLoader(options, callback) {
+    if (!callback) {
+        return new Promise((resolve, reject) => {
+            mWaterLoader(options, (err, config) => {
+                if (err) {
+                    reject(err);
+                }
+                else {
+                    resolve(config);
+                }
+            });
+        });
+    }
+    // Load schema
+    const query = {};
+    if (options.client) {
+        query.client = options.client;
+    }
+    if (options.share) {
+        query.share = options.share;
+    }
+    if (options.asUser) {
+        query.asUser = options.asUser;
+    }
+    if (options.extraTables && options.extraTables.length > 0) {
+        query.extraTables = options.extraTables.join(",");
+    }
+    if (options.locales) {
+        query.locales = options.locales.join(",");
+    }
+    const url = options.apiUrl + "schema?" + querystring_1.default.stringify(query);
+    jquery_1.default.getJSON(url, (schemaJson) => {
+        const schema = new expressions_1.Schema(schemaJson);
+        const dataSource = new MWaterDataSource_1.default(options.apiUrl, options.client, {
+            serverCaching: false,
+            localCaching: options.localCaching != null ? options.localCaching : true
+        });
+        return callback(null, {
+            schema,
+            dataSource
+        });
+    }).fail((xhr) => {
+        return callback(new Error(xhr.responseText));
+    });
+}
+exports.default = mWaterLoader;

package/lib/mapdemo.js

@@ -0,0 +1,115 @@
+"use strict";
+// TODO: This file was created by bulk-decaffeinate.
+// Sanity-check the conversion and remove this comment.
+// React = require 'react'
+// ReactDOM = require 'react-dom'
+// R = React.createElement
+// visualization_mwater = require './systems/mwater'
+// visualization = require './index'
+// uuid = require 'uuid'
+// class MapDemoComponent extends React.Component
+//   constructor: (props) ->
+//     super
+//     @state = { design: @props.initialDesign }
+//   componentDidMount: ->
+//     visualization_mwater.setup {
+//       apiUrl: @props.apiUrl
+//       client: @props.client
+//       onMarkerClick: (table, id) => alert("#{table}:#{id}")
+//     }, (err, results) =>
+//       if err
+//         throw err
+//       @setState(schema: results.schema, widgetFactory: results.widgetFactory, dataSource: results.dataSource, layerFactory: results.layerFactory)
+//   handleDesignChange: (design) =>
+//     @setState(design: design)
+//     console.log JSON.stringify(design, null, 2)
+//   render: ->
+//     if not @state.schema
+//       return R 'div', null, "Loading..."
+//     return R 'div', style: { height: "100%" },
+//       R 'style', null, '''html, body { height: 100% }'''
+//       React.createElement(visualization.MapComponent, {
+//         layerFactory: @state.layerFactory
+//         schema: @state.schema
+//         dataSource: @state.dataSource
+//         design: @state.design
+//         onDesignChange: @handleDesignChange
+//         })
+// layerViews = []
+// newLayers = []
+// addServerLayerView = (options) ->
+//   newLayers.push {
+//     name: options.name
+//     type: "MWaterServer"
+//     design: {
+//       type: options.type
+//       table: "entities.water_point"
+//       minZoom: options.minZoom
+//       maxZoom: options.maxZoom
+//     }
+//   }
+//   layerViews.push {
+//     id: uuid()
+//     name: options.name
+//     visible: options.visible == true
+//     opacity: 1
+//     type: "MWaterServer"
+//     group: options.group
+//     design: {
+//       type: options.type
+//       table: "entities.water_point"
+//       minZoom: options.minZoom
+//       maxZoom: options.maxZoom
+//     }
+//   }
+// addServerLayerView({ type: "safe_water_access", name: "Safe Water Access", group: "access", minZoom: 10 })
+// addServerLayerView({ type: "water_access", name: "Functional Water Access", group: "access", minZoom: 10 })
+// addServerLayerView({ type: "water_points_by_type", name: "Water Point Type", group: "points", visible: false })
+// addServerLayerView({ type: "functional_status", name: "Functionality", group: "points" })
+// addServerLayerView({ type: "ecoli_status", name: "E.Coli Level", group: "points" })
+// newLayers.push {
+//   name: "Custom Layer"
+//   type: "Markers"
+//   design: { }
+// }
+// layerViews.push {
+//   "id": "9ff7edcd-1955-4986-b082-c5af71e4a089",
+//   "name": "Custom Layer",
+//   "desc": "",
+//   "type": "Markers",
+//   "design": {
+//     "sublayers": [
+//       {
+//         "axes": {
+//           "geometry": {
+//             "expr": {
+//               "type": "scalar",
+//               "table": "entities.water_point",
+//               "joins": [],
+//               "expr": {
+//                 "type": "field",
+//                 "table": "entities.water_point",
+//                 "column": "location"
+//               }
+//             }
+//           }
+//         },
+//         "color": "#0088FF",
+//         "filter": null,
+//         "table": "entities.water_point"
+//       }
+//     ]
+//   },
+//   "visible": true,
+//   "opacity": 1
+// }
+// design = {
+//   baseLayer: "bing_road"
+//   layerViews: layerViews
+//   filters: {}
+//   bounds: { w: 0, n: 0, e: 40, s: -25 }
+// }
+// $ ->
+//   # sample = React.createElement(MapDemoComponent, initialDesign: design, apiUrl: "http://localhost:1234/v3/")
+//   sample = React.createElement(MapDemoComponent, initialDesign: design, apiUrl: "https://api.mwater.co/v3/")
+//   ReactDOM.render(sample, document.body)

package/lib/maps/AddLayerComponent.d.ts

@@ -0,0 +1,22 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+export interface AddLayerComponentProps {
+    /** Number of layers that already exist */
+    layerNumber: number;
+    /** See Map Design.md */
+    design: any;
+    /** Called with new design */
+    onDesignChange: any;
+    /** Schema to use */
+    schema: Schema;
+    dataSource: DataSource;
+}
+export default class AddLayerComponent extends React.Component<AddLayerComponentProps> {
+    static contextTypes: {
+        addLayerElementFactory: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    handleAddLayer: (newLayer: any) => any;
+    handleAddLayerView: (layerView: any) => any;
+    render(): any;
+}

package/lib/maps/AddLayerComponent.js

@@ -0,0 +1,85 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const prop_types_1 = __importDefault(require("prop-types"));
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const uuid_1 = __importDefault(require("uuid"));
+const LayerFactory_1 = __importDefault(require("./LayerFactory"));
+// Dropdown to add a new layer.
+// Can be overridden by context of addLayerElementFactory which is called with all props
+class AddLayerComponent extends react_1.default.Component {
+    static contextTypes = { addLayerElementFactory: prop_types_1.default.func };
+    handleAddLayer = (newLayer) => {
+        const layerView = {
+            id: (0, uuid_1.default)(),
+            name: newLayer.name,
+            desc: "",
+            type: newLayer.type,
+            visible: true,
+            opacity: 1,
+            design: null
+        };
+        // Clean design to make valid
+        const layer = LayerFactory_1.default.createLayer(layerView.type);
+        layerView.design = layer.cleanDesign(newLayer.design, this.props.schema);
+        return this.handleAddLayerView(layerView);
+    };
+    handleAddLayerView = (layerView) => {
+        // Add to list
+        const layerViews = this.props.design.layerViews.slice();
+        layerViews.push(layerView);
+        const design = lodash_1.default.extend({}, this.props.design, { layerViews });
+        return this.props.onDesignChange(design);
+    };
+    render() {
+        if (this.context.addLayerElementFactory) {
+            return this.context.addLayerElementFactory(this.props);
+        }
+        const newLayers = [
+            {
+                label: "Marker Layer",
+                name: "Untitled Layer",
+                type: "Markers",
+                design: {}
+            },
+            {
+                label: "Radius (circles) Layer",
+                name: "Untitled Layer",
+                type: "Buffer",
+                design: {}
+            },
+            {
+                label: "Choropleth Layer",
+                name: "Untitled Layer",
+                type: "AdminChoropleth",
+                design: {}
+            },
+            {
+                label: "Cluster Layer",
+                name: "Untitled Layer",
+                type: "Cluster",
+                design: {}
+            },
+            {
+                label: "Grid Layer",
+                name: "Untitled Layer",
+                type: "Grid",
+                design: {}
+            },
+            {
+                label: "Custom Tile Url (advanced)",
+                name: "Untitled Layer",
+                type: "TileUrl",
+                design: {}
+            }
+        ];
+        return R("div", { style: { margin: 5 }, key: "addLayer", className: "btn-group" }, R("button", { type: "button", "data-bs-toggle": "dropdown", className: "btn btn-primary dropdown-toggle" }, R("span", { className: "fas fa-plus" }), " Add Layer"), R("ul", { className: "dropdown-menu" }, lodash_1.default.map(newLayers, (layer, i) => {
+            return R("li", { key: "" + i }, R("a", { className: "dropdown-item", onClick: this.handleAddLayer.bind(null, layer) }, layer.label || layer.name));
+        })));
+    }
+}
+exports.default = AddLayerComponent;

package/lib/maps/AdminScopeAndDetailLevelComponent.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+export interface AdminScopeAndDetailLevelComponentProps {
+    /** Schema to use */
+    schema: Schema;
+    dataSource: DataSource;
+    /** admin region that is outside bounds. null for whole world */
+    scope?: number;
+    /** level of scope region. null for whole world */
+    scopeLevel?: number;
+    /** Detail level within scope region */
+    detailLevel?: number;
+    onScopeAndDetailLevelChange: (scope: number | null, scopeLevel: number | null, detailLevel: number | null) => void;
+}
+export default class AdminScopeAndDetailLevelComponent extends React.Component<AdminScopeAndDetailLevelComponentProps> {
+    handleScopeChange: (scope: number | null, scopeLevel: number | null) => void;
+    handleDetailLevelChange: (detailLevel: any) => void;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}