@mwater/visualization 5.6.0 → 5.6.1

package/src/maps/MarkersLayerDesignerComponent.tsx

@@ -1,7 +1,7 @@
 import _ from "lodash"
 import React from "react"
 import { FilterExprComponent } from "@mwater/expressions-ui"
-import { DataSource, ExprUtils, OpExpr, Schema } from "@mwater/expressions"
+import { DataSource, Expr, ExprUtils, OpExpr, Schema } from "@mwater/expressions"
 import { ExprCompiler } from "@mwater/expressions"
 import AxisComponent from "../axes/AxisComponent"
 import ColorComponent from "../ColorComponent"
@@ -14,6 +14,9 @@ import * as ui from "@mwater/react-library/lib/bootstrap"
 import { EditHoverOver } from "./EditHoverOver"
 import { MarkersLayerDesign } from "./MarkersLayerDesign"
 import { default as Rcslider } from "rc-slider"
+import { produce } from "immer"
+import { Axis } from "../axes/Axis"
+import { JsonQLFilter } from "../JsonQLFilter"
 
 export interface MarkersLayerDesignerComponentProps {
   /** Schema to use */
@@ -22,55 +25,71 @@ export interface MarkersLayerDesignerComponentProps {
   /** Design of the marker layer */
   design: MarkersLayerDesign
   /** Called with new design */
-  onDesignChange: any
-  filters?: any
+  onDesignChange: (design: MarkersLayerDesign) => void
+  filters?: JsonQLFilter[]
 }
 
-// Designer for a markers layer
+/** Designer for a markers layer */
 export default class MarkersLayerDesignerComponent extends React.Component<MarkersLayerDesignerComponentProps> {
-  // Apply updates to design
-  update(updates: any) {
-    return this.props.onDesignChange(_.extend({}, this.props.design, updates))
+  handleTableChange = (table: string) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.table = table
+    }))
   }
-
-  // Update axes with specified changes
-  updateAxes(changes: any) {
-    const axes = _.extend({}, this.props.design.axes, changes)
-    return this.update({ axes })
-  }
-
-  handleTableChange = (table: any) => {
-    return this.update({ table })
+  handleGeometryAxisChange = (axis: Axis) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.axes.geometry = axis
+    }))
   }
-  handleGeometryAxisChange = (axis: any) => {
-    return this.updateAxes({ geometry: axis })
+  handleColorAxisChange = (axis: Axis | null) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.axes.color = axis ?? undefined
+    }))
   }
-  handleColorAxisChange = (axis: any) => {
-    return this.updateAxes({ color: axis })
+  handleFilterChange = (expr: Expr) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.filter = expr
+    }))
   }
-  handleFilterChange = (expr: any) => {
-    return this.update({ filter: expr })
+  handleColorChange = (color: string) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.color = color
+    }))
   }
-  handleColorChange = (color: any) => {
-    return this.update({ color })
+  handlePolygonBorderColorChange = (polygonBorderColor: string) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.polygonBorderColor = polygonBorderColor
+    }))
   }
-  handlePolygonBorderColorChange = (polygonBorderColor: any) => {
-    return this.update({ polygonBorderColor })
+  handlePolygonFillOpacityChange = (polygonFillOpacity: number) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.polygonFillOpacity = polygonFillOpacity / 100
+    }))
   }
-  handlePolygonFillOpacityChange = (polygonFillOpacity: any) => {
-    return this.update({ polygonFillOpacity: polygonFillOpacity / 100 })
+  handleSymbolChange = (symbol: string) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.symbol = symbol
+    }))
   }
-  handleSymbolChange = (symbol: any) => {
-    return this.update({ symbol })
+  handleMarkerSizeChange = (markerSize: number) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.markerSize = markerSize
+    }))
   }
-  handleNameChange = (e: any) => {
-    return this.update({ name: e.target.value })
+  handleLineWidthChange = (lineWidth: number) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.lineWidth = lineWidth
+    }))
   }
-  handleMarkerSizeChange = (markerSize: any) => {
-    return this.update({ markerSize })
+  handleLabelAxisChange = (axis: Axis | null) => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.axes.label = axis ?? undefined
+    }))
   }
