@mwater/visualization 5.0.0 → 5.0.1

package/lib/MWaterContextComponent.js

@@ -91,11 +91,8 @@ class MWaterContextComponent extends react_1.default.Component {
             }
             return null;
         };
-        // Always open indicator section
+        // Nothing initially open
         context.isScalarExprTreeSectionInitiallyOpen = (options) => {
-            if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
-                return true;
-            }
             return null;
         };
         return context;

package/lib/datagrids/DatagridComponent.d.ts

@@ -38,6 +38,7 @@ export default class DatagridComponent extends React.Component<DatagridComponent
     /** Height of quickfilters */
     quickfiltersHeight: number | null;
     quickfiltersValues: null | any[];
+    refreshKey: number;
 }> {
     datagridView?: DatagridViewComponent | null;
     quickfilters?: HTMLElement | null;
@@ -46,6 +47,7 @@ export default class DatagridComponent extends React.Component<DatagridComponent
     reload(): void | undefined;
     componentDidMount(): void;
     componentDidUpdate(): void;
+    handleRefreshData: () => void;
     updateHeight(): void;
     getQuickfilterValues: () => any[];
     getQuickfilterFilters: () => JsonQLFilter[];

package/lib/datagrids/DatagridComponent.js

@@ -30,7 +30,8 @@ class DatagridComponent extends react_1.default.Component {
             editingDesign: false,
             cellEditingEnabled: false,
             quickfiltersHeight: null,
-            quickfiltersValues: null
+            quickfiltersValues: null,
+            refreshKey: 1
         };
     }
     reload() {
@@ -42,6 +43,10 @@ class DatagridComponent extends react_1.default.Component {
     componentDidUpdate() {
         return this.updateHeight();
     }
+    handleRefreshData = () => {
+        this.props.dataSource.clearCache?.();
+        this.setState({ refreshKey: this.state.refreshKey + 1 });
+    };
     updateHeight() {
         // Calculate quickfilters height
         if (this.quickfilters) {
@@ -159,7 +164,7 @@ class DatagridComponent extends react_1.default.Component {
         }, T("Find/Replace"));
     }
     renderTitleBar() {
-        return R("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: 40, padding: 4 } }, R("div", { style: { float: "right" } }, this.renderFindReplace(), this.renderCellEdit(), this.renderEditButton(), this.props.extraTitleButtonsElem), this.props.titleElem);
+        return R("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: 40, padding: 4 } }, R("div", { style: { float: "right" } }, this.renderFindReplace(), this.renderCellEdit(), this.renderEditButton(), R("a", { key: "refresh", className: "btn btn-link btn-sm", onClick: this.handleRefreshData }, R("span", { className: "fas fa-sync" }), R("span", { className: "hide-600px" }, " Refresh")), this.props.extraTitleButtonsElem), this.props.titleElem);
     }
     renderQuickfilter() {
         return R("div", {
@@ -247,6 +252,7 @@ class DatagridComponent extends react_1.default.Component {
                     onRowDoubleClick: this.props.onRowDoubleClick,
                     canEditExpr: this.state.cellEditingEnabled ? this.props.canEditExpr : undefined,
                     updateExprValues: this.state.cellEditingEnabled ? this.props.updateExprValues : undefined,
+                    refreshKey: this.state.refreshKey
                 });
             }
             else if (this.props.onDesignChange) {

package/lib/datagrids/DatagridViewComponent.d.ts

@@ -25,6 +25,8 @@ export interface DatagridViewComponentProps {
     onRowDoubleClick?: (tableId: string, rowId: any, rowIndex: number) => void;
     /** Called when a row is clicked with (tableId, rowId, rowIndex) */
     onRowClick?: (tableId: string, rowId: any, rowIndex: number) => void;
+    /** Change to force a refresh */
+    refreshKey?: any;
 }
 /** Update to one row expression value */
 export interface RowUpdate {

package/lib/datagrids/DatagridViewComponent.js

@@ -31,7 +31,7 @@ class DatagridViewComponent extends react_1.default.Component {
     componentWillReceiveProps(nextProps) {
         // If design or filters changed, delete all rows
         // TODO won't this reload on column resize?
-        if (!lodash_1.default.isEqual(nextProps.design, this.props.design) || !lodash_1.default.isEqual(nextProps.filters, this.props.filters)) {
+        if (!lodash_1.default.isEqual(nextProps.design, this.props.design) || !lodash_1.default.isEqual(nextProps.filters, this.props.filters) || nextProps.refreshKey !== this.props.refreshKey) {
             return this.setState({ rows: [], entirelyLoaded: false });
         }
     }
@@ -314,7 +314,8 @@ class DatagridViewComponent extends react_1.default.Component {
             onRowDoubleClick: this.handleRowDoubleClick,
             onRowClick: this.handleRowClick,
             isColumnResizing: false,
-            onColumnResizeEndCallback: this.handleColumnResize
+            onColumnResizeEndCallback: this.handleColumnResize,
+            touchScrollEnabled: true
         }, this.renderColumns());
     }
 }

package/lib/datagrids/LabeledExprGenerator.js

@@ -92,6 +92,21 @@ class LabeledExprGenerator {
                         }
                     ];
                 }
+                else if (column.idTable.match(/^custom./)) { // Support cascading ref question
+                    return this.schema
+                        .getColumns(column.idTable)
+                        .filter((c) => c.id[0] !== "_")
+                        .map((c) => ({
+                        expr: {
+                            type: "scalar",
+                            table,
+                            joins: [column.id],
+                            expr: { type: "field", table: column.idTable, column: c.id }
+                        },
+                        label: `${createLabel(column)} > ${createLabel(c)}`,
+                        joins
+                    }));
+                }
                 else {
                     // Use label, code, full name, or name of dest table
                     const destTable = this.schema.getTable(column.idTable);

package/lib/dayjs.d.ts

@@ -0,0 +1,2 @@
+import dayjs from "dayjs";
+export default dayjs;

package/lib/dayjs.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const dayjs_1 = __importDefault(require("dayjs"));
+const localizedFormat_1 = __importDefault(require("dayjs/plugin/localizedFormat"));
+dayjs_1.default.extend(localizedFormat_1.default);
+exports.default = dayjs_1.default;

package/lib/languages.js

@@ -508,6 +508,11 @@ exports.languages = [
         "name": "Māori",
         "en": "Maori"
     },
+    {
+        "code": "miq",
+        "name": "Miskitu",
+        "en": "Miskito"
+    },
     {
         "code": "mk",
         "name": "Македонски",

package/lib/maps/DetailLevelSelectComponent.d.ts

@@ -23,99 +23,7 @@ export default class DetailLevelSelectComponent extends React.Component<DetailLe
     componentWillMount(): any;
     componentWillReceiveProps(nextProps: any): any;
     loadLevels(props: any): any;
-    render(): React.FunctionComponentElement<Omit<Pick<import("react-select/dist/declarations/src/Select").Props<unknown, boolean, import("react-select").GroupBase<unknown>>, "required" | "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "isClearable" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
-        tabIndex?: number | undefined;
-        options?: import("react-select").OptionsOrGroups<unknown, import("react-select").GroupBase<unknown>> | undefined;
-        placeholder?: React.ReactNode;
-        'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        styles?: import("react-select").StylesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        isLoading?: boolean | undefined;
-        isDisabled?: boolean | undefined;
-        isRtl?: boolean | undefined;
-        isMulti?: boolean | undefined;
-        controlShouldRenderValue?: boolean | undefined;
-        loadingMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        noOptionsMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        backspaceRemovesValue?: boolean | undefined;
-        blurInputOnSelect?: boolean | undefined;
-        captureMenuScroll?: boolean | undefined;
-        classNames?: import("react-select").ClassNamesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        closeMenuOnSelect?: boolean | undefined;
-        closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
-        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>> | undefined;
-        escapeClearsValue?: boolean | undefined;
-        filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, inputValue: string) => boolean) | null | undefined;
-        formatGroupLabel?: ((group: import("react-select").GroupBase<unknown>) => React.ReactNode) | undefined;
-        getOptionLabel?: import("react-select").GetOptionLabel<unknown> | undefined;
-        getOptionValue?: import("react-select").GetOptionValue<unknown> | undefined;
-        isOptionDisabled?: ((option: unknown, selectValue: import("react-select").Options<unknown>) => boolean) | undefined;
-        isSearchable?: boolean | undefined;
-        minMenuHeight?: number | undefined;
-        maxMenuHeight?: number | undefined;
-        menuIsOpen?: boolean | undefined;
-        menuPlacement?: import("react-select").MenuPlacement | undefined;
-        menuPosition?: import("react-select").MenuPosition | undefined;
-        menuShouldBlockScroll?: boolean | undefined;
-        menuShouldScrollIntoView?: boolean | undefined;
-        openMenuOnFocus?: boolean | undefined;
-        openMenuOnClick?: boolean | undefined;
-        pageSize?: number | undefined;
-        screenReaderStatus?: ((obj: {
-            count: number;
-        }) => string) | undefined;
-        tabSelectsValue?: boolean | undefined;
-        unstyled?: boolean | undefined;
-    } & {}, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<unknown, boolean, import("react-select").GroupBase<unknown>>, "required" | "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "isClearable" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
-        tabIndex?: number | undefined;
-        options?: import("react-select").OptionsOrGroups<unknown, import("react-select").GroupBase<unknown>> | undefined;
-        placeholder?: React.ReactNode;
-        'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        styles?: import("react-select").StylesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        isLoading?: boolean | undefined;
-        isDisabled?: boolean | undefined;
-        isRtl?: boolean | undefined;
-        isMulti?: boolean | undefined;
-        controlShouldRenderValue?: boolean | undefined;
-        loadingMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        noOptionsMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        backspaceRemovesValue?: boolean | undefined;
-        blurInputOnSelect?: boolean | undefined;
-        captureMenuScroll?: boolean | undefined;
-        classNames?: import("react-select").ClassNamesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        closeMenuOnSelect?: boolean | undefined;
-        closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
-        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>> | undefined;
-        escapeClearsValue?: boolean | undefined;
-        filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, inputValue: string) => boolean) | null | undefined;
-        formatGroupLabel?: ((group: import("react-select").GroupBase<unknown>) => React.ReactNode) | undefined;
-        getOptionLabel?: import("react-select").GetOptionLabel<unknown> | undefined;
-        getOptionValue?: import("react-select").GetOptionValue<unknown> | undefined;
-        isOptionDisabled?: ((option: unknown, selectValue: import("react-select").Options<unknown>) => boolean) | undefined;
-        isSearchable?: boolean | undefined;
-        minMenuHeight?: number | undefined;
-        maxMenuHeight?: number | undefined;
-        menuIsOpen?: boolean | undefined;
-        menuPlacement?: import("react-select").MenuPlacement | undefined;
-        menuPosition?: import("react-select").MenuPosition | undefined;
-        menuShouldBlockScroll?: boolean | undefined;
-        menuShouldScrollIntoView?: boolean | undefined;
-        openMenuOnFocus?: boolean | undefined;
-        openMenuOnClick?: boolean | undefined;
-        pageSize?: number | undefined;
-        screenReaderStatus?: ((obj: {
-            count: number;
-        }) => string) | undefined;
-        tabSelectsValue?: boolean | undefined;
-        unstyled?: boolean | undefined;
-    } & {}> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<unknown> & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>> | React.DetailedReactHTMLElement<{
+    render(): React.FunctionComponentElement<Omit<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<unknown> & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>> | React.DetailedReactHTMLElement<{
         className: string;
     }, HTMLElement>;
 }

