@mwater/visualization 5.5.0 → 5.6.0

package/src/maps/ChoroplethLayerDesigner.tsx

@@ -1,10 +1,9 @@
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
 import { produce } from "immer"
 
 import { ExprComponent, FilterExprComponent } from "@mwater/expressions-ui"
-import { ExprCompiler, Schema, DataSource, Expr, OpExpr } from "@mwater/expressions"
+import { ExprCompiler, Schema, DataSource, Expr, OpExpr, ExprUtils } from "@mwater/expressions"
 import AxisComponent from "./../axes/AxisComponent"
 import { TableSelectComponent } from "@mwater/expressions-ui"
 import ColorComponent from "../ColorComponent"
@@ -18,7 +17,7 @@ import { Axis } from "../axes/Axis"
 
 import AdminScopeAndDetailLevelComponent from "./AdminScopeAndDetailLevelComponent"
 import ScopeAndDetailLevelComponent from "./ScopeAndDetailLevelComponent"
-import EditHoverOver from "./EditHoverOver"
+import { EditHoverOver } from "./EditHoverOver"
 
 // Designer for a choropleth layer
 export default class ChoroplethLayerDesigner extends React.Component<{
@@ -188,9 +187,10 @@ export default class ChoroplethLayerDesigner extends React.Component<{
   }
 
   renderRegionsTable() {
+    // Regions tables are either "regions." or "regions_<name>" with a shape column
     let options = _.map(
-      _.filter(this.props.schema.getTables(), table => table.id.startsWith("regions.")),
-      table => ({ value: table.id, label: table.name.en })
+      _.filter(this.props.schema.getTables(), table => table.id.startsWith("regions.") || (table.id.startsWith("regions_") && this.props.schema.getColumn(table.id, "shape") != null)),
+      table => ({ value: table.id, label: ExprUtils.localizeString(table.name) })
     )
 
     const regionsTable = this.props.design.regionsTable || "admin_regions"
@@ -253,34 +253,34 @@ export default class ChoroplethLayerDesigner extends React.Component<{
     const regionsTable = this.props.design.regionsTable || "admin_regions"
 
     if (regionsTable === "admin_regions") {
-      return R(AdminScopeAndDetailLevelComponent, {
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        scope: this.props.design.scope as number | undefined,
-        scopeLevel: this.props.design.scopeLevel || 0,
-        detailLevel: this.props.design.detailLevel,
-        onScopeAndDetailLevelChange: this.handleScopeAndDetailLevelChange
-      })
+      return <AdminScopeAndDetailLevelComponent
+        schema={this.props.schema}
+        dataSource={this.props.dataSource}
+        scope={this.props.design.scope as number | undefined}
+        scopeLevel={this.props.design.scopeLevel || 0}
+        detailLevel={this.props.design.detailLevel}
+        onScopeAndDetailLevelChange={this.handleScopeAndDetailLevelChange}
+      />
     } else {
-      return R(ScopeAndDetailLevelComponent, {
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        scope: this.props.design.scope as string | undefined,
-        scopeLevel: this.props.design.scopeLevel,
-        detailLevel: this.props.design.detailLevel,
-        onScopeAndDetailLevelChange: this.handleScopeAndDetailLevelChange,
-        regionsTable
-      })
+      return <ScopeAndDetailLevelComponent
+        schema={this.props.schema}
+        dataSource={this.props.dataSource}
+        scope={this.props.design.scope as string | undefined}
+        scopeLevel={this.props.design.scopeLevel}
+        detailLevel={this.props.design.detailLevel}
+        onScopeAndDetailLevelChange={this.handleScopeAndDetailLevelChange}
+        regionsTable={regionsTable}
+      />
     }
   }
 
   renderDisplayNames() {
-    return R(
-      "div",
-      { className: "mb-3" },
-      <ui.Checkbox value={this.props.design.displayNames} onChange={value => this.handleDisplayNamesChange(value)}>
-        {T`Display Region Names`}
-      </ui.Checkbox>
+    return (
+      <div className="mb-3">
+        <ui.Checkbox value={this.props.design.displayNames} onChange={value => this.handleDisplayNamesChange(value)}>
+          {T`Display Region Names`}
+        </ui.Checkbox>
+      </div>
     )
   }
 
@@ -290,19 +290,20 @@ export default class ChoroplethLayerDesigner extends React.Component<{
       return null
     }
 
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Fill Color`),
-
-      R(
-        "div",
-        null,
-        R(ColorComponent, {
-          color: this.props.design.color,
-          onChange: this.handleColorChange
-        })
-      )
+    return (
+      <div className="mb-3">
+        <label className="text-muted">
+          <span className="fas fa-tint" />
+          {T`Fill Color`}
+        </label>
+
+        <div>
+          <ColorComponent
+            color={this.props.design.color}
+            onChange={this.handleColorChange}
+          />
+        </div>
+      </div>
     )
   }
 
@@ -328,28 +329,29 @@ export default class ChoroplethLayerDesigner extends React.Component<{
 
       const table = this.props.design.table
 
-      return R(
-        "div",
-        null,
-        R(
-          "div",
-          { className: "mb-3" },
-          R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Color By Data`),
-
-          R(AxisComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table,
-            types: ["text", "enum", "boolean", "date"],
-            aggrNeed: "required",
-            value: this.props.design.axes.color,
-            defaultColor: this.props.design.color,
-            showColorMap: true,
-            onChange: this.handleColorAxisChange,
-            allowExcludedValues: true,
-            filters: filters
-          })
-        )
+      return (
+        <div>
+          <div className="mb-3">
+            <label className="text-muted">
+              <span className="fas fa-tint" />
+              {T`Color By Data`}
+            </label>
+
+            <AxisComponent
+              schema={this.props.schema}
+              dataSource={this.props.dataSource}
+              table={this.props.design.table}
+              types={["text", "enum", "boolean", "date"]}
+              aggrNeed="required"
+              value={this.props.design.axes.color}
+              defaultColor={this.props.design.color}
+              showColorMap={true}
+              onChange={this.handleColorAxisChange}
+              allowExcludedValues={true}
+              filters={filters}
+            />
+          </div>
+        </div>
       )
     } else {
       // direct mode
@@ -380,28 +382,29 @@ export default class ChoroplethLayerDesigner extends React.Component<{
         })
       }
 
