@mwater/visualization 5.1.0 → 5.3.0

package/src/datagrids/DatagridDesignerComponent.tsx

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React, { useMemo } from "react"
 const R = React.createElement
@@ -22,6 +21,7 @@ import { getFormatOptions } from "../valueFormatter"
 import { getDefaultFormat } from "../valueFormatter"
 import { DatagridDesignColumn } from "./DatagridDesign"
 import { DatagridDesign } from ".."
+import { GlobalFiltersElementFactoryContext } from "../MWaterContextComponent"
 
 export interface DatagridDesignerComponentProps {
   /** schema to use */
@@ -36,8 +36,6 @@ export interface DatagridDesignerComponentProps {
 
 // Designer for the datagrid. Currenly allows only single-table designs (no subtable rows)
 export default class DatagridDesignerComponent extends React.Component<DatagridDesignerComponentProps> {
-  static contextTypes = { globalFiltersElementFactory: PropTypes.func }
-
   handleTableChange = (table: any) => {
     const design = {
       table,
@@ -93,20 +91,24 @@ export default class DatagridDesignerComponent extends React.Component<DatagridD
               value: this.props.design.filter,
               onChange: this.handleFilterChange
             }),
-            this.context.globalFiltersElementFactory
-              ? R(
-                  "div",
-                  { style: { marginTop: 20 } },
-                  this.context.globalFiltersElementFactory({
-                    schema: this.props.schema,
-                    dataSource: this.props.dataSource,
-                    filterableTables: [this.props.design.table],
-                    globalFilters: this.props.design.globalFilters,
-                    onChange: this.handleGlobalFiltersChange,
-                    nullIfIrrelevant: true
-                  })
-                )
-              : undefined
+            <GlobalFiltersElementFactoryContext.Consumer>
+              {(globalFiltersElementFactory) =>
+                globalFiltersElementFactory
+                  ? R(
+                      "div",
+                      { style: { marginTop: 20 } },
+                      globalFiltersElementFactory({
+                        schema: this.props.schema,
+                        dataSource: this.props.dataSource,
+                        filterableTables: [this.props.design.table!],
+                        globalFilters: this.props.design.globalFilters,
+                        onChange: this.handleGlobalFiltersChange,
+                        nullIfIrrelevant: true
+                      })
+                    )
+                  : undefined
+              }
+            </GlobalFiltersElementFactoryContext.Consumer>
           )
         },
         {
@@ -562,7 +564,9 @@ class ColumnDesignerComponent extends React.Component<ColumnDesignerComponentPro
         }),
         this.renderSplit(),
         this.renderFormat(),
