@mwater/visualization 5.6.0 → 5.6.1

package/src/maps/MapComponent.tsx

@@ -0,0 +1,448 @@
+import _ from "lodash"
+import React, { ReactNode } from "react"
+
+import { MapViewComponent } from "./MapViewComponent"
+import MapDesignerComponent from "./MapDesignerComponent"
+import MapControlComponent from "./MapControlComponent"
+import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent"
+import UndoStack from "../UndoStack"
+import PopoverHelpComponent from "@mwater/react-library/lib/PopoverHelpComponent"
+import { DataSource, Schema } from "@mwater/expressions"
+import { MapDataSource } from "./MapDataSource"
+import { MapDesign } from "./MapDesign"
+import { JsonQLFilter, languages } from ".."
+import QuickfilterCompiler from "../quickfilter/QuickfilterCompiler"
+import QuickfiltersComponent from "../quickfilter/QuickfiltersComponent"
+import { getCompiledFilters, getFilterableTables } from "./MapUtils"
+
+export interface MapComponentProps {
+  schema: Schema
+  dataSource: DataSource
+  mapDataSource: MapDataSource
+
+  design: MapDesign
+  onDesignChange?: (design: MapDesign) => void
+
+  /** Called with (tableId, rowId) when item is clicked */
+  onRowClick?: (tableId: string, rowId: any) => void
+
+  /** Extra filters to apply to view */
+  extraFilters?: JsonQLFilter[]
+
+  /** Extra element to include in title at left */
+  titleElem?: ReactNode
+
+  /** Extra elements to add to right */
+  extraTitleButtonsElem?: ReactNode
+
+  /** True to enable quickfilters */
+  enableQuickfilters?: boolean
+
+  /** Locked quickfilter values. See README in quickfilters */
+  quickfilterLocks?: any[]
+
+  /** Initial quickfilter values */
+  quickfiltersValues?: any[]
+
+  /** True to hide title bar and related controls */
+  hideTitleBar?: boolean
+
+  /** Locale to prefer if available */
+  preferredLocale?: string
+}
+
+interface MapComponentState {
+  undoStack: UndoStack
+  transientDesign: MapDesign
+  zoomLocked: boolean
+
+  /** Values of quickfilters */
+  quickfiltersValues: any[] | null
+
+  /** True to hide quickfilters */
+  hideQuickfilters: boolean
+
+  /** Locale to use for display. Ignored if in edit mode */
+  locale: string
+
+  /** Locale being previewed while in edit mode. Non-null when previewing a translation. */
+  previewLocale: string | null
+}
+
+/** Map with designer on right */
+export default class MapComponent extends React.Component<MapComponentProps, MapComponentState> {
+  constructor(props: MapComponentProps) {
+    super(props)
+
+    // Prefer the T.locale if available when loading the map
+    let initialLocale = props.design.locale || "en"
+    const otherLocales = props.design.otherLocales || []
+    if (props.preferredLocale && otherLocales.includes(props.preferredLocale)) {
+      initialLocale = props.preferredLocale
+    } else if (otherLocales.includes(T.locale)) {
+      initialLocale = T.locale
+    }
+
+    this.state = {
+      undoStack: new UndoStack().push(props.design),
+      transientDesign: props.design, // Temporary design for read-only maps
+      zoomLocked: true,
+      quickfiltersValues: props.quickfiltersValues ?? null,
+      hideQuickfilters: false,
+      locale: initialLocale,
+      previewLocale: null
+    }
+  }
+
+  componentDidUpdate(prevProps: MapComponentProps) {
+    // If design changes, save on stack and update transient design
+    if (!_.isEqual(prevProps.design, this.props.design)) {
+      // Save on stack
+      this.setState({ undoStack: this.state.undoStack.push(this.props.design) })
+
+      // Update transient design
+      this.setState({ transientDesign: this.props.design })
+    }
+  }
+
+  handleUndo = () => {
+    const undoStack = this.state.undoStack.undo()
+
+    // We need to use callback as state is applied later
+    return this.setState({ undoStack }, () => this.props.onDesignChange!(undoStack.getValue()))
+  }
+
+  handleRedo = () => {
+    const undoStack = this.state.undoStack.redo()
+
+    // We need to use callback as state is applied later
+    return this.setState({ undoStack }, () => this.props.onDesignChange!(undoStack.getValue()))
+  }
+
+  handleShowQuickfilters = () => {
+    return this.setState({ hideQuickfilters: false })
+  }
+
+  handleZoomLockClick = () => {
+    return this.setState({ zoomLocked: !this.state.zoomLocked })
+  }
+
+  /** Handle locale selection from dropdown */
+  handleLocaleSelect = (locale: string) => {
+    const baseLocale = this.props.design.locale || "en"
+    const isEditing = this.props.onDesignChange != null
+
+    if (isEditing) {
+      // In edit mode, selecting base language exits preview mode
+      // Selecting other language enters preview mode
+      if (locale === baseLocale) {
+        this.setState({ previewLocale: null })
+      } else {
+        this.setState({ previewLocale: locale })
+      }
+    } else {
+      // In readonly mode, just change the locale
+      this.setState({ locale: locale })
+    }
+  }
+
+  /** Render the language selector dropdown */
+  renderLanguageDropdown() {
+    const baseLocale = this.props.design.locale || "en"
+    const otherLocales = this.props.design.otherLocales || []
+    const isEditing = this.props.onDesignChange != null
+    const isPreviewMode = isEditing && this.state.previewLocale != null
+
+    // Determine which locale to display in the dropdown button
+    let displayedLocale: string
+    if (isEditing) {
+      displayedLocale = this.state.previewLocale || baseLocale
+    } else {
+      displayedLocale = this.state.locale
+    }
+
+    return (
+      <div key="translations" className="dropdown d-inline-block">
+        <a 
+          className={`btn btn-link btn-sm dropdown-toggle ${isPreviewMode ? "text-info" : ""}`}
+          data-bs-toggle="dropdown"
+        >
+          <span className="fal fa-globe"/>
+          {" "}
+          {languages.find(l => l.code === displayedLocale)?.name || displayedLocale}
+          {isPreviewMode && <span className="badge bg-info ms-1">{T`Preview`}</span>}
+        </a>
+        <ul className="dropdown-menu dropdown-menu-end">
+          {/* Base language */}
+          <li key={baseLocale}>
+            <a
+              className={`dropdown-item ${displayedLocale === baseLocale ? "active" : ""}`}
+              onClick={() => this.handleLocaleSelect(baseLocale)}
+            >
+              {languages.find(l => l.code === baseLocale)?.name || baseLocale}
+            </a>
+          </li>
+
+          {/* Divider and preview header when editing */}
+          {isEditing && otherLocales.length > 0 && (
+            <>
+              <li><hr className="dropdown-divider" /></li>
+              <li><span className="dropdown-header">{T`Preview translations:`}</span></li>
+            </>
+          )}
+
+          {/* Other locales */}
+          {otherLocales.filter(loc => loc !== baseLocale).map(locale => 
+            <li key={locale}>
+              <a
+                className={`dropdown-item ${displayedLocale === locale ? "active" : ""}`}
+                onClick={() => this.handleLocaleSelect(locale)}
+              >
+                {languages.find(l => l.code === locale)?.name || locale}
+              </a>
+            </li>
+          )}
+        </ul>
+      </div>
+    )
+  }
+
+  renderActionLinks() {
+    return (
+      <div>
+        {this.props.onDesignChange != null && [
+          <a key="lock" className="btn btn-link btn-sm" onClick={this.handleZoomLockClick}>
+            <span
+              className={`fa ${this.state.zoomLocked ? "fa-lock red" : "fa-unlock green"}`}
+              style={{ marginRight: 5 }}
+            />
+            <PopoverHelpComponent placement="bottom">{T`Changes to zoom level wont be saved in locked mode`}</PopoverHelpComponent>
+          </a>,
+          <a
+            key="undo"
+            className={`btn btn-link btn-sm ${!this.state.undoStack.canUndo() ? "disabled" : ""}`}
+            onClick={this.handleUndo}
+          >
+            <span className="fas fa-caret-left" />
+            <span className="hide-600px"> {T`Undo`}</span>
+          </a>,
+          " ",
+          <a
+            key="redo"
+            className={`btn btn-link btn-sm ${!this.state.undoStack.canRedo() ? "disabled" : ""}`}
+            onClick={this.handleRedo}
+          >
+            <span className="fas fa-caret-right" />
+            <span className="hide-600px"> {T`Redo`}</span>
+          </a>
+        ]}
+        {this.props.design.otherLocales && this.props.design.otherLocales.length > 0
+          ? this.renderLanguageDropdown()
+          : undefined}
+        {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>
+          </a>
+        )}
+        {this.props.extraTitleButtonsElem}
+        <a key="toggleDesign" className="btn btn-link btn-sm" onClick={this.handleToggleDesignPanel} title={T`Toggle design panel`}>
+          {this.getDesign().hideDesignPanel ? (
+            <span className="fas fa-angle-double-left" />
+          ) : (
+            <span className="fas fa-angle-double-right" />
+          )}
+        </a>
+      </div>
+    )
+  }
+
+  renderHeader() {
+    return (
+      <div
+        style={{
+          padding: 4,
+          borderBottom: "solid 1px #e8e8e8",
+          gridArea: "header"
+        }}
+      >
+        <div style={{ float: "right" }}>{this.renderActionLinks()}</div>
+        {this.props.titleElem}
+      </div>
+    )
+  }
+
+  handleDesignChange = (design: any) => {
+    if (this.props.onDesignChange) {
+      return this.props.onDesignChange(design)
+    } else {
+      return this.setState({ transientDesign: design })
+    }
+  }
+
+  getDesign() {
+    if (this.props.onDesignChange) {
+      return this.props.design
+    } else {
+      return this.state.transientDesign || this.props.design
+    }
+  }
+
+  handleToggleDesignPanel = () => {
+    this.handleDesignChange({ ...this.getDesign(), hideDesignPanel: !this.getDesign().hideDesignPanel })
+  }
+
+  // Get the values of the quick filters
+  getQuickfilterValues = () => {
+    return this.state.quickfiltersValues || []
+  }
+
+  renderView() {
+    let filters = this.props.extraFilters || []
+
+    // Compile quickfilters
+    filters = filters.concat(
+      new QuickfilterCompiler(this.props.schema).compile(
+        this.props.design.quickfilters || [],
+        this.state.quickfiltersValues,
+        this.props.quickfilterLocks
+      )
+    )
+
+    const isPreviewMode = this.props.onDesignChange != null && this.state.previewLocale != null
+
+    // Determine display locale:
+    // - In preview mode: use previewLocale
+    // - In edit mode (no preview): use design locale
+    // - In readonly mode: use state locale
+    const displayLocale = isPreviewMode
+      ? this.state.previewLocale!
+      : (this.props.onDesignChange != null 
+          ? this.props.design.locale || "en" 
+          : this.state.locale)
+
+    return (
+      <AutoSizeComponent injectWidth={true} injectHeight={true}>
+        {(size: {
+          width?: number
+          height?: number
+        }) => {
+          return (
+            <MapViewComponent
+              mapDataSource={this.props.mapDataSource}
+              schema={this.props.schema}
+              dataSource={this.props.dataSource}
+              design={this.getDesign()}
+              onDesignChange={isPreviewMode ? undefined : this.handleDesignChange}
+              zoomLocked={this.state.zoomLocked}
+              onRowClick={this.props.onRowClick}
+              extraFilters={filters}
+              locale={displayLocale}
+              width={size.width!}
+              height={size.height!}
+            />
+          )
+        }}
+      </AutoSizeComponent>
+    )
+  }
+
+  // Get filters from props filters combined with maps filters
+  getCompiledFilters() {
+    let compiledFilters = getCompiledFilters(
+      this.props.design,
+      this.props.schema,
+      getFilterableTables(this.props.design, this.props.schema)
+    )
+    compiledFilters = compiledFilters.concat(this.props.extraFilters || [])
+    return compiledFilters
+  }
+
+  renderQuickfilter() {
+    return (
+      <div style={{ gridArea: "quickfilters", borderBottom: "solid 1px #e8e8e8" }}>
+        <QuickfiltersComponent
+          design={this.props.design.quickfilters || []}
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          quickfiltersDataSource={this.props.mapDataSource.getQuickfiltersDataSource()}
+          values={this.state.quickfiltersValues || undefined}
+          onValuesChange={(values: any) => this.setState({ quickfiltersValues: values })}
+          locks={this.props.quickfilterLocks}
+          filters={this.getCompiledFilters()}
+          hideTopBorder={this.props.hideTitleBar}
+          onHide={() => this.setState({ hideQuickfilters: true })}
+        />
+      </div>
+    )
+  }
+
+  /** Translate function to use for display based on current locale */
+  translate = (input: string): string => {
+    const design = this.getDesign()
+    const designLocale = design.locale || "en"
+    const isPreviewMode = this.props.onDesignChange != null && this.state.previewLocale != null
+
+    // Determine display locale:
+    // - In preview mode: use previewLocale
+    // - In edit mode (no preview): use design locale
+    // - In readonly mode: use state locale
+    const displayLocale = isPreviewMode
+      ? this.state.previewLocale!
+      : (this.props.onDesignChange != null 
+          ? designLocale 
+          : this.state.locale)
+
+    if (designLocale === displayLocale) {
+      return input
+    }
+    return design.translations?.[displayLocale]?.[input] ?? input
+  }
+
+  renderDesigner() {
+    const isPreviewMode = this.props.onDesignChange != null && this.state.previewLocale != null
+
+    return (
+      <div style={{ gridArea: "designer", borderLeft: "solid 2px #e8e8e8", overflowY: 'scroll' }}>
+        {this.props.onDesignChange && !isPreviewMode ? (
+          <MapDesignerComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            design={this.getDesign()}
+            onDesignChange={this.handleDesignChange}
+            enableQuickfilters={this.props.enableQuickfilters}
+          />
+        ) : (
+          <MapControlComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            design={this.getDesign()}
+            onDesignChange={this.handleDesignChange}
+            translate={this.translate}
+          />
+        )}
+      </div>
+    )
+  }
+
+  render() {
+    const designerVisible = !this.getDesign().hideDesignPanel
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "grid",
+          gridTemplateColumns: designerVisible ? "70% 30%" : "100%",
+          gridTemplateRows: "auto auto 1fr",
+          gridTemplateAreas: `"header designer" "quickfilters designer" "view designer"`
+        }}
+      >
+        {this.props.hideTitleBar != true ? this.renderHeader() : null}
+        {this.state.hideQuickfilters ? null : this.renderQuickfilter()}
+        <div style={{ width: "100%", height: "100%", gridArea: "view", overflow: "hidden" }}>{this.renderView()}</div>
+        {designerVisible ? this.renderDesigner() : null}
+      </div>
+    )
+  }
+}