-  handleLineWidthChange = (lineWidth: any) => {
-    return this.update({ lineWidth })
+  handleLabelPositionChange = (labelPosition: "top" | "bottom" | "left" | "right") => {
+    this.props.onDesignChange(produce(this.props.design, draft => {
+      draft.labelPosition = labelPosition
+    }))
   }
 
   renderTable() {
@@ -103,7 +122,7 @@ export default class MarkersLayerDesignerComponent extends React.Component<Marke
       const exprCompiler = new ExprCompiler(this.props.schema)
       const jsonql = exprCompiler.compileExpr({ expr: this.props.design.filter, tableAlias: "{alias}" })
       if (jsonql) {
-        filters.push({ table: (this.props.design.filter as OpExpr).table, jsonql })
+        filters.push({ table: (this.props.design.filter as OpExpr).table!, jsonql })
       }
     }
 
@@ -137,7 +156,7 @@ export default class MarkersLayerDesignerComponent extends React.Component<Marke
       const exprCompiler = new ExprCompiler(this.props.schema)
       const jsonql = exprCompiler.compileExpr({ expr: this.props.design.filter, tableAlias: "{alias}" })
       if (jsonql) {
-        filters.push({ table: (this.props.design.filter as OpExpr).table, jsonql })
+        filters.push({ table: (this.props.design.filter as OpExpr).table!, jsonql })
       }
     }
 
@@ -295,6 +314,61 @@ export default class MarkersLayerDesignerComponent extends React.Component<Marke
     )
   }
 
