@mwater/visualization 5.5.0 → 5.6.1

package/src/maps/Layer.ts

@@ -11,25 +11,6 @@ import { JsonQLExpr, JsonQLQuery, JsonQLSelectQuery } from "@mwater/jsonql"
 import { LayerSpecification } from "maplibre-gl"
 import { MapLayerDataSource } from "./MapLayerDataSource"
 
-export interface JsonQLCssLayerDefinition {
-  layers: Array<{
-    /** Layer id */
-    id: string
-    /** jsonql that includes "the_webmercator_geom" as a column */
-    jsonql: JsonQLQuery
-  }>
-
-  /** carto css */
-  css: string
-
-  interactivity?: {
-    /** id of layer */
-    layer: string
-    /** array of field names */
-    fields: string[]
-  }
-}
-
 export interface OnGridClickOptions<LayerDesign> {
   /** design of layer */
   design: LayerDesign
@@ -112,22 +93,7 @@ export interface VectorTileCTE {
 /** Defines a layer for a map which has all the logic for rendering the specific data to be viewed */
 export default class Layer<LayerDesign> {
   /** Gets the type of layer definition */
-  getLayerDefinitionType(): "JsonQLCss" | "TileUrl" | "VectorTile" {
-    return "JsonQLCss"
-  }
-
-  /** Gets the layer definition as JsonQL + CSS for type "JsonQLCss"
-      arguments:
-        design: design of layer
-        schema: schema to use
-        filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to put in table alias
-   */
-  getJsonQLCss(design: LayerDesign, schema: Schema, filters: JsonQLFilter[]): JsonQLCssLayerDefinition {
-    throw new Error("Not implemented")
-  }
-
-  /** Gets the utf grid url for definition type "TileUrl" */
-  getUtfGridUrl(design: LayerDesign, filters: JsonQLFilter[]): string | null {
+  getLayerDefinitionType(): "TileUrl" | "VectorTile" {
     throw new Error("Not implemented")
   }
 

package/src/maps/LeafletMapComponent.tsx

@@ -3,7 +3,6 @@ import React, { ReactElement, Component } from "react"
 import ReactDOM from "react-dom"
 import LeafletLoading from "./LeafletLoading"
 import L, { PathOptions, CircleMarkerOptions } from "leaflet"
-let BingLayer = require("./BingLayer")
 let UtfGridLayer = require("./UtfGridLayer")
 
 const R = React.createElement
@@ -387,36 +386,28 @@ export default class LeafletMapComponent extends Component<Props> {
 
       switch (this.props.baseLayerId) {
         case "bing_road":
-          this.baseLayer = new BingLayer("Ao26dWY2IC8PjorsJKFaoR85EPXCnCohrJdisCWXIULAXFo0JAXquGauppTMQbyU", {
-            type: "Road"
+          this.baseLayer = L.tileLayer('https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png?api_key=835a418e-91f9-4eb8-9856-0883c3656c9d', {
+            maxZoom: 20,
+            attribution: '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>', 
           })
           break
-        // @baseLayer = L.tileLayer('https://{s}.api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
-        //   attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
-        //   tileSize: 512,
-        //   maxZoom: 21,
-        //   maxNativeZoom: 19,
-        //   subdomains: ["a", "b"],
-        //   zoomOffset: -1,
-        //   id: 'mapbox/streets-v11',
-        //   accessToken: 'pk.eyJ1IjoiZ3Jhc3NpY2siLCJhIjoiY2ozMzU1N3ZoMDA3ZDJxbzh0aTRtOTRoeSJ9.fFWBZ88vbdezyhfw-I-fag'
-        // })
         case "bing_aerial":
-          this.baseLayer = new BingLayer("Ao26dWY2IC8PjorsJKFaoR85EPXCnCohrJdisCWXIULAXFo0JAXquGauppTMQbyU", {
-            type: "AerialWithLabels"
+          this.baseLayer = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}.jpg?api_key=835a418e-91f9-4eb8-9856-0883c3656c9d', {
+            maxZoom: 20,
+            attribution: '&copy; CNES, Distribution Airbus DS, &copy; Airbus DS, &copy; PlanetObserver (Contains Copernicus Data) | &copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>', 
           })
           break
         case "cartodb_positron":
-          this.baseLayer = L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png", {
+          this.baseLayer = L.tileLayer("https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png?api_key=835a418e-91f9-4eb8-9856-0883c3656c9d", {
             attribution:
-              '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CartoDB</a>',
+              '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
             maxZoom: 21
           })
           break
         case "cartodb_dark_matter":
-          this.baseLayer = L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png", {
+          this.baseLayer = L.tileLayer("https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png?api_key=835a418e-91f9-4eb8-9856-0883c3656c9d", {
             attribution:
-              '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CartoDB</a>',
+              '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
             maxZoom: 21
           })
           break

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
    */