@mwater/visualization 5.0.1 → 5.2.0

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/TableChartDesignerComponent.js

@@ -36,7 +36,7 @@ const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_ui_2 = require("@mwater/expressions-ui");
 const OrderingsComponent_1 = __importDefault(require("./OrderingsComponent"));
-const TableSelectComponent_1 = __importDefault(require("../../../TableSelectComponent"));
+const expressions_ui_3 = require("@mwater/expressions-ui");
 const ReorderableListComponent_1 = __importDefault(require("@mwater/react-library/lib/reorderable/ReorderableListComponent"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const valueFormatter_1 = require("../../../valueFormatter");
@@ -79,7 +79,7 @@ class TableChartDesignerComponent extends react_1.default.Component {
         this.updateDesign({ columns });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_3.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,

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/ExprItemEditorComponent.js

@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const expressions_1 = require("@mwater/expressions");
 const expressions_ui_1 = require("@mwater/expressions-ui");
-const TableSelectComponent_1 = __importDefault(require("../../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const valueFormatter_1 = require("../../valueFormatter");
 const valueFormatter_2 = require("../../valueFormatter");
 const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
@@ -61,7 +61,7 @@ class ExprItemEditorComponent extends react_1.default.Component {
         }, lodash_1.default.map(formats, (format) => R("option", { key: format.value, value: format.value }, format.label))));
     }
     render() {
-        return R("div", { style: { paddingBottom: 200 } }, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, {
+        return R("div", { style: { paddingBottom: 200 } }, R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.state.table,
             onChange: this.handleTableChange

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.0.1",
+  "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/MWaterAddRelatedFormComponent.ts

@@ -10,10 +10,10 @@ import querystring from "querystring"
 import { ExprUtils, Schema } from "@mwater/expressions"
 import * as ui from "./UIComponents"
 import * as formUtils from "@mwater/forms/lib/formUtils" // TODO requireing this directly because of bizarre backbone issue
-import { AssetQuestion, Form, FormDesign } from "@mwater/forms"
+import { Form, FormDesign } from "@mwater/forms"
 
 export interface MWaterAddRelatedFormComponentProps {
-  /** Entities or assets table id */
+  /** Entities table id */
   table: string
 
   apiUrl: string
@@ -33,7 +33,7 @@ interface MWaterAddRelatedFormComponentState {
 }
 
 // Link that when clicked popup up a modal window allowing user to select a form
-// with an Entity/Site question to the extraTables
+// with an Site question to the extraTables
 export default class MWaterAddRelatedFormComponent extends React.Component<
   MWaterAddRelatedFormComponentProps,
   MWaterAddRelatedFormComponentState
@@ -91,7 +91,7 @@ export default class MWaterAddRelatedFormComponent extends React.Component<
 }
 
 interface AddRelatedFormModalComponentProps {
-  /** Entities or assets table id */
+  /** Entities table id */
   table: string
 
   apiUrl: string
@@ -126,14 +126,19 @@ class AddRelatedFormModalComponent extends React.Component<
   }
 
   componentDidMount() {
-    // Get all forms visible to user
+    // Get all forms visible to user that have _entity_types that include table
     const query: any = {}
-    query.selector = JSON.stringify({ state: { $ne: "deleted" } })
+    query.selector = JSON.stringify({ 
+      state: { $ne: "deleted" },
+      _entity_types: { $in: [this.props.table.split(".")[1]] }
+    })
+    query.fields = JSON.stringify({ "_id": 1, "design.name": 1, "modified": 1, "created": 1 })
+
     if (this.props.client) {
       query.client = this.props.client
     }
 
-    // Get list of all form names
+    // Get list of related forms
     return $.getJSON(this.props.apiUrl + "forms?" + querystring.stringify(query), (forms: Form[]) => {
       // Sort by modified.on desc but first by user
       forms = _.sortByOrder(
@@ -142,16 +147,6 @@ class AddRelatedFormModalComponent extends React.Component<
         ["desc", "desc"]
       )
 
-      // Filter by Entity and Site questions of tableId type
-      if (this.props.table.startsWith("entities.")) {
-        forms = _.filter(forms, (form) => formUtils.findEntityQuestion(form.design, this.props.table.split(".")[1]))
-      } else if (this.props.table.startsWith("assets:")) {
-        const assetSystemId = parseInt(this.props.table.split(":")[1])
-        forms = forms.filter((form) => {
-          return formUtils.findAssetQuestion(form.design, assetSystemId) != null
-        })
-      }
-
       // Get _id, name, and description
       const items = _.map(forms, (form) => ({
         name: ExprUtils.localizeString(form.design.name, this.context.locale),
@@ -159,9 +154,9 @@ class AddRelatedFormModalComponent extends React.Component<
         onClick: this.props.onSelect.bind(null, "responses:" + form._id)
       }))
 
-      return this.setState({ items })
-    }).fail((xhr) => {
-      return this.setState({ error: xhr.responseText })
+      this.setState({ items })
+    }).fail((xhr: any) => {
+      this.setState({ error: xhr.responseText })
     })
   }
 

package/src/MWaterContextComponent.tsx

@@ -0,0 +1,158 @@
+import PropTypes from "prop-types"
+import _ from "lodash"
+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 { 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
+ * and several other context items
+ */
+export default class MWaterContextComponent extends React.Component<{
+  apiUrl: string
+  client?: string
+  /** 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 */
+  extraTables?: string[]
+  /**  Called when extra tables are changed and schema will be reloaded */
+  onExtraTablesChange?: (extraTables: string[]) => void
+  /**  Override default add layer component. See AddLayerComponent for details */
+  addLayerElementFactory?: any
+}> {
+  static childContextTypes = {
+    addLayerElementFactory: PropTypes.func, // Call with props of AddLayerComponent
+  }
+
+  createTableSelectElementFactory = (options: CustomTableSelectComponentFactoryOptions) => {
+    return (
+      <MWaterTableSelectComponent
+        apiUrl={this.props.apiUrl}
+        client={this.props.client}
+        schema={options.schema}
+        user={this.props.user}
+        table={options.value ?? undefined}
+        onChange={options.onChange}
+        extraTables={this.props.extraTables}
+        onExtraTablesChange={this.props.onExtraTablesChange}
+        filter={options.filter}
+        onFilterChange={options.onFilterChange}
+      />
+    )
+  }
+
+  getChildContext() {
+    const context: any = {}
+
+    if (this.props.addLayerElementFactory) {
+      context.addLayerElementFactory = this.props.addLayerElementFactory
+    }
+
+    return context
+  }
+
+  createGlobalFiltersElementFactory = (props: GlobalFiltersElementFactoryProps) => {
+    if (props.nullIfIrrelevant && !_.any(props.filterableTables, (t: string) => t.match(/^entities./))) {
+      return null
+    }
+
+    return <MWaterGlobalFiltersComponent {...props} />
+  }
+
+  isScalarExprTreeSectionMatch = (options: { tableId: string; section: Section; filter?: string }) => {
+    if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
+      return true
+    }
+    return null
+  }
+
+  isScalarExprTreeSectionInitiallyOpen = (options: { tableId: string; section: Section; filter?: string }) => {
+    return false
+  }
+
+  decorateScalarExprTreeSectionChildren = (options: DecorateScalarExprTreeSectionChildrenOptions) => {
+    // If related forms section of entities table or assets table
+    if (options.tableId.match(/^entities\./) && options.section.id === "!related_forms") {
+      return R(
+        "div",
+        { key: "_add_related_form_parent" },
+        options.children,
+        R(MWaterAddRelatedFormComponent, {
+          key: "_add_related_form",
+          table: options.tableId,
+          apiUrl: this.props.apiUrl,
+          client: this.props.client,
+          user: this.props.user,
+          schema: this.props.schema,
+          onSelect: this.handleAddTable
+        })
+      )
+    }
+
+    // If indicators section of entities table
+    if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
+      return R(
+        "div",
+        { key: "_add_related_indicator_parent" },
+        options.children,
+        R(MWaterAddRelatedIndicatorComponent, {
+          key: "_add_related_indicator",
+          table: options.tableId,
+          apiUrl: this.props.apiUrl,
+          client: this.props.client,
+          user: this.props.user,
+          schema: this.props.schema,
+          onSelect: this.handleAddTable,
+          filter: options.filter
+        })
+      )
+    } else {
+      return options.children
+    }
+  }
+
+  handleAddTable = (table: any) => {
+    const extraTables = _.union(this.props.extraTables || [], [table])
+    return this.props.onExtraTablesChange!(extraTables)
+  }
+
+  render() {
+    return <CustomTableSelectComponentFactoryContext.Provider value={this.createTableSelectElementFactory}>
+      <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
   }
 }