@mwater/visualization 5.1.0 → 5.2.0

package/lib/widgets/charts/pivot/PivotChartDesignerComponent.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import * as ui from "@mwater/react-library/lib/bootstrap";
 import { DataSource, Schema } from "@mwater/expressions";
 export interface PivotChartDesignerComponentProps {
     design: any;
@@ -25,12 +26,15 @@ export default class PivotChartDesignerComponent extends React.Component<PivotCh
         className: string;
     }, HTMLElement> | null;
     renderStriping(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-    }, any, any>> | null;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup> | null;
     renderSetup(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
     render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
 }

package/lib/widgets/charts/pivot/PivotChartViewComponent.d.ts

@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import React from "react";
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent";
 import { DataSource, Schema } from "@mwater/expressions";
 import { JsonQLFilter, WidgetScope } from "../../..";
 import { PivotChartDesign } from "./PivotChartDesign";
@@ -52,28 +53,8 @@ export default class PivotChartViewComponent extends React.Component<PivotChartV
             paddingRight: number;
         };
     }, HTMLElement>;
-    renderEditSegmentModal(): React.CElement<{
-        title: string;
-        onAction: () => void;
-        onCancel: () => void;
-        size: string;
-    }, React.Component<{
-        title: string;
-        onAction: () => void;
-        onCancel: () => void;
-        size: string;
-    }, any, any>> | undefined;
-    renderEditIntersectionModal(): React.CElement<{
-        title: string;
-        onAction: () => void;
-        onCancel: () => void;
-        size: string;
-    }, React.Component<{
-        title: string;
-        onAction: () => void;
-        onCancel: () => void;
-        size: string;
-    }, any, any>> | undefined;
+    renderEditSegmentModal(): React.CElement<import("@mwater/react-library/lib/ActionCancelModalComponent").ActionCancelModalComponentProps, ActionCancelModalComponent> | undefined;
+    renderEditIntersectionModal(): React.CElement<import("@mwater/react-library/lib/ActionCancelModalComponent").ActionCancelModalComponentProps, ActionCancelModalComponent> | undefined;
     render(): React.DetailedReactHTMLElement<{
         style: {
             width: number;

package/lib/widgets/charts/pivot/SegmentDesignerComponent.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import * as ui from "@mwater/react-library/lib/bootstrap";
 import { DataSource, Schema } from "@mwater/expressions";
 import { PivotChartSegment } from "./PivotChartDesign";
 export interface SegmentDesignerComponentProps {
@@ -27,70 +28,66 @@ export default class SegmentDesignerComponent extends React.Component<SegmentDes
     handleOrderExprChange: (orderExpr: any) => any;
     handleOrderDirChange: (orderDir: any) => any;
     renderMode(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-    }, any, any>>;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup>;
     renderLabel(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-        help: string | undefined;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-        help: string | undefined;
-    }, any, any>>;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup>;
     renderValueAxis(): React.JSX.Element;
     renderFilter(): React.CElement<{
-        labelMuted: boolean;
-        label: (string | React.CElement<{
-            id: string;
-        }, React.Component<{
-            id: string;
-        }, any, any>>)[];
-        hint: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: (string | React.CElement<{
-            id: string;
-        }, React.Component<{
-            id: string;
-        }, any, any>>)[];
-        hint: string;
-    }, any, any>>;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup>;
     renderStyling(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-    }, any, any>>;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup>;
     renderBorders(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-    }, any, any>>;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup>;
     renderOrderExpr(): React.CElement<{
-        labelMuted: boolean;
-        label: (string | React.CElement<{
-            id: string;
-        }, React.Component<{
-            id: string;
-        }, any, any>>)[];
-        hint: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: (string | React.CElement<{
-            id: string;
-        }, React.Component<{
-            id: string;
-        }, any, any>>)[];
-        hint: string;
-    }, any, any>>;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup>;
     render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
 }
 export {};

package/lib/widgets/charts/table/TableChartViewComponent.js

@@ -124,7 +124,7 @@ class TableContentsComponent extends react_1.default.Component {
     }
     renderImage(id) {
         const url = this.props.dataSource.getImageUrl(id);
-        return R("a", { href: url, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, "Image");
+        return R("a", { href: url, onClick: (e) => { e.stopPropagation(); }, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, "Image");
     }
     renderCell(rowIndex, columnIndex) {
         const axisBuilder = new AxisBuilder_1.default({ schema: this.props.schema });
@@ -162,7 +162,9 @@ class TableContentsComponent extends react_1.default.Component {
                 // Convert to node based on type
                 switch (exprType) {
                     case "text":
-                        node = R(react_linkify_1.default, { properties: { target: "_blank" } }, value);
+                        if (lodash_1.default.isString(value)) {
+                            node = R(react_linkify_1.default, { properties: { target: "_blank" } }, value);
+                        }
                         break;
                     case "number":
                     case "geometry":
@@ -170,21 +172,33 @@ class TableContentsComponent extends react_1.default.Component {
                         break;
                     case "boolean":
                     case "enum":
+                        node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context.locale);
+                        break;
                     case "enumset":
                     case "text[]":
-                        node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context.locale);
+                        if (lodash_1.default.isArray(value)) {
+                            node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context.locale);
+                        }
                         break;
                     case "date":
-                        node = (0, valueFormatter_1.formatValue)(exprType, value, column.format);
+                        if (lodash_1.default.isString(value)) {
+                            node = (0, valueFormatter_1.formatValue)(exprType, value, column.format);
+                        }
                         break;
                     case "datetime":
-                        node = (0, valueFormatter_1.formatValue)(exprType, value, column.format);
+                        if (lodash_1.default.isString(value)) {
+                            node = (0, valueFormatter_1.formatValue)(exprType, value, column.format);
+                        }
                         break;
                     case "image":
-                        node = this.renderImage(value.id);
+                        if (lodash_1.default.isObject(value) && value.id != null) {
+                            node = this.renderImage(value.id);
+                        }
                         break;
                     case "imagelist":
-                        node = lodash_1.default.map(value, (v) => this.renderImage(v.id));
+                        if (lodash_1.default.isArray(value)) {
+                            node = lodash_1.default.map(value, (v) => this.renderImage(v.id));
+                        }
                         break;
                     default:
                         node = "" + value;

package/lib/widgets/text/ExprInsertModalComponent.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent";
 import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter";
 export interface ExprInsertModalComponentProps {
     /** Schema to use */
@@ -18,18 +19,6 @@ export default class ExprInsertModalComponent extends React.Component<ExprInsert
     constructor(props: ExprInsertModalComponentProps);
     open(): void;
     handleInsert: () => void;
-    render(): React.CElement<{
-        actionLabel: string;
-        onAction: () => void;
-        onCancel: () => void;
-        title: string;
-        size: string;
-    }, React.Component<{
-        actionLabel: string;
-        onAction: () => void;
-        onCancel: () => void;
-        title: string;
-        size: string;
-    }, any, any>> | null;
+    render(): React.CElement<import("@mwater/react-library/lib/ActionCancelModalComponent").ActionCancelModalComponentProps, ActionCancelModalComponent> | null;
 }
 export {};

package/lib/widgets/text/ExprUpdateModalComponent.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent";
 import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter";
 export interface ExprUpdateModalComponentProps {
     /** Schema to use */
@@ -16,18 +17,6 @@ interface ExprUpdateModalComponentState {
 export default class ExprUpdateModalComponent extends React.Component<ExprUpdateModalComponentProps, ExprUpdateModalComponentState> {
     constructor(props: any);
     open(item: any, onUpdate: any): void;
-    render(): React.CElement<{
-        actionLabel: string;
-        onAction: () => void;
-        onCancel: () => void;
-        title: string;
-        size: string;
-    }, React.Component<{
-        actionLabel: string;
-        onAction: () => void;
-        onCancel: () => void;
-        title: string;
-        size: string;
-    }, any, any>> | null;
+    render(): React.CElement<import("@mwater/react-library/lib/ActionCancelModalComponent").ActionCancelModalComponentProps, ActionCancelModalComponent> | null;
 }
 export {};

package/lib/widgets/text/TextWidgetDesign.d.ts

@@ -1,6 +1,8 @@
+import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter";
+import { HtmlItem } from "../../richtext/ItemsHtmlConverter";
 export interface TextWidgetDesign {
     /** Text widget stores its content as array of items. See ItemsHtmlConverter TODO */
-    items: any[];
+    items: (HtmlItem | HtmlItemExpr)[];
     /** "title" for title block. default is "default" */
     style?: "title" | "default";
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mwater/visualization",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "Visualization library",
   "main": "lib/index.js",
   "scripts": {

package/src/GlobalFilter.ts

@@ -0,0 +1,17 @@
+import { Expr, LiteralType } from "@mwater/expressions"
+
+/** Global filters apply to multiple tables at once if a certain column is present. User-interface to set them 
+ * is application-specific and the default (non-mWater) dashboard applies them but does not allow editing. */
+export interface GlobalFilter {
+  /** id of column to filter */
+  columnId: string
+
+  /** type of column to filter (to ensure that consistent) */
+  columnType: LiteralType
+
+  /** op of expression for filtering */
+  op: string
+
+  /** array of expressions to use for filtering. field expression for column will be injected as expression 0 in the resulting filter expression */
+  exprs: Expr[]
+}

package/src/MWaterContextComponent.tsx

@@ -1,15 +1,33 @@
 import PropTypes from "prop-types"
 import _ from "lodash"
-import React from "react"
+import React, { createContext } from "react"
 const R = React.createElement
 
 import MWaterTableSelectComponent from "./MWaterTableSelectComponent"
 import MWaterAddRelatedFormComponent from "./MWaterAddRelatedFormComponent"
 import MWaterAddRelatedIndicatorComponent from "./MWaterAddRelatedIndicatorComponent"
 import MWaterGlobalFiltersComponent from "./MWaterGlobalFiltersComponent"
-import { Schema, Section } from "@mwater/expressions"
+import { DataSource, Schema, Section } from "@mwater/expressions"
 import { CustomTableSelectComponentFactoryContext, CustomTableSelectComponentFactoryOptions, DecorateScalarExprTreeSectionChildrenContext, DecorateScalarExprTreeSectionChildrenOptions } from "@mwater/expressions-ui"
 import { IsScalarExprTreeSectionInitiallyOpenContext, IsScalarExprTreeSectionMatchContext } from "@mwater/expressions-ui"
+import { GlobalFilter } from "./GlobalFilter"
+
+
+export interface GlobalFiltersElementFactoryProps {
+  schema: Schema
+  dataSource: DataSource
+  filterableTables: string[]
+  globalFilters?: GlobalFilter[]
+  onChange: (globalFilters: GlobalFilter[]) => void
+
+  /** If true, return null element if not applicable to filterableTables */
+  nullIfIrrelevant?: boolean
+}
+
+export type GlobalFiltersElementFactory = (props: GlobalFiltersElementFactoryProps) => React.ReactElement | null
+
+export const GlobalFiltersElementFactoryContext = createContext<GlobalFiltersElementFactory | null>(null)
+
 
 /** 
  * Creates several contexts to allow selecting of a table in an mWater-friendly way
@@ -18,7 +36,7 @@ import { IsScalarExprTreeSectionInitiallyOpenContext, IsScalarExprTreeSectionMat
 export default class MWaterContextComponent extends React.Component<{
   apiUrl: string
   client?: string
-  /**  user id of logged in user */
+  /** user id of logged in user */
   user?: string
   schema: Schema
   /**  Extra tables to load in schema. Forms are not loaded by default as they are too many */
@@ -30,8 +48,6 @@ export default class MWaterContextComponent extends React.Component<{
 }> {
   static childContextTypes = {
     addLayerElementFactory: PropTypes.func, // Call with props of AddLayerComponent
-    globalFiltersElementFactory: PropTypes.func, // Call with props { schema, dataSource, filterableTables, globalFilters, onChange, nullIfIrrelevant }.
-    // Displays a component to edit global filters. nullIfIrrelevant causes null element if not applicable to filterableTables
   }
 
   createTableSelectElementFactory = (options: CustomTableSelectComponentFactoryOptions) => {
@@ -58,15 +74,15 @@ export default class MWaterContextComponent extends React.Component<{
       context.addLayerElementFactory = this.props.addLayerElementFactory
     }
 
-    context.globalFiltersElementFactory = (props: any) => {
-      if (props.nullIfIrrelevant && !_.any(props.filterableTables, (t: string) => t.match(/^entities./))) {
-        return null
-      }
+    return context
+  }
 
-      return React.createElement(MWaterGlobalFiltersComponent, props)
+  createGlobalFiltersElementFactory = (props: GlobalFiltersElementFactoryProps) => {
+    if (props.nullIfIrrelevant && !_.any(props.filterableTables, (t: string) => t.match(/^entities./))) {
+      return null
     }
 
-    return context
+    return <MWaterGlobalFiltersComponent {...props} />
   }
 
   isScalarExprTreeSectionMatch = (options: { tableId: string; section: Section; filter?: string }) => {
@@ -128,13 +144,15 @@ export default class MWaterContextComponent extends React.Component<{
 
   render() {
     return <CustomTableSelectComponentFactoryContext.Provider value={this.createTableSelectElementFactory}>
-      <IsScalarExprTreeSectionMatchContext.Provider value={this.isScalarExprTreeSectionMatch}>
-        <IsScalarExprTreeSectionInitiallyOpenContext.Provider value={this.isScalarExprTreeSectionInitiallyOpen}>
-          <DecorateScalarExprTreeSectionChildrenContext.Provider value={this.decorateScalarExprTreeSectionChildren}>
-            {this.props.children}
-          </DecorateScalarExprTreeSectionChildrenContext.Provider>
-        </IsScalarExprTreeSectionInitiallyOpenContext.Provider>
-      </IsScalarExprTreeSectionMatchContext.Provider>
-    </CustomTableSelectComponentFactoryContext.Provider>
+      <GlobalFiltersElementFactoryContext.Provider value={this.createGlobalFiltersElementFactory}>
+        <IsScalarExprTreeSectionMatchContext.Provider value={this.isScalarExprTreeSectionMatch}>
+          <IsScalarExprTreeSectionInitiallyOpenContext.Provider value={this.isScalarExprTreeSectionInitiallyOpen}>
+            <DecorateScalarExprTreeSectionChildrenContext.Provider value={this.decorateScalarExprTreeSectionChildren}>
+              {this.props.children}
+            </DecorateScalarExprTreeSectionChildrenContext.Provider>
+          </IsScalarExprTreeSectionInitiallyOpenContext.Provider>
+
+        </IsScalarExprTreeSectionMatchContext.Provider>
+      </GlobalFiltersElementFactoryContext.Provider>    </CustomTableSelectComponentFactoryContext.Provider>
   }
 }

package/src/MWaterCustomTablesetListComponent.tsx

@@ -27,14 +27,19 @@ export const MWaterCustomTablesetListComponent = (props: {
   const [search, setSearch] = useState<string | null>("")
   const [extraTableNeeded, setExtraTableNeeded] = useState<string>()
 
+  const [showSystem, setShowSystem] = useState(false)
+
   // Get list of all tablesets
   useEffect(() => {
     fetch(`${props.apiUrl}custom_tablesets?client=${props.client || ""}`)
       .then((response) => response.json())
-      .then((body) => {
+      .then((tablesets) => {
+        // Filter out non-normal
+        tablesets = tablesets.filter((ts: CustomTableset) => ts.type === "normal")
+
         // Put included ones first
         setTablesets(
-          _.sortByAll(body, [
+          _.sortByAll(tablesets, [
             (ts) => (props.extraTables.some((t) => (t || "").startsWith(`custom.${ts.code}.`)) ? 0 : 1),
             (ts) => ExprUtils.localizeString(ts.design.name, props.locale)
           ])
@@ -117,10 +122,17 @@ export const MWaterCustomTablesetListComponent = (props: {
     )
   }
 
+  const visibleTablesets = tablesets.filter((ts) => (showSystem || !ts.design.system) && !ts.design.deprecated)
+
   return (
     <div>
       <TextInput value={search} onChange={setSearch} placeholder="Search..." />
-      {tablesets.map((ts) => renderTableset(ts))}
+      {visibleTablesets.map((ts) => renderTableset(ts))}
+      <div>
+        <button className="btn btn-link btn-sm" onClick={() => setShowSystem(!showSystem)}>
+          {showSystem ? "Hide system tables" : "Show system tables"}
+        </button>
+      </div>
     </div>
   )
 }
@@ -137,5 +149,11 @@ interface CustomTableset {
     desc?: LocalizedString
 
     tables: Table[]
+
+    /** True if tableset is deprecated */
+    deprecated?: boolean
+
+    /** True if tableset is for system use and should only be visible to admins in the UI */
+    system?: boolean
   }
 }

package/src/MWaterGlobalFiltersComponent.ts

@@ -2,19 +2,19 @@ import _ from "lodash"
 import React from "react"
 const R = React.createElement
 
-import querystring from "querystring"
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import { IdLiteralComponent } from "@mwater/expressions-ui"
 import { DataSource, Schema } from "@mwater/expressions"
+import { GlobalFilter } from "./GlobalFilter"
 
 export interface MWaterGlobalFiltersComponentProps {
   /** Schema of the database */
   schema: Schema
   /** Data source to use to get values */
   dataSource: DataSource
-  filterableTables: any
-  globalFilters?: any
-  onChange: any
+  filterableTables: string[]
+  globalFilters?: GlobalFilter[]
+  onChange: (globalFilters: GlobalFilter[]) => void
 }
 
 // Control to edit the global filters (_managed_by and admin_region)
@@ -36,7 +36,7 @@ export default class MWaterGlobalFiltersComponent extends React.Component<MWater
       })
     }
 
-    return this.props.onChange(globalFilters)
+    this.props.onChange(globalFilters)
   }
 
   handleManagedByChange = (managedBy: any) => {
@@ -56,13 +56,13 @@ export default class MWaterGlobalFiltersComponent extends React.Component<MWater
       })
     }
 
-    return this.props.onChange(globalFilters)
+    this.props.onChange(globalFilters)
   }
 
   render() {
     // Find managed by
     let adminRegions, managedBy
-    const managedByEntry = _.find(this.props.globalFilters, (gf) => gf.op === "within" && gf.columnId === "_managed_by")
+    const managedByEntry = _.find(this.props.globalFilters || [], (gf) => gf.op === "within" && gf.columnId === "_managed_by")
     if (managedByEntry) {
       managedBy = managedByEntry.exprs[0].value.split(":")[1]
     } else {
@@ -71,7 +71,7 @@ export default class MWaterGlobalFiltersComponent extends React.Component<MWater
 
     // Find admin region
     const adminRegionEntry = _.find(
-      this.props.globalFilters,
+      this.props.globalFilters || [],
       (gf) => gf.op === "within any" && gf.columnId === "admin_region"
     )
     if (adminRegionEntry) {

package/src/MWaterLoaderComponent.ts

@@ -79,7 +79,14 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<
         if (error) {
           const defaultError = `Cannot load one of the forms that this depends on. Perhaps the administrator has not shared the form with you? Details: ${error.message}`
           if (this.props.errorFormatter) {
-            return callback({ error: this.props.errorFormatter(JSON.parse(error.message), defaultError) })
+            try {
+              const parsedError = JSON.parse(error.message)
+              if (parsedError) {
+                return callback({ error: this.props.errorFormatter(parsedError, defaultError) })
+              }
+            } catch (e) {
+              // Ignore
+            }
           }
           return callback({ error: defaultError })
         }