package/src/maps/MapControlComponent.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+
+import MapLayersDesignerComponent from "./MapLayersDesignerComponent"
+import BaseLayerDesignerComponent from "./BaseLayerDesignerComponent"
+import { DataSource, Schema } from "@mwater/expressions"
+
+export interface MapControlComponentProps {
+  /** Schema to use */
+  schema: Schema
+  dataSource: DataSource
+  /** See Map Design.md */
+  design: any
+  onDesignChange: any
+  /** Translate function to use for display */
+  translate?: (input: string) => string
+}
+
+/** Allows controlling readonly map */
+export default class MapControlComponent extends React.Component<MapControlComponentProps> {
+  render() {
+    return (
+      <div style={{ padding: 5 }}>
+        <MapLayersDesignerComponent
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          design={this.props.design}
+          onDesignChange={this.props.onDesignChange}
+          allowEditingLayers={false}
+          translate={this.props.translate}
+        />
+
+        <br />
+
+        <BaseLayerDesignerComponent
+          design={this.props.design}
+          onDesignChange={this.props.onDesignChange}
+        />
+      </div>
+    )
+  }
+}

package/src/maps/MapDesign.ts

@@ -48,6 +48,12 @@ export interface MapDesign {
   /** optional locale (e.g. "fr") to use for display */
   locale?: string
 
+  /** Other locales that the map is available in. */
+  otherLocales?: string[]
+
+  /** Translation map for map. Maps locale to translation map. Does not include default locale. */
+  translations?: { [locale: string]: { [key: string]: string } }
+
   /** True if design panel is hidden */
   hideDesignPanel?: boolean
 }