-      return R(
-        "div",
-        null,
-        R(
-          "div",
-          { className: "mb-3" },
-          R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Color By Data`),
-
-          R(AxisComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: regionsTable,
-            types: ["text", "enum", "boolean", "date"],
-            aggrNeed: "none",
-            value: this.props.design.axes.color,
-            defaultColor: this.props.design.color,
-            showColorMap: true,
-            onChange: this.handleColorAxisChange,
-            allowExcludedValues: true,
-            filters: filters
-          })
-        )
+      return (
+        <div>
+          <div className="mb-3">
+            <label className="text-muted">
+              <span className="fas fa-tint" />
+              {T`Color By Data`}
+            </label>
+
+            <AxisComponent
+              schema={this.props.schema}
+              dataSource={this.props.dataSource}
+              table={regionsTable}
+              types={["text", "enum", "boolean", "date"]}
+              aggrNeed="none"
+              value={this.props.design.axes.color}
+              defaultColor={this.props.design.color}
+              showColorMap={true}
+              onChange={this.handleColorAxisChange}
+              allowExcludedValues={true}
+              filters={filters}
+            />
+          </div>
+        </div>
       )
     }
   }
@@ -428,40 +431,39 @@ export default class ChoroplethLayerDesigner extends React.Component<{
   //         onChange: @handleColorAxisChange)
 
   renderFillOpacity() {
-    return R(
-      "div",
-      { className: "mb-3" },
-      R(
-        "label",
-        { className: "text-muted" },
-        T`Fill Opacity: ${(this.props.design.fillOpacity * this.props.design.fillOpacity * 100).toFixed(0)}%`
-      ),
-      ": ",
-      R(Rcslider, {
-        min: 0,
-        max: 100,
-        step: 1,
-        tipTransitionName: "rc-slider-tooltip-zoom-down",
-        value: Math.round(this.props.design.fillOpacity * this.props.design.fillOpacity * 100),
-        onChange: (val: number) => this.handleFillOpacityChange(Math.sqrt(val / 100))
-      })
+    return (
+      <div className="mb-3">
+        <label className="text-muted">
+          {T`Fill Opacity: ${(this.props.design.fillOpacity * this.props.design.fillOpacity * 100).toFixed(0)}%`}
+        </label>
+        {": "}
+        <Rcslider
+          min={0}
+          max={100}
+          step={1}
+          tipTransitionName="rc-slider-tooltip-zoom-down"
+          value={Math.round(this.props.design.fillOpacity * this.props.design.fillOpacity * 100)}
+          onChange={(val: number) => this.handleFillOpacityChange(Math.sqrt(val / 100))}
+        />
+      </div>
     )
   }
 
   renderBorderColor() {
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Border Color`),
-
-      R(
-        "div",
-        null,
-        R(ColorComponent, {
-          color: this.props.design.borderColor || "#000",
-          onChange: this.handleBorderColorChange
-        })
-      )
+    return (
+      <div className="mb-3">
+        <label className="text-muted">
+          <span className="fas fa-tint" />
+          {T`Border Color`}
+        </label>
+
+        <div>
+          <ColorComponent
+            color={this.props.design.borderColor || "#000"}
+            onChange={this.handleBorderColorChange}
+          />
+        </div>
+      </div>
     )
   }
 