package/lib/maps/Layer.js

@@ -166,24 +166,13 @@ class Layer {
                 let bounds = null;
                 if (results[0].bounds) {
                     const [w, s, e, n] = (0, bbox_1.default)(results[0].bounds);
-                    // Pad to 10km if point
-                    if (w === e && n === s) {
-                        bounds = {
-                            w: w - 0.1,
-                            s: s - 0.1,
-                            e: e + 0.1,
-                            n: n + 0.1
-                        };
-                        // Pad bounds to prevent too small box (10m)
-                    }
-                    else {
-                        bounds = {
-                            w: w - 0.001,
-                            s: s - 0.001,
-                            e: e + 0.001,
-                            n: n + 0.001
-                        };
-                    }
+                    // Pad bounds to prevent too small box (100m)
+                    bounds = {
+                        w: w - 0.001,
+                        s: s - 0.001,
+                        e: e + 0.001,
+                        n: n + 0.001
+                    };
                 }
                 return callback(null, bounds);
             }

package/lib/maps/MapComponent.js

@@ -180,7 +180,7 @@ class MapComponent extends react_1.default.Component {
                 gridTemplateRows: "auto auto 1fr",
                 gridTemplateAreas: `"header designer" "quickfilters designer" "view designer"`
             }
-        }, this.renderHeader(), this.state.hideQuickfilters ? null : this.renderQuickfilter(), R("div", { style: { width: "100%", height: "100%", gridArea: "view", overflow: "hidden" } }, this.renderView()), designerVisible ? this.renderDesigner() : null);
+        }, this.props.hideTitleBar != true ? this.renderHeader() : null, this.state.hideQuickfilters ? null : this.renderQuickfilter(), R("div", { style: { width: "100%", height: "100%", gridArea: "view", overflow: "hidden" } }, this.renderView()), designerVisible ? this.renderDesigner() : null);
     }
 }
 exports.default = MapComponent;