package/src/maps/MapDesignerComponent.tsx

@@ -19,6 +19,7 @@ import { JsonQLFilter } from "../JsonQLFilter"
 import QuickfiltersDesignComponent from "../quickfilter/QuickfiltersDesignComponent"
 import produce from "immer"
 import { ActiveTablesContext } from "@mwater/expressions-ui"
+import { MapTranslationsTab } from "./MapTranslationsTab"
 
 export interface MapDesignerComponentProps {
   /** Schema to use */
@@ -34,6 +35,9 @@ export interface MapDesignerComponentProps {
 
   /** True to enable quickfilters */
   enableQuickfilters?: boolean
+
+  /** True to enable translations tab. Defaults to true. Set to false when map is embedded in a dashboard. */
+  enableTranslations?: boolean
 }
 
 export default class MapDesignerComponent extends React.Component<MapDesignerComponentProps> {
@@ -72,7 +76,7 @@ export default class MapDesignerComponent extends React.Component<MapDesignerCom
 
   renderOptionsTab() {
     return (
-      <div>
+      <div style={{ marginBottom: 200 }}>
         <BaseLayerDesignerComponent
           design={this.props.design}
           onDesignChange={this.props.onDesignChange}
@@ -154,6 +158,19 @@ export default class MapDesignerComponent extends React.Component<MapDesignerCom
           design={this.props.design}
           onDesignChange={this.props.onDesignChange}
         />
+
+        {/* Translations section - only shown when enableTranslations is true (default) */}
+        {this.props.enableTranslations !== false && (
+          <>
+            <hr />
+            <h5>{T`Translations`}</h5>
+            <MapTranslationsTab
+              schema={this.props.schema}
+              design={this.props.design}
+              onDesignChange={this.props.onDesignChange}
+            />
+          </>
+        )}
       </div>
     )
   }

package/src/maps/MapLayerDataSource.ts

@@ -8,11 +8,6 @@ export interface MapLayerDataSource {
    * Only called on layers that are valid */
   getTileUrl(design: any, filters: JsonQLFilter[]): string | null
 
-  /** Get the url for the interactivity tiles with the specified filters applied
-   * Called with (design, filters) where design is the design of the layer and filters are filters to apply. Returns URL
-   * Only called on layers that are valid */
-  getUtfGridUrl(design: any, filters: JsonQLFilter[]): string | null
-
   /** Get the url for vector tile source with an expiry time. Only for layers of type "VectorTile"
    * @param createdAfter ISO 8601 timestamp requiring that tile source on server is created after specified datetime
    */

package/src/maps/MapLayerViewDesignerComponent.ts

@@ -25,6 +25,8 @@ export interface MapLayerViewDesignerComponentProps {
   connectDropTarget?: any
   allowEditingLayer: boolean
   filters?: any
+  /** Translate function to use for display */
+  translate?: (input: string) => string
 }
 
 interface MapLayerViewDesignerComponentState {
@@ -36,7 +38,7 @@ export default class MapLayerViewDesignerComponent extends React.Component<
   MapLayerViewDesignerComponentProps,
   MapLayerViewDesignerComponentState
 > {
-  constructor(props: any) {
+  constructor(props: MapLayerViewDesignerComponentProps) {
     super(props)
 
     const layer = LayerFactory.createLayer(this.props.layerView.type)
@@ -127,10 +129,15 @@ export default class MapLayerViewDesignerComponent extends React.Component<
   }
 
   renderName() {
+    // Translate the name if a translate function is provided
+    const displayName = this.props.translate 
+      ? this.props.translate(this.props.layerView.name) 
+      : this.props.layerView.name
+
     return R(
       "span",
       { className: "hover-display-parent", onClick: this.handleRename, style: { cursor: "pointer" } },
-      this.props.layerView.name,
+      displayName,
       " ",
       R("span", { className: "hover-display-child fas fa-pencil-alt text-muted" })
     )

package/src/maps/MapLayersDesignerComponent.ts

@@ -21,6 +21,8 @@ export interface MapLayersDesignerComponentProps {
   /** True to allow editing layers */
   allowEditingLayers: boolean
   filters?: any
+  /** Translate function to use for display */
+  translate?: (input: string) => string
 }
 
 // Designer for layer selection in the map
@@ -102,7 +104,8 @@ export default class MapLayersDesignerComponent extends React.Component<MapLayer
         connectDragPreview,
         connectDropTarget,
         allowEditingLayer: this.props.allowEditingLayers,
-        filters: _.compact(filters)
+        filters: _.compact(filters),
+        translate: this.props.translate
       })
     )
   }

package/src/maps/MapTranslationsTab.tsx

@@ -0,0 +1,53 @@
+import React, { useMemo } from "react"
+import { Schema } from "@mwater/expressions"
+import { MapDesign } from "./MapDesign"
+import { TranslationsTabComponent } from "../TranslationsTabComponent"
+import * as MapUtils from "./MapUtils"
+import produce from "immer"
+
+export interface MapTranslationsTabProps {
+  /** Schema to use */
+  schema: Schema
+  /** Map design */
+  design: MapDesign
+  /** Called with new design */
+  onDesignChange: (design: MapDesign) => void
+}
+
+/**
+ * Translations tab for map designer that wraps the reusable TranslationsTabComponent
+ */
+export function MapTranslationsTab(props: MapTranslationsTabProps) {
+  const { design, onDesignChange, schema } = props
+
+  const translatableStrings = useMemo(
+    () => MapUtils.getTranslatableStrings(design, schema),
+    [design, schema]
+  )
+
+  return (
+    <TranslationsTabComponent
+      locale={design.locale || "en"}
+      otherLocales={design.otherLocales || []}
+      translations={design.translations || {}}
+      translatableStrings={translatableStrings}
+      onLocaleChange={(locale) =>
+        onDesignChange(produce(design, draft => {
+          draft.locale = locale
+        }))
+      }
+      onOtherLocalesChange={(otherLocales) =>
+        onDesignChange(produce(design, draft => {
+          draft.otherLocales = otherLocales
+        }))
+      }
+      onTranslationsChange={(translations) =>
+        onDesignChange(produce(design, draft => {
+          draft.translations = translations
+        }))
+      }
+      downloadFilename="Map Translations.xlsx"
+      baseLanguageDescription={T`This is the language that the map is written in.`}
+    />
+  )
+}