@mwater/visualization 5.5.0 → 5.6.1

package/src/mwater_table_selection/MWaterCompleteTableSelectComponent.tsx

@@ -1,6 +1,5 @@
 import _ from "lodash"
 import React from "react"
-import { default as TabbedComponent, TabbedComponentTab } from "@mwater/react-library/lib/TabbedComponent"
 import * as uiComponents from "../UIComponents"
 import { ExprUtils, Schema } from "@mwater/expressions"
 import { MWaterCustomTablesetListComponent } from "./MWaterCustomTablesetListComponent"
@@ -10,6 +9,8 @@ import { FormsListComponent } from "./FormsListComponent"
 import { IndicatorsListComponent } from "./IndicatorsListComponent"
 import { IssuesListComponent } from "./IssuesListComponent"
 import { MWaterAccountingSystemListComponent } from "./MWaterAccountingSystemListComponent"
+import { MWaterCalculatedDataSourcesListComponent } from "./MWaterCalculatedDataSourcesListComponent"
+import { MWaterWorkflowsSelectComponent } from "./MWaterWorkflowsSelectComponent"
 
 const sitesOrder: { [table: string]: number } = {
   "entities.water_point": 1,
@@ -45,15 +46,30 @@ interface MWaterCompleteTableSelectComponentProps {
   onExtraTablesChange: any
 }
 
-// Allows selection of a table. Is the complete list mode of tables
-export default class MWaterCompleteTableSelectComponent extends React.Component<MWaterCompleteTableSelectComponentProps, {
-  showLegacyAssets: boolean
-}> {
+interface Category {
+  id: string
+  name: string
+  description: string
+  icon: string
+  render: () => JSX.Element
+}
+
+/** Allows selection of a table. Card-based layout with categories */
+export default class MWaterCompleteTableSelectComponent extends React.Component<
+  MWaterCompleteTableSelectComponentProps,
+  {
+    selectedCategory: string | null
+    showLegacyAssets: boolean
+    searchText: string
+  }
+> {
   constructor(props: MWaterCompleteTableSelectComponentProps) {
     super(props)
 
     this.state = {
-      showLegacyAssets: false
+      selectedCategory: null,
+      showLegacyAssets: false,
+      searchText: ""
     }
   }
 
@@ -62,12 +78,36 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
   }
 
   handleExtraTableRemove = (tableId: any) => {
-    // Set to null if current table
-    if (this.props.table === tableId) {
-      this.props.onChange(null)
+    const displayName = this.getExtraTableDisplayName(tableId)
+    if (!displayName) {
+      return
     }
 
-    return this.props.onExtraTablesChange(_.without(this.props.extraTables, tableId))
+    if (
+      confirm(
+        T`Remove ${displayName}? Any widgets that depend on it will no longer work properly.`
+      )
+    ) {
+      // Set to null if current table matches (for wildcards, check if current table starts with prefix)
+      if (tableId.endsWith(".*")) {
+        const prefix = tableId.slice(0, -2)
+        if (this.props.table && this.props.table.startsWith(prefix + ".")) {
+          this.props.onChange(null)
+        }
+      } else if (this.props.table === tableId) {
+        this.props.onChange(null)
+      }
+
+      return this.props.onExtraTablesChange(_.without(this.props.extraTables, tableId))
+    }
+  }
+
+  handleCategorySelect = (categoryId: string) => {
+    this.setState({ selectedCategory: categoryId })
+  }
+
+  handleBackToCategories = () => {
+    this.setState({ selectedCategory: null, showLegacyAssets: false })
   }
 
   renderSites() {
@@ -147,6 +187,19 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
     />
   }
 
+  renderWorkflows() {
+    return <MWaterWorkflowsSelectComponent
+      schema={this.props.schema}
+      client={this.props.client}
+      apiUrl={this.props.apiUrl}
+      user={this.props.user}
+      onChange={this.props.onChange}
+      extraTables={this.props.extraTables}
+      onExtraTableAdd={this.handleExtraTableAdd}
+      onExtraTableRemove={this.handleExtraTableRemove}
+    />
+  }
+
   renderSweetSense() {
     let sweetSenseTables = this.getSweetSenseTables()
 
@@ -238,7 +291,6 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
     </div>
   }
 
-
   renderLegacyAssets() {
     return <MWaterAssetSystemsListComponent
       schema={this.props.schema}
@@ -253,6 +305,20 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
     />
   }
 
+  renderCalculated() {
+    return <MWaterCalculatedDataSourcesListComponent
+      schema={this.props.schema}
+      client={this.props.client}
+      apiUrl={this.props.apiUrl}
+      user={this.props.user}
+      onChange={this.props.onChange}
+      extraTables={this.props.extraTables}
+      onExtraTableAdd={this.handleExtraTableAdd}
+      onExtraTableRemove={this.handleExtraTableRemove}
+      locale={T.locale}
+    />
+  }
+
   renderOther() {
     let otherTables = _.filter(this.props.schema.getTables(), (table) => {
       // Remove deprecated
@@ -300,6 +366,16 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
         return false
       }
 
+      // Remove calculated data sources
+      if (table.id.match(/^calculated:/)) {
+        return false
+      }
+
+      // Remove workflows
+      if (table.id.match(/^(workflows|workflow_events):/)) {
+        return false
+      }
+
       return true
     })
 
@@ -329,49 +405,309 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
     })
   }
 
