@mwater/visualization 5.4.5 → 5.6.0

package/src/mwater_table_selection/MWaterCompleteTableSelectComponent.tsx

@@ -0,0 +1,713 @@
+import _ from "lodash"
+import React from "react"
+import * as uiComponents from "../UIComponents"
+import { ExprUtils, Schema } from "@mwater/expressions"
+import { MWaterCustomTablesetListComponent } from "./MWaterCustomTablesetListComponent"
+import { MWaterMetricsTableListComponent } from "./MWaterMetricsTableListComponent"
+import { MWaterAssetSystemsListComponent } from "./MWaterAssetSystemsListComponent"
+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,
+  "entities.sanitation_facility": 2,
+  "entities.household": 3,
+  "entities.community": 4,
+  "entities.school": 5,
+  "entities.health_facility": 6,
+  "entities.place_of_worship": 7,
+  "entities.water_system": 8,
+  "entities.water_system_component": 9,
+  "entities.wastewater_treatment_system": 10,
+  "entities.waste_disposal_site": 11
+}
+
+/** Entity types that are assets */
+const assetEntities = [
+  "entities.water_asset"
+]
+
+interface MWaterCompleteTableSelectComponentProps {
+  /** Url to hit api */
+  apiUrl: string
+  /** Optional client */
+  client?: string
+  schema: Schema
+  /** User id */
+  user?: string
+  table?: string
+  /** Called with table selected */
+  onChange: any
+  extraTables: any
+  onExtraTablesChange: any
+}
+
+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 = {
+      selectedCategory: null,
+      showLegacyAssets: false,
+      searchText: ""
+    }
+  }
+
+  handleExtraTableAdd = (tableId: any) => {
+    return this.props.onExtraTablesChange(_.union(this.props.extraTables, [tableId]))
+  }
+
+  handleExtraTableRemove = (tableId: any) => {
+    const displayName = this.getExtraTableDisplayName(tableId)
+    if (!displayName) {
+      return
+    }
+
+    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() {
+    let table
+    let types = []
+
+    for (table of this.props.schema.getTables()) {
+      if (table.deprecated) {
+        continue
+      }
+
+      if (!table.id.match(/^entities\./)) {
+        continue
+      }
+
+      // Skip assets
+      if (assetEntities.includes(table.id)) {
+        continue
+      }
+
+      types.push(table.id)
+    }
+
+    // Sort by order if present
+    types = _.sortBy(types, (type) => sitesOrder[type] || 999)
+
+    return <uiComponents.OptionListComponent
+      items={_.compact(
+        _.map(types, (tableId) => {
+          table = this.props.schema.getTable(tableId)!
+          return {
+            name: ExprUtils.localizeString(table.name, T.locale),
+            desc: ExprUtils.localizeString(table.desc, T.locale),
+            onClick: this.props.onChange.bind(null, table.id)
+          }
+        })
+      )}
+    />
+  }
+
+  renderForms() {
+    return <FormsListComponent
+      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}
+    />
+  }
+
+  renderIndicators() {
+    return <IndicatorsListComponent
+      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}
+    />
+  }
+
+  renderIssues() {
+    return <IssuesListComponent
+      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}
+    />
+  }
+
+  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()
+
+    sweetSenseTables = _.sortBy(sweetSenseTables, (table) => table.name.en)
+    return <uiComponents.OptionListComponent
+      items={_.map(sweetSenseTables, (table) => {
+        return {
+          name: ExprUtils.localizeString(table.name, T.locale),
+          desc: ExprUtils.localizeString(table.desc, T.locale),
+          onClick: this.props.onChange.bind(null, table.id)
+        }
+      })}
+    />
+  }
+
+  renderTablesets() {
+    return <MWaterCustomTablesetListComponent
+      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}
+    />
+  }
+
+  renderMetrics() {
+    return <MWaterMetricsTableListComponent
+      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}
+    />
+  }
+
+  renderAccountingSystems() {
+    return <MWaterAccountingSystemListComponent
+      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}
+    />
+  }
+
+  renderAssets() {
+    const items: {
+      name: string
+      desc?: string
+      onClick: () => void
+      onRemove?: () => void
+    }[] = []
+
+    for (const tableId of assetEntities) {
+      const table = this.props.schema.getTable(tableId)
+      if (!table) {
+        continue
+      }
+      items.push({
+        name: ExprUtils.localizeString(table.name, T.locale),
+        desc: ExprUtils.localizeString(table.desc, T.locale),
+        onClick: this.props.onChange.bind(null, table.id),
+        onRemove: this.handleExtraTableRemove.bind(null, table.id)
+      })
+    }
+
+    return <div>
+      <uiComponents.OptionListComponent 
+        items={items} 
+      />
+      <div className="text-center mt-2 mb-2">
+        <button className="btn btn-link" onClick={() => this.setState({ showLegacyAssets: !this.state.showLegacyAssets })}>
+          {this.state.showLegacyAssets ? T`Hide` : T`Show`} {T`Legacy Assets`}
+        </button>
+      </div>
+      {this.state.showLegacyAssets && this.renderLegacyAssets()}
+    </div>
+  }
+
+  renderLegacyAssets() {
+    return <MWaterAssetSystemsListComponent
+      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}
+    />
+  }
+
+  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
+      if (table.deprecated) {
+        return false
+      }
+
+      // Remove sites
+      if (table.id.match(/^entities\./)) {
+        return false
+      }
+
+      // sweetsense tables
+      if (table.id.match(/^sweetsense/)) {
+        return false
+      }
+
+      // Remove responses
+      if (table.id.match(/^responses:/)) {
+        return false
+      }
+
+      // Remove indicators
+      if (table.id.match(/^indicator_values:/)) {
+        return false
+      }
+
+      // Remove issues
+      if (table.id.match(/^(issues|issue_events):/)) {
+        return false
+      }
+
+      // Remove custom tablesets
+      if (table.id.match(/^custom\./)) {
+        return false
+      }
+
+      // Remove metrics
+      if (table.id.match(/^metrics:/)) {
+        return false
+      }
+
+      // Remove assets
+      if (table.id.match(/^assets:/)) {
+        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
+    })
+
+    otherTables = _.sortBy(otherTables, (table) => table.name.en)
+    return <uiComponents.OptionListComponent
+      items={_.map(otherTables, (table) => {
+        return {
+          name: ExprUtils.localizeString(table.name, T.locale),
+          desc: ExprUtils.localizeString(table.desc, T.locale),
+          onClick: this.props.onChange.bind(null, table.id)
+        }
+      })}
+    />
+  }
+
+  getSweetSenseTables() {
+    return _.filter(this.props.schema.getTables(), (table) => {
+      if (table.deprecated) {
+        return false
+      }
+
+      if (table.id.match(/^sweetsense/)) {
+        return true
+      }
+
+      return false
+    })
+  }
+
+  /** 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",
+        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",
+        name: T("Issues").toString(),
+        description: T("Reported problems and issues").toString(),
+        icon: "fa fa-exclamation-circle",
+        render: () => this.renderIssues()
+      },
+      {
+        id: "metrics",
+        name: T("Metrics").toString(),
+        description: T("Performance metrics and KPIs").toString(),
+        icon: "fa fa-line-chart",
+        render: () => this.renderMetrics()
+      },
+      {
+        id: "other",
+        name: T("Advanced").toString(),
+        description: T("Other advanced data sources").toString(),
+        icon: "fa fa-ellipsis-h",
+        render: () => this.renderOther()
+      }
+    ]
+
+    // // 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>
+    )
+  }
+
+  /** 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>
+        {/* 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>
+
+        {/* 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>
+    )
+  }
+}
+