@@ -471,21 +473,22 @@ export default class ChoroplethLayerDesigner extends React.Component<{
       return null
     }
 
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), T`Filters`),
-      R(
-        "div",
-        { style: { marginLeft: 8 } },
-        R(FilterExprComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          onChange: this.handleFilterChange,
-          table: this.props.design.table,
-          value: this.props.design.filter
-        })
-      )
+    return (
+      <div className="mb-3">
+        <label className="text-muted">
+          <span className="fas fa-filter" />
+          {T`Filters`}
+        </label>
+        <div style={{ marginLeft: 8 }}>
+          <FilterExprComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            onChange={this.handleFilterChange}
+            table={this.props.design.table}
+            value={this.props.design.filter}
+          />
+        </div>
+      </div>
     )
   }
 
@@ -502,15 +505,15 @@ export default class ChoroplethLayerDesigner extends React.Component<{
       defaultPopupFilterJoins[this.props.design.table] = this.props.design.adminRegionExpr
     }
 
-    return R(EditPopupComponent, {
-      design: this.props.design,
-      onDesignChange: this.props.onDesignChange,
-      schema: this.props.schema,
-      dataSource: this.props.dataSource,
-      table: this.props.design.table,
-      idTable: regionsTable,
-      defaultPopupFilterJoins
-    })
+    return <EditPopupComponent
+      design={this.props.design}
+      onDesignChange={this.props.onDesignChange}
+      schema={this.props.schema}
+      dataSource={this.props.dataSource}
+      table={this.props.design.table}
+      idTable={regionsTable}
+      defaultPopupFilterJoins={defaultPopupFilterJoins}
+    />
   }
 
   renderHoverOver() {
@@ -526,35 +529,36 @@ export default class ChoroplethLayerDesigner extends React.Component<{
       defaultPopupFilterJoins[this.props.design.table] = this.props.design.adminRegionExpr
     }
 
-    return R(EditHoverOver, {
-      design: this.props.design,
-      onDesignChange: this.props.onDesignChange,
-      schema: this.props.schema,
-      dataSource: this.props.dataSource,
-      table: this.props.design.table,
-      idTable: regionsTable,
-      defaultPopupFilterJoins
-    })
+    return <EditHoverOver
+      design={this.props.design}
+      onDesignChange={this.props.onDesignChange}
+      schema={this.props.schema}
+      dataSource={this.props.dataSource}
+      table={this.props.design.table}
+      idTable={regionsTable}
+      defaultPopupFilterJoins={defaultPopupFilterJoins}
+      aggrStatuses={["individual", "aggregate", "literal"]}
+    />
   }
 
   render() {
-    return R(
-      "div",
-      null,
-      this.renderRegionMode(),
-      this.renderRegionsTable(),
-      this.renderTable(),
-      this.renderAdminRegionExpr(),
-      this.renderScopeAndDetailLevel(),
-      this.renderDisplayNames(),
-      this.renderColor(),
-      this.renderColorAxis(),
-      this.renderFillOpacity(),
-      this.renderBorderColor(),
-      this.renderFilter(),
-      this.renderPopup(),
-      this.renderHoverOver(),
-      R(ZoomLevelsComponent, { design: this.props.design, onDesignChange: this.props.onDesignChange })
+    return (
+      <div>
+        {this.renderRegionMode()}
+        {this.renderRegionsTable()}
+        {this.renderTable()}
+        {this.renderAdminRegionExpr()}
+        {this.renderScopeAndDetailLevel()}
+        {this.renderDisplayNames()}
+        {this.renderColor()}
+        {this.renderColorAxis()}
+        {this.renderFillOpacity()}
+        {this.renderBorderColor()}
+        {this.renderFilter()}
+        {this.renderPopup()}
+        {this.renderHoverOver()}
+        <ZoomLevelsComponent design={this.props.design} onDesignChange={this.props.onDesignChange} />
+      </div>
     )
   }
 }

package/src/maps/DirectMapDataSource.ts