-        error ? R("i", { className: "fa fa-exclamation-circle text-danger" }) : undefined
+        error ? <span className="text-danger">
+          <i className="fa fa-exclamation-circle" /> {error}
+        </span> : undefined
       ),
 
       R(

package/src/datagrids/DatagridViewComponent.ts

@@ -191,8 +191,8 @@ export default class DatagridViewComponent extends React.Component<
         }
 
         const newRows = produce(this.state.rows, draft => {
-          if (rows[0]) {
-            draft[rowIndex] = rows[0]    
+          if (rows![0]) {
+            draft[rowIndex] = rows![0]    
           }
           else {
             // If row missing, remove it from list
@@ -308,7 +308,7 @@ export default class DatagridViewComponent extends React.Component<
   }
 
   handleRowDoubleClick = (ev: any, rowIndex: any) => {
-    if (this.props.onRowDoubleClick != null && this.state.rows[rowIndex].id) {
+    if (this.props.onRowDoubleClick != null && this.state.rows[rowIndex]?.id) {
       this.props.onRowDoubleClick(this.props.design.table!, this.state.rows[rowIndex].id, rowIndex)
     }
   }

package/src/datagrids/ExprCellComponent.ts

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React from "react"
 const R = React.createElement

package/src/datagrids/FindReplaceModalComponent.ts

@@ -24,7 +24,7 @@ export interface FindReplaceModalComponentProps {
 
   /** Update cell values by updating set of expressions and values */
   updateExprValues: (tableId: string, rowUpdates: RowUpdate[]) => Promise<void>
- 
+
   onUpdate: () => void
 }
 
@@ -73,6 +73,18 @@ export default class FindReplaceModalComponent extends React.Component<
     // Get expr of replace column
     const replaceExpr = _.findWhere(this.props.design.columns, { id: this.state.replaceColumn })!.expr
 
+    const exprType = exprUtils.getExprType(this.state.withExpr)
+    let compiledWithExpr = exprCompiler.compileExpr({ expr: this.state.withExpr, tableAlias: "main" })
+    if (exprType === "geometry") {
+      compiledWithExpr = {
+        type: "op",
+        op: "ST_AsGeoJSON",
+        exprs: [
+          { type: "op", op: "ST_Transform", exprs: [{ type: "op", op: "::geometry", exprs: [compiledWithExpr] }, 4326] }
+        ]
+      }
+    }
+
     // Get ids and with value, filtered by filters, design.filter and conditionExpr (if present)
     const query: JsonQLSelectQuery = {
       type: "query",
@@ -88,7 +100,7 @@ export default class FindReplaceModalComponent extends React.Component<
         },
         {
           type: "select",
-          expr: exprCompiler.compileExpr({ expr: this.state.withExpr, tableAlias: "main" }),
+          expr: compiledWithExpr,
           alias: "withValue"
         }
       ],
@@ -120,7 +132,12 @@ export default class FindReplaceModalComponent extends React.Component<
       }
 
       // Create expr
-      let expr: Expr = { type: "op", op: filter.op, table: design.table!, exprs: [columnExpr as Expr].concat(filter.exprs) }
+      let expr: Expr = {
+        type: "op",
+        op: filter.op,
+        table: design.table!,
+        exprs: [columnExpr as Expr].concat(filter.exprs)
+      }
 
       // Clean expr
       expr = exprCleaner.cleanExpr(expr, { table: design.table! })
@@ -147,16 +164,19 @@ export default class FindReplaceModalComponent extends React.Component<
       }
 
       // Perform updates
-      await this.props.updateExprValues(this.props.design.table!, rows.map(row => ({
-        primaryKey: row.id,
-        expr: replaceExpr,
-        value: row.withValue
-      })))
-      
+      await this.props.updateExprValues(
+        this.props.design.table!,
+        rows.map(row => ({
+          primaryKey: row.id,
+          expr: replaceExpr,
+          value: exprType === "geometry" ? JSON.parse(row.withValue) : row.withValue
+        }))
+      )
+
       alert(T("Successfully replaced {0} values", rows.length))
       this.setState({ open: false })
       this.props.onUpdate()
-    } catch(error) {
+    } catch (error) {
       alert(`Error: ${error.message}`)
     } finally {
       this.setState({ busy: false })
@@ -183,7 +203,8 @@ export default class FindReplaceModalComponent extends React.Component<
           else: replaceColumn.expr
         }
 
-        replaceColumn.label = replaceColumn.label || exprUtils.summarizeExpr(replaceColumn.expr, this.props.design.locale)
+        replaceColumn.label =
+          replaceColumn.label || exprUtils.summarizeExpr(replaceColumn.expr, this.props.design.locale)
       }
 
       // Add filter
@@ -193,13 +214,9 @@ export default class FindReplaceModalComponent extends React.Component<
             type: "op",
             op: "and",
             table: this.props.design.table!,
-            exprs: [
-              draft.filter,
-              this.state.conditionExpr
-            ]
+            exprs: [draft.filter, this.state.conditionExpr]
           }
-        }
-        else {
+        } else {
           draft.filter = this.state.conditionExpr
         }
       }