package/lib/maps/RegionSelectComponent.d.ts

@@ -19,37 +19,5 @@ export default class RegionSelectComponent extends React.Component<RegionSelectC
         regionsTable: string;
     };
     handleChange: (id: any) => void;
-    render(): React.CElement<{
-        value: string | number | null | undefined;
-        onChange: (id: any) => void;
-        idTable: string;
-        schema: Schema;
-        dataSource: DataSource;
-        placeholder: string | undefined;
-        orderBy: {
-            expr: {
-                type: string;
-                tableAlias: string;
-                column: string;
-            };
-            direction: string;
-        }[];
-        filter: import("@mwater/jsonql").JsonQLOp | undefined;
-    }, React.Component<{
-        value: string | number | null | undefined;
-        onChange: (id: any) => void;
-        idTable: string;
-        schema: Schema;
-        dataSource: DataSource;
-        placeholder: string | undefined;
-        orderBy: {
-            expr: {
-                type: string;
-                tableAlias: string;
-                column: string;
-            };
-            direction: string;
-        }[];
-        filter: import("@mwater/jsonql").JsonQLOp | undefined;
-    }, any, any>>;
+    render(): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 }

package/lib/maps/VectorMapViewComponent.js

@@ -27,14 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VectorMapViewComponent = void 0;
-const lodash_1 = __importDefault(require("lodash"));
+const lodash_1 = __importStar(require("lodash"));
 const react_1 = __importStar(require("react"));
 const react_2 = require("react");
 const LayerFactory_1 = __importDefault(require("./LayerFactory"));
 const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalPopupComponent"));
 const useStableCallback_1 = require("@mwater/react-library/lib/useStableCallback");
 const MapUtils_1 = require("./MapUtils");