@@ -350,12 +350,6 @@ class DirectLayerDataSource implements MapLayerDataSource {
 
     let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?` + querystring.stringify(query)
 
-    // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
-    // Used to speed queries
-    if (url.match(/^https:\/\/api\.mwater\.co\//)) {
-      url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/")
-    }
-
     return url
   }
 
@@ -364,12 +358,6 @@ class DirectLayerDataSource implements MapLayerDataSource {
     let where
     let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?type=${design.type}&radius=1000`
 
-    // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
-    // Used to speed queries
-    if (url.match(/^https:\/\/api\.mwater\.co\//)) {
-      url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/")
-    }
-
     if (this.options.client) {
       url += `&client=${this.options.client}`
     }

package/src/maps/EditHoverOver.tsx

@@ -1,5 +1,5 @@
 import { omit } from "lodash"
-import { DataSource, Expr, ExprUtils, Schema } from "@mwater/expressions"
+import { AggrStatus, DataSource, Expr, ExprUtils, Schema } from "@mwater/expressions"
 import { ExprComponent } from "@mwater/expressions-ui"
 import React, { useState } from "react"
 import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
@@ -22,9 +22,12 @@ export interface EditHoverOverProps {
   /** Table of the row that join is to. Usually same as table except for choropleth maps */
   idTable: string
   defaultPopupFilterJoins: any
+
+  /** Aggr statuses to allow in hover over expressions */
+  aggrStatuses: AggrStatus[]
 }
 
-function EditHoverOver(props: EditHoverOverProps) {
+export function EditHoverOver(props: EditHoverOverProps) {
   const { schema, dataSource, design, onDesignChange, table } = props
   const [editing, setEditing] = useState(false)
   const [draftItems, setDraftItems] = useState<HoverOverItem[] | undefined>(undefined)
@@ -103,6 +106,7 @@ function EditHoverOver(props: EditHoverOverProps) {
                     onItemChange={handleItemChange}
                     onItemDelete={handleItemDelete}
                     item={item}
+                    aggrStatuses={props.aggrStatuses}
                   />
                 ))}
               </tbody>
@@ -129,6 +133,8 @@ interface HoverOverItemEditorProps {
   onItemChange: (item: HoverOverItem) => void
   onItemDelete: (item: HoverOverItem) => void
   table: string
+  /** Aggr statuses to allow in hover over expressions */
+  aggrStatuses: AggrStatus[]
 }
 
 function HoverOverItemEditor(props: HoverOverItemEditorProps) {
@@ -173,7 +179,7 @@ function HoverOverItemEditor(props: HoverOverItemEditorProps) {
           types={["text", "number", "enum", "boolean", "date", "datetime", "id"]}
           onChange={expr => onItemChange({ ...item, value: expr })}
           value={item.value ?? null}
-          aggrStatuses={["individual", "literal", "aggregate"]}
+          aggrStatuses={props.aggrStatuses}
         />
       </td>
       <td className="align-middle" style={{ width: "1%", whiteSpace: "nowrap" }}>
@@ -187,5 +193,3 @@ function HoverOverItemEditor(props: HoverOverItemEditorProps) {
     </tr>
   )
 }
-
-export default EditHoverOver

package/src/maps/HoverContent.tsx

@@ -57,7 +57,7 @@ const HoverContent = (props: HoverContentProps) => {
   }
 
   return (
-    <div className="_mviz-map-hover-content">
+    <div className="mwater-visualization-map-hover-content">
       {props.items.map((item: HoverOverItem) => {
         let value = values[item.id]
 

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.ts

@@ -290,7 +290,6 @@ export default class MapComponent extends React.Component<MapComponentProps, Map
 
   render() {
     const designerVisible = !this.getDesign().hideDesignPanel
-    console.log("designerVisible", designerVisible)
     return R(
       "div",
       {

package/src/maps/MapUtils.ts

@@ -191,21 +191,33 @@ export async function getSimpleHoverOverData(options: {
 }) {
   const { id, table, filters, schema, dataSource, hoverOverItems } = options
 
+  const exprUtils = new ExprUtils(schema)
   const exprCompiler = new ExprCompiler(schema)
   const query: JsonQLSelectQuery = {
     type: "query",
     selects: [],
     from: exprCompiler.compileTable(table, "main"),
+    groupBy: [],
     limit: 1
   }
 
-  for (const item of hoverOverItems) {
+  // Check if any items are aggregate
+  const isAggregate = hoverOverItems.some(item => exprUtils.getExprAggrStatus(item.value ?? null) === "aggregate")
+
+  for (let i = 0; i < hoverOverItems.length; i++) {
+    const item = hoverOverItems[i]
+
     if (item.value) {
       query.selects.push({
         type: "select",
         expr: exprCompiler.compileExpr({ expr: item.value, tableAlias: "main" }),
         alias: item.id
       })
+
+      // Group by if there are aggregate items and this is not aggregate
+      if (isAggregate && exprUtils.getExprAggrStatus(item.value) !== "aggregate") {
+        query.groupBy!.push(i + 1)
+      }
     }
   }