Web console: fix grouped filtering and add complex menu (#14668)

* fix filtering when grouped

* add complex menu

* complex aggs

* use ResizeObserverEntry

* add quantile and test

* fix style

* update snapshots

web-console/src/bootstrap/react-table-defaults.tsx

@@ -40,7 +40,12 @@ export function bootstrapReactTable() {
     className: DEFAULT_TABLE_CLASS_NAME,
     defaultFilterMethod: (filter: Filter, row: any) => {
       const id = filter.pivotId || filter.id;
-      return booleanCustomTableFilter(filter, row[id]);
+      const subRows = row._subRows;
+      if (Array.isArray(subRows)) {
+        return subRows.some(r => booleanCustomTableFilter(filter, r[id]));
+      } else {
+        return booleanCustomTableFilter(filter, row[id]);
+      }
     },
     LoadingComponent: Loader,
     loadingText: '',

web-console/src/components/segment-timeline/segment-timeline.tsx

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import type { IResizeEntry } from '@blueprintjs/core';
 import { FormGroup, HTMLSelect, Radio, RadioGroup, ResizeSensor } from '@blueprintjs/core';
 import type { AxisScale } from 'd3-axis';
 import { scaleLinear, scaleUtc } from 'd3-scale';
@@ -428,7 +427,7 @@ ORDER BY "start" DESC`;
     }
   };
 
-  private readonly handleResize = (entries: IResizeEntry[]) => {
+  private readonly handleResize = (entries: ResizeObserverEntry[]) => {
     const chartRect = entries[0].contentRect;
     this.setState({
       chartWidth: chartRect.width,

web-console/src/react-table/react-table-utils.ts

@@ -107,7 +107,7 @@ export function addOrUpdateFilter(filters: readonly Filter[], filter: Filter): F
   return addOrUpdate(filters, filter, f => f.id);
 }
 
-export function booleanCustomTableFilter(filter: Filter, value: any): boolean {
+export function booleanCustomTableFilter(filter: Filter, value: unknown): boolean {
   if (value == null) return false;
   const modeAndNeedle = parseFilterModeAndNeedle(filter);
   if (!modeAndNeedle) return true;

web-console/src/views/workbench-view/column-tree/__snapshots__/column-tree.spec.tsx.snap

@@ -32,7 +32,13 @@ exports[`ColumnTree matches snapshot 1`] = `
           Object {
             "childNodes": Array [
               Object {
-                "icon": "time",
+                "icon": <Blueprint4.Icon
+                  aria-hidden={true}
+                  className="bp4-tree-node-icon"
+                  icon="time"
+                  tabIndex={-1}
+                  title="TIMESTAMP"
+                />,
                 "id": "__time",
                 "label": <Blueprint4.Popover2
                   autoFocus={false}
@@ -65,7 +71,13 @@ exports[`ColumnTree matches snapshot 1`] = `
                 </Blueprint4.Popover2>,
               },
               Object {
-                "icon": "numerical",
+                "icon": <Blueprint4.Icon
+                  aria-hidden={true}
+                  className="bp4-tree-node-icon"
+                  icon="numerical"
+                  tabIndex={-1}
+                  title="BIGINT"
+                />,
                 "id": "added",
                 "label": <Blueprint4.Popover2
                   autoFocus={false}
@@ -98,7 +110,13 @@ exports[`ColumnTree matches snapshot 1`] = `
                 </Blueprint4.Popover2>,
               },
               Object {
-                "icon": "floating-point",
+                "icon": <Blueprint4.Icon
+                  aria-hidden={true}
+                  className="bp4-tree-node-icon"
+                  icon="floating-point"
+                  tabIndex={-1}
+                  title="FLOAT"
+                />,
                 "id": "addedBy10",
                 "label": <Blueprint4.Popover2
                   autoFocus={false}

web-console/src/views/workbench-view/column-tree/column-tree-menu/complex-menu-items/__snapshots__/complex-menu-items.spec.tsx.snap

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ComplexMenuItems matches snapshot when menu is opened for column not inside group by 1`] = `
+<div>
+  <li
+    class="bp4-submenu"
+    role="none"
+  >
+    <span
+      class="bp4-popover-wrapper"
+    >
+      <span
+        aria-haspopup="true"
+        class="bp4-popover-target"
+        role="menuitem"
+        tabindex="0"
+      >
+        <a
+          class="bp4-menu-item"
+          role="none"
+          tabindex="-1"
+        >
+          <span
+            class="bp4-menu-item-icon"
+          >
+            <span
+              aria-hidden="true"
+              class="bp4-icon bp4-icon-function"
+              icon="function"
+              tabindex="-1"
+            >
+              <svg
+                data-icon="function"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M8.12 4.74H6.98c.33-1.29.75-2.24 1.28-2.84.33-.37.64-.56.95-.56.06 0 .11.02.15.05.04.04.06.09.06.15 0 .05-.04.15-.13.29-.09.14-.13.28-.13.4 0 .18.07.33.2.46.14.13.31.19.52.19.22 0 .41-.08.56-.23.15-.16.23-.37.23-.63 0-.3-.11-.55-.34-.74C10.1 1.09 9.74 1 9.24 1c-.78 0-1.49.22-2.12.67-.64.45-1.24 1.2-1.81 2.23-.2.36-.38.59-.56.69-.18.1-.46.15-.85.15l-.26.9h1.08l-1.59 6.12c-.27 1.01-.44 1.63-.54 1.86-.14.34-.34.63-.62.87-.11.1-.24.15-.4.15a.15.15 0 01-.11-.04l-.04-.05c0-.03.04-.08.12-.16.08-.08.12-.2.12-.36 0-.18-.06-.33-.19-.44-.12-.12-.3-.18-.54-.18-.28 0-.51.08-.68.23-.16.14-.25.32-.25.53 0 .22.1.42.31.59.21.17.53.25.97.25.7 0 1.32-.18 1.87-.54.54-.36 1.02-.92 1.42-1.67.41-.75.82-1.96 1.25-3.63l.91-3.54h1.1l.29-.89zm5.43 1.52c.2-.15.41-.23.62-.23.08 0 .23.03.45.09s.41.09.57.09c.23 0 .42-.08.57-.23.16-.16.24-.36.24-.61 0-.26-.08-.47-.23-.62-.15-.15-.37-.23-.66-.23-.25 0-.5.06-.72.18-.23.12-.51.38-.86.78-.26.3-.64.81-1.15 1.55-.2-.91-.55-1.75-1.05-2.51l-2.72.46-.06.29c.2-.04.37-.06.51-.06.27 0 .49.11.67.34.28.36.67 1.45 1.17 3.26-.39.52-.66.85-.8 1.01-.24.26-.44.42-.59.5-.12.06-.25.09-.41.09-.11 0-.3-.06-.56-.18-.18-.08-.34-.12-.48-.12-.27 0-.48.08-.66.25-.17.17-.26.38-.26.64 0 .25.08.44.24.6.16.15.37.23.64.23.26 0 .5-.05.73-.16.23-.11.52-.34.86-.69.35-.35.82-.9 1.43-1.67.23.73.44 1.25.61 1.58s.37.57.59.71c.22.15.5.22.83.22.32 0 .65-.11.98-.34.44-.3.88-.81 1.34-1.53l-.26-.15c-.31.43-.54.7-.69.8-.1.07-.22.1-.35.1-.16 0-.32-.1-.48-.3-.27-.34-.62-1.27-1.06-2.8.4-.68.73-1.13 1-1.34z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </span>
+          <div
+            class="bp4-fill bp4-text-overflow-ellipsis"
+          >
+            Aggregate
+          </div>
+          <span
+            aria-hidden="true"
+            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
+            icon="caret-right"
+          >
+            <svg
+              data-icon="caret-right"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
+        </a>
+      </span>
+    </span>
+  </li>
+</div>
+`;

web-console/src/views/workbench-view/column-tree/column-tree-menu/complex-menu-items/complex-menu-items.spec.tsx

@@ -0,0 +1,41 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { SqlQuery } from '@druid-toolkit/query';
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { ComplexMenuItems } from './complex-menu-items';
+
+describe('ComplexMenuItems', () => {
+  it('matches snapshot when menu is opened for column not inside group by', () => {
+    const numberMenu = (
+      <ComplexMenuItems
+        schema="schema"
+        table="table"
+        columnName="user_theta"
+        columnType="COMPLEX<thetaSketch>"
+        parsedQuery={SqlQuery.parse(`SELECT channel, count(*) as cnt FROM wikipedia GROUP BY 1`)}
+        onQueryChange={() => {}}
+      />
+    );
+
+    const { container } = render(numberMenu);
+    expect(container).toMatchSnapshot();
+  });
+});

web-console/src/views/workbench-view/column-tree/column-tree-menu/complex-menu-items/complex-menu-items.tsx

@@ -0,0 +1,83 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { MenuItem } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import type { SqlExpression, SqlQuery } from '@druid-toolkit/query';
+import { C, F } from '@druid-toolkit/query';
+import type { JSX } from 'react';
+import React from 'react';
+
+import { prettyPrintSql } from '../../../../../utils';
+
+const UNIQUE_FUNCTIONS: Record<string, string> = {
+  'COMPLEX<hyperUnique>': 'APPROX_COUNT_DISTINCT_BUILTIN',
+  'COMPLEX<thetaSketch>': 'APPROX_COUNT_DISTINCT_DS_THETA',
+  'COMPLEX<HLLSketch>': 'APPROX_COUNT_DISTINCT_DS_HLL',
+};
+
+const QUANTILE_FUNCTIONS: Record<string, string> = {
+  'COMPLEX<quantilesDoublesSketch>': 'APPROX_QUANTILE_DS',
+};
+
+export interface ComplexMenuItemsProps {
+  table: string;
+  schema: string;
+  columnName: string;
+  columnType: string;
+  parsedQuery: SqlQuery;
+  onQueryChange: (query: SqlQuery, run?: boolean) => void;
+}
+
+export const ComplexMenuItems = React.memo(function ComplexMenuItems(props: ComplexMenuItemsProps) {
+  const { columnName, columnType, parsedQuery, onQueryChange } = props;
+  const column = C(columnName);
+
+  function renderAggregateMenu(): JSX.Element | undefined {
+    if (!parsedQuery.hasGroupBy()) return;
+
+    function aggregateMenuItem(ex: SqlExpression, alias: string) {
+      return (
+        <MenuItem
+          text={prettyPrintSql(ex)}
+          onClick={() => {
+            onQueryChange(parsedQuery.addSelect(ex.as(alias)), true);
+          }}
+        />
+      );
+    }
+
+    const uniqueFn = UNIQUE_FUNCTIONS[columnType];
+    const quantileFn = QUANTILE_FUNCTIONS[columnType];
+    if (!uniqueFn && !quantileFn) return;
+
+    return (
+      <MenuItem icon={IconNames.FUNCTION} text="Aggregate">
+        {uniqueFn && aggregateMenuItem(F(uniqueFn, column), `unique_${columnName}`)}
+        {quantileFn && (
+          <>
+            {aggregateMenuItem(F(quantileFn, column, 0.5), `median_${columnName}`)}
+            {aggregateMenuItem(F(quantileFn, column, 0.98), `p98_${columnName}`)}
+          </>
+        )}
+      </MenuItem>
+    );
+  }
+
+  return <>{renderAggregateMenu()}</>;
+});

web-console/src/views/workbench-view/column-tree/column-tree-menu/index.ts

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+export * from './complex-menu-items/complex-menu-items';
 export * from './number-menu-items/number-menu-items';
 export * from './string-menu-items/string-menu-items';
 export * from './time-menu-items/time-menu-items';

web-console/src/views/workbench-view/column-tree/column-tree-menu/number-menu-items/number-menu-items.tsx

@@ -36,9 +36,10 @@ export interface NumberMenuItemsProps {
 }
 
 export const NumberMenuItems = React.memo(function NumberMenuItems(props: NumberMenuItemsProps) {
-  function renderFilterMenu(): JSX.Element {
+  const { columnName, parsedQuery, onQueryChange } = props;
-    const { columnName, parsedQuery, onQueryChange } = props;
+  const column = C(columnName);
 
+  function renderFilterMenu(): JSX.Element {
     function filterMenuItem(clause: SqlExpression) {
       return (
         <MenuItem
@@ -50,7 +51,6 @@ export const NumberMenuItems = React.memo(function NumberMenuItems(props: Number
       );
     }
 
-    const column = C(columnName);
     return (
       <MenuItem icon={IconNames.FILTER} text="Filter">
         {filterMenuItem(column.greaterThan(NINE_THOUSAND))}
@@ -60,7 +60,6 @@ export const NumberMenuItems = React.memo(function NumberMenuItems(props: Number
   }
 
   function renderRemoveFilter(): JSX.Element | undefined {
-    const { columnName, parsedQuery, onQueryChange } = props;
     if (!parsedQuery.getEffectiveWhereExpression().containsColumnName(columnName)) return;
 
     return (
@@ -75,7 +74,6 @@ export const NumberMenuItems = React.memo(function NumberMenuItems(props: Number
   }
 
   function renderGroupByMenu(): JSX.Element | undefined {
-    const { columnName, parsedQuery, onQueryChange } = props;
     if (!parsedQuery.hasGroupBy()) return;
 
     function groupByMenuItem(ex: SqlExpression, alias?: string) {
@@ -95,7 +93,6 @@ export const NumberMenuItems = React.memo(function NumberMenuItems(props: Number
       );
     }
 
-    const column = C(columnName);
     return (
       <MenuItem icon={IconNames.GROUP_OBJECTS} text="Group by">
         {groupByMenuItem(column)}
@@ -105,7 +102,6 @@ export const NumberMenuItems = React.memo(function NumberMenuItems(props: Number
   }
 
   function renderRemoveGroupBy(): JSX.Element | undefined {
-    const { columnName, parsedQuery, onQueryChange } = props;
     const groupedSelectIndexes = parsedQuery.getGroupedSelectIndexesForColumn(columnName);
     if (!groupedSelectIndexes.length) return;
 
@@ -121,7 +117,6 @@ export const NumberMenuItems = React.memo(function NumberMenuItems(props: Number
   }
 
   function renderAggregateMenu(): JSX.Element | undefined {
-    const { columnName, parsedQuery, onQueryChange } = props;
     if (!parsedQuery.hasGroupBy()) return;
 
     function aggregateMenuItem(ex: SqlExpression, alias: string) {
@@ -135,7 +130,6 @@ export const NumberMenuItems = React.memo(function NumberMenuItems(props: Number
       );
     }
 
-    const column = C(columnName);
     return (
       <MenuItem icon={IconNames.FUNCTION} text="Aggregate">
         {aggregateMenuItem(F('SUM', column), `sum_${columnName}`)}

web-console/src/views/workbench-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.tsx

@@ -35,9 +35,10 @@ export interface StringMenuItemsProps {
 }
 
 export const StringMenuItems = React.memo(function StringMenuItems(props: StringMenuItemsProps) {
-  function renderFilterMenu(): JSX.Element | undefined {
+  const { schema, table, columnName, parsedQuery, onQueryChange } = props;
-    const { columnName, parsedQuery, onQueryChange } = props;
+  const column = C(columnName);
 
+  function renderFilterMenu(): JSX.Element | undefined {
     function filterMenuItem(clause: SqlExpression, run = true) {
       return (
         <MenuItem
@@ -49,7 +50,6 @@ export const StringMenuItems = React.memo(function StringMenuItems(props: String
       );
     }
 
-    const column = C(columnName);
     return (
       <MenuItem icon={IconNames.FILTER} text="Filter">
         {filterMenuItem(column.isNotNull())}
@@ -61,7 +61,6 @@ export const StringMenuItems = React.memo(function StringMenuItems(props: String
   }
 
   function renderRemoveFilter(): JSX.Element | undefined {
-    const { columnName, parsedQuery, onQueryChange } = props;
     if (!parsedQuery.getEffectiveWhereExpression().containsColumnName(columnName)) return;
 
     return (
@@ -76,7 +75,6 @@ export const StringMenuItems = React.memo(function StringMenuItems(props: String
   }
 
   function renderRemoveGroupBy(): JSX.Element | undefined {
-    const { columnName, parsedQuery, onQueryChange } = props;
     const groupedSelectIndexes = parsedQuery.getGroupedSelectIndexesForColumn(columnName);
     if (!groupedSelectIndexes.length) return;
 
@@ -92,7 +90,6 @@ export const StringMenuItems = React.memo(function StringMenuItems(props: String
   }
 
   function renderGroupByMenu(): JSX.Element | undefined {
-    const { columnName, parsedQuery, onQueryChange } = props;
     if (!parsedQuery.hasGroupBy()) return;
 
     function groupByMenuItem(ex: SqlExpression, alias?: string) {
@@ -112,7 +109,6 @@ export const StringMenuItems = React.memo(function StringMenuItems(props: String
       );
     }
 
-    const column = C(columnName);
     return (
       <MenuItem icon={IconNames.GROUP_OBJECTS} text="Group by">
         {groupByMenuItem(column)}
@@ -123,7 +119,6 @@ export const StringMenuItems = React.memo(function StringMenuItems(props: String
   }
 
   function renderAggregateMenu(): JSX.Element | undefined {
-    const { columnName, parsedQuery, onQueryChange } = props;
     if (!parsedQuery.hasGroupBy()) return;
 
     function aggregateMenuItem(ex: SqlExpression, alias: string, run = true) {
@@ -137,7 +132,6 @@ export const StringMenuItems = React.memo(function StringMenuItems(props: String
       );
     }
 
-    const column = C(columnName);
     return (
       <MenuItem icon={IconNames.FUNCTION} text="Aggregate">
         {aggregateMenuItem(F.countDistinct(column), `dist_${columnName}`)}
@@ -152,7 +146,6 @@ export const StringMenuItems = React.memo(function StringMenuItems(props: String
   }
 
   function renderJoinMenu(): JSX.Element | undefined {
-    const { schema, table, columnName, parsedQuery, onQueryChange } = props;
     if (schema !== 'lookup' || !parsedQuery) return;
     const firstTableName = parsedQuery.getFirstTableName();
     if (!firstTableName) return;
@@ -212,7 +205,6 @@ export const StringMenuItems = React.memo(function StringMenuItems(props: String
   }
 
   function renderRemoveJoin(): JSX.Element | undefined {
-    const { schema, parsedQuery, onQueryChange } = props;
     if (schema !== 'lookup' || !parsedQuery) return;
     if (!parsedQuery.hasJoin()) return;
 

web-console/src/views/workbench-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.tsx

@@ -113,9 +113,10 @@ export interface TimeMenuItemsProps {
 }
 
 export const TimeMenuItems = React.memo(function TimeMenuItems(props: TimeMenuItemsProps) {
-  function renderFilterMenu(): JSX.Element | undefined {
+  const { columnName, parsedQuery, onQueryChange } = props;
-    const { columnName, parsedQuery, onQueryChange } = props;
+  const column = C(columnName);
 
+  function renderFilterMenu(): JSX.Element | undefined {
     function filterMenuItem(label: string, clause: SqlExpression) {
       return (
         <MenuItem
@@ -161,7 +162,6 @@ export const TimeMenuItems = React.memo(function TimeMenuItems(props: TimeMenuIt
   }
 
   function renderRemoveFilter(): JSX.Element | undefined {
-    const { columnName, parsedQuery, onQueryChange } = props;
     if (!parsedQuery.getEffectiveWhereExpression().containsColumnName(columnName)) return;
 
     return (
@@ -176,7 +176,6 @@ export const TimeMenuItems = React.memo(function TimeMenuItems(props: TimeMenuIt
   }
 
   function renderRemoveGroupBy(): JSX.Element | undefined {
-    const { columnName, parsedQuery, onQueryChange } = props;
     const groupedSelectIndexes = parsedQuery.getGroupedSelectIndexesForColumn(columnName);
     if (!groupedSelectIndexes.length) return;
 
@@ -192,7 +191,6 @@ export const TimeMenuItems = React.memo(function TimeMenuItems(props: TimeMenuIt
   }
 
   function renderGroupByMenu(): JSX.Element | undefined {
-    const { columnName, parsedQuery, onQueryChange } = props;
     if (!parsedQuery.hasGroupBy()) return;
 
     function groupByMenuItem(ex: SqlExpression, alias: string) {
@@ -212,7 +210,6 @@ export const TimeMenuItems = React.memo(function TimeMenuItems(props: TimeMenuIt
       );
     }
 
-    const column = C(columnName);
     return (
       <MenuItem icon={IconNames.GROUP_OBJECTS} text="Group by">
         {groupByMenuItem(F.timeFloor(column, 'PT1H'), `${columnName}_by_hour`)}
@@ -229,7 +226,6 @@ export const TimeMenuItems = React.memo(function TimeMenuItems(props: TimeMenuIt
   }
 
   function renderAggregateMenu(): JSX.Element | undefined {
-    const { columnName, parsedQuery, onQueryChange } = props;
     if (!parsedQuery.hasGroupBy()) return;
 
     function aggregateMenuItem(ex: SqlExpression, alias: string) {
@@ -243,7 +239,6 @@ export const TimeMenuItems = React.memo(function TimeMenuItems(props: TimeMenuIt
       );
     }
 
-    const column = C(columnName);
     return (
       <MenuItem icon={IconNames.FUNCTION} text="Aggregate">
         {aggregateMenuItem(F.max(column), `max_${columnName}`)}

web-console/src/views/workbench-view/column-tree/column-tree.tsx

@@ -17,7 +17,7 @@
  */
 
 import type { TreeNodeInfo } from '@blueprintjs/core';
-import { HTMLSelect, Menu, MenuItem, Position, Tree } from '@blueprintjs/core';
+import { Classes, HTMLSelect, Icon, Menu, MenuItem, Position, Tree } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Popover2 } from '@blueprintjs/popover2';
 import type { SqlExpression } from '@druid-toolkit/query';
@@ -39,7 +39,12 @@ import { Deferred, Loader } from '../../../components';
 import type { ColumnMetadata } from '../../../utils';
 import { copyAndAlert, dataTypeToIcon, groupBy, oneOf, prettyPrintSql } from '../../../utils';
 
-import { NumberMenuItems, StringMenuItems, TimeMenuItems } from './column-tree-menu';
+import {
+  ComplexMenuItems,
+  NumberMenuItems,
+  StringMenuItems,
+  TimeMenuItems,
+} from './column-tree-menu';
 
 import './column-tree.scss';
 
@@ -400,7 +405,15 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
               childNodes: metadata.map(
                 (columnData): TreeNodeInfo => ({
                   id: columnData.COLUMN_NAME,
-                  icon: dataTypeToIcon(columnData.DATA_TYPE),
+                  icon: (
+                    <Icon
+                      className={Classes.TREE_NODE_ICON}
+                      icon={dataTypeToIcon(columnData.DATA_TYPE)}
+                      aria-hidden
+                      tabIndex={-1}
+                      title={columnData.DATA_TYPE}
+                    />
+                  ),
                   label: (
                     <Popover2
                       position={Position.RIGHT}
@@ -454,6 +467,16 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
                                     onQueryChange={onQueryChange}
                                   />
                                 )}
+                                {parsedQuery && columnData.DATA_TYPE.startsWith('COMPLEX<') && (
+                                  <ComplexMenuItems
+                                    table={tableName}
+                                    schema={schemaName}
+                                    columnName={columnData.COLUMN_NAME}
+                                    columnType={columnData.DATA_TYPE}
+                                    parsedQuery={parsedQuery}
+                                    onQueryChange={onQueryChange}
+                                  />
+                                )}
                                 <MenuItem
                                   icon={IconNames.CLIPBOARD}
                                   text={`Copy: ${columnData.COLUMN_NAME}`}

web-console/src/views/workbench-view/flexible-query-input/flexible-query-input.tsx

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import type { ResizeEntry } from '@blueprintjs/core';
 import { ResizeSensor2 } from '@blueprintjs/popover2';
 import { C, T } from '@druid-toolkit/query';
 import type { Ace } from 'ace-builds';
@@ -270,7 +269,7 @@ export class FlexibleQueryInput extends React.PureComponent<
     }
   }
 
-  private readonly handleAceContainerResize = (entries: ResizeEntry[]) => {
+  private readonly handleAceContainerResize = (entries: ResizeObserverEntry[]) => {
     if (entries.length !== 1) return;
     this.setState({ editorHeight: entries[0].contentRect.height });
   };