@@ -228,9 +245,9 @@ export default class FindReplaceModalComponent extends React.Component<
     // Determine which columns are replace-able. Excludes subtables and aggregates
     const replaceColumns = _.filter(
       this.props.design.columns,
-      (column) => !column.subtable && exprUtils.getExprAggrStatus(column.expr) === "individual"
+      column => !column.subtable && exprUtils.getExprAggrStatus(column.expr) === "individual"
     )
-    const replaceColumnOptions = _.map(replaceColumns, (column) => ({
+    const replaceColumnOptions = _.map(replaceColumns, column => ({
       value: column.id,
       label: column.label || exprUtils.summarizeExpr(column.expr, this.props.design.locale)
     }))
@@ -263,7 +280,7 @@ export default class FindReplaceModalComponent extends React.Component<
           placeholder: T("Select Column..."),
           styles: {
             // Keep menu above fixed data table headers
-            menu: (style) => _.extend({}, style, { zIndex: 2 })
+            menu: style => _.extend({}, style, { zIndex: 2 })
           }
         })
       ),
@@ -282,7 +299,7 @@ export default class FindReplaceModalComponent extends React.Component<
               dataSource: this.props.dataSource,
               table: this.props.design.table!,
               value: this.state.withExpr,
-              onChange: (value) => this.setState({ withExpr: value }),
+              onChange: value => this.setState({ withExpr: value }),
               types: [exprUtils.getExprType(replaceExpr)!],
               enumValues: exprUtils.getExprEnumValues(replaceExpr) || undefined,
               idTable: exprUtils.getExprIdTable(replaceExpr) || undefined,
@@ -304,7 +321,7 @@ export default class FindReplaceModalComponent extends React.Component<
           dataSource: this.props.dataSource,
           table: this.props.design.table!,
           value: this.state.conditionExpr,
-          onChange: (value) => this.setState({ conditionExpr: value }),
+          onChange: value => this.setState({ conditionExpr: value }),
           types: ["boolean"],
           placeholder: T("All Rows")
         })

package/src/datagrids/ServerDatagridDataSource.ts

@@ -1,8 +1,9 @@
-import $ from "jquery"
-import querystring from "querystring"
 import DatagridDataSource from "./DatagridDataSource"
 import compressJson from "../compressJson"
