Web console: Memoize all the functional components and improve transform step highlighting (#8757)

* Fix transform table

* memoize all components

* use named functions

web-console/src/components/action-cell/action-cell.tsx

@@ -34,7 +34,7 @@ export interface ActionCellProps {
   actions?: BasicAction[];
 }
 
-export function ActionCell(props: ActionCellProps) {
+export const ActionCell = React.memo(function ActionCell(props: ActionCellProps) {
   const { onDetail, actions } = props;
   const actionsMenu = actions ? basicActionsToMenu(actions) : null;
 
@@ -48,4 +48,4 @@ export function ActionCell(props: ActionCellProps) {
       )}
     </div>
   );
-}
+});

web-console/src/components/action-icon/action-icon.tsx

@@ -28,8 +28,8 @@ export interface ActionIconProps {
   onClick?: () => void;
 }
 
-export function ActionIcon(props: ActionIconProps) {
+export const ActionIcon = React.memo(function ActionIcon(props: ActionIconProps) {
   const { className, icon, onClick } = props;
 
   return <Icon className={classNames('action-icon', className)} icon={icon} onClick={onClick} />;
-}
+});

web-console/src/components/center-message/center-message.tsx

@@ -24,7 +24,7 @@ export interface CenterMessageProps {
   children?: ReactNode;
 }
 
-export function CenterMessage(props: CenterMessageProps) {
+export const CenterMessage = React.memo(function CenterMessage(props: CenterMessageProps) {
   const { children } = props;
 
   return (
@@ -32,4 +32,4 @@ export function CenterMessage(props: CenterMessageProps) {
       <div className="center-message-inner">{children}</div>
     </div>
   );
-}
+});

web-console/src/components/clearable-input/clearable-input.tsx

@@ -28,7 +28,7 @@ export interface ClearableInputProps {
   placeholder: string;
 }
 
-export function ClearableInput(props: ClearableInputProps) {
+export const ClearableInput = React.memo(function ClearableInput(props: ClearableInputProps) {
   const { className, value, onChange, placeholder } = props;
 
   return (
@@ -42,4 +42,4 @@ export function ClearableInput(props: ClearableInputProps) {
       placeholder={placeholder}
     />
   );
-}
+});

web-console/src/components/deferred/deferred.tsx

@@ -16,10 +16,12 @@
  * limitations under the License.
  */
 
+import React from 'react';
+
 export interface DeferredProps {
   content: () => JSX.Element;
 }
 
-export function Deferred(props: DeferredProps) {
+export const Deferred = React.memo(function Deferred(props: DeferredProps) {
   return props.content();
-}
+});

web-console/src/components/external-link/external-link.tsx

@@ -23,7 +23,7 @@ export interface ExternalLinkProps {
   children?: ReactNode;
 }
 
-export function ExternalLink(props: ExternalLinkProps) {
+export const ExternalLink = React.memo(function ExternalLink(props: ExternalLinkProps) {
   const { href, children } = props;
 
   return (
@@ -31,4 +31,4 @@ export function ExternalLink(props: ExternalLinkProps) {
       {children}
     </a>
   );
-}
+});

web-console/src/components/header-bar/header-bar.tsx

@@ -132,7 +132,7 @@ export interface HeaderBarProps {
   hideLegacy: boolean;
 }
 
-export function HeaderBar(props: HeaderBarProps) {
+export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
   const { active, hideLegacy } = props;
   const [aboutDialogOpen, setAboutDialogOpen] = useState(false);
   const [doctorDialogOpen, setDoctorDialogOpen] = useState(false);
@@ -264,4 +264,4 @@ export function HeaderBar(props: HeaderBarProps) {
       )}
     </Navbar>
   );
-}
+});

web-console/src/components/loader/loader.tsx

@@ -25,7 +25,7 @@ export interface LoaderProps {
   loading?: boolean; // This is needed so that this component can be used as a LoadingComponent in react table
 }
 
-export function Loader(props: LoaderProps) {
+export const Loader = React.memo(function Loader(props: LoaderProps) {
   const { loadingText, loading } = props;
   if (!loading) return null;
 
@@ -59,4 +59,4 @@ export function Loader(props: LoaderProps) {
       </div>
     </div>
   );
-}
+});

web-console/src/components/refresh-button/refresh-button.tsx

@@ -27,7 +27,7 @@ export interface RefreshButtonProps {
   localStorageKey?: LocalStorageKeys;
 }
 