-const memoizedDebounce_1 = require("../memoizedDebounce");
 require("maplibre-gl/dist/maplibre-gl.css");
 require("./VectorMapViewComponent.css");
 const LayerSwitcherComponent_1 = require("./LayerSwitcherComponent");
@@ -104,6 +103,7 @@ function VectorMapViewComponent(props) {
             filters: getCompiledFilters()
         });
         if (!results) {
+            setHoverContents(null);
             return;
         }
         // Handle popup first
@@ -111,9 +111,6 @@ function VectorMapViewComponent(props) {
             setHoverContents(results.hoverOver);
         }
     });
-    const handleLayerHoverDebounced = (0, memoizedDebounce_1.memoizedDebounce)((layerViewId, ev) => {
-        handleLayerHover(layerViewId, ev);
-    }, 250, { leading: true, trailing: false }, (layerViewId, ev) => ev.data.id);
     /** Handle a click on a layer */
     const handleLayerClick = (0, useStableCallback_1.useStableCallback)((layerViewId, ev) => {
         const layerView = props.design.layerViews.find(lv => lv.id == layerViewId);
@@ -394,7 +391,7 @@ function VectorMapViewComponent(props) {
         props.mapDataSource.getBounds(props.design, getCompiledFilters(), (error, bounds) => {
             setBusy(b => b - 1);
             if (bounds) {
-                map.fitBounds([bounds.w, bounds.s, bounds.e, bounds.n], { padding: 20, duration: 3000 });
+                map.fitBounds([bounds.w, bounds.s, bounds.e, bounds.n], { padding: 20, duration: 2500 });
                 // Also record if editable as part of bounds
                 setBounds(bounds);
             }
@@ -456,39 +453,34 @@ function VectorMapViewComponent(props) {
         if (!map) {
             return;
         }
-        const removes = [];
-        for (const clickHandler of layerClickHandlers) {
-            const onEnter = (ev) => {
-                if (!ev.features || !ev.features[0].properties) {
+        const layers = layerClickHandlers.map(clickHandler => clickHandler.mapLayerId);
+        const onEnter = (ev) => {
+            let f = map.queryRenderedFeatures(ev.point, { layers });
+            if (f.length) {
+                if (f[0].layer.type === 'fill' && f[0].layer.paint?.['fill-color']?.toString() == 'rgba(0,0,0,0)') {
                     lastFeature.current = undefined;
                     setHoverContents(null);
                     return;
                 }
-                if (ev.features[0].properties.id !== lastFeature.current) {
+                if (lastFeature.current !== f[0].properties.id) {
+                    lastFeature.current = f[0].properties.id;
                     setHoverContents(null);
-                    lastFeature.current = ev.features[0].properties.id;
+                    const handler = (0, lodash_1.find)(layerClickHandlers, { mapLayerId: f[0].layer.id });
+                    handleLayerHover(handler.layerViewId, {
+                        data: f[0].properties,
+                        event: ev
+                    });
                 }
-                handleLayerHoverDebounced(clickHandler.layerViewId, {
-                    data: ev.features[0].properties,
-                    event: ev
-                });
-            };
-            const onLeave = (ev) => {
+            }
+            else {
                 lastFeature.current = undefined;
                 setHoverContents(null);
-            };
-            map.on("mousemove", clickHandler.mapLayerId, onEnter);
-            map.on("mouseleave", clickHandler.mapLayerId, onLeave);
-            removes.push(() => {
-                map.off("mousemove", clickHandler.mapLayerId, onEnter);
-                map.off("mouseleave", clickHandler.mapLayerId, onLeave);
-            });
-        }
-        return () => {
-            for (const remove of removes) {
-                remove();
             }
         };
+        map.on("mousemove", onEnter);
+        return () => {
+            map.off("mousemove", onEnter);
+        };
     }, [map, layerClickHandlers]);
     function renderLegend() {
         if (legendHidden) {