-import { DatagridDesign } from ".."
+import querystring from "querystring"
+import { DatagridDesign, JsonQLFilter } from ".."
+import { QuickfiltersDataSource } from "../quickfilter/QuickfiltersDataSource"
+import { Expr, Row } from "@mwater/expressions"
 
 export interface ServerDatagridDataSourceOptions {
   /** API url to use for talking to mWater server */
@@ -22,7 +23,7 @@ export interface ServerDatagridDataSourceOptions {
 }
 
 /** Uses mWater server to get datagrid data to allow sharing with unprivileged users */
-export default class ServerDatagridDataSource extends DatagridDataSource {
+export default class ServerDatagridDataSource implements DatagridDataSource {
   options: ServerDatagridDataSourceOptions
 
   // options:
@@ -32,49 +33,92 @@ export default class ServerDatagridDataSource extends DatagridDataSource {
   //   datagridId: datagrid id to use on server
   //   rev: revision to use to allow caching
   constructor(options: ServerDatagridDataSourceOptions) {
-    super()
     this.options = options
   }
 
   // Get the data that the widget needs. The widget should implement getData method (see above) to get the data from the server
   //  design: design of the widget. Ignored in the case of server-side rendering
   //  filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
-  getRows(design: DatagridDesign, offset: any, limit: any, filters: any, callback: any) {
-    const query = {
+  async getRows(
+    design: DatagridDesign,
+    offset: number,
+    limit: number,
+    filters: JsonQLFilter[] | undefined,
+    callback: (error: any, rows?: Row[]) => void
+  ) {
+    const query: Record<string, any> = {
       client: this.options.client,
       share: this.options.share,
-      filters: compressJson(filters),
       rev: this.options.rev,
       offset,
       limit
     }
 
-    const url = this.options.apiUrl + `datagrids/${this.options.datagridId}/data?` + querystring.stringify(query)
-
-    return $.getJSON(url, (data: any) => {
-      return callback(null, data)
-    }).fail((xhr: any) => {
-      console.log(xhr.responseText)
-      return callback(new Error(xhr.responseText))
-    })
+    const filtersJson = JSON.stringify(filters)
+    const baseUrl = this.options.apiUrl + `datagrids/${this.options.datagridId}/data`
+
+    try {
+      let response: Response
+
+      // If the filters are too large, we need to send them in the body
+      if (filtersJson.length > 5000) {
+        response = await fetch(baseUrl + '?' + querystring.stringify(query), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ filters: compressJson(filters) }),
+        })
+      } else {
+        query.filters = compressJson(filters)
+        const url = baseUrl + '?' + querystring.stringify(query)
+        response = await fetch(url)
+      }
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+      const data = await response.json()
+      callback(null, data)
+    } catch (error) {
+      console.error(error)
+      callback(error)
+    }
   }
 
-  countRows(design: DatagridDesign, filters: any, callback: any) {
-    const query = {
+  async countRows(design: DatagridDesign, filters: any, callback: any) {
+    const query: Record<string, any> = {
       client: this.options.client,
       share: this.options.share,
-      filters: compressJson(filters),
-      rev: this.options.rev,
+      rev: this.options.rev
     }
 
-    const url = this.options.apiUrl + `datagrids/${this.options.datagridId}/summary?` + querystring.stringify(query)
-
-    return $.getJSON(url, (data: any) => {
-      return callback(null, data?.[0]?.cnt)
-    }).fail((xhr: any) => {
-      console.log(xhr.responseText)
-      return callback(new Error(xhr.responseText))
-    })
+    const filtersJson = JSON.stringify(filters)
+    const baseUrl = this.options.apiUrl + `datagrids/${this.options.datagridId}/summary`
+
+    try {
+      let response: Response
+
+      // If the filters are too large, we need to send them in the body
+      if (filtersJson.length > 5000) {
+        response = await fetch(baseUrl + '?' + querystring.stringify(query), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ filters: compressJson(filters) }),
+        })
+      } else {
+        query.filters = compressJson(filters)
+        const url = baseUrl + '?' + querystring.stringify(query)
+        response = await fetch(url)
+      }
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+      const data = await response.json()
+      callback(null, data?.[0]?.cnt)
+    } catch (error) {
+      console.error(error)
+      callback(error)
+    }
   }
 
   getQuickfiltersDataSource() {
@@ -99,7 +143,7 @@ interface ServerQuickfilterDataSourceOptions {
   rev?: number
 }
 
-class ServerQuickfilterDataSource {
+class ServerQuickfilterDataSource implements QuickfiltersDataSource {
   options: ServerQuickfilterDataSourceOptions
   // options:
   //   apiUrl: API url to use for talking to mWater server
@@ -112,26 +156,44 @@ class ServerQuickfilterDataSource {
   }
 
   // Gets the values of the quickfilter at index
-  getValues(index: any, expr: any, filters: any, offset: any, limit: any, callback: any) {
-    const query = {
+  async getValues(index: number, expr: Expr, filters: JsonQLFilter[], offset: number | null, limit: number, callback: (error: any, values?: any[]) => void) {
+    const query: Record<string, any> = {
       client: this.options.client,
       share: this.options.share,
-      filters: compressJson(filters),
-      offset,
+      offset: offset ?? 0,
       limit,
       rev: this.options.rev
     }
 
-    const url =
-      this.options.apiUrl +
-      `datagrids/${this.options.datagridId}/quickfilters/${index}/values?` +
-      querystring.stringify(query)
-
-    return $.getJSON(url, (data: any) => {
-      return callback(null, data)
-    }).fail((xhr: any) => {
-      console.log(xhr.responseText)
-      return callback(new Error(xhr.responseText))
-    })
+    try {
+      let response: Response
+
+      const url = this.options.apiUrl + `datagrids/${this.options.datagridId}/quickfilters/${index}/values`
+
+      const filtersJson = JSON.stringify(filters)
+
+      // If the filters are too large, we need to send them in the body
+      if (filtersJson.length > 5000) {
+        query.filters = compressJson(filters)
+        response = await fetch(url + '?' + querystring.stringify(query), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ filters: compressJson(filters) }),
+        })
+      } else {
+        query.filters = filtersJson
+        response = await fetch(url + '?' + querystring.stringify(query))
+      }
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      const data = await response.json()
+      callback(null, data)
+    } catch (error) {
+      console.error(error)
+      callback(error)
+    }
   }
-}
+}

package/src/demo.ts

@@ -42,14 +42,14 @@ $(function () {
       "div",
       { className: "container-fluid", style: { height: "100%", paddingLeft: 0, paddingRight: 0 } },
       R("style", null, "html, body, #main { height: 100% }"),
-      R(MWaterDirectMapPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
+      R(MWaterDirectDashboardPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
+      //R(MWaterDashboardPane, {apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1), dashboardId: "38d803820a7a4bf5a1d5ef19cf8c64f3"})
+      // R(MWaterDirectMapPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
       // R(RichTextPane)
       // R(MWaterMapPane, {apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1)})
       // R(TestPane, apiUrl: "https://api.mwater.co/v3/")
       // R(MWaterDashboardPane, apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1), dashboardId: "a855eb0587d845d3ac27aed03c463976", share: "817c76088c7649ec8cc0b8193e547a09")
       // R(MWaterDashboardPane, {apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1), dashboardId: "f99f206ddd4442a981761b8342c58058"})
-      // R(MWaterDashboardPane, {apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1), dashboardId: "38d803820a7a4bf5a1d5ef19cf8c64f3"})
-      // R(MWaterDirectDashboardPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
       //R(MWaterDirectDashboardPane, { apiUrl: "http://localhost:1234/v3/", client: window.location.hash.substr(1) })
       //R(MWaterDatagridPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
       // R(MWaterDirectMapPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
@@ -471,7 +471,7 @@ class WaterOrgDashboardPane extends React.Component {
   }
 
   componentWillMount() {
-    const url = this.props.apiUrl + "jsonql/schema"
+    const url = this.props.apiUrl + "schema"
     return $.getJSON(url, (schemaJson) => {
       const schema = new Schema(schemaJson)
       const dataSource = new MWaterDataSource(this.props.apiUrl, null, { serverCaching: false, localCaching: true })

package/src/index.css

@@ -1,3 +1,8 @@
+/*
+Lato, Lora, Inter, Merriweather, Roboto
+*/
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lora:ital,wght@0,400..700;1,400..700&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
 /** Plain link with cursor pointer. Can be span or a */
 .link-plain {
   color: var(--bs-primary);

package/src/index.ts

@@ -41,6 +41,7 @@ export { default as MWaterContextComponent } from "./MWaterContextComponent"
 
 export { default as mWaterLoader } from "./mWaterLoader"
 
+export { WidgetDataSource } from "./widgets/WidgetDataSource"
 export { default as DirectWidgetDataSource } from "./widgets/DirectWidgetDataSource"
 
 import "leaflet/dist/leaflet.css"
@@ -50,7 +51,6 @@ import "./layouts/decorated-block.css"
 import "react-datepicker/dist/react-datepicker.css"
 import "billboard.js/dist/billboard.css"
 import "./index.css"
-import "./layout-styles.css"
 
 export { setMapTilerApiKey } from "./maps/vectorMaps"
 
@@ -75,6 +75,7 @@ export { default as AxisBuilder } from "./axes/AxisBuilder"
 export { default as ColorSchemeFactory } from "./ColorSchemeFactory"
 export { default as DatagridComponent } from "./datagrids/DatagridComponent"
 export { default as DatagridViewComponent } from "./datagrids/DatagridViewComponent"
+export { default as DatagridDataSource } from "./datagrids/DatagridDataSource"
 export { default as ServerDashboardDataSource } from "./dashboards/ServerDashboardDataSource"
 export { default as ServerMapDataSource } from "./maps/ServerMapDataSource"
 export { default as DirectMapDataSource } from "./maps/DirectMapDataSource"

package/src/layouts/LayoutManager.ts

@@ -1,47 +1,56 @@
 import { ReactElement, ReactNode } from "react"
-import { BlocksLayoutOptions } from "../dashboards/layoutOptions"
+import { BlocksLayoutOptions, DashboardTheme } from "../dashboards/layoutOptions"
 
-/** Responsible for laying out items, rendering widgets and holding them in a data structure that is layout manager specific */
-export default class LayoutManager {
-  /** Renders the layout as a react element */
-  renderLayout(options: {
-    /** width of layout */
-    width?: number
+/** Options for rendering a widget */
+export interface RenderWidgetOptions {
+  id: string
+  type: string
+
+  design: any
+  onDesignChange?: (design: any) => void
+
+  width: number
+
+  /** height of widget. If not specified, is auto height */
+  height?: number
+
+  /** Priority of widget. Higher priority widgets are rendered first */
+  priority?: number
+}
+
+export interface RenderLayoutOptions {
+  /** width of layout */
+  width?: number
 
-    /** opaque items object that layout manager understands */
-    items: any
+  /** opaque items object that layout manager understands */
+  items: any
 
-    /** Called when items changes */
-    onItemsChange?: (items: any) => void
+  /** Called when items changes */
+  onItemsChange?: (items: any) => void
 
-    /** called with ({ id:, type:, design:, onDesignChange:, width:, height:  }) */
-    renderWidget: (options: {
-      id: string
-      type: string
-      design: any
-      onDesignChange: (design: any) => void
-      width: number
-      height: number
-    }) => ReactElement
+  /** called with ({ id:, type:, design:, onDesignChange:, width:, height:  }) */
+  renderWidget: (options: RenderWidgetOptions) => ReactElement
 
-    /** style to use for layout. null for default */
-    style: string | null
+  /** layout options to use */
+  layoutOptions: BlocksLayoutOptions
 
-    /** layout options to use */
-    layoutOptions: BlocksLayoutOptions | null
+  /** true to disable maps */
+  disableMaps?: boolean
 
-    /** true to disable maps */
-    disableMaps?: boolean
+  /** clipboard contents */
+  clipboard?: any
 
-    /** clipboard contents */
-    clipboard: any
+  /** called when clipboard is changed */
+  onClipboardChange?: (clipboard: any) => void
 
-    /** called when clipboard is changed */
-    onClipboardChange: (clipboard: any) => void
+  /** message to display if clipboard can't be pasted into current dashboard */
+  cantPasteMessage?: string
+}
 
-    /** message to display if clipboard can't be pasted into current dashboard */
-    cantPasteMessage: string
-  }): ReactNode {
+/** Responsible for laying out items, rendering widgets and holding them in a data structure that is layout manager specific */
+export default class LayoutManager {
+  /** Renders the layout as a react element */
+  renderLayout(options: RenderLayoutOptions): ReactNode {
     return null
   }
 
@@ -61,19 +70,12 @@ export default class LayoutManager {
   }
 
   static createLayoutManager(type: string): LayoutManager {
-    // Default is old grid type
-    type = type || "grid"
+    type = type || "blocks"
 
     switch (type) {
-      case "grid": // Old one
-        var GridLayoutManager = require("./grid/GridLayoutManager").default
-        return new GridLayoutManager()
-        break
-
-      case "blocks": // New one
+      case "blocks": 
         var BlocksLayoutManager = require("./blocks/BlocksLayoutManager").default
         return new BlocksLayoutManager()
-        break
 
       default:
         throw new Error(`Unknown layout manager type ${type}`)