-export function RefreshButton(props: RefreshButtonProps) {
+export const RefreshButton = React.memo(function RefreshButton(props: RefreshButtonProps) {
   const { onRefresh, localStorageKey } = props;
   const intervals = [
     { label: '5 seconds', value: 5000 },
@@ -49,4 +49,4 @@ export function RefreshButton(props: RefreshButtonProps) {
       localStorageKey={localStorageKey}
     />
   );
-}
+});

web-console/src/components/rule-editor/rule-editor.tsx

@@ -43,7 +43,7 @@ export interface RuleEditorProps {
   moveDown: (() => void) | null;
 }
 
-export function RuleEditor(props: RuleEditorProps) {
+export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps) {
   const { rule, onChange, tiers, onDelete, moveUp, moveDown } = props;
   const [isOpen, setIsOpen] = useState(true);
   if (!rule) return null;
@@ -223,4 +223,4 @@ export function RuleEditor(props: RuleEditorProps) {
       </Collapse>
     </div>
   );
-}
+});

web-console/src/components/show-value/show-value.tsx

@@ -30,7 +30,7 @@ export interface ShowValueProps {
   jsonValue?: string;
 }
 
-export function ShowValue(props: ShowValueProps) {
+export const ShowValue = React.memo(function ShowValue(props: ShowValueProps) {
   const { endpoint, downloadFilename, jsonValue } = props;
   return (
     <div className="show-json">
@@ -57,4 +57,4 @@ export function ShowValue(props: ShowValueProps) {
       </div>
     </div>
   );
-}
+});

web-console/src/components/table-cell/table-cell.tsx

@@ -51,7 +51,7 @@ export interface TableCellProps {
   unparseable?: boolean;
 }
 
-export function TableCell(props: TableCellProps): JSX.Element {
+export const TableCell = React.memo(function TableCell(props: TableCellProps) {
   const { value, timestamp, unparseable } = props;
   const [showValue, setShowValue] = useState();
 
@@ -97,4 +97,4 @@ export function TableCell(props: TableCellProps): JSX.Element {
       return <span className="table-cell null">null</span>;
     }
   }
-}
+});

web-console/src/components/table-column-selector/table-column-selector.tsx

@@ -30,7 +30,9 @@ interface TableColumnSelectorProps {
   tableColumnsHidden: string[];
 }
 