-  render() {
-    const sweetSenseTables = this.getSweetSenseTables()
-
-    const tabs: TabbedComponentTab[] = [
-      { id: "sites", label: <><i className="fa fa-map-marker" /> {T`Sites`}</>, elem: this.renderSites() },
-      { id: "forms", label: <><i className="fa fa-th-list" /> {T`Surveys`}</>, elem: this.renderForms() },
+  /** Get all available categories */
+  getCategories(): Category[] {
+    const categories: Category[] = [
+      {
+        id: "sites",
+        name: T("Sites").toString(),
+        description: T("Water points, sanitation facilities, households, and other sites").toString(),
+        icon: "fa fa-map-marker",
+        render: () => this.renderSites()
+      },
+      {
+        id: "forms",
+        name: T("Surveys").toString(),
+        description: T("Data collected from survey forms").toString(),
+        icon: "fa fa-th-list",
+        render: () => this.renderForms()
+      },
+      {
+        id: "assets",
+        name: T("Assets").toString(),
+        description: T("Asset tracking and management").toString(),
+        icon: "fas fa-map-pin",
+        render: () => this.renderAssets()
+      },
       {
         id: "indicators",
-        label: <><i className="fa fa-check-circle" /> {T`Indicators`}</>,
-        elem: this.renderIndicators()
+        name: T("Indicators").toString(),
+        description: T("Calculated indicators and metrics").toString(),
+        icon: "fa fa-check-circle",
+        render: () => this.renderIndicators()
+      },
+      {
+        id: "tablesets",
+        name: T("Tables").toString(),
+        description: T("Custom tables and datasets").toString(),
+        icon: "fa fa-table",
+        render: () => this.renderTablesets()
+      },
+      {
+        id: "calculated",
+        name: T("Calculated").toString(),
+        description: T("Calculated and derived data sources").toString(),
+        icon: "fa fa-cogs",
+        render: () => this.renderCalculated()
+      },
+      {
+        id: "accounting",
+        name: T("Accounting").toString(),
+        description: T("Financial and accounting data").toString(),
+        icon: "fa fa-calculator",
+        render: () => this.renderAccountingSystems()
+      },
+      {
+        id: "workflows",
+        name: T("Workflows").toString(),
+        description: T("Multi-step processes and workflows").toString(),
+        icon: "fa fa-project-diagram",
+        render: () => this.renderWorkflows()
       },
       {
         id: "issues",
-        label: <><i className="fa fa-exclamation-circle" /> {T`Issues`}</>,
-        elem: this.renderIssues()
+        name: T("Issues").toString(),
+        description: T("Reported problems and issues").toString(),
+        icon: "fa fa-exclamation-circle",
+        render: () => this.renderIssues()
       },
-      { id: "tablesets", label: <><i className="fa fa-table" /> {T`Tables`}</>, elem: this.renderTablesets() },
-      { id: "metrics", label: <><i className="fa fa-line-chart" /> {T`Metrics`}</>, elem: this.renderMetrics() },
-      { 
-        id: "accounting", 
-        label: <><i className="fa fa-calculator" /> {T`Accounting`}</>, 
-        elem: this.renderAccountingSystems() 
+      {
+        id: "metrics",
+        name: T("Metrics").toString(),
+        description: T("Performance metrics and KPIs").toString(),
+        icon: "fa fa-line-chart",
+        render: () => this.renderMetrics()
       },
-      { id: "assets", label: <><i className="fas fa-map-pin" /> {T`Assets`}</>, elem: this.renderAssets() }
+      {
+        id: "other",
+        name: T("Advanced").toString(),
+        description: T("Other advanced data sources").toString(),
+        icon: "fa fa-ellipsis-h",
+        render: () => this.renderOther()
+      }
     ]
 
-    if (sweetSenseTables.length > 0) {
-      tabs.push({ id: "sensors", label: T`Sensors`, elem: this.renderSweetSense() })
+    // // Add sensors if applicable
+    // const sweetSenseTables = this.getSweetSenseTables()
+    // if (sweetSenseTables.length > 0) {
+    //   categories.splice(9, 0, {
+    //     id: "sensors",
+    //     name: T("Sensors").toString(),
+    //     description: T("Sensor data and monitoring").toString(),
+    //     icon: "fa fa-wifi",
+    //     render: () => this.renderSweetSense()
+    //   })
+    // }
+
+    return categories
+  }
+
+  /** Render a single category card */
+  renderCategoryCard(category: Category) {
+    return (
+      <div
+        key={category.id}
+        className="card mb-2"
+        style={{ 
+          cursor: "pointer",
+          transition: "background-color 0.15s, border-color 0.15s"
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.backgroundColor = "#f8f9fa"
+          e.currentTarget.style.borderColor = "#adb5bd"
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.backgroundColor = ""
+          e.currentTarget.style.borderColor = ""
+        }}
+        onClick={() => this.handleCategorySelect(category.id)}
+      >
+        <div className="card-body d-flex align-items-center" style={{ padding: "0.75rem" }}>
+          <div style={{ fontSize: "1.75rem", width: "2.5rem", textAlign: "center", color: "#6c757d" }}>
+            <i className={category.icon} />
+          </div>
+          <div style={{ flex: 1, marginLeft: "0.75rem" }}>
+            <div style={{ fontWeight: 600, fontSize: "1rem", marginBottom: "0.15rem" }}>
+              {category.name}
+            </div>
+            <div className="text-muted" style={{ fontSize: "0.85rem" }}>
+              {category.description}
+            </div>
+          </div>
+          <div style={{ color: "#adb5bd", fontSize: "1.1rem" }}>
+            <i className="fa fa-chevron-right" />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  /** Get display name for an extra table (handles wildcards) */
+  getExtraTableDisplayName(tableId: string): string | null {
+    // Check if it's a wildcard pattern
+    if (tableId.endsWith(".*")) {
+      // Find first matching table
+      const prefix = tableId.slice(0, -2) // Remove .*
+      const matchingTable = this.props.schema.getTables().find(t => t.id.startsWith(prefix + "."))
+      
+      if (matchingTable) {
+        const fullName = ExprUtils.localizeString(matchingTable.name, T.locale)
+        // Split by " > " and take first part
+        const parts = fullName.split(" > ")
+        return parts[0]
+      }
+      
+      // Fallback to showing the pattern
+      return tableId
     }
+    
+    // Regular table
+    const table = this.props.schema.getTable(tableId)
+    if (!table) {
+      return null
+    }
+    return ExprUtils.localizeString(table.name, T.locale)
+  }
+
+  /** Render the currently included extra tables section */
+  renderExtraTables() {
+    if (!this.props.extraTables || this.props.extraTables.length === 0) {
+      return null
+    }
+
+    return (
+      <div className="mb-3 pb-2" style={{ borderBottom: "1px solid #dee2e6" }}>
+        <span className="text-muted me-2" style={{ fontSize: "0.9rem" }}>
+          {T`Currently Included`}:
+        </span>
+        {this.props.extraTables.map((tableId: string) => {
+          const displayName = this.getExtraTableDisplayName(tableId)
+          if (!displayName) {
+            return null
+          }
+          return (
+            <span
+              key={tableId}
+              className="d-inline-flex align-items-center me-2 px-2 py-1 bg-light border rounded"
+              style={{ fontSize: "0.85rem" }}
+            >
+              <span>{displayName}</span>
+              <button
+                className="btn btn-link btn-sm p-0 ms-1"
+                style={{ fontSize: "0.9rem", color: "#6c757d" }}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  this.handleExtraTableRemove(tableId)
+                }}
+              >
+                <i className="fa fa-times" />
+              </button>
+            </span>
+          )
+        })}
+      </div>
+    )
+  }
+
+  /** Render the landing page with all categories */
+  renderLandingPage() {
+    const categories = this.getCategories()
+    
+    // Filter by search text
+    const filteredCategories = this.state.searchText
+      ? categories.filter((cat) => {
+          const searchLower = this.state.searchText.toLowerCase()
+          return (
+            cat.name.toLowerCase().includes(searchLower) ||
+            cat.description.toLowerCase().includes(searchLower)
+          )
+        })
+      : categories
+
+    return (
+      <div>
+        <div className="text-muted mb-3">
+          {T`Select a data source category to browse available tables and datasets.`}
+        </div>
+
+        {/* Search box */}
+        <div className="mb-3 position-relative">
+          <i className="fa fa-search position-absolute" style={{ left: "0.75rem", top: "50%", transform: "translateY(-50%)", color: "#6c757d" }} />
+          <input
+            type="text"
+            className="form-control"
+            style={{ paddingLeft: "2.5rem" }}
+            placeholder={T("Search categories...").toString()}
+            value={this.state.searchText}
+            onChange={(e) => this.setState({ searchText: e.target.value })}
+            ref={(c: HTMLInputElement | null) => {
+              if (c) {
+                c.focus()
+              }
+            }}
+          />
+        </div>
+
+        {/* Extra tables section */}
+        {this.renderExtraTables()}
+
+        {/* Category cards grid */}
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
+          {filteredCategories.map((category) => this.renderCategoryCard(category))}
+        </div>
+
+        {filteredCategories.length === 0 && this.state.searchText && (
+          <div className="text-center text-muted mt-4">
+            {T`No categories match your search.`}
+          </div>
+        )}
+      </div>
+    )
+  }
 
-    tabs.push({ id: "other", label: T`Advanced`, elem: this.renderOther() })
+  /** Render a specific category view */
+  renderCategoryView() {
+    const categories = this.getCategories()
+    const category = categories.find((c) => c.id === this.state.selectedCategory)
+
+    if (!category) {
+      return null
+    }
 
     return (
       <div>
-        <div className="text-muted">
-          {T`Select data from sites, surveys or an advanced category below. Indicators can be found within their associated site types.`}
+        {/* Back button */}
+        <div className="mb-3">
+          <button
+            className="btn btn-link p-0"
+            style={{ textDecoration: "none" }}
+            onClick={this.handleBackToCategories}
+          >
+            <i className="fa fa-arrow-left me-2" />
+            {T`Back to All Data Sources`}
+          </button>
         </div>
 
-        <TabbedComponent
-          tabs={tabs}
-          initialTabId="sites"
-        />
+        {/* Category title */}
+        <h5 className="mb-3">
+          <i className={`${category.icon} me-2 text-muted`} />
+          {category.name}
+        </h5>
+
+        {/* Category content */}
+        {category.render()}
+      </div>
+    )
+  }
+
+  render() {
+    return (
+      <div style={{ height: "65vh", overflowY: "auto" }}>
+        {this.state.selectedCategory === null
+          ? this.renderLandingPage()
+          : this.renderCategoryView()}
       </div>
     )
   }
 }
+

package/src/mwater_table_selection/MWaterTableSelectComponent.tsx

@@ -18,8 +18,8 @@ export interface MWaterTableSelectComponentProps {
   table?: string
   /** Called with table selected */
   onChange: (table: string | null) => void
-  extraTables: string[]
-  onExtraTablesChange: (tables: string[]) => void
+  extraTables?: string[]
+  onExtraTablesChange?: (tables: string[]) => void
   /** Can also perform filtering for some types. Include these props to enable this */
   filter?: any
   onFilterChange?: (filter: any) => void
@@ -94,11 +94,15 @@ export default class MWaterTableSelectComponent extends React.Component<
   handleTableChange = (tableId: string | null) => {
     // If not part of extra tables, add it and wait for new schema
     if (tableId && !this.props.schema.getTable(tableId)) {
-      return this.setState({ pendingExtraTable: tableId }, () => {
-        return this.props.onExtraTablesChange(_.union(this.props.extraTables, [tableId]))
-      })
+      if (this.props.onExtraTablesChange) {
+        this.setState({ pendingExtraTable: tableId }, () => {
+          this.props.onExtraTablesChange!(_.union(this.props.extraTables || [], [tableId]))
+        })
+      } else {
+        alert(T`Cannot add new tables.`)
+      }
     } else {
-      return this.handleChange(tableId)
+      this.handleChange(tableId)
     }
   }
 
@@ -166,8 +170,8 @@ interface EditModeTableSelectComponentProps {
   table?: string
   /** Called with table selected */
   onChange: (table: string | null) => void
-  extraTables: string[]
-  onExtraTablesChange: (tables: string[]) => void
+  extraTables?: string[]
+  onExtraTablesChange?: (tables: string[]) => void
 }
 
 interface EditModeTableSelectComponentState {

package/src/mwater_table_selection/MWaterWorkflowsSelectComponent.tsx

@@ -0,0 +1,159 @@
+import _ from "lodash"
+import $ from "jquery"
+import React, { useState, useEffect } from "react"
+import querystring from "querystring"
+import * as uiComponents from "../UIComponents"
+import { ExprUtils, Schema } from "@mwater/expressions"
+import { WorkflowType } from "@mwater/common/lib/tables/workflow_types"
+
+interface MWaterWorkflowsSelectComponentProps {
+  /** Url to hit api */
+  apiUrl: string
+  /** Optional client */
+  client?: string
+  schema: Schema
+  /** User id */
+  user?: string
+  /** Called with table selected */
+  onChange: (tableId: string) => void
+  extraTables: string[]
+  onExtraTableAdd: (tableId: string) => void
+  onExtraTableRemove: (tableId: string) => void
+}
+
+interface WorkflowTypeItem {
+  id: string
+  name: string
+  desc?: string
+}
+
+/** Searchable list of workflow types */
+export function MWaterWorkflowsSelectComponent(props: MWaterWorkflowsSelectComponentProps) {
+  const [workflowTypes, setWorkflowTypes] = useState<WorkflowTypeItem[] | null>(null)
+  const [search, setSearch] = useState("")
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    // Get names and basic of workflow types
+    const query: any = {}
+    query.fields = JSON.stringify({
+      name: 1,
+      description: 1,
+      roles: 1,
+      _created_by: 1,
+      _modified_on: 1
+    })
+    query.client = props.client
+
+    // Get list of all workflow types
+    $.getJSON(props.apiUrl + "workflow_types?" + querystring.stringify(query), (types: WorkflowType[]) => {
+      // Sort by included first, then user-created, then by name
+      types = _.sortByOrder(
+        types,
+        [
+          (type: WorkflowType) => ((props.extraTables || []).includes("workflows:" + type._id) ? 0 : 1),
+          (type: WorkflowType) => (type._created_by === props.user ? 0 : 1),
+          (type: WorkflowType) => ExprUtils.localizeString(type.name, T.locale) || T`Untitled Workflow Type`
+        ],
+        ["asc", "asc", "asc"]
+      )
+
+      setWorkflowTypes(
+        _.map(types, (type) => ({
+          id: type._id,
+          name: ExprUtils.localizeString(type.name, T.locale) || T`Untitled Workflow Type`,
+          desc: ExprUtils.localizeString(type.description, T.locale)
+        }))
+      )
+    }).fail((xhr: any) => {
+      setError(xhr.responseText)
+    })
+  }, [props.apiUrl, props.client, props.user, props.extraTables])
+
+  const handleTableRemove = (table: WorkflowTypeItem) => {
+    if (
+      confirm(
+        T`Remove ${table.name}? Any widgets that depend on it will no longer work properly.`
+      )
+    ) {
+      props.onExtraTableRemove(`workflows:${table.id}`)
+    }
+  }
+
+  if (error) {
+    return <div className="alert alert-danger">{error}</div>
+  }
+
+  // Filter workflow types by search
+  let filteredWorkflowTypes: WorkflowTypeItem[] | null = workflowTypes
+  if (search && workflowTypes) {
+    const escapeRegExp = (s: string) => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")
+    const searchStringRegExp = new RegExp(escapeRegExp(search), "i")
+    filteredWorkflowTypes = _.filter(workflowTypes, (type) => type.name.match(searchStringRegExp))
+  }
+
+  // Remove if already included
+  filteredWorkflowTypes = _.filter(
+    filteredWorkflowTypes || [],
+    (wt) => !(props.extraTables || []).includes(`workflows:${wt.id}`)
+  )
+
+  // Get included workflow tables from schema
+  let includedTables = _.filter(
+    props.schema.getTables(),
+    (table) => (table.id.match(/^workflows:/) || table.id.match(/^workflow_events:/)) && !table.deprecated
+  )
+  includedTables = _.sortBy(includedTables, (t) => t.name.en)
+
+  return (
+    <div>
+      <label>{T`Included Workflows:`}</label>
+      {includedTables.length > 0 ? (
+        <uiComponents.OptionListComponent
+          items={_.map(includedTables, (table) => {
+            return {
+              name: ExprUtils.localizeString(table.name, T.locale),
+              desc: ExprUtils.localizeString(table.desc, T.locale),
+              onClick: () => props.onChange(table.id),
+              onRemove: () => handleTableRemove({ id: table.id.replace(/^workflows:/, ""), name: ExprUtils.localizeString(table.name, T.locale) })
+            }
+          })}
+        />
+      ) : (
+        <div>{T`None`}</div>
+      )}
+
+      <br />
+
+      <label>{T`All Workflows:`}</label>
+      {!workflowTypes || workflowTypes.length === 0 ? (
+        <div className="alert alert-info">
+          <i className="fa fa-spinner fa-spin" />
+          &nbsp;{T`Loading...`}
+        </div>
+      ) : (
+        <>
+          <input
+            type="text"
+            className="form-control form-control-sm"
+            placeholder={T`Search...`}
+            key="search"
+            autoFocus
+            style={{ maxWidth: "20em", marginBottom: 10 }}
+            value={search}
+            onChange={(ev) => setSearch(ev.target.value)}
+          />
+
+          <uiComponents.OptionListComponent
+            items={_.map(filteredWorkflowTypes, (workflowType) => ({
+              name: workflowType.name,
+              desc: workflowType.desc,
+              onClick: () => props.onChange("workflows:" + workflowType.id)
+            }))}
+          />
+        </>
+      )}
+    </div>
+  )
+}
+