+  renderLabelAxis() {
+    if (!this.props.design.axes.geometry) {
+      return
+    }
+
+    const filters = _.clone(this.props.filters) || []
+
+    if (this.props.design.filter != null) {
+      const exprCompiler = new ExprCompiler(this.props.schema)
+      const jsonql = exprCompiler.compileExpr({ expr: this.props.design.filter, tableAlias: "{alias}" })
+      if (jsonql) {
+        filters.push({ table: (this.props.design.filter as OpExpr).table!, jsonql })
+      }
+    }
+
+    return (
+      <div className="mb-3">
+        <label className="text-muted"><span className="fas fa-tag" /> {T`Label (points only)`}</label>
+        <AxisComponent
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          table={this.props.design.table}
+          types={["text", "number"]}
+          aggrNeed="none"
+          value={this.props.design.axes.label}
+          onChange={this.handleLabelAxisChange}
+          filters={filters}
+        />
+      </div>
+    )
+  }
+
+  renderLabelPosition() {
+    // Only show if label axis is set
+    if (!this.props.design.axes.label) {
+      return
+    }
+
+    return (
+      <div className="mb-3">
+        <label className="text-muted">{T`Label Position`}</label>
+        <ui.Select
+          value={this.props.design.labelPosition || "bottom"}
+          options={[
+            { value: "top", label: T`Top` },
+            { value: "bottom", label: T`Bottom` },
+            { value: "left", label: T`Left` },
+            { value: "right", label: T`Right` }
+          ]}
+          onChange={this.handleLabelPositionChange}
+        />
+      </div>
+    )
+  }
+
   renderPopup() {
     if (!this.props.design.table) {
       return null
@@ -340,6 +414,8 @@ export default class MarkersLayerDesignerComponent extends React.Component<Marke
         {this.renderColor()}
         {this.renderSymbol()}
         {this.renderMarkerSize()}
+        {this.renderLabelAxis()}
+        {this.renderLabelPosition()}
         <ui.CollapsibleSection
           label={T`Shape Options`}
           labelMuted={true}

package/src/maps/ServerMapDataSource.ts

@@ -126,25 +126,6 @@ class ServerLayerDataSource implements MapLayerDataSource {
     return this.createUrl(filters, "png")
   }
 
-  // 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
-  getUtfGridUrl(design: any, filters: JsonQLFilter[]) {
-    // Handle special cases
-    if (this.options.layerView.type === "MWaterServer") {
-      return this.createLegacyUrl(design, "grid.json", filters)
-    }
-
-    // Create layer
-    const layer = LayerFactory.createLayer(this.options.layerView.type)
-
-    // If layer has tiles url directly available
-    if (layer.getLayerDefinitionType() === "TileUrl") {
-      return layer.getUtfGridUrl(this.options.layerView.design, filters)
-    }
-
-    return this.createUrl(filters, "grid.json")
-  }
-
   /** 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/SwitchableTileUrlLayer.tsx

@@ -68,17 +68,6 @@ export default class SwitchableTileUrlLayer extends Layer<SwitchableTileUrlLayer
     return option.tileUrl || null
   }
 
-  /** Gets the utf grid url for definition type "TileUrl" */
-  getUtfGridUrl(design: SwitchableTileUrlLayerDesign, filters: JsonQLFilter[]): string | null {
-    // Find active option
-    const option = design.options.find((d) => d.id === design.activeOption)
-    if (!option) {
-      return null
-    }
-
-    return option.utfGridUrl || null
-  }
-
   getLegend(options: LegendOptions<SwitchableTileUrlLayerDesign>): ReactNode {
     const { design, name } = options
     // Find active option

package/src/maps/TileUrlLayer.tsx

@@ -31,7 +31,6 @@ Design is:
   legendUrl: 
 */
 export default class TileUrlLayer extends Layer<TileUrlLayerDesign> {
-  // Gets the type of layer definition ("JsonQLCss"/"TileUrl")
   getLayerDefinitionType(): "TileUrl" {
     return "TileUrl"
   }
@@ -41,11 +40,6 @@ export default class TileUrlLayer extends Layer<TileUrlLayerDesign> {
     return design.tileUrl
   }
 
-  // Gets the utf grid url for definition type "TileUrl"
-  getUtfGridUrl(design: any, filters: any) {
-    return null
-  }
-
   // Get min and max zoom levels
   getMinZoom(design: any) {
     return design.minZoom

package/src/maps/VectorMapViewComponent.tsx

@@ -1,6 +1,6 @@
 import _, { find } from "lodash"
 import { LayerSpecification, MapLayerMouseEvent } from "maplibre-gl"
-import React, { CSSProperties, ReactNode, useEffect, useMemo, useState } from "react"
+import React, { CSSProperties, ReactNode, useCallback, useEffect, useMemo, useState } from "react"
 import { useRef } from "react"
 import { JsonQLFilter } from "../JsonQLFilter"
 import { default as LayerFactory } from "./LayerFactory"
@@ -75,7 +75,18 @@ export function VectorMapViewComponent(props: VectorMapViewComponentProps) {
   const locale = props.locale || props.design.locale || "en"
 
   // Translate function to use 
-  const translate = props.translate || ((input: string) => input)
+  const translate = useCallback((input: string) => {
+    // Use passed in translate function if present
+    if (props.translate) {
+      return props.translate(input)
+    }
+    // If locale is the same as the design locale, don't translate
+    if (locale === props.design.locale) {
+      return input
+    }
+    // Otherwise, use translation from design
+    return props.design.translations?.[locale]?.[input] ?? input
+  }, [props.translate, props.design.translations, props.design.locale, locale])
 
   // Last feature that mouse entered
   const lastFeature = useRef<string>()

package/src/maps/vectorMaps.tsx

@@ -7,6 +7,9 @@ import "maplibre-gl/dist/maplibre-gl.css"
 import "./VectorMapViewComponent.css"
 import React from "react"
 
+// Re-export maplibregl for consumers
+export { default as maplibregl } from "maplibre-gl"
+
 /** Set to true to enable printing by preserving the drawing buffer */
 let printingModeEnabled = false
 
@@ -29,11 +32,6 @@ export function getMapTilerApiKey(): string {
   return mapTilerApiKey
 }
 
-/** Check if vector maps are enabled by setting API key */
-export function areVectorMapsEnabled() {
-  return mapTilerApiKey !== ""
-}
-
 export type BaseLayer = "bing_road" | "bing_aerial" | "cartodb_positron" | "cartodb_dark_matter" | "blank"
 
 /** Loads a vector map, refreshing the WebGL context as needed */
@@ -106,7 +104,10 @@ export function useVectorMap(options: {
           [-179.9, -85], // Southwest coordinates
           [179.9, 85] // Northeast coordinates
         ],
-        preserveDrawingBuffer: printingModeEnabled
+        // In maplibre-gl v5+, WebGL context options must be in canvasContextAttributes
+        canvasContextAttributes: {
+          preserveDrawingBuffer: printingModeEnabled
+        }
       }
 
       if (bounds) {
@@ -143,10 +144,12 @@ export function useVectorMap(options: {
         // Check if known
         const mapSymbol = getMapSymbols().find((s) => s.value == ev.id)
         if (mapSymbol) {
-          m.loadImage(mapSymbol.url, (err: any, image: any) => {
-            if (image && !m.hasImage(mapSymbol.value)) {
-              m.addImage(mapSymbol.value, image, { sdf: true })
+          m.loadImage(mapSymbol.url).then((response) => {
+            if (response && response.data && !m.hasImage(mapSymbol.value)) {
+              m.addImage(mapSymbol.value, response.data, { sdf: true })
             }
+          }).catch((err) => {
+            console.error("Error loading map symbol:", err)
           })
         }
       })

package/src/widgets/MapWidget.tsx

@@ -123,12 +123,14 @@ class MapWidgetComponent extends React.Component<MapWidgetComponentProps, MapWid
     const MapDesignerComponent = require("../maps/MapDesignerComponent").default
 
     // Create editor
+    // Note: enableTranslations is false because translations are managed at the dashboard level
     const editor = <MapDesignerComponent
       schema={this.props.schema}
       dataSource={this.props.dataSource}
       design={this.state.editDesign}
       onDesignChange={this.handleEditDesignChange}
       filters={this.props.filters}
+      enableTranslations={false}
     />
 
     // Create map (maxing out at half of width of screen)

package/src/maps/MapComponent.ts

@@ -1,311 +0,0 @@
-import _ from "lodash"
-import React, { ReactNode } from "react"
-const R = React.createElement
-
-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 } from "../JsonQLFilter"
-import QuickfilterCompiler from "../quickfilter/QuickfilterCompiler"
-import QuickfiltersComponent from "../quickfilter/QuickfiltersComponent"
-import { getCompiledFilters, getFilterableTables } from "./MapUtils"
-import { LocaleContext } from "@mwater/expressions-ui"
-
-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
-}
-
-interface MapComponentState {
-  undoStack: UndoStack
-  transientDesign: MapDesign
-  zoomLocked: boolean
-
-  /** Values of quickfilters */
-  quickfiltersValues: any[] | null
-
-  /** True to hide quickfilters */
-  hideQuickfilters: boolean
-}
-
-/** Map with designer on right */
-export default class MapComponent extends React.Component<MapComponentProps, MapComponentState> {
-  static contextType = LocaleContext
-
-  constructor(props: MapComponentProps) {
-    super(props)
-    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
-    }
-  }
-
-  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 })
-  }
-
-  renderActionLinks() {
-    return R(
-      "div",
-      null,
-      this.props.onDesignChange != null
-        ? [
-          R(
-            "a",
-            { key: "lock", className: "btn btn-link btn-sm", onClick: this.handleZoomLockClick },
-            R("span", {
-              className: `fa ${this.state.zoomLocked ? "fa-lock red" : "fa-unlock green"}`,
-              style: { marginRight: 5 }
-            }),
-            R(PopoverHelpComponent, { placement: "bottom" }, T`Changes to zoom level wont be saved in locked mode`)
-          ),
-          R(
-            "a",
-            {
-              key: "undo",
-              className: `btn btn-link btn-sm ${!this.state.undoStack.canUndo() ? "disabled" : ""}`,
-              onClick: this.handleUndo
-            },
-            R("span", { className: "fas fa-caret-left" }),
-            R("span", { className: "hide-600px" }, " ", T`Undo`)
-          ),
-          " ",
-          R(
-            "a",
-            {
-              key: "redo",
-              className: `btn btn-link btn-sm ${!this.state.undoStack.canRedo() ? "disabled" : ""}`,
-              onClick: this.handleRedo
-            },
-            R("span", { className: "fas fa-caret-right" }),
-            R("span", { className: "hide-600px" }, " ", T`Redo`)
-          )
-        ]
-        : undefined,
-      this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
-      ? R(
-        "a",
-        { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters },
-        R("span", { className: "fa fa-filter" }),
-        R("span", { className: "hide-600px" }, " ", T`Show Quickfilters`)
-      )
-      : undefined,
-      this.props.extraTitleButtonsElem,
-      R("a", { key: "toggleDesign", className: "btn btn-link btn-sm", onClick: this.handleToggleDesignPanel, alt: T`Toggle design panel` },
-        this.getDesign().hideDesignPanel ?
-          R("span", { className: "fas fa-angle-double-left" })
-        : R("span", { className: "fas fa-angle-double-right" }))
-    )
-  }
-
-  renderHeader() {
-    return R(
-      "div",
-      {
-        style: {
-          padding: 4,
-          borderBottom: "solid 1px #e8e8e8",
-          gridArea: "header"
-        }
-      },
-      R("div", { style: { float: "right" } }, this.renderActionLinks()),
-      this.props.titleElem
-    )
-  }
-
-  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
-      )
-    )
-
-    return React.createElement(
-      AutoSizeComponent,
-      { injectWidth: true, injectHeight: true },
-      (size: {
-        width?: number;
-        height?: number;
-      }) => {
-        return React.createElement(MapViewComponent, {
-          mapDataSource: this.props.mapDataSource,
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          design: this.getDesign(),
-          onDesignChange: this.handleDesignChange,
-          zoomLocked: this.state.zoomLocked,
-          onRowClick: this.props.onRowClick,
-          extraFilters: filters,
-          locale: this.context,
-          width: size.width!,
-          height: size.height!
-        })
-      }
-    )
-  }
-
-  // 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 R("div", { style: { gridArea: "quickfilters", borderBottom: "solid 1px #e8e8e8" } },
-      R(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 })
-      })
-    )
-  }
-
-  renderDesigner() {
-    return R("div", { style: { gridArea: "designer", borderLeft: "solid 2px #e8e8e8", overflowY: 'scroll' } },
-      this.props.onDesignChange ?
-        React.createElement(MapDesignerComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          design: this.getDesign(),
-          onDesignChange: this.handleDesignChange,
-          enableQuickfilters: this.props.enableQuickfilters
-        })
-        :
-        React.createElement(MapControlComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          design: this.getDesign(),
-          onDesignChange: this.handleDesignChange
-        })
-    )
-  }
-
-  render() {
-    const designerVisible = !this.getDesign().hideDesignPanel
-    return R(
-      "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(),
-      R("div", { style: { width: "100%", height: "100%", gridArea: "view", overflow: "hidden" } }, this.renderView()),
-      designerVisible ? this.renderDesigner() : null
-    )
-  }
-}