-export function TableColumnSelector(props: TableColumnSelectorProps) {
+export const TableColumnSelector = React.memo(function TableColumnSelector(
+  props: TableColumnSelectorProps,
+) {
   const { columns, onChange, tableColumnsHidden } = props;
   const checkboxes = (
     <Menu className="table-column-selector-menu">
@@ -54,4 +56,4 @@ export function TableColumnSelector(props: TableColumnSelectorProps) {
       <Button rightIcon={IconNames.CARET_DOWN} text="Columns" />
     </Popover>
   );
-}
+});

web-console/src/components/view-control-bar/view-control-bar.tsx

@@ -25,7 +25,7 @@ export interface ViewControlBarProps {
   children?: ReactNode;
 }
 
-export function ViewControlBar(props: ViewControlBarProps) {
+export const ViewControlBar = React.memo(function ViewControlBar(props: ViewControlBarProps) {
   const { label, children } = props;
 
   return (
@@ -34,4 +34,4 @@ export function ViewControlBar(props: ViewControlBarProps) {
       {children}
     </div>
   );
-}
+});

web-console/src/dialogs/about-dialog/about-dialog.tsx

@@ -32,7 +32,7 @@ export interface AboutDialogProps {
   onClose: () => void;
 }
 
-export function AboutDialog(props: AboutDialogProps) {
+export const AboutDialog = React.memo(function AboutDialog(props: AboutDialogProps) {
   const { onClose } = props;
 
   return (
@@ -71,4 +71,4 @@ export function AboutDialog(props: AboutDialogProps) {
       </div>
     </Dialog>
   );
-}
+});

web-console/src/dialogs/async-action-dialog/async-action-dialog.tsx

@@ -49,7 +49,9 @@ export interface AsyncActionDialogProps {
   children?: ReactNode;
 }
 
-export function AsyncActionDialog(props: AsyncActionDialogProps) {
+export const AsyncActionDialog = React.memo(function AsyncActionDialog(
+  props: AsyncActionDialogProps,
+) {
   const {
     action,
     onClose,
@@ -127,4 +129,4 @@ export function AsyncActionDialog(props: AsyncActionDialogProps) {
       </div>
     </Dialog>
   );
-}
+});

web-console/src/dialogs/datasource-table-action-dialog/datasource-table-action-dialog.tsx

@@ -28,7 +28,9 @@ interface DatasourceTableActionDialogProps {
   onClose: () => void;
 }
 
-export function DatasourceTableActionDialog(props: DatasourceTableActionDialogProps) {
+export const DatasourceTableActionDialog = React.memo(function DatasourceTableActionDialog(
+  props: DatasourceTableActionDialogProps,
+) {
   const { onClose, datasourceId, actions } = props;
   const [activeTab, setActiveTab] = useState('columns');
 
@@ -56,4 +58,4 @@ export function DatasourceTableActionDialog(props: DatasourceTableActionDialogPr
       )}
     </TableActionDialog>
   );
-}
+});

web-console/src/dialogs/edit-context-dialog/edit-context-dialog.tsx

@@ -36,7 +36,9 @@ export interface EditContextDialogState {
   error?: string;
 }
 
-export function EditContextDialog(props: EditContextDialogProps) {
+export const EditContextDialog = React.memo(function EditContextDialog(
+  props: EditContextDialogProps,
+) {
   const { onQueryContextChange, onClose } = props;
   const [state, setState] = useState<EditContextDialogState>(() => ({
     queryContext: props.queryContext,
@@ -98,4 +100,4 @@ export function EditContextDialog(props: EditContextDialogProps) {
       </div>
     </Dialog>
   );
-}
+});

web-console/src/dialogs/history-dialog/history-dialog.tsx

@@ -28,7 +28,7 @@ interface HistoryDialogProps {
   children?: ReactNode;
 }
 
-export function HistoryDialog(props: HistoryDialogProps) {
+export const HistoryDialog = React.memo(function HistoryDialog(props: HistoryDialogProps) {
   function renderRecords() {
     const { children, historyRecords } = props;
     let content;
@@ -75,4 +75,4 @@ export function HistoryDialog(props: HistoryDialogProps) {
       {renderRecords()}
     </Dialog>
   );
-}
+});

web-console/src/dialogs/lookup-edit-dialog/lookup-edit-dialog.tsx

@@ -44,7 +44,7 @@ export interface LookupEditDialogProps {
   allLookupTiers: string[];
 }
 
-export function LookupEditDialog(props: LookupEditDialogProps) {
+export const LookupEditDialog = React.memo(function LookupEditDialog(props: LookupEditDialogProps) {
   const {
     onClose,
     onSubmit,
@@ -158,4 +158,4 @@ export function LookupEditDialog(props: LookupEditDialogProps) {
       </div>
     </Dialog>
   );
-}
+});

web-console/src/dialogs/query-history-dialog/query-history-dialog.tsx

@@ -30,7 +30,9 @@ export interface QueryHistoryDialogProps {
   onClose: () => void;
 }
 
-export function QueryHistoryDialog(props: QueryHistoryDialogProps) {
+export const QueryHistoryDialog = React.memo(function QueryHistoryDialog(
+  props: QueryHistoryDialogProps,
+) {
   const [activeTab, setActiveTab] = useState(0);
   const { queryRecords, setQueryString, onClose } = props;
 
@@ -83,4 +85,4 @@ export function QueryHistoryDialog(props: QueryHistoryDialogProps) {
       </div>
     </Dialog>
   );
-}
+});

web-console/src/dialogs/query-plan-dialog/query-plan-dialog.tsx

@@ -38,7 +38,7 @@ export interface QueryPlanDialogProps {
   setQueryString: (queryString: string) => void;
 }
 
-export function QueryPlanDialog(props: QueryPlanDialogProps) {
+export const QueryPlanDialog = React.memo(function QueryPlanDialog(props: QueryPlanDialogProps) {
   const { explainResult, explainError, onClose, setQueryString } = props;
 
   let content: JSX.Element;
@@ -143,4 +143,4 @@ export function QueryPlanDialog(props: QueryPlanDialogProps) {
       </div>
     </Dialog>
   );
-}
+});

web-console/src/dialogs/segments-table-action-dialog/segment-table-action-dialog.tsx

@@ -29,7 +29,9 @@ interface SegmentTableActionDialogProps {
   onClose: () => void;
 }
 
-export function SegmentTableActionDialog(props: SegmentTableActionDialogProps) {
+export const SegmentTableActionDialog = React.memo(function SegmentTableActionDialog(
+  props: SegmentTableActionDialogProps,
+) {
   const { segmentId, onClose, datasourceId, actions } = props;
   const [activeTab, setActiveTab] = useState('metadata');
 
@@ -57,4 +59,4 @@ export function SegmentTableActionDialog(props: SegmentTableActionDialogProps) {
       )}
     </TableActionDialog>
   );
-}
+});

web-console/src/dialogs/show-value-dialog/show-value-dialog.tsx

@@ -30,7 +30,7 @@ export interface ShowValueDialogProps {
   str: string;
 }
 
-export function ShowValueDialog(props: ShowValueDialogProps) {
+export const ShowValueDialog = React.memo(function ShowValueDialog(props: ShowValueDialogProps) {
   const { onClose, str } = props;
 
   function handleCopy() {
@@ -50,4 +50,4 @@ export function ShowValueDialog(props: ShowValueDialogProps) {
       </div>
     </Dialog>
   );
-}
+});

web-console/src/dialogs/spec-dialog/spec-dialog.tsx

@@ -31,7 +31,7 @@ export interface SpecDialogProps {
   initSpec?: any;
 }
 
-export function SpecDialog(props: SpecDialogProps) {
+export const SpecDialog = React.memo(function SpecDialog(props: SpecDialogProps) {
   const { onClose, onSubmit, title, initSpec } = props;
   const [spec, setSpec] = useState(() => (initSpec ? JSON.stringify(initSpec, null, 2) : '{\n\n}'));
 
@@ -79,4 +79,4 @@ export function SpecDialog(props: SpecDialogProps) {
       </div>
     </Dialog>
   );
-}
+});

web-console/src/dialogs/supervisor-table-action-dialog/supervisor-table-action-dialog.tsx

@@ -31,7 +31,9 @@ interface SupervisorTableActionDialogProps {
   onClose: () => void;
 }
 
-export function SupervisorTableActionDialog(props: SupervisorTableActionDialogProps) {
+export const SupervisorTableActionDialog = React.memo(function SupervisorTableActionDialog(
+  props: SupervisorTableActionDialogProps,
+) {
   const { supervisorId, actions, onClose } = props;
   const [activeTab, setActiveTab] = useState('status');
 
@@ -96,4 +98,4 @@ export function SupervisorTableActionDialog(props: SupervisorTableActionDialogPr
       )}
     </TableActionDialog>
   );
-}
+});

web-console/src/dialogs/table-action-dialog/table-action-dialog.tsx

@@ -39,7 +39,9 @@ interface TableActionDialogProps {
   children?: ReactNode;
 }
 
-export function TableActionDialog(props: TableActionDialogProps) {
+export const TableActionDialog = React.memo(function TableActionDialog(
+  props: TableActionDialogProps,
+) {
   const { sideButtonMetadata, onClose, title, actions, children } = props;
   const actionsMenu = actions ? basicActionsToMenu(actions) : undefined;
 
@@ -75,4 +77,4 @@ export function TableActionDialog(props: TableActionDialogProps) {
       </div>
     </Dialog>
   );
-}
+});

web-console/src/dialogs/task-table-action-dialog/task-table-action-dialog.tsx

@@ -30,7 +30,9 @@ interface TaskTableActionDialogProps {
   status?: string;
 }
 
-export function TaskTableActionDialog(props: TaskTableActionDialogProps) {
+export const TaskTableActionDialog = React.memo(function TaskTableActionDialog(
+  props: TaskTableActionDialogProps,
+) {
   const { taskId, actions, onClose, status } = props;
   const [activeTab, setActiveTab] = useState('status');
 
@@ -99,4 +101,4 @@ export function TaskTableActionDialog(props: TaskTableActionDialogProps) {
       )}
     </TableActionDialog>
   );
-}
+});

web-console/src/utils/render-spy.ts

@@ -0,0 +1,29 @@
+/*
+ * 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 { useEffect } from 'react';
+
+export function useRenderSpy(componentName: string, props: Record<string, any>) {
+  console.log(`Render on ${componentName}`);
+  const propKeys: string[] = Object.keys(props).sort();
+  for (const key of propKeys) {
+    useEffect(() => {
+      console.log(`${key} changed`);
+    }, [(props as any)[key]]);
+  }
+}

web-console/src/views/datasource-view/__snapshots__/datasource-view.spec.tsx.snap

@@ -4,10 +4,10 @@ exports[`data source view matches snapshot 1`] = `
 <div
   className="datasource-view app-view no-chart"
 >
-  <ViewControlBar
+  <Memo(ViewControlBar)
     label="Datasources"
   >
-    <RefreshButton
+    <Memo(RefreshButton)
       localStorageKey="datasources-refresh-rate"
       onRefresh={[Function]}
     />
@@ -58,7 +58,7 @@ exports[`data source view matches snapshot 1`] = `
       label="Show disabled"
       onChange={[Function]}
     />
-    <TableColumnSelector
+    <Memo(TableColumnSelector)
       columns={
         Array [
           "Datasource",
@@ -76,7 +76,7 @@ exports[`data source view matches snapshot 1`] = `
       onChange={[Function]}
       tableColumnsHidden={Array []}
     />
-  </ViewControlBar>
+  </Memo(ViewControlBar)>
   <ReactTable
     AggregatedComponent={[Function]}
     ExpanderComponent={[Function]}

web-console/src/views/home-view/home-view-card/home-view-card.tsx

@@ -33,7 +33,7 @@ export interface HomeViewCardProps {
   children?: ReactNode;
 }
 
-export function HomeViewCard(props: HomeViewCardProps) {
+export const HomeViewCard = React.memo(function HomeViewCard(props: HomeViewCardProps) {
   const { className, onClick, href, icon, title, loading, error, children } = props;
 
   return (
@@ -52,4 +52,4 @@ export function HomeViewCard(props: HomeViewCardProps) {
       </Card>
     </a>
   );
-}
+});

web-console/src/views/home-view/home-view.tsx

@@ -32,7 +32,7 @@ export interface HomeViewProps {
   noSqlMode: boolean;
 }
 
-export function HomeView(props: HomeViewProps) {
+export const HomeView = React.memo(function HomeView(props: HomeViewProps) {
   const { noSqlMode } = props;
 
   return (
@@ -46,4 +46,4 @@ export function HomeView(props: HomeViewProps) {
       <LookupsCard />
     </div>
   );
-}
+});

web-console/src/views/load-data-view/example-picker/example-picker.tsx

@@ -27,7 +27,7 @@ export interface ExamplePickerProps {
   onSelectExample: (exampleManifest: ExampleManifest) => void;
 }
 
-export function ExamplePicker(props: ExamplePickerProps) {
+export const ExamplePicker = React.memo(function ExamplePicker(props: ExamplePickerProps) {
   const { exampleManifests, onSelectExample } = props;
   const [selectedIndex, setSelectedIndex] = useState(0);
 
@@ -61,4 +61,4 @@ export function ExamplePicker(props: ExamplePickerProps) {
       </FormGroup>
     </>
   );
-}
+});

web-console/src/views/load-data-view/filter-table/filter-table.tsx

@@ -36,7 +36,7 @@ export interface FilterTableProps {
   onFilterSelect: (filter: DruidFilter, index: number) => void;
 }
 
-export function FilterTable(props: FilterTableProps) {
+export const FilterTable = React.memo(function FilterTable(props: FilterTableProps) {
   const {
     sampleData,
     columnFilter,
@@ -90,4 +90,4 @@ export function FilterTable(props: FilterTableProps) {
       sortable={false}
     />
   );
-}
+});

web-console/src/views/load-data-view/load-data-view.tsx

@@ -145,7 +145,10 @@ import { FilterTable } from './filter-table/filter-table';
 import { ParseDataTable } from './parse-data-table/parse-data-table';
 import { ParseTimeTable } from './parse-time-table/parse-time-table';
 import { SchemaTable } from './schema-table/schema-table';
-import { TransformTable } from './transform-table/transform-table';
+import {
+  TransformTable,
+  transformTableSelectedColumnName,
+} from './transform-table/transform-table';
 
 import './load-data-view.scss';
 
@@ -1635,7 +1638,8 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       columnFilter,
       specialColumnsOnly,
       transformQueryState,
-      selectedTransformIndex,
+      selectedTransform,
+      // selectedTransformIndex,
     } = this.state;
     const transforms: Transform[] =
       deepGet(spec, 'dataSchema.transformSpec.transforms') || EMPTY_ARRAY;
@@ -1668,7 +1672,10 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
             columnFilter={columnFilter}
             transformedColumnsOnly={specialColumnsOnly}
             transforms={transforms}
-            selectedTransformIndex={selectedTransformIndex}
+            selectedColumnName={transformTableSelectedColumnName(
+              transformQueryState.data,
+              selectedTransform,
+            )}
             onTransformSelect={this.onTransformSelect}
           />
         </div>

web-console/src/views/load-data-view/parse-data-table/parse-data-table.tsx

@@ -36,7 +36,7 @@ export interface ParseDataTableProps {
   onFlattenFieldSelect: (field: FlattenField, index: number) => void;
 }
 
-export function ParseDataTable(props: ParseDataTableProps) {
+export const ParseDataTable = React.memo(function ParseDataTable(props: ParseDataTableProps) {
   const {
     sampleData,
     columnFilter,
@@ -107,4 +107,4 @@ export function ParseDataTable(props: ParseDataTableProps) {
       sortable={false}
     />
   );
-}
+});

web-console/src/views/load-data-view/parse-time-table/parse-time-table.tsx

@@ -42,7 +42,7 @@ export interface ParseTimeTableProps {
   onTimestampColumnSelect: (newTimestampSpec: TimestampSpec) => void;
 }
 
-export function ParseTimeTable(props: ParseTimeTableProps) {
+export const ParseTimeTable = React.memo(function ParseTimeTable(props: ParseTimeTableProps) {
   const {
     sampleBundle,
     columnFilter,
@@ -123,4 +123,4 @@ export function ParseTimeTable(props: ParseTimeTableProps) {
       sortable={false}
     />
   );
-}
+});

web-console/src/views/load-data-view/schema-table/schema-table.tsx

@@ -52,7 +52,7 @@ export interface SchemaTableProps {
   ) => void;
 }
 
-export function SchemaTable(props: SchemaTableProps) {
+export const SchemaTable = React.memo(function SchemaTable(props: SchemaTableProps) {
   const {
     sampleBundle,
     columnFilter,
@@ -156,4 +156,4 @@ export function SchemaTable(props: SchemaTableProps) {
       sortable={false}
     />
   );
-}
+});

web-console/src/views/load-data-view/transform-table/transform-table.spec.tsx

@@ -39,7 +39,7 @@ describe('transform table', () => {
         columnFilter=""
         transformedColumnsOnly={false}
         transforms={[]}
-        selectedTransformIndex={-1}
+        selectedColumnName={undefined}
         onTransformSelect={() => {}}
       />
     );

web-console/src/views/load-data-view/transform-table/transform-table.tsx

@@ -28,22 +28,32 @@ import { HeaderAndRows, SampleEntry } from '../../../utils/sampler';
 
 import './transform-table.scss';
 
+export function transformTableSelectedColumnName(
+  sampleData: HeaderAndRows,
+  selectedTransform: Transform | undefined,
+): string | undefined {
+  if (!selectedTransform) return;
+  const selectedTransformName = selectedTransform.name;
+  if (!sampleData.header.includes(selectedTransformName)) return;
+  return selectedTransformName;
+}
+
 export interface TransformTableProps {
   sampleData: HeaderAndRows;
   columnFilter: string;
   transformedColumnsOnly: boolean;
   transforms: Transform[];
-  selectedTransformIndex: number;
+  selectedColumnName: string | undefined;
   onTransformSelect: (transform: Transform, index: number) => void;
 }
 
-export function TransformTable(props: TransformTableProps) {
+export const TransformTable = React.memo(function TransformTable(props: TransformTableProps) {
   const {
     sampleData,
     columnFilter,
     transformedColumnsOnly,
     transforms,
-    selectedTransformIndex,
+    selectedColumnName,
     onTransformSelect,
   } = props;
 
@@ -60,7 +70,7 @@ export function TransformTable(props: TransformTableProps) {
 
         const columnClassName = classNames({
           transformed: transform,
-          selected: transform && transformIndex === selectedTransformIndex,
+          selected: columnName === selectedColumnName,
         });
         return {
           Header: (
@@ -99,4 +109,4 @@ export function TransformTable(props: TransformTableProps) {
       sortable={false}
     />
   );
-}
+});

web-console/src/views/lookups-view/__snapshots__/lookups-view.spec.tsx.snap

@@ -4,10 +4,10 @@ exports[`lookups view matches snapshot 1`] = `
 <div
   className="lookups-view app-view"
 >
-  <ViewControlBar
+  <Memo(ViewControlBar)
     label="Lookups"
   >
-    <RefreshButton
+    <Memo(RefreshButton)
       localStorageKey="lookups-refresh-rate"
       onRefresh={[Function]}
     />
@@ -16,7 +16,7 @@ exports[`lookups view matches snapshot 1`] = `
       onClick={[Function]}
       text="Add lookup"
     />
-    <TableColumnSelector
+    <Memo(TableColumnSelector)
       columns={
         Array [
           "Lookup name",
@@ -29,7 +29,7 @@ exports[`lookups view matches snapshot 1`] = `
       onChange={[Function]}
       tableColumnsHidden={Array []}
     />
-  </ViewControlBar>
+  </Memo(ViewControlBar)>
   <ReactTable
     AggregatedComponent={[Function]}
     ExpanderComponent={[Function]}

web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap

@@ -72,7 +72,7 @@ exports[`sql view matches snapshot 1`] = `
         </Blueprint3.Tooltip>
       </div>
     </div>
-    <QueryOutput
+    <Memo(QueryOutput)
       loading={false}
       onQueryChange={[Function]}
       runeMode={false}

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

@@ -28,7 +28,7 @@ export interface NumberMenuItemsProps {
   onQueryChange: (queryString: SqlQuery, run?: boolean) => void;
 }
 
-export function NumberMenuItems(props: NumberMenuItemsProps) {
+export const NumberMenuItems = React.memo(function NumberMenuItems(props: NumberMenuItemsProps) {
   function renderFilterMenu(): JSX.Element {
     const { columnName, parsedQuery, onQueryChange } = props;
 
@@ -162,4 +162,4 @@ export function NumberMenuItems(props: NumberMenuItemsProps) {
       {renderAggregateMenu()}
     </>
   );
-}
+});

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

@@ -35,7 +35,7 @@ export interface StringMenuItemsProps {
   onQueryChange: (queryString: SqlQuery, run?: boolean) => void;
 }
 
-export function StringMenuItems(props: StringMenuItemsProps) {
+export const StringMenuItems = React.memo(function StringMenuItems(props: StringMenuItemsProps) {
   function renderFilterMenu(): JSX.Element | undefined {
     const { columnName, parsedQuery, onQueryChange } = props;
 
@@ -180,4 +180,4 @@ export function StringMenuItems(props: StringMenuItemsProps) {
       {renderAggregateMenu()}
     </>
   );
-}
+});

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

@@ -93,7 +93,7 @@ export interface TimeMenuItemsProps {
   onQueryChange: (queryString: SqlQuery, run?: boolean) => void;
 }
 
-export function TimeMenuItems(props: TimeMenuItemsProps) {
+export const TimeMenuItems = React.memo(function TimeMenuItems(props: TimeMenuItemsProps) {
   function renderFilterMenu(): JSX.Element | undefined {
     const { columnName, parsedQuery, onQueryChange } = props;
     const now = new Date();
@@ -350,4 +350,4 @@ export function TimeMenuItems(props: TimeMenuItemsProps) {
       {renderAggregateMenu()}
     </>
   );
-}
+});

web-console/src/views/query-view/query-extra-info/query-extra-info.tsx

@@ -49,7 +49,7 @@ export interface QueryExtraInfoProps {
   onDownload: (filename: string, format: string) => void;
 }
 
-export function QueryExtraInfo(props: QueryExtraInfoProps) {
+export const QueryExtraInfo = React.memo(function QueryExtraInfo(props: QueryExtraInfoProps) {
   const { queryExtraInfo, onDownload } = props;
 
   function handleQueryInfoClick() {
@@ -118,4 +118,4 @@ export function QueryExtraInfo(props: QueryExtraInfoProps) {
       </Popover>
     </div>
   );
-}
+});

web-console/src/views/query-view/query-output/query-output.tsx

@@ -47,7 +47,7 @@ export interface QueryOutputProps {
   runeMode: boolean;
 }
 
-export function QueryOutput(props: QueryOutputProps) {
+export const QueryOutput = React.memo(function QueryOutput(props: QueryOutputProps) {
   const { queryResult, parsedQuery, loading, error } = props;
   const [showValue, setShowValue] = useState();
 
@@ -305,4 +305,4 @@ export function QueryOutput(props: QueryOutputProps) {
       {showValue && <ShowValueDialog onClose={() => setShowValue(undefined)} str={showValue} />}
     </div>
   );
-}
+});

web-console/src/views/segments-view/__snapshots__/segments-view.spec.tsx.snap

@@ -5,10 +5,10 @@ exports[`segments-view matches snapshot 1`] = `
   <div
     className="segments-view app-view"
   >
-    <ViewControlBar
+    <Memo(ViewControlBar)
       label="Segments"
     >
-      <RefreshButton
+      <Memo(RefreshButton)
         localStorageKey="segments-refresh-rate"
         onRefresh={[Function]}
       />
@@ -66,7 +66,7 @@ exports[`segments-view matches snapshot 1`] = `
           icon="more"
         />
       </Blueprint3.Popover>
-      <TableColumnSelector
+      <Memo(TableColumnSelector)
         columns={
           Array [
             "Segment ID",
@@ -88,7 +88,7 @@ exports[`segments-view matches snapshot 1`] = `
         onChange={[Function]}
         tableColumnsHidden={Array []}
       />
-    </ViewControlBar>
+    </Memo(ViewControlBar)>
     <ReactTable
       AggregatedComponent={[Function]}
       ExpanderComponent={[Function]}

web-console/src/views/servers-view/__snapshots__/servers-view.spec.tsx.snap

@@ -4,7 +4,7 @@ exports[`servers view action servers view 1`] = `
 <div
   className="servers-view app-view"
 >
-  <ViewControlBar
+  <Memo(ViewControlBar)
     label="Servers"
   >
     <Component>
@@ -30,7 +30,7 @@ exports[`servers view action servers view 1`] = `
         Tier
       </Blueprint3.Button>
     </Blueprint3.ButtonGroup>
-    <RefreshButton
+    <Memo(RefreshButton)
       localStorageKey="servers-refresh-rate"
       onRefresh={[Function]}
     />
@@ -71,7 +71,7 @@ exports[`servers view action servers view 1`] = `
         icon="more"
       />
     </Blueprint3.Popover>
-    <TableColumnSelector
+    <Memo(TableColumnSelector)
       columns={
         Array [
           "Server",
@@ -89,7 +89,7 @@ exports[`servers view action servers view 1`] = `
       onChange={[Function]}
       tableColumnsHidden={Array []}
     />
-  </ViewControlBar>
+  </Memo(ViewControlBar)>
   <ReactTable
     AggregatedComponent={[Function]}
     ExpanderComponent={[Function]}

web-console/src/views/task-view/__snapshots__/tasks-view.spec.tsx.snap

@@ -17,10 +17,10 @@ exports[`tasks view matches snapshot 1`] = `
     <div
       className="top-pane"
     >
-      <ViewControlBar
+      <Memo(ViewControlBar)
         label="Supervisors"
       >
-        <RefreshButton
+        <Memo(RefreshButton)
           localStorageKey="supervisors-refresh-rate"
           onRefresh={[Function]}
         />
@@ -127,7 +127,7 @@ exports[`tasks view matches snapshot 1`] = `
             icon="more"
           />
         </Blueprint3.Popover>
-        <TableColumnSelector
+        <Memo(TableColumnSelector)
           columns={
             Array [
               "Datasource",
@@ -140,7 +140,7 @@ exports[`tasks view matches snapshot 1`] = `
           onChange={[Function]}
           tableColumnsHidden={Array []}
         />
-      </ViewControlBar>
+      </Memo(ViewControlBar)>
       <ReactTable
         AggregatedComponent={[Function]}
         ExpanderComponent={[Function]}
@@ -331,7 +331,7 @@ exports[`tasks view matches snapshot 1`] = `
     <div
       className="bottom-pane"
     >
-      <ViewControlBar
+      <Memo(ViewControlBar)
         label="Tasks"
       >
         <Component>
@@ -369,7 +369,7 @@ exports[`tasks view matches snapshot 1`] = `
             Status
           </Blueprint3.Button>
         </Blueprint3.ButtonGroup>
-        <RefreshButton
+        <Memo(RefreshButton)
           localStorageKey="task-refresh-rate"
           onRefresh={[Function]}
         />
@@ -457,7 +457,7 @@ exports[`tasks view matches snapshot 1`] = `
             icon="more"
           />
         </Blueprint3.Popover>
-        <TableColumnSelector
+        <Memo(TableColumnSelector)
           columns={
             Array [
               "Task ID",
@@ -474,7 +474,7 @@ exports[`tasks view matches snapshot 1`] = `
           onChange={[Function]}
           tableColumnsHidden={Array []}
         />
-      </ViewControlBar>
+      </Memo(ViewControlBar)>
       <ReactTable
         AggregatedComponent={[Function]}
         ExpanderComponent={[Function]}

web-console/src/visualization/chart-axis.tsx

@@ -25,7 +25,7 @@ interface ChartAxisProps {
   className?: string;
 }
 
-export function ChartAxis(props: ChartAxisProps) {
+export const ChartAxis = React.memo(function ChartAxis(props: ChartAxisProps) {
   const { transform, scale, className } = props;
   return (
     <g
@@ -34,4 +34,4 @@ export function ChartAxis(props: ChartAxisProps) {
       ref={node => d3.select(node).call(scale)}
     />
   );
-}
+});

web-console/src/visualization/stacked-bar-chart.tsx

@@ -50,7 +50,7 @@ export interface HoveredBarInfo {
   yValue?: number;
 }
 
-export function StackedBarChart(props: StackedBarChartProps) {
+export const StackedBarChart = React.memo(function StackedBarChart(props: StackedBarChartProps) {
   const {
     activeDataType,
     svgWidth,
@@ -147,4 +147,4 @@ export function StackedBarChart(props: StackedBarChartProps) {
       {renderBarChart()}
     </div>
   );
-}
+});