@mwater/visualization 5.4.5 → 5.6.0

package/src/{MWaterGlobalFiltersComponent.ts → MWaterGlobalFiltersComponent.tsx}

@@ -1,6 +1,5 @@
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
 
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import { IdLiteralComponent } from "@mwater/expressions-ui"
@@ -14,12 +13,14 @@ export interface MWaterGlobalFiltersComponentProps {
   dataSource: DataSource
   filterableTables: string[]
   globalFilters?: GlobalFilter[]
-  onChange: (globalFilters: GlobalFilter[]) => void
+  onChange?: (globalFilters: GlobalFilter[]) => void
 }
 
 // Control to edit the global filters (_managed_by and admin_region)
 export default class MWaterGlobalFiltersComponent extends React.Component<MWaterGlobalFiltersComponentProps> {
   handleRegionsChange = (regions: any) => {
+    if (!this.props.onChange) { return }
+
     // Remove existing filter
     const globalFilters = _.filter(
       this.props.globalFilters || [],
@@ -40,6 +41,8 @@ export default class MWaterGlobalFiltersComponent extends React.Component<MWater
   }
 
   handleManagedByChange = (managedBy: any) => {
+    if (!this.props.onChange) { return }
+    
     // Remove existing filter
     const globalFilters = _.filter(
       this.props.globalFilters || [],
@@ -80,38 +83,34 @@ export default class MWaterGlobalFiltersComponent extends React.Component<MWater
       adminRegions = null
     }
 
-    return R(
-      "div",
-      null,
-      R(
-        ui.FormGroup,
-        { label: T`Only sites managed by`, labelMuted: true },
-        R(IdLiteralComponent, {
-          value: managedBy,
-          onChange: this.handleManagedByChange,
-          idTable: "groups",
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          placeholder: T`All Organizations`,
-          multi: false,
-          filter: { type: "field", tableAlias: "main", column: "canManageEntities" }
-        })
-      ),
+    return (
+      <div>
+        <ui.FormGroup label={T`Only sites managed by`} labelMuted={true}>
+          <IdLiteralComponent
+            value={managedBy}
+            onChange={ this.props.onChange ? this.handleManagedByChange : undefined}
+            idTable="groups"
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            placeholder={T`All Organizations`}
+            multi={false}
+            filter={{ type: "field", tableAlias: "main", column: "canManageEntities" }}
+          />
+        </ui.FormGroup>
 
-      R(
-        ui.FormGroup,
-        { label: T`Only sites located in`, labelMuted: true },
-        R(IdLiteralComponent, {
-          value: adminRegions,
-          onChange: this.handleRegionsChange,
-          idTable: "admin_regions",
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          placeholder: T`All Regions`,
-          multi: true,
-          orderBy: [{ expr: { type: "field", tableAlias: "main", column: "level" }, direction: "asc" }]
-        })
-      )
+        <ui.FormGroup label={T`Only sites located in`} labelMuted={true}>
+          <IdLiteralComponent
+            value={adminRegions}
+            onChange={this.props.onChange ? this.handleRegionsChange : undefined}
+            idTable="admin_regions"
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            placeholder={T`All Regions`}
+            multi={true}
+            orderBy={[{ expr: { type: "field", tableAlias: "main", column: "level" }, direction: "asc" }]}
+          />
+        </ui.FormGroup>
+      </div>
     )
   }
 }

package/src/{MWaterLoaderComponent.ts → MWaterLoaderComponent.tsx}

@@ -1,6 +1,5 @@
 import _ from "lodash"
-import React, { ReactElement } from "react"
-const R = React.createElement
+import React, { ReactElement, ReactNode } from "react"
 
 import { DataSource, Schema } from "@mwater/expressions"
 import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent"
@@ -24,9 +23,9 @@ export interface MWaterLoaderComponentProps {
   locales?: string[]
   /**  Override default add layer component. See AddLayerComponent for details */
   addLayerElementFactory?: AddLayerElementFactory
-  children: (error: any, config?: { schema: Schema; dataSource: DataSource }) => ReactElement<any>
+  children: (error: any, config?: { schema: Schema; dataSource: DataSource }) => ReactElement<any> | null
   /** Custom error formatter that returns React node or string, gets passed the error response from server */
-  errorFormatter?: (data: any, defaultError: string) => string
+  errorFormatter?: (data: any, defaultError: ReactNode) => ReactNode
   /** Origin of usage. e.g. "dashboards:43445364..." */
   origin?: string
 }
@@ -110,21 +109,21 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<
     }
 
     // Inject context
-    return R(
-      MWaterContextComponent,
-      {
-        apiUrl: this.props.apiUrl,
-        client: this.props.client,
-        user: this.props.user,
-        schema: this.state.schema!,
-        extraTables: this.props.extraTables,
-        onExtraTablesChange: this.props.onExtraTablesChange,
-        addLayerElementFactory: this.props.addLayerElementFactory
-      },
-      this.props.children(this.state.error, {
-        schema: this.state.schema!,
-        dataSource: this.state.dataSource!
-      })
+    return (
+      <MWaterContextComponent
+        apiUrl={this.props.apiUrl}
+        client={this.props.client}
+        user={this.props.user}
+        schema={this.state.schema!}
+        extraTables={this.props.extraTables}
+        onExtraTablesChange={this.props.onExtraTablesChange}
+        addLayerElementFactory={this.props.addLayerElementFactory}
+      >
+        {this.props.children(this.state.error, {
+          schema: this.state.schema!,
+          dataSource: this.state.dataSource!
+        })}
+      </MWaterContextComponent>
     )
   }
 }

package/src/UndoStack.ts

@@ -4,24 +4,32 @@ import _ from "lodash"
 export default class UndoStack {
   undoStack: any[]
   redoStack: any[]
+  maxDepth?: number
 
-  constructor(undoStack?: any, redoStack?: any) {
+  constructor(undoStack?: any, redoStack?: any, maxDepth?: number) {
     this.undoStack = undoStack || []
     this.redoStack = redoStack || []
+    this.maxDepth = maxDepth
   }
 
   // Add a value to the stack
   push(value: any) {
     // No trivial pushes
-    if (_.isEqual(this.getValue(), value)) {
+    if (JSON.stringify(this.getValue()) === JSON.stringify(value)) {
       return this
     }
 
-    const undoStack = this.undoStack.slice()
+    let undoStack = this.undoStack.slice()
     undoStack.push(value)
+    
+    // Limit stack depth if maxDepth is set
+    if (this.maxDepth && undoStack.length > this.maxDepth) {
+      undoStack = undoStack.slice(undoStack.length - this.maxDepth)
+    }
+    
     const redoStack: any = []
 
-    return new UndoStack(undoStack, redoStack)
+    return new UndoStack(undoStack, redoStack, this.maxDepth)
   }
 
   canUndo() {
@@ -39,7 +47,7 @@ export default class UndoStack {
 
     const undoStack = _.initial(this.undoStack)
 
-    return new UndoStack(undoStack, redoStack)
+    return new UndoStack(undoStack, redoStack, this.maxDepth)
   }
 
   redo() {
@@ -49,7 +57,7 @@ export default class UndoStack {
 
     const redoStack = _.initial(this.redoStack)
 
-    return new UndoStack(undoStack, redoStack)
+    return new UndoStack(undoStack, redoStack, this.maxDepth)
   }
 
   // Get the current value

package/src/dashboards/DashboardComponent.tsx

@@ -107,7 +107,8 @@ export default class DashboardComponent extends React.Component<DashboardCompone
         props.onDesignChange != null,
       layoutOptionsOpen: false,
       hideQuickfilters:
-        layoutOptions.hideQuickfiltersWidth != null && layoutOptions.hideQuickfiltersWidth > document.body.clientWidth,
+        layoutOptions.hideQuickfiltersWidth === 0 || 
+        (layoutOptions.hideQuickfiltersWidth != null && layoutOptions.hideQuickfiltersWidth > document.body.clientWidth),
       refreshKey: 1,
       locale: initialLocale
     }
@@ -303,23 +304,23 @@ export default class DashboardComponent extends React.Component<DashboardCompone
           : undefined}
         <a key="print" className="btn btn-link btn-sm" onClick={this.handlePrint}>
           <span className="fas fa-print"/>
-          <span className="hide-600px"> {T`Print`}</span>
+          <span className="hide-800px"> {T`Print`}</span>
         </a>
         <a key="refresh" className="btn btn-link btn-sm" onClick={this.handleRefreshData}>
           <span className="fas fa-sync"/>
-          <span className="hide-600px"> {T`Refresh`}</span>
+          <span className="hide-800px"> {T`Refresh`}</span>
         </a>
         {this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
           ? <a key="showQuickfilters" className="btn btn-link btn-sm" onClick={this.handleShowQuickfilters}>
             <span className="fa fa-filter"/>
-            <span className="hide-600px"> {T`Show Quickfilters`}</span>
+            <span className="hide-800px"> {T`Show Quickfilters`}</span>
           </a>
           : undefined}
 
         {this.state.editing
           ? <a key="settings" className="btn btn-link btn-sm" onClick={this.handleSettings}>
             <span className="fas fa-cog"/>
-            <span className="hide-600px"> {T`Settings`}</span>
+            <span className="hide-800px"> {T`Settings`}</span>
           </a>
           : undefined}
         {this.state.editing ? this.renderStyle() : undefined}
@@ -434,6 +435,7 @@ export default class DashboardComponent extends React.Component<DashboardCompone
         <div style={{
           display: "grid",
           gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
+          gridTemplateColumns: "minmax(0, 1fr)",
           height: "100%"
         }}>
           {!this.props.hideTitleBar ? this.renderTitleBar() : undefined}

package/src/dashboards/DashboardDesign.ts

@@ -39,6 +39,6 @@ export interface DashboardDesign {
   /** true to enable implicit filtering (see ImplicitFilterBuilder). Defaults to true for older dashboards. */
   implicitFiltersEnabled?: boolean
 
-  /** array of global filters. See below. */
+  /** Array of global filters */
   globalFilters?: GlobalFilter[]
 }

package/src/dashboards/LayoutOptionsComponent.tsx

@@ -91,8 +91,9 @@ export function LayoutOptionsComponent(props: {
           <div style={{ backgroundColor: "#888" }}></div>
           <div style={{ height: "100%", display: "grid", gridTemplateRows: "auto 1fr" }}>
             <div key="quickfilters">
-              {layoutOptions.hideQuickfiltersWidth == null ||
-                sizeOptions[previewSize].value.width > layoutOptions.hideQuickfiltersWidth
+              {(layoutOptions.hideQuickfiltersWidth !== 0) && 
+                (layoutOptions.hideQuickfiltersWidth == null ||
+                 sizeOptions[previewSize].value.width > layoutOptions.hideQuickfiltersWidth)
                 ? props.quickfiltersView
                 : null}
             </div>
@@ -376,6 +377,7 @@ function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOp
               onLayoutOptionsChange({ ...layoutOptions, hideQuickfiltersWidth })
             }}
             sign="< "
+            includeAlways
           />
         </FormGroup>
         <FormGroup label={T`Minimum Width (before scrolling or scaling)`}>
@@ -515,20 +517,30 @@ function WidthSelector(props: {
   onChange: (value: number | null) => void
   /** E.g. >=, <= */
   sign: string
+  /** If true, include an "Always" option with value 0 */
+  includeAlways?: boolean
 }) {
+  // Create options array with conditional "Always" option
+  const options = [
+    { value: 400, label: `${props.sign}400px (${T`Phone`})` },
+    { value: 600, label: `${props.sign}600px (${T`Small tablet`})` },
+    { value: 800, label: `${props.sign}800px (${T`Tablet`})` },
+    { value: 1000, label: `${props.sign}1000px (${T`Laptop`})` },
+    { value: 1200, label: `${props.sign}1200px (${T`Desktop`})` },
+    { value: 1600, label: `${props.sign}1600px (${T`Wide Desktop`})` }
+  ]
+
+  // Add "Always" option if requested
+  if (props.includeAlways) {
+    options.push({ value: 0, label: T`Always` })
+  }
+
   return (
     <Select
       value={props.value}
       onChange={props.onChange}
       nullLabel={T`N/A`}
-      options={[
-        { value: 400, label: `${props.sign}400px (${T`Phone`})` },
-        { value: 600, label: `${props.sign}600px (${T`Small tablet`})` },
-        { value: 800, label: `${props.sign}800px (${T`Tablet`})` },
-        { value: 1000, label: `${props.sign}1000px (${T`Laptop`})` },
-        { value: 1200, label: `${props.sign}1200px (${T`Desktop`})` },
-        { value: 1600, label: `${props.sign}1600px (${T`Wide Desktop`})` }
-      ]}
+      options={options}
     />
   )
 }

package/src/dashboards/ServerDashboardDataSource.ts

@@ -28,7 +28,7 @@ interface ServerDashboardDataSourceOptions {
   dataSource: DataSource
 
   /** revision to use to allow caching */
-  rev: string
+  rev?: number
 }
 
 interface ServerWidgetDataSourceOptions extends ServerDashboardDataSourceOptions {
@@ -407,12 +407,6 @@ class ServerWidgetLayerDataSource implements MapLayerDataSource {
 
     let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?` + querystring.stringify(query)
 
-    // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
-    // Used to speed queries
-    if (url.match(/^https:\/\/api\.mwater\.co\//)) {
-      url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/")
-    }
-
     return url
   }
 
@@ -421,12 +415,6 @@ class ServerWidgetLayerDataSource implements MapLayerDataSource {
     let where
     let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?type=${design.type}&radius=1000`
 
-    // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
-    // Used to speed queries
-    if (url.match(/^https:\/\/api\.mwater\.co\//)) {
-      url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/")
-    }
-
     if (this.options.client) {
       url += `&client=${this.options.client}`
     }
@@ -454,6 +442,41 @@ class ServerWidgetLayerDataSource implements MapLayerDataSource {
 
     return url
   }
+
+  /** Gets hover over data for hover over items
+   * @param design The design of the layer
+   * @param data The data of the current item being hovered over. e.g. { id: 123 }
+   * @param filters The filters to apply to the layer does not include filters that narrow down to a specific item
+   * @returns A promise that resolves to the hover over data, indexed by the id of the hover over item
+   */
+  async getHoverOverData(design: any, data: any, filters: JsonQLFilter[]): Promise<{ [key: string]: any }> {
+    const query = {
+      client: this.options.client,
+      share: this.options.share,
+      filters: compressJson(filters || []),
+      data: compressJson(data),
+      rev: this.options.rev
+    }
+
+    const url =
+      `${this.options.apiUrl}dashboards/${this.options.dashboardId}/widgets/${this.options.widgetId}/layers/${this.options.layerView.id}/hoverdata?` +
+      querystring.stringify(query)
+
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        Accept: "application/json"
+      }
+    })
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      console.error(errorText)
+      throw new Error(`Error fetching hover data: ${response.statusText}`)
+    }
+
+    return await response.json()
+  }
 }
 
 interface ServerWidgetLayerPopupDataSourceOptions extends ServerDashboardDataSourceOptions {

package/src/dashboards/SettingsModalComponent.tsx

@@ -259,7 +259,7 @@ function LanguageTab({ design, onDesignChange, schema }: LanguageTabProps) {
       ).length
 
       // Round down to nearest percent
-      percentages[locale] = Math.floor((translatedCount / totalStrings) * 100)
+      percentages[locale] = (totalStrings > 0) ? Math.floor((translatedCount / totalStrings) * 100) : 0
     }
 
     return percentages

package/src/dashboards/layoutOptions.tsx

@@ -21,7 +21,11 @@ export interface BlocksLayoutOptions {
   /** Width above which pads */
   maximumWidth: number | null
 
-  /** Width at which to hide quickfilters. Null for never */
+  /** Width at which to hide quickfilters. 
+   * Null for never hide
+   * 0 for always hide 
+   * Positive number for responsive hiding based on width
+   */
   hideQuickfiltersWidth: number | null
 
   /** The padding around the entire dashboard */

package/src/datagrids/DatagridComponent.tsx

@@ -380,7 +380,7 @@ export default forwardRef<DatagridComponentRef, DatagridComponentProps>(function
     return (
       <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 40, padding: 4 }}>
         <div style={{ float: "right" }}>
-          {design.showNumRows && numRows ? <small className='text-muted text-sm'>{`${d3Format(',')(numRows)} rows`}</small> : undefined}
+          {design.showNumRows && numRows ? <small className='text-muted text-sm me-2'>{`${d3Format(',')(numRows)} rows`}</small> : undefined}
           {renderDeleteRows()}
           {renderFindReplace()}
           {renderCellEdit()}
@@ -529,8 +529,36 @@ export default forwardRef<DatagridComponentRef, DatagridComponentProps>(function
               )
             } else if (onDesignChange) {
               return (
-                <div style={{ textAlign: "center", marginTop: size.height / 2 }}>
-                  <a className="btn btn-link" onClick={handleEdit}>{T`Click Here to Configure`}</a>
+                <div style={{ 
+                  display: "flex", 
+                  flexDirection: "column", 
+                  alignItems: "center", 
+                  justifyContent: "center", 
+                  height: "100%",
+                  padding: "40px"
+                }}>
+                  <div style={{
+                    textAlign: "center",
+                    marginBottom: "24px"
+                  }}>
+                    <i className="fas fa-table text-muted" style={{ 
+                      fontSize: "48px", 
+                      marginBottom: "16px"
+                    }} />
+                    <div style={{ 
+                      fontSize: "14px"
+                    }} className="text-muted">
+                      {T`Configure a data source and columns to get started.`}
+                    </div>
+                  </div>
+                  
+                  <button 
+                    className="btn btn-primary" 
+                    onClick={handleEdit}
+                  >
+                    <i className="fas fa-cog" style={{ marginRight: "8px" }} />
+                    {T`Configure`}
+                  </button>
                 </div>
               )
             } else {