From 9964dd4cb260058194772c7cee638542205b5e33 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Tue, 17 Nov 2020 13:25:03 -0800
Subject: [PATCH] Web console: fix data loader schema table column ordering bug
 and other polish (#10588)

* remove unused fields

* keep tables live

* advanced

* fix schema view

* better indication

* tests pass

* Show more instead of show advanced

* fix tests

* extract dynamic configs

* update snapshots

* fix issues

* update snapshot

* reword without >
---
 .../component/load-data/config/partition.ts   |    8 +-
 .../__snapshots__/auto-form.spec.tsx.snap     |   13 +-
 .../components/auto-form/auto-form.spec.tsx   |    5 +-
 .../src/components/auto-form/auto-form.tsx    |   52 +-
 ...inator-dynamic-config-dialog.spec.tsx.snap |   10 +-
 .../coordinator-dynamic-config-dialog.tsx     |  198 +--
 .../overlord-dynamic-config-dialog.tsx        |   16 +-
 .../__snapshots__/ingestion-spec.spec.ts.snap |    4 +-
 .../coordinator-dynamic-config.tsx            |  208 +++
 web-console/src/druid-models/index.ts         |    2 +
 .../src/druid-models/ingestion-spec.spec.ts   |   12 +-
 .../src/druid-models/ingestion-spec.tsx       |  240 ++--
 web-console/src/druid-models/input-format.tsx |   35 +-
 .../druid-models/overlord-dynamic-config.tsx  |   35 +
 .../src/druid-models/timestamp-spec.tsx       |    7 +-
 .../src/druid-models/transform-spec.tsx       |    1 +
 web-console/src/utils/general.spec.ts         |   10 +
 web-console/src/utils/general.tsx             |   27 +-
 web-console/src/utils/query-manager.tsx       |    3 +
 web-console/src/utils/query-state.ts          |   15 +-
 web-console/src/utils/sampler.ts              |   54 +-
 web-console/src/utils/utils.spec.ts           |   15 +-
 .../load-data-view.spec.tsx.snap              |   18 +-
 .../views/load-data-view/info-messages.tsx    |  191 +++
 .../views/load-data-view/load-data-view.tsx   | 1273 ++++++++++-------
 .../reorder-menu/reorder-menu.tsx             |   66 +
 .../__snapshots__/schema-table.spec.tsx.snap  |  104 +-
 .../schema-table/schema-table.spec.tsx        |    9 +-
 .../schema-table/schema-table.tsx             |   79 +-
 .../src/views/query-view/query-view.tsx       |    5 +-
 30 files changed, 1703 insertions(+), 1012 deletions(-)
 create mode 100644 web-console/src/druid-models/coordinator-dynamic-config.tsx
 create mode 100644 web-console/src/druid-models/overlord-dynamic-config.tsx
 create mode 100644 web-console/src/views/load-data-view/info-messages.tsx
 create mode 100644 web-console/src/views/load-data-view/reorder-menu/reorder-menu.tsx

diff --git a/web-console/e2e-tests/component/load-data/config/partition.ts b/web-console/e2e-tests/component/load-data/config/partition.ts
index f811a531664..375ad550745 100644
--- a/web-console/e2e-tests/component/load-data/config/partition.ts
+++ b/web-console/e2e-tests/component/load-data/config/partition.ts
@@ -26,10 +26,10 @@ import { getLabeledInput, selectSuggestibleInput, setLabeledInput } from '../../
  * Possible values for partition step segment granularity.
  */
 export enum SegmentGranularity {
-  HOUR = 'HOUR',
-  DAY = 'DAY',
-  MONTH = 'MONTH',
-  YEAR = 'YEAR',
+  HOUR = 'hour',
+  DAY = 'day',
+  MONTH = 'month',
+  YEAR = 'year',
 }
 
 const PARTITIONING_TYPE = 'Partitioning type';
diff --git a/web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap b/web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap
index 1a4000ef00f..baf1011bdc8 100644
--- a/web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap
+++ b/web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`auto-form snapshot matches snapshot 1`] = `
+exports[`AutoForm matches snapshot 1`] = `
 <div
   className="auto-form"
 >
@@ -132,5 +132,16 @@ exports[`auto-form snapshot matches snapshot 1`] = `
       placeholder=""
     />
   </Memo(FormGroupWithInfo)>
+  <Blueprint3.FormGroup
+    key="more-or-less"
+  >
+    <Blueprint3.Button
+      fill={true}
+      minimal={true}
+      onClick={[Function]}
+      rightIcon="chevron-down"
+      text="Show more"
+    />
+  </Blueprint3.FormGroup>
 </div>
 `;
diff --git a/web-console/src/components/auto-form/auto-form.spec.tsx b/web-console/src/components/auto-form/auto-form.spec.tsx
index 89bd645e9f6..c2beb3d498b 100644
--- a/web-console/src/components/auto-form/auto-form.spec.tsx
+++ b/web-console/src/components/auto-form/auto-form.spec.tsx
@@ -21,7 +21,7 @@ import React from 'react';
 
 import { AutoForm } from './auto-form';
 
-describe('auto-form snapshot', () => {
+describe('AutoForm', () => {
   it('matches snapshot', () => {
     const autoForm = shallow(
       <AutoForm
@@ -34,6 +34,9 @@ describe('auto-form snapshot', () => {
           { name: 'testFive', type: 'string-array' },
           { name: 'testSix', type: 'json' },
           { name: 'testSeven', type: 'json' },
+
+          { name: 'testNotDefined', type: 'string', defined: false },
+          { name: 'testAdvanced', type: 'string', hideInMore: true },
         ]}
         model={String}
         onChange={() => {}}
diff --git a/web-console/src/components/auto-form/auto-form.tsx b/web-console/src/components/auto-form/auto-form.tsx
index 6ae9e4b3b4d..3b2f6c0da0e 100644
--- a/web-console/src/components/auto-form/auto-form.tsx
+++ b/web-console/src/components/auto-form/auto-form.tsx
@@ -17,6 +17,7 @@
  */
 
 import { Button, ButtonGroup, FormGroup, Intent, NumericInput } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
 
 import { deepDelete, deepGet, deepSet } from '../../utils';
@@ -54,6 +55,7 @@ export interface Field<M> {
   disabled?: Functor<M, boolean>;
   defined?: Functor<M, boolean>;
   required?: Functor<M, boolean>;
+  hideInMore?: Functor<M, boolean>;
   adjustment?: (model: M) => M;
   issueWithValue?: (value: any) => string | undefined;
 }
@@ -68,7 +70,14 @@ export interface AutoFormProps<M> {
   globalAdjustment?: (model: M) => M;
 }
 
-export class AutoForm<T extends Record<string, any>> extends React.PureComponent<AutoFormProps<T>> {
+export interface AutoFormState {
+  showMore: boolean;
+}
+
+export class AutoForm<T extends Record<string, any>> extends React.PureComponent<
+  AutoFormProps<T>,
+  AutoFormState
+> {
   static REQUIRED_INTENT = Intent.PRIMARY;
 
   static makeLabelName(label: string): string {
@@ -138,7 +147,9 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
 
   constructor(props: AutoFormProps<T>) {
     super(props);
-    this.state = {};
+    this.state = {
+      showMore: false,
+    };
   }
 
   private fieldChange = (field: Field<T>, newValue: any) => {
@@ -391,7 +402,6 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
   private renderField = (field: Field<T>) => {
     const { model } = this.props;
     if (!model) return;
-    if (!AutoForm.evaluateFunctor(field.defined, model, true)) return;
 
     const label = field.label || AutoForm.makeLabelName(field.name);
     return (
@@ -415,12 +425,46 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
     );
   }
 
+  renderMoreOrLess() {
+    const { showMore } = this.state;
+
+    return (
+      <FormGroup key="more-or-less">
+        <Button
+          text={showMore ? 'Show less' : 'Show more'}
+          rightIcon={showMore ? IconNames.CHEVRON_UP : IconNames.CHEVRON_DOWN}
+          minimal
+          fill
+          onClick={() => {
+            this.setState(({ showMore }) => ({ showMore: !showMore }));
+          }}
+        />
+      </FormGroup>
+    );
+  }
+
   render(): JSX.Element {
     const { fields, model, showCustom } = this.props;
+    const { showMore } = this.state;
+
+    let shouldShowMore = false;
+    const shownFields = fields.filter(field => {
+      if (AutoForm.evaluateFunctor(field.defined, model, true)) {
+        if (AutoForm.evaluateFunctor(field.hideInMore, model, false)) {
+          shouldShowMore = true;
+          return showMore;
+        }
+        return true;
+      } else {
+        return false;
+      }
+    });
+
     return (
       <div className="auto-form">
-        {model && fields.map(this.renderField)}
+        {model && shownFields.map(this.renderField)}
         {model && showCustom && showCustom(model) && this.renderCustom()}
+        {shouldShowMore && this.renderMoreOrLess()}
       </div>
     );
   }
diff --git a/web-console/src/dialogs/coordinator-dynamic-config-dialog/__snapshots__/coordinator-dynamic-config-dialog.spec.tsx.snap b/web-console/src/dialogs/coordinator-dynamic-config-dialog/__snapshots__/coordinator-dynamic-config-dialog.spec.tsx.snap
index f061add5209..50f17d44ee6 100644
--- a/web-console/src/dialogs/coordinator-dynamic-config-dialog/__snapshots__/coordinator-dynamic-config-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/coordinator-dynamic-config-dialog/__snapshots__/coordinator-dynamic-config-dialog.spec.tsx.snap
@@ -17,6 +17,10 @@ exports[`coordinator dynamic config matches snapshot 1`] = `
     </Memo(ExternalLink)>
     .
   </p>
+  <Memo(FormJsonSelector)
+    onChange={[Function]}
+    tab="form"
+  />
   <AutoForm
     fields={
       Array [
@@ -47,13 +51,11 @@ exports[`coordinator dynamic config matches snapshot 1`] = `
         Object {
           "defaultValue": false,
           "info": <React.Fragment>
-            Send kill tasks for ALL dataSources if property
-             
+            Send kill tasks for ALL dataSources if property 
             <Unknown>
               druid.coordinator.kill.on
             </Unknown>
-             is true. If this is set to true then
-             
+             is true. If this is set to true then 
             <Unknown>
               killDataSourceWhitelist
             </Unknown>
diff --git a/web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.tsx b/web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.tsx
index bfc197cc606..0ec905463a1 100644
--- a/web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.tsx
+++ b/web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.tsx
@@ -16,13 +16,20 @@
  * limitations under the License.
  */
 
-import { Code, Intent } from '@blueprintjs/core';
+import { Intent } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import axios from 'axios';
 import React, { useState } from 'react';
 
 import { SnitchDialog } from '..';
-import { AutoForm, ExternalLink } from '../../components';
+import {
+  AutoForm,
+  ExternalLink,
+  FormJsonSelector,
+  FormJsonTabs,
+  JsonInput,
+} from '../../components';
+import { COORDINATOR_DYNAMIC_CONFIG_FIELDS, CoordinatorDynamicConfig } from '../../druid-models';
 import { useQueryManager } from '../../hooks';
 import { getLink } from '../../links';
 import { AppToaster } from '../../singletons/toaster';
@@ -38,7 +45,8 @@ export const CoordinatorDynamicConfigDialog = React.memo(function CoordinatorDyn
   props: CoordinatorDynamicConfigDialogProps,
 ) {
   const { onClose } = props;
-  const [dynamicConfig, setDynamicConfig] = useState<Record<string, any>>({});
+  const [currentTab, setCurrentTab] = useState<FormJsonTabs>('form');
+  const [dynamicConfig, setDynamicConfig] = useState<CoordinatorDynamicConfig>({});
 
   const [historyRecordsState] = useQueryManager<null, any[]>({
     processQuery: async () => {
@@ -106,180 +114,16 @@ export const CoordinatorDynamicConfigDialog = React.memo(function CoordinatorDyn
         </ExternalLink>
         .
       </p>
-      <AutoForm
-        fields={[
-          {
-            name: 'maxSegmentsToMove',
-            type: 'number',
-            defaultValue: 5,
-            info: <>The maximum number of segments that can be moved at any given time.</>,
-          },
-          {
-            name: 'balancerComputeThreads',
-            type: 'number',
-            defaultValue: 1,
-            info: (
-              <>
-                Thread pool size for computing moving cost of segments in segment balancing.
-                Consider increasing this if you have a lot of segments and moving segments starts to
-                get stuck.
-              </>
-            ),
-          },
-          {
-            name: 'emitBalancingStats',
-            type: 'boolean',
-            defaultValue: false,
-            info: (
-              <>
-                Boolean flag for whether or not we should emit balancing stats. This is an expensive
-                operation.
-              </>
-            ),
-          },
-          {
-            name: 'killAllDataSources',
-            type: 'boolean',
-            defaultValue: false,
-            info: (
-              <>
-                Send kill tasks for ALL dataSources if property{' '}
-                <Code>druid.coordinator.kill.on</Code> is true. If this is set to true then{' '}
-                <Code>killDataSourceWhitelist</Code> must not be specified or be empty list.
-              </>
-            ),
-          },
-          {
-            name: 'killDataSourceWhitelist',
-            type: 'string-array',
-            emptyValue: [],
-            info: (
-              <>
-                List of dataSources for which kill tasks are sent if property{' '}
-                <Code>druid.coordinator.kill.on</Code> is true. This can be a list of
-                comma-separated dataSources or a JSON array.
-              </>
-            ),
-          },
-          {
-            name: 'killPendingSegmentsSkipList',
-            type: 'string-array',
-            emptyValue: [],
-            info: (
-              <>
-                List of dataSources for which pendingSegments are NOT cleaned up if property{' '}
-                <Code>druid.coordinator.kill.pendingSegments.on</Code> is true. This can be a list
-                of comma-separated dataSources or a JSON array.
-              </>
-            ),
-          },
-          {
-            name: 'maxSegmentsInNodeLoadingQueue',
-            type: 'number',
-            defaultValue: 0,
-            info: (
-              <>
-                The maximum number of segments that could be queued for loading to any given server.
-                This parameter could be used to speed up segments loading process, especially if
-                there are "slow" nodes in the cluster (with low loading speed) or if too much
-                segments scheduled to be replicated to some particular node (faster loading could be
-                preferred to better segments distribution). Desired value depends on segments
-                loading speed, acceptable replication time and number of nodes. Value 1000 could be
-                a start point for a rather big cluster. Default value is 0 (loading queue is
-                unbounded)
-              </>
-            ),
-          },
-          {
-            name: 'mergeBytesLimit',
-            type: 'size-bytes',
-            defaultValue: 524288000,
-            info: <>The maximum total uncompressed size in bytes of segments to merge.</>,
-          },
-          {
-            name: 'mergeSegmentsLimit',
-            type: 'number',
-            defaultValue: 100,
-            info: <>The maximum number of segments that can be in a single append task.</>,
-          },
-          {
-            name: 'millisToWaitBeforeDeleting',
-            type: 'number',
-            defaultValue: 900000,
-            info: (
-              <>
-                How long does the Coordinator need to be active before it can start removing
-                (marking unused) segments in metadata storage.
-              </>
-            ),
-          },
-          {
-            name: 'replicantLifetime',
-            type: 'number',
-            defaultValue: 15,
-            info: (
-              <>
-                The maximum number of Coordinator runs for a segment to be replicated before we
-                start alerting.
-              </>
-            ),
-          },
-          {
-            name: 'replicationThrottleLimit',
-            type: 'number',
-            defaultValue: 10,
-            info: <>The maximum number of segments that can be replicated at one time.</>,
-          },
-          {
-            name: 'decommissioningNodes',
-            type: 'string-array',
-            emptyValue: [],
-            info: (
-              <>
-                List of historical services to 'decommission'. Coordinator will not assign new
-                segments to 'decommissioning' services, and segments will be moved away from them to
-                be placed on non-decommissioning services at the maximum rate specified by{' '}
-                <Code>decommissioningMaxPercentOfMaxSegmentsToMove</Code>.
-              </>
-            ),
-          },
-          {
-            name: 'decommissioningMaxPercentOfMaxSegmentsToMove',
-            type: 'number',
-            defaultValue: 70,
-            info: (
-              <>
-                The maximum number of segments that may be moved away from 'decommissioning'
-                services to non-decommissioning (that is, active) services during one Coordinator
-                run. This value is relative to the total maximum segment movements allowed during
-                one run which is determined by <Code>maxSegmentsToMove</Code>. If
-                <Code>decommissioningMaxPercentOfMaxSegmentsToMove</Code> is 0, segments will
-                neither be moved from or to 'decommissioning' services, effectively putting them in
-                a sort of "maintenance" mode that will not participate in balancing or assignment by
-                load rules. Decommissioning can also become stalled if there are no available active
-                services to place the segments. By leveraging the maximum percent of decommissioning
-                segment movements, an operator can prevent active services from overload by
-                prioritizing balancing, or decrease decommissioning time instead. The value should
-                be between 0 and 100.
-              </>
-            ),
-          },
-          {
-            name: 'pauseCoordination',
-            type: 'boolean',
-            defaultValue: false,
-            info: (
-              <>
-                Boolean flag for whether or not the coordinator should execute its various duties of
-                coordinating the cluster. Setting this to true essentially pauses all coordination
-                work while allowing the API to remain up.
-              </>
-            ),
-          },
-        ]}
-        model={dynamicConfig}
-        onChange={m => setDynamicConfig(m)}
-      />
+      <FormJsonSelector tab={currentTab} onChange={setCurrentTab} />
+      {currentTab === 'form' ? (
+        <AutoForm
+          fields={COORDINATOR_DYNAMIC_CONFIG_FIELDS}
+          model={dynamicConfig}
+          onChange={setDynamicConfig}
+        />
+      ) : (
+        <JsonInput value={dynamicConfig} onChange={setDynamicConfig} height="50vh" />
+      )}
     </SnitchDialog>
   );
 });
diff --git a/web-console/src/dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog.tsx b/web-console/src/dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog.tsx
index 57ced4b9ac6..d54cba60521 100644
--- a/web-console/src/dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog.tsx
+++ b/web-console/src/dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog.tsx
@@ -23,6 +23,7 @@ import React, { useState } from 'react';
 
 import { SnitchDialog } from '..';
 import { AutoForm, ExternalLink } from '../../components';
+import { OVERLORD_DYNAMIC_CONFIG_FIELDS, OverlordDynamicConfig } from '../../druid-models';
 import { useQueryManager } from '../../hooks';
 import { getLink } from '../../links';
 import { AppToaster } from '../../singletons/toaster';
@@ -38,7 +39,7 @@ export const OverlordDynamicConfigDialog = React.memo(function OverlordDynamicCo
   props: OverlordDynamicConfigDialogProps,
 ) {
   const { onClose } = props;
-  const [dynamicConfig, setDynamicConfig] = useState<Record<string, any>>({});
+  const [dynamicConfig, setDynamicConfig] = useState<OverlordDynamicConfig>({});
 
   const [historyRecordsState] = useQueryManager<null, any[]>({
     processQuery: async () => {
@@ -108,18 +109,9 @@ export const OverlordDynamicConfigDialog = React.memo(function OverlordDynamicCo
         .
       </p>
       <AutoForm
-        fields={[
-          {
-            name: 'selectStrategy',
-            type: 'json',
-          },
-          {
-            name: 'autoScaler',
-            type: 'json',
-          },
-        ]}
+        fields={OVERLORD_DYNAMIC_CONFIG_FIELDS}
         model={dynamicConfig}
-        onChange={m => setDynamicConfig(m)}
+        onChange={setDynamicConfig}
       />
     </SnitchDialog>
   );
diff --git a/web-console/src/druid-models/__snapshots__/ingestion-spec.spec.ts.snap b/web-console/src/druid-models/__snapshots__/ingestion-spec.spec.ts.snap
index 90067211748..1008cb2112b 100644
--- a/web-console/src/druid-models/__snapshots__/ingestion-spec.spec.ts.snap
+++ b/web-console/src/druid-models/__snapshots__/ingestion-spec.spec.ts.snap
@@ -13,9 +13,9 @@ Object {
         ],
       },
       "granularitySpec": Object {
-        "queryGranularity": "HOUR",
+        "queryGranularity": "hour",
         "rollup": true,
-        "segmentGranularity": "DAY",
+        "segmentGranularity": "day",
         "type": "uniform",
       },
       "metricsSpec": Array [
diff --git a/web-console/src/druid-models/coordinator-dynamic-config.tsx b/web-console/src/druid-models/coordinator-dynamic-config.tsx
new file mode 100644
index 00000000000..b5621ce31f8
--- /dev/null
+++ b/web-console/src/druid-models/coordinator-dynamic-config.tsx
@@ -0,0 +1,208 @@
+/*
+ * 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 { Code } from '@blueprintjs/core';
+import React from 'react';
+
+import { Field } from '../components';
+
+export interface CoordinatorDynamicConfig {
+  maxSegmentsToMove?: number;
+  balancerComputeThreads?: number;
+  emitBalancingStats?: boolean;
+  killAllDataSources?: boolean;
+  killDataSourceWhitelist?: string[];
+  killPendingSegmentsSkipList?: string[];
+  maxSegmentsInNodeLoadingQueue?: number;
+  mergeBytesLimit?: number;
+  mergeSegmentsLimit?: number;
+  millisToWaitBeforeDeleting?: number;
+  replicantLifetime?: number;
+  replicationThrottleLimit?: number;
+  decommissioningNodes?: string[];
+  decommissioningMaxPercentOfMaxSegmentsToMove?: number;
+  pauseCoordination?: boolean;
+}
+
+export const COORDINATOR_DYNAMIC_CONFIG_FIELDS: Field<CoordinatorDynamicConfig>[] = [
+  {
+    name: 'maxSegmentsToMove',
+    type: 'number',
+    defaultValue: 5,
+    info: <>The maximum number of segments that can be moved at any given time.</>,
+  },
+  {
+    name: 'balancerComputeThreads',
+    type: 'number',
+    defaultValue: 1,
+    info: (
+      <>
+        Thread pool size for computing moving cost of segments in segment balancing. Consider
+        increasing this if you have a lot of segments and moving segments starts to get stuck.
+      </>
+    ),
+  },
+  {
+    name: 'emitBalancingStats',
+    type: 'boolean',
+    defaultValue: false,
+    info: (
+      <>
+        Boolean flag for whether or not we should emit balancing stats. This is an expensive
+        operation.
+      </>
+    ),
+  },
+  {
+    name: 'killAllDataSources',
+    type: 'boolean',
+    defaultValue: false,
+    info: (
+      <>
+        Send kill tasks for ALL dataSources if property <Code>druid.coordinator.kill.on</Code> is
+        true. If this is set to true then <Code>killDataSourceWhitelist</Code> must not be specified
+        or be empty list.
+      </>
+    ),
+  },
+  {
+    name: 'killDataSourceWhitelist',
+    type: 'string-array',
+    emptyValue: [],
+    info: (
+      <>
+        List of dataSources for which kill tasks are sent if property{' '}
+        <Code>druid.coordinator.kill.on</Code> is true. This can be a list of comma-separated
+        dataSources or a JSON array.
+      </>
+    ),
+  },
+  {
+    name: 'killPendingSegmentsSkipList',
+    type: 'string-array',
+    emptyValue: [],
+    info: (
+      <>
+        List of dataSources for which pendingSegments are NOT cleaned up if property{' '}
+        <Code>druid.coordinator.kill.pendingSegments.on</Code> is true. This can be a list of
+        comma-separated dataSources or a JSON array.
+      </>
+    ),
+  },
+  {
+    name: 'maxSegmentsInNodeLoadingQueue',
+    type: 'number',
+    defaultValue: 0,
+    info: (
+      <>
+        The maximum number of segments that could be queued for loading to any given server. This
+        parameter could be used to speed up segments loading process, especially if there are "slow"
+        nodes in the cluster (with low loading speed) or if too much segments scheduled to be
+        replicated to some particular node (faster loading could be preferred to better segments
+        distribution). Desired value depends on segments loading speed, acceptable replication time
+        and number of nodes. Value 1000 could be a start point for a rather big cluster. Default
+        value is 0 (loading queue is unbounded)
+      </>
+    ),
+  },
+  {
+    name: 'mergeBytesLimit',
+    type: 'size-bytes',
+    defaultValue: 524288000,
+    info: <>The maximum total uncompressed size in bytes of segments to merge.</>,
+  },
+  {
+    name: 'mergeSegmentsLimit',
+    type: 'number',
+    defaultValue: 100,
+    info: <>The maximum number of segments that can be in a single append task.</>,
+  },
+  {
+    name: 'millisToWaitBeforeDeleting',
+    type: 'number',
+    defaultValue: 900000,
+    info: (
+      <>
+        How long does the Coordinator need to be active before it can start removing (marking
+        unused) segments in metadata storage.
+      </>
+    ),
+  },
+  {
+    name: 'replicantLifetime',
+    type: 'number',
+    defaultValue: 15,
+    info: (
+      <>
+        The maximum number of Coordinator runs for a segment to be replicated before we start
+        alerting.
+      </>
+    ),
+  },
+  {
+    name: 'replicationThrottleLimit',
+    type: 'number',
+    defaultValue: 10,
+    info: <>The maximum number of segments that can be replicated at one time.</>,
+  },
+  {
+    name: 'decommissioningNodes',
+    type: 'string-array',
+    emptyValue: [],
+    info: (
+      <>
+        List of historical services to 'decommission'. Coordinator will not assign new segments to
+        'decommissioning' services, and segments will be moved away from them to be placed on
+        non-decommissioning services at the maximum rate specified by{' '}
+        <Code>decommissioningMaxPercentOfMaxSegmentsToMove</Code>.
+      </>
+    ),
+  },
+  {
+    name: 'decommissioningMaxPercentOfMaxSegmentsToMove',
+    type: 'number',
+    defaultValue: 70,
+    info: (
+      <>
+        The maximum number of segments that may be moved away from 'decommissioning' services to
+        non-decommissioning (that is, active) services during one Coordinator run. This value is
+        relative to the total maximum segment movements allowed during one run which is determined
+        by <Code>maxSegmentsToMove</Code>. If
+        <Code>decommissioningMaxPercentOfMaxSegmentsToMove</Code> is 0, segments will neither be
+        moved from or to 'decommissioning' services, effectively putting them in a sort of
+        "maintenance" mode that will not participate in balancing or assignment by load rules.
+        Decommissioning can also become stalled if there are no available active services to place
+        the segments. By leveraging the maximum percent of decommissioning segment movements, an
+        operator can prevent active services from overload by prioritizing balancing, or decrease
+        decommissioning time instead. The value should be between 0 and 100.
+      </>
+    ),
+  },
+  {
+    name: 'pauseCoordination',
+    type: 'boolean',
+    defaultValue: false,
+    info: (
+      <>
+        Boolean flag for whether or not the coordinator should execute its various duties of
+        coordinating the cluster. Setting this to true essentially pauses all coordination work
+        while allowing the API to remain up.
+      </>
+    ),
+  },
+];
diff --git a/web-console/src/druid-models/index.ts b/web-console/src/druid-models/index.ts
index 5e7debe93cf..c5186110c44 100644
--- a/web-console/src/druid-models/index.ts
+++ b/web-console/src/druid-models/index.ts
@@ -29,3 +29,5 @@ export * from './filter';
 export * from './dimension-spec';
 export * from './metric-spec';
 export * from './ingestion-spec';
+export * from './coordinator-dynamic-config';
+export * from './overlord-dynamic-config';
diff --git a/web-console/src/druid-models/ingestion-spec.spec.ts b/web-console/src/druid-models/ingestion-spec.spec.ts
index adccec656f8..fb6df068351 100644
--- a/web-console/src/druid-models/ingestion-spec.spec.ts
+++ b/web-console/src/druid-models/ingestion-spec.spec.ts
@@ -45,8 +45,8 @@ describe('ingestion-spec', () => {
         dataSource: 'wikipedia',
         granularitySpec: {
           type: 'uniform',
-          segmentGranularity: 'DAY',
-          queryGranularity: 'HOUR',
+          segmentGranularity: 'day',
+          queryGranularity: 'hour',
           rollup: true,
         },
         parser: {
@@ -183,8 +183,8 @@ describe('spec utils', () => {
         dataSource: 'wikipedia',
         granularitySpec: {
           type: 'uniform',
-          segmentGranularity: 'DAY',
-          queryGranularity: 'HOUR',
+          segmentGranularity: 'day',
+          queryGranularity: 'hour',
         },
         timestampSpec: {
           column: 'timestamp',
@@ -219,9 +219,9 @@ describe('spec utils', () => {
               ],
             },
             "granularitySpec": Object {
-              "queryGranularity": "HOUR",
+              "queryGranularity": "hour",
               "rollup": true,
-              "segmentGranularity": "DAY",
+              "segmentGranularity": "day",
               "type": "uniform",
             },
             "metricsSpec": Array [
diff --git a/web-console/src/druid-models/ingestion-spec.tsx b/web-console/src/druid-models/ingestion-spec.tsx
index e58c5916504..baa8b50729e 100644
--- a/web-console/src/druid-models/ingestion-spec.tsx
+++ b/web-console/src/druid-models/ingestion-spec.tsx
@@ -47,7 +47,7 @@ import {
   getMetricSpecSingleFieldName,
   MetricSpec,
 } from './metric-spec';
-import { PLACEHOLDER_TIMESTAMP_SPEC, TimestampSpec } from './timestamp-spec';
+import { TimestampSpec } from './timestamp-spec';
 import { TransformSpec } from './transform-spec';
 
 export const MAX_INLINE_DATA_LENGTH = 65536;
@@ -475,6 +475,7 @@ export function getIoConfigFormFields(ingestionComboType: IngestionComboType): F
           label: 'Dimensions',
           type: 'string-array',
           placeholder: '(optional)',
+          hideInMore: true,
           info: (
             <p>
               The list of dimensions to select. If left empty, no dimensions are returned. If left
@@ -487,6 +488,7 @@ export function getIoConfigFormFields(ingestionComboType: IngestionComboType): F
           label: 'Metrics',
           type: 'string-array',
           placeholder: '(optional)',
+          hideInMore: true,
           info: (
             <p>
               The list of metrics to select. If left empty, no metrics are returned. If left null or
@@ -499,6 +501,7 @@ export function getIoConfigFormFields(ingestionComboType: IngestionComboType): F
           label: 'Filter',
           type: 'json',
           placeholder: '(optional)',
+          hideInMore: true,
           info: (
             <p>
               The{' '}
@@ -983,45 +986,6 @@ export function getIoConfigTuningFormFields(
             </>
           ),
         },
-        {
-          name: 'inputSource.maxCacheCapacityBytes',
-          label: 'Max cache capacity bytes',
-          type: 'number',
-          defaultValue: 1073741824,
-          info: (
-            <>
-              <p>
-                Maximum size of the cache space in bytes. 0 means disabling cache. Cached files are
-                not removed until the ingestion task completes.
-              </p>
-            </>
-          ),
-        },
-        {
-          name: 'inputSource.maxFetchCapacityBytes',
-          label: 'Max fetch capacity bytes',
-          type: 'number',
-          defaultValue: 1073741824,
-          info: (
-            <>
-              <p>
-                Maximum size of the fetch space in bytes. 0 means disabling prefetch. Prefetched
-                files are removed immediately once they are read.
-              </p>
-            </>
-          ),
-        },
-        {
-          name: 'inputSource.prefetchTriggerBytes',
-          label: 'Prefetch trigger bytes',
-          type: 'number',
-          placeholder: 'maxFetchCapacityBytes / 2',
-          info: (
-            <>
-              <p>Threshold to trigger prefetching the objects.</p>
-            </>
-          ),
-        },
       ];
 
     case 'index_parallel:local':
@@ -1420,6 +1384,7 @@ export function invalidTuningConfig(tuningConfig: TuningConfig, intervals: any):
 
 export function getPartitionRelatedTuningSpecFormFields(
   specType: IngestionType,
+  dimensionSuggestions: string[] | undefined,
 ): Field<TuningConfig>[] {
   switch (specType) {
     case 'index_parallel':
@@ -1437,6 +1402,10 @@ export function getPartitionRelatedTuningSpecFormFields(
               single dimension). For best-effort rollup, you should use <Code>dynamic</Code>.
             </p>
           ),
+          adjustment: (t: TuningConfig) => {
+            if (!Array.isArray(dimensionSuggestions) || !dimensionSuggestions.length) return t;
+            return deepSet(t, 'partitionsSpec.partitionDimension', dimensionSuggestions[0]);
+          },
         },
         // partitionsSpec type: dynamic
         {
@@ -1460,6 +1429,8 @@ export function getPartitionRelatedTuningSpecFormFields(
           name: 'partitionsSpec.targetRowsPerSegment',
           label: 'Target rows per segment',
           type: 'number',
+          zeroMeansUndefined: true,
+          defaultValue: 5000000,
           defined: (t: TuningConfig) =>
             deepGet(t, 'partitionsSpec.type') === 'hashed' &&
             !deepGet(t, 'partitionsSpec.numShards'),
@@ -1481,6 +1452,8 @@ export function getPartitionRelatedTuningSpecFormFields(
           name: 'partitionsSpec.numShards',
           label: 'Num shards',
           type: 'number',
+          zeroMeansUndefined: true,
+          hideInMore: true,
           defined: (t: TuningConfig) =>
             deepGet(t, 'partitionsSpec.type') === 'hashed' &&
             !deepGet(t, 'partitionsSpec.targetRowsPerSegment'),
@@ -1502,6 +1475,7 @@ export function getPartitionRelatedTuningSpecFormFields(
           name: 'partitionsSpec.partitionDimensions',
           label: 'Partition dimensions',
           type: 'string-array',
+          placeholder: '(all dimensions)',
           defined: (t: TuningConfig) => deepGet(t, 'partitionsSpec.type') === 'hashed',
           info: <p>The dimensions to partition on. Leave blank to select all dimensions.</p>,
         },
@@ -1512,7 +1486,19 @@ export function getPartitionRelatedTuningSpecFormFields(
           type: 'string',
           defined: (t: TuningConfig) => deepGet(t, 'partitionsSpec.type') === 'single_dim',
           required: true,
-          info: <p>The dimension to partition on.</p>,
+          suggestions: dimensionSuggestions,
+          info: (
+            <>
+              <p>The dimension to partition on.</p>
+              <p>
+                This should be the first dimension in your schema which would make it first in the
+                sort order. As{' '}
+                <ExternalLink href={`${getLink('DOCS')}/ingestion/index.html#why-partition`}>
+                  Partitioning and sorting are best friends!
+                </ExternalLink>
+              </p>
+            </>
+          ),
         },
         {
           name: 'partitionsSpec.targetRowsPerSegment',
@@ -1603,6 +1589,7 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
     type: 'number',
     defaultValue: 3,
     defined: (t: TuningConfig) => t.type === 'index_parallel',
+    hideInMore: true,
     info: <>Maximum number of retries on task failures.</>,
   },
   {
@@ -1610,8 +1597,36 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
     type: 'number',
     defaultValue: 1000,
     defined: (t: TuningConfig) => t.type === 'index_parallel',
+    hideInMore: true,
     info: <>Polling period in milliseconds to check running task statuses.</>,
   },
+  {
+    name: 'totalNumMergeTasks',
+    type: 'number',
+    defaultValue: 10,
+    min: 1,
+    defined: (t: TuningConfig) =>
+      Boolean(
+        t.type === 'index_parallel' &&
+          oneOf(deepGet(t, 'partitionsSpec.type'), 'hashed', 'single_dim'),
+      ),
+    info: <>Number of tasks to merge partial segments after shuffle.</>,
+  },
+  {
+    name: 'maxNumSegmentsToMerge',
+    type: 'number',
+    defaultValue: 100,
+    defined: (t: TuningConfig) =>
+      Boolean(
+        t.type === 'index_parallel' &&
+          oneOf(deepGet(t, 'partitionsSpec.type'), 'hashed', 'single_dim'),
+      ),
+    info: (
+      <>
+        Max limit for the number of segments a single task can merge at the same time after shuffle.
+      </>
+    ),
+  },
   {
     name: 'maxRowsInMemory',
     type: 'number',
@@ -1624,33 +1639,6 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
     placeholder: 'Default: 1/6 of max JVM memory',
     info: <>Used in determining when intermediate persists to disk should occur.</>,
   },
-  {
-    name: 'totalNumMergeTasks',
-    type: 'number',
-    defaultValue: 10,
-    min: 1,
-    defined: (t: TuningConfig) =>
-      Boolean(
-        t.type === 'index_parallel' &&
-          oneOf(deepGet(t, 'tuningConfig.partitionsSpec.type'), 'hashed', 'single_dim'),
-      ),
-    info: <>Number of tasks to merge partial segments after shuffle.</>,
-  },
-  {
-    name: 'maxNumSegmentsToMerge',
-    type: 'number',
-    defaultValue: 100,
-    defined: (t: TuningConfig) =>
-      Boolean(
-        t.type === 'index_parallel' &&
-          oneOf(deepGet(t, 'tuningConfig.partitionsSpec.type'), 'hashed', 'single_dim'),
-      ),
-    info: (
-      <>
-        Max limit for the number of segments a single task can merge at the same time after shuffle.
-      </>
-    ),
-  },
   {
     name: 'resetOffsetAutomatically',
     type: 'boolean',
@@ -1663,6 +1651,19 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
       </>
     ),
   },
+  {
+    name: 'skipSequenceNumberAvailabilityCheck',
+    type: 'boolean',
+    defaultValue: false,
+    defined: (t: TuningConfig) => t.type === 'kinesis',
+    info: (
+      <>
+        Whether to enable checking if the current sequence number is still available in a particular
+        Kinesis shard. If set to false, the indexing task will attempt to reset the current sequence
+        number (or not), depending on the value of <Code>resetOffsetAutomatically</Code>.
+      </>
+    ),
+  },
   {
     name: 'intermediatePersistPeriod',
     type: 'duration',
@@ -1686,6 +1687,7 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
   {
     name: 'maxPendingPersists',
     type: 'number',
+    hideInMore: true,
     info: (
       <>
         Maximum number of persists that can be pending but not started. If this limit would be
@@ -1698,6 +1700,7 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
     name: 'pushTimeout',
     type: 'number',
     defaultValue: 0,
+    hideInMore: true,
     info: (
       <>
         Milliseconds to wait for pushing segments. It must be >= 0, where 0 means to wait forever.
@@ -1709,6 +1712,7 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
     type: 'number',
     defaultValue: 0,
     defined: (t: TuningConfig) => oneOf(t.type, 'kafka', 'kinesis'),
+    hideInMore: true,
     info: <>Milliseconds to wait for segment handoff. 0 means to wait forever.</>,
   },
   {
@@ -1717,6 +1721,7 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
     type: 'string',
     defaultValue: 'roaring',
     suggestions: ['concise', 'roaring'],
+    hideInMore: true,
     info: <>Compression format for bitmap indexes.</>,
   },
   {
@@ -1725,6 +1730,7 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
     type: 'string',
     defaultValue: 'lz4',
     suggestions: ['lz4', 'lzf', 'uncompressed'],
+    hideInMore: true,
     info: <>Compression format for dimension columns.</>,
   },
   {
@@ -1733,6 +1739,7 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
     type: 'string',
     defaultValue: 'lz4',
     suggestions: ['lz4', 'lzf', 'uncompressed'],
+    hideInMore: true,
     info: <>Compression format for primitive type metric columns.</>,
   },
   {
@@ -1741,6 +1748,7 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
     type: 'string',
     defaultValue: 'longs',
     suggestions: ['longs', 'auto'],
+    hideInMore: true,
     info: (
       <>
         Encoding format for long-typed columns. Applies regardless of whether they are dimensions or
@@ -1755,6 +1763,7 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
     type: 'duration',
     defaultValue: 'PT10S',
     defined: (t: TuningConfig) => t.type === 'index_parallel',
+    hideInMore: true,
     info: <>Timeout for reporting the pushed segments in worker tasks.</>,
   },
   {
@@ -1762,6 +1771,7 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
     type: 'number',
     defaultValue: 5,
     defined: (t: TuningConfig) => t.type === 'index_parallel',
+    hideInMore: true,
     info: <>Retries for reporting the pushed segments in worker tasks.</>,
   },
   {
@@ -1778,6 +1788,7 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
     type: 'number',
     placeholder: 'min(10, taskCount * replicas)',
     defined: (t: TuningConfig) => oneOf(t.type, 'kafka', 'kinesis'),
+    hideInMore: true,
     info: <>The number of threads that will be used for communicating with indexing tasks.</>,
   },
   {
@@ -1785,6 +1796,7 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
     type: 'number',
     defaultValue: 8,
     defined: (t: TuningConfig) => oneOf(t.type, 'kafka', 'kinesis'),
+    hideInMore: true,
     info: (
       <>
         The number of times HTTP requests to indexing tasks will be retried before considering tasks
@@ -1804,6 +1816,7 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
     type: 'duration',
     defaultValue: 'PT80S',
     defined: (t: TuningConfig) => oneOf(t.type, 'kafka', 'kinesis'),
+    hideInMore: true,
     info: (
       <>
         How long to wait for the supervisor to attempt a graceful shutdown of tasks before exiting.
@@ -1839,6 +1852,7 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
     type: 'number',
     defaultValue: 5000,
     defined: (t: TuningConfig) => t.type === 'kinesis',
+    hideInMore: true,
     info: (
       <>
         Length of time in milliseconds to wait for space to become available in the buffer before
@@ -1848,6 +1862,7 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
   },
   {
     name: 'recordBufferFullWait',
+    hideInMore: true,
     type: 'number',
     defaultValue: 5000,
     defined: (t: TuningConfig) => t.type === 'kinesis',
@@ -1863,6 +1878,7 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
     type: 'number',
     defaultValue: 60000,
     defined: (t: TuningConfig) => t.type === 'kinesis',
+    hideInMore: true,
     info: (
       <>
         Length of time in milliseconds to wait for Kinesis to return the earliest or latest sequence
@@ -1877,6 +1893,7 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
     type: 'number',
     placeholder: 'max(1, {numProcessors} - 1)',
     defined: (t: TuningConfig) => t.type === 'kinesis',
+    hideInMore: true,
     info: (
       <>
         Size of the pool of threads fetching data from Kinesis. There is no benefit in having more
@@ -1889,6 +1906,7 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
     type: 'number',
     defaultValue: 100,
     defined: (t: TuningConfig) => t.type === 'kinesis',
+    hideInMore: true,
     info: (
       <>
         The maximum number of records/events to be fetched from buffer per poll. The actual maximum
@@ -1896,6 +1914,29 @@ const TUNING_CONFIG_FORM_FIELDS: Field<TuningConfig>[] = [
       </>
     ),
   },
+  {
+    name: 'repartitionTransitionDuration',
+    type: 'duration',
+    defaultValue: 'PT2M',
+    defined: (t: TuningConfig) => t.type === 'kinesis',
+    hideInMore: true,
+    info: (
+      <>
+        <p>
+          When shards are split or merged, the supervisor will recompute shard, task group mappings,
+          and signal any running tasks created under the old mappings to stop early at{' '}
+          <Code>(current time + repartitionTransitionDuration)</Code>. Stopping the tasks early
+          allows Druid to begin reading from the new shards more quickly.
+        </p>
+        <p>
+          The repartition transition wait time controlled by this property gives the stream
+          additional time to write records to the new shards after the split/merge, which helps
+          avoid the issues with empty shard handling described at
+          <ExternalLink href="https://github.com/apache/druid/issues/7600">#7600</ExternalLink>.
+        </p>
+      </>
+    ),
+  },
 ];
 
 export function getTuningSpecFormFields() {
@@ -1932,39 +1973,39 @@ export function updateIngestionType(
 
   if (inputSourceType) {
     newSpec = deepSet(newSpec, 'spec.ioConfig.inputSource', { type: inputSourceType });
-
-    if (inputSourceType === 'local') {
-      newSpec = deepSet(newSpec, 'spec.ioConfig.inputSource.filter', '*');
-    }
-  }
-
-  if (!deepGet(spec, 'spec.dataSchema.dataSource')) {
-    newSpec = deepSet(newSpec, 'spec.dataSchema.dataSource', 'new-data-source');
-  }
-
-  if (!deepGet(spec, 'spec.dataSchema.granularitySpec')) {
-    const granularitySpec: GranularitySpec = {
-      type: 'uniform',
-      queryGranularity: 'HOUR',
-    };
-    if (ingestionType !== 'index_parallel') {
-      granularitySpec.segmentGranularity = 'HOUR';
-    }
-
-    newSpec = deepSet(newSpec, 'spec.dataSchema.granularitySpec', granularitySpec);
-  }
-
-  if (!deepGet(spec, 'spec.dataSchema.timestampSpec')) {
-    newSpec = deepSet(newSpec, 'spec.dataSchema.timestampSpec', PLACEHOLDER_TIMESTAMP_SPEC);
-  }
-
-  if (!deepGet(spec, 'spec.dataSchema.dimensionsSpec')) {
-    newSpec = deepSet(newSpec, 'spec.dataSchema.dimensionsSpec', {});
   }
 
   return newSpec;
 }
 
+export function issueWithSampleData(sampleData: string[]): JSX.Element | undefined {
+  if (sampleData.length) {
+    const firstData = sampleData[0];
+
+    if (firstData === '{') {
+      return (
+        <>
+          This data looks like regular JSON object. For Druid to parse a text file it must have one
+          row per event. Maybe look at{' '}
+          <ExternalLink href="http://ndjson.org/">newline delimited JSON</ExternalLink> instead.
+        </>
+      );
+    }
+
+    if (oneOf(firstData, '[', '[]')) {
+      return (
+        <>
+          This data looks like a multi-line JSON array. For Druid to parse a text file it must have
+          one row per event. Maybe look at{' '}
+          <ExternalLink href="http://ndjson.org/">newline delimited JSON</ExternalLink> instead.
+        </>
+      );
+    }
+  }
+
+  return;
+}
+
 export function fillInputFormat(spec: IngestionSpec, sampleData: string[]): IngestionSpec {
   return deepSet(spec, 'spec.ioConfig.inputFormat', guessInputFormat(sampleData));
 }
@@ -2080,7 +2121,8 @@ export function updateSchemaWithSample(
   let newSpec = spec;
 
   if (dimensionMode === 'auto-detect') {
-    newSpec = deepSet(newSpec, 'spec.dataSchema.dimensionsSpec.dimensions', []);
+    newSpec = deepDelete(newSpec, 'spec.dataSchema.dimensionsSpec.dimensions');
+    newSpec = deepSet(newSpec, 'spec.dataSchema.dimensionsSpec.dimensionExclusions', []);
   } else {
     newSpec = deepDelete(newSpec, 'spec.dataSchema.dimensionsSpec.dimensionExclusions');
 
@@ -2091,14 +2133,14 @@ export function updateSchemaWithSample(
   }
 
   if (rollup) {
-    newSpec = deepSet(newSpec, 'spec.dataSchema.granularitySpec.queryGranularity', 'HOUR');
+    newSpec = deepSet(newSpec, 'spec.dataSchema.granularitySpec.queryGranularity', 'hour');
 
     const metrics = getMetricSpecs(headerAndRows, typeHints);
     if (metrics) {
       newSpec = deepSet(newSpec, 'spec.dataSchema.metricsSpec', metrics);
     }
   } else {
-    newSpec = deepSet(newSpec, 'spec.dataSchema.granularitySpec.queryGranularity', 'NONE');
+    newSpec = deepSet(newSpec, 'spec.dataSchema.granularitySpec.queryGranularity', 'none');
     newSpec = deepDelete(newSpec, 'spec.dataSchema.metricsSpec');
   }
 
diff --git a/web-console/src/druid-models/input-format.tsx b/web-console/src/druid-models/input-format.tsx
index 15cb68258d4..7907498b3bd 100644
--- a/web-console/src/druid-models/input-format.tsx
+++ b/web-console/src/druid-models/input-format.tsx
@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { Code } from '@blueprintjs/core';
 import React from 'react';
 
 import { AutoForm, ExternalLink, Field } from '../components';
@@ -68,12 +69,6 @@ export const INPUT_FORMAT_FIELDS: Field<InputFormat>[] = [
     required: true,
     defined: (p: InputFormat) => p.type === 'javascript',
   },
-  {
-    name: 'findColumnsFromHeader',
-    type: 'boolean',
-    required: true,
-    defined: (p: InputFormat) => oneOf(p.type, 'csv', 'tsv'),
-  },
   {
     name: 'skipHeaderRows',
     type: 'number',
@@ -82,9 +77,22 @@ export const INPUT_FORMAT_FIELDS: Field<InputFormat>[] = [
     min: 0,
     info: (
       <>
-        If both skipHeaderRows and hasHeaderRow options are set, skipHeaderRows is first applied.
-        For example, if you set skipHeaderRows to 2 and hasHeaderRow to true, Druid will skip the
-        first two lines and then extract column information from the third line.
+        If this is set, skip the first <Code>skipHeaderRows</Code> rows from each file.
+      </>
+    ),
+  },
+  {
+    name: 'findColumnsFromHeader',
+    type: 'boolean',
+    required: true,
+    defined: (p: InputFormat) => oneOf(p.type, 'csv', 'tsv'),
+    info: (
+      <>
+        If this is set, find the column names from the header row. Note that
+        <Code>skipHeaderRows</Code> will be applied before finding column names from the header. For
+        example, if you set <Code>skipHeaderRows</Code> to 2 and <Code>findColumnsFromHeader</Code>{' '}
+        to true, the task will skip the first two lines and then extract column information from the
+        third line.
       </>
     ),
   },
@@ -93,7 +101,13 @@ export const INPUT_FORMAT_FIELDS: Field<InputFormat>[] = [
     type: 'string-array',
     required: true,
     defined: (p: InputFormat) =>
-      (oneOf(p.type, 'csv', 'tsv') && !p.findColumnsFromHeader) || p.type === 'regex',
+      (oneOf(p.type, 'csv', 'tsv') && p.findColumnsFromHeader === false) || p.type === 'regex',
+    info: (
+      <>
+        Specifies the columns of the data. The columns should be in the same order with the columns
+        of your data.
+      </>
+    ),
   },
   {
     name: 'delimiter',
@@ -106,6 +120,7 @@ export const INPUT_FORMAT_FIELDS: Field<InputFormat>[] = [
     name: 'listDelimiter',
     type: 'string',
     defined: (p: InputFormat) => oneOf(p.type, 'csv', 'tsv', 'regex'),
+    placeholder: '(optional, default = ctrl+A)',
     info: <>A custom delimiter for multi-value dimensions.</>,
   },
   {
diff --git a/web-console/src/druid-models/overlord-dynamic-config.tsx b/web-console/src/druid-models/overlord-dynamic-config.tsx
new file mode 100644
index 00000000000..14cac829511
--- /dev/null
+++ b/web-console/src/druid-models/overlord-dynamic-config.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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 { Field } from '../components';
+
+export interface OverlordDynamicConfig {
+  selectStrategy?: Record<string, any>;
+  autoScaler?: Record<string, any>;
+}
+
+export const OVERLORD_DYNAMIC_CONFIG_FIELDS: Field<OverlordDynamicConfig>[] = [
+  {
+    name: 'selectStrategy',
+    type: 'json',
+  },
+  {
+    name: 'autoScaler',
+    type: 'json',
+  },
+];
diff --git a/web-console/src/druid-models/timestamp-spec.tsx b/web-console/src/druid-models/timestamp-spec.tsx
index 8e17d20dbbc..b6c595b17da 100644
--- a/web-console/src/druid-models/timestamp-spec.tsx
+++ b/web-console/src/druid-models/timestamp-spec.tsx
@@ -123,7 +123,7 @@ export const TIMESTAMP_SPEC_FIELDS: Field<TimestampSpec>[] = [
     ],
     info: (
       <p>
-        Please specify your timestamp format by using the suggestions menu or typing in a{' '}
+        Specify your timestamp format by using the suggestions menu or typing in a{' '}
         <ExternalLink href="https://docs.oracle.com/javase/8/docs/api/java/time/format/DateTimeFormatter.html">
           format string
         </ExternalLink>
@@ -135,7 +135,10 @@ export const TIMESTAMP_SPEC_FIELDS: Field<TimestampSpec>[] = [
     name: 'missingValue',
     type: 'string',
     placeholder: '(optional)',
-    info: <p>This value will be used if the specified column can not be found.</p>,
+    info: (
+      <p>Specify a static value for cases when the source time column is missing or is null.</p>
+    ),
+    suggestions: ['2020-01-01T00:00:00Z'],
   },
 ];
 
diff --git a/web-console/src/druid-models/transform-spec.tsx b/web-console/src/druid-models/transform-spec.tsx
index 81e9b334e3a..c1dc3400302 100644
--- a/web-console/src/druid-models/transform-spec.tsx
+++ b/web-console/src/druid-models/transform-spec.tsx
@@ -75,6 +75,7 @@ export function getTimestampExpressionFields(transforms: Transform[]): Field<Tra
         `timestamp_parse(concat("date", ' ', "time"))`,
         `timestamp_parse(concat("date", ' ', "time"), 'M/d/yyyy H:mm:ss')`,
         `timestamp_parse(concat("year", '-', "month", '-', "day"))`,
+        `timestamp_parse("local_time", 'yyyy-MM-dd HH:mm:ss', "timezone")`,
       ],
       info: (
         <>
diff --git a/web-console/src/utils/general.spec.ts b/web-console/src/utils/general.spec.ts
index e614b870943..ea1078c2df7 100644
--- a/web-console/src/utils/general.spec.ts
+++ b/web-console/src/utils/general.spec.ts
@@ -24,6 +24,7 @@ import {
   formatMegabytes,
   formatMillions,
   formatPercent,
+  moveElement,
   sortWithPrefixSuffix,
   sqlQueryCustomTableFilter,
   swapElements,
@@ -96,6 +97,15 @@ describe('general', () => {
     });
   });
 
+  describe('moveElement', () => {
+    it('moves items in an array', () => {
+      expect(moveElement(['a', 'b', 'c'], 2, 0)).toEqual(['c', 'a', 'b']);
+      expect(moveElement(['a', 'b', 'c'], 1, 1)).toEqual(['a', 'b', 'c']);
+      expect(moveElement(['F', 'B', 'W', 'B'], 2, 1)).toEqual(['F', 'W', 'B', 'B']);
+      expect(moveElement([1, 2, 3], 2, 1)).toEqual([1, 3, 2]);
+    });
+  });
+
   describe('formatInteger', () => {
     it('works', () => {
       expect(formatInteger(10000)).toEqual('10,000');
diff --git a/web-console/src/utils/general.tsx b/web-console/src/utils/general.tsx
index ca2a111199e..9ce6e6186e8 100644
--- a/web-console/src/utils/general.tsx
+++ b/web-console/src/utils/general.tsx
@@ -306,7 +306,7 @@ export function sortWithPrefixSuffix(
   things: readonly string[],
   prefix: readonly string[],
   suffix: readonly string[],
-  cmp: null | ((a: string, b: string) => number),
+  cmp?: (a: string, b: string) => number,
 ): string[] {
   const pre = uniq(prefix.filter(x => things.includes(x)));
   const mid = things.filter(x => !prefix.includes(x) && !suffix.includes(x));
@@ -356,3 +356,28 @@ export function swapElements<T>(items: readonly T[], indexA: number, indexB: num
   newItems[indexB] = t;
   return newItems;
 }
+
+export function moveElement<T>(items: readonly T[], fromIndex: number, toIndex: number): T[] {
+  const indexDiff = fromIndex - toIndex;
+  if (indexDiff > 0) {
+    // move left
+    return [
+      ...items.slice(0, toIndex),
+      items[fromIndex],
+      ...items.slice(toIndex, fromIndex),
+      ...items.slice(fromIndex + 1, items.length),
+    ];
+  } else if (indexDiff < 0) {
+    // move right
+    const targetIndex = toIndex + 1;
+    return [
+      ...items.slice(0, fromIndex),
+      ...items.slice(fromIndex + 1, targetIndex),
+      items[fromIndex],
+      ...items.slice(targetIndex, items.length),
+    ];
+  } else {
+    // do nothing
+    return items.slice();
+  }
+}
diff --git a/web-console/src/utils/query-manager.tsx b/web-console/src/utils/query-manager.tsx
index 906c7b6bd27..97a239ebe35 100644
--- a/web-console/src/utils/query-manager.tsx
+++ b/web-console/src/utils/query-manager.tsx
@@ -95,6 +95,7 @@ export class QueryManager<Q, R> {
         this.setState(
           new QueryState<R>({
             data,
+            lastData: this.state.getSomeData(),
           }),
         );
       },
@@ -107,6 +108,7 @@ export class QueryManager<Q, R> {
         this.setState(
           new QueryState<R>({
             error: e,
+            lastData: this.state.getSomeData(),
           }),
         );
       },
@@ -119,6 +121,7 @@ export class QueryManager<Q, R> {
     this.setState(
       new QueryState<R>({
         loading: true,
+        lastData: this.state.getSomeData(),
       }),
     );
 
diff --git a/web-console/src/utils/query-state.ts b/web-console/src/utils/query-state.ts
index e3eeaf2e9ce..ecbcd020554 100644
--- a/web-console/src/utils/query-state.ts
+++ b/web-console/src/utils/query-state.ts
@@ -18,6 +18,13 @@
 
 export type QueryStateState = 'init' | 'loading' | 'data' | 'error';
 
+export interface QueryStateOptions<T, E extends Error = Error> {
+  loading?: boolean;
+  error?: E;
+  data?: T;
+  lastData?: T;
+}
+
 export class QueryState<T, E extends Error = Error> {
   static INIT: QueryState<any> = new QueryState({});
   static LOADING: QueryState<any> = new QueryState({ loading: true });
@@ -25,8 +32,9 @@ export class QueryState<T, E extends Error = Error> {
   public state: QueryStateState = 'init';
   public error?: E;
   public data?: T;
+  public lastData?: T;
 
-  constructor(opts: { loading?: boolean; error?: E; data?: T }) {
+  constructor(opts: QueryStateOptions<T, E>) {
     const hasData = typeof opts.data !== 'undefined';
     if (typeof opts.error !== 'undefined') {
       if (hasData) {
@@ -43,6 +51,7 @@ export class QueryState<T, E extends Error = Error> {
         this.state = opts.loading ? 'loading' : 'init';
       }
     }
+    this.lastData = opts.lastData;
   }
 
   isInit(): boolean {
@@ -71,4 +80,8 @@ export class QueryState<T, E extends Error = Error> {
     const { data } = this;
     return Boolean(data && Array.isArray(data) && data.length === 0);
   }
+
+  getSomeData(): T | undefined {
+    return this.data || this.lastData;
+  }
 }
diff --git a/web-console/src/utils/sampler.ts b/web-console/src/utils/sampler.ts
index 48db5f6c19b..4a888600b84 100644
--- a/web-console/src/utils/sampler.ts
+++ b/web-console/src/utils/sampler.ts
@@ -139,33 +139,41 @@ export function applyCache(sampleSpec: SampleSpec, cacheRows: CacheRows) {
   return sampleSpec;
 }
 
-export function headerFromSampleResponse(
-  sampleResponse: SampleResponse,
-  ignoreColumn?: string,
-  columnOrder?: string[],
-): string[] {
+export interface HeaderFromSampleResponseOptions {
+  sampleResponse: SampleResponse;
+  ignoreTimeColumn?: boolean;
+  columnOrder?: string[];
+  suffixColumnOrder?: string[];
+}
+
+export function headerFromSampleResponse(options: HeaderFromSampleResponseOptions): string[] {
+  const { sampleResponse, ignoreTimeColumn, columnOrder, suffixColumnOrder } = options;
+
   let columns = sortWithPrefixSuffix(
     dedupe(sampleResponse.data.flatMap(s => (s.parsed ? Object.keys(s.parsed) : []))).sort(),
     columnOrder || ['__time'],
-    [],
+    suffixColumnOrder || [],
     alphanumericCompare,
   );
 
-  if (ignoreColumn) {
-    columns = columns.filter(c => c !== ignoreColumn);
+  if (ignoreTimeColumn) {
+    columns = columns.filter(c => c !== '__time');
   }
 
   return columns;
 }
 
+export interface HeaderAndRowsFromSampleResponseOptions extends HeaderFromSampleResponseOptions {
+  parsedOnly?: boolean;
+}
+
 export function headerAndRowsFromSampleResponse(
-  sampleResponse: SampleResponse,
-  ignoreColumn?: string,
-  columnOrder?: string[],
-  parsedOnly = false,
+  options: HeaderAndRowsFromSampleResponseOptions,
 ): HeaderAndRows {
+  const { sampleResponse, parsedOnly } = options;
+
   return {
-    header: headerFromSampleResponse(sampleResponse, ignoreColumn, columnOrder),
+    header: headerFromSampleResponse(options),
     rows: parsedOnly ? sampleResponse.data.filter((d: any) => d.parsed) : sampleResponse.data,
   };
 }
@@ -446,11 +454,11 @@ export async function sampleForTransform(
     );
 
     specialDimensionSpec.dimensions = dedupe(
-      headerFromSampleResponse(
-        sampleResponseHack,
-        '__time',
-        ['__time'].concat(inputFormatColumns),
-      ).concat(transforms.map(t => t.name)),
+      headerFromSampleResponse({
+        sampleResponse: sampleResponseHack,
+        ignoreTimeColumn: true,
+        columnOrder: ['__time'].concat(inputFormatColumns),
+      }).concat(transforms.map(t => t.name)),
     );
   }
 
@@ -505,11 +513,11 @@ export async function sampleForFilter(
     );
 
     specialDimensionSpec.dimensions = dedupe(
-      headerFromSampleResponse(
-        sampleResponseHack,
-        '__time',
-        ['__time'].concat(inputFormatColumns),
-      ).concat(transforms.map(t => t.name)),
+      headerFromSampleResponse({
+        sampleResponse: sampleResponseHack,
+        ignoreTimeColumn: true,
+        columnOrder: ['__time'].concat(inputFormatColumns),
+      }).concat(transforms.map(t => t.name)),
     );
   }
 
diff --git a/web-console/src/utils/utils.spec.ts b/web-console/src/utils/utils.spec.ts
index b2ddb024577..31e2f89ab22 100644
--- a/web-console/src/utils/utils.spec.ts
+++ b/web-console/src/utils/utils.spec.ts
@@ -41,8 +41,8 @@ describe('utils', () => {
         dataSource: 'wikipedia',
         granularitySpec: {
           type: 'uniform',
-          segmentGranularity: 'DAY',
-          queryGranularity: 'HOUR',
+          segmentGranularity: 'day',
+          queryGranularity: 'hour',
         },
         timestampSpec: {
           column: 'timestamp',
@@ -56,8 +56,11 @@ describe('utils', () => {
   // const cacheRows: CacheRows = [{ make: 'Honda', model: 'Civic' }, { make: 'BMW', model: 'M3' }];
 
   it('spec-utils headerFromSampleResponse', () => {
-    expect(headerFromSampleResponse({ data: [{ input: { a: 1 }, parsed: { a: 1 } }] }))
-      .toMatchInlineSnapshot(`
+    expect(
+      headerFromSampleResponse({
+        sampleResponse: { data: [{ input: { a: 1 }, parsed: { a: 1 } }] },
+      }),
+    ).toMatchInlineSnapshot(`
       Array [
         "a",
       ]
@@ -86,8 +89,8 @@ describe('utils', () => {
             "dataSource": "wikipedia",
             "dimensionsSpec": Object {},
             "granularitySpec": Object {
-              "queryGranularity": "HOUR",
-              "segmentGranularity": "DAY",
+              "queryGranularity": "hour",
+              "segmentGranularity": "day",
               "type": "uniform",
             },
             "timestampSpec": Object {
diff --git a/web-console/src/views/load-data-view/__snapshots__/load-data-view.spec.tsx.snap b/web-console/src/views/load-data-view/__snapshots__/load-data-view.spec.tsx.snap
index 80bbabfcab3..ef5cec67471 100644
--- a/web-console/src/views/load-data-view/__snapshots__/load-data-view.spec.tsx.snap
+++ b/web-console/src/views/load-data-view/__snapshots__/load-data-view.spec.tsx.snap
@@ -46,15 +46,6 @@ exports[`load data view matches snapshot 1`] = `
           onClick={[Function]}
           text="Parse data"
         />
-        <Blueprint3.Button
-          active={false}
-          className="timestamp"
-          disabled={true}
-          icon={false}
-          key="timestamp"
-          onClick={[Function]}
-          text="Parse time"
-        />
       </Blueprint3.ButtonGroup>
     </div>
     <div
@@ -69,6 +60,15 @@ exports[`load data view matches snapshot 1`] = `
       <Blueprint3.ButtonGroup
         className="step-nav-l2"
       >
+        <Blueprint3.Button
+          active={false}
+          className="timestamp"
+          disabled={true}
+          icon={false}
+          key="timestamp"
+          onClick={[Function]}
+          text="Parse time"
+        />
         <Blueprint3.Button
           active={false}
           className="transform"
diff --git a/web-console/src/views/load-data-view/info-messages.tsx b/web-console/src/views/load-data-view/info-messages.tsx
new file mode 100644
index 00000000000..217c84200ca
--- /dev/null
+++ b/web-console/src/views/load-data-view/info-messages.tsx
@@ -0,0 +1,191 @@
+/*
+ * 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 { Callout, Code } from '@blueprintjs/core';
+import React from 'react';
+
+import { ExternalLink } from '../../components';
+import { DimensionMode, getIngestionDocLink, IngestionSpec } from '../../druid-models';
+import { getLink } from '../../links';
+
+import { LearnMore } from './learn-more/learn-more';
+
+export interface ConnectMessageProps {
+  inlineMode: boolean;
+  spec: IngestionSpec;
+}
+
+export const ConnectMessage = React.memo(function ConnectMessage(props: ConnectMessageProps) {
+  const { inlineMode, spec } = props;
+
+  return (
+    <Callout className="intro">
+      <p>
+        Druid ingests raw data and converts it into a custom,{' '}
+        <ExternalLink href={`${getLink('DOCS')}/design/segments.html`}>indexed format</ExternalLink>{' '}
+        that is optimized for analytic queries.
+      </p>
+      {inlineMode ? (
+        <>
+          <p>To get started, please paste some data in the box to the left.</p>
+          <p>Click "Apply" to verify your data with Druid.</p>
+        </>
+      ) : (
+        <p>To get started, please specify what data you want to ingest.</p>
+      )}
+      <LearnMore href={getIngestionDocLink(spec)} />
+    </Callout>
+  );
+});
+
+export interface ParserMessageProps {
+  canFlatten: boolean;
+}
+
+export const ParserMessage = React.memo(function ParserMessage(props: ParserMessageProps) {
+  const { canFlatten } = props;
+
+  return (
+    <Callout className="intro">
+      <p>
+        Druid requires flat data (non-nested, non-hierarchical). Each row should represent a
+        discrete event.
+      </p>
+      {canFlatten && (
+        <p>
+          If you have nested data, you can{' '}
+          <ExternalLink href={`${getLink('DOCS')}/ingestion/index.html#flattenspec`}>
+            flatten
+          </ExternalLink>{' '}
+          it here. If the provided flattening capabilities are not sufficient, please pre-process
+          your data before ingesting it into Druid.
+        </p>
+      )}
+      <p>Ensure that your data appears correctly in a row/column orientation.</p>
+      <LearnMore href={`${getLink('DOCS')}/ingestion/data-formats.html`} />
+    </Callout>
+  );
+});
+
+export const TimestampMessage = React.memo(function TimestampMessage() {
+  return (
+    <Callout className="intro">
+      <p>
+        Druid partitions data based on the primary time column of your data. This column is stored
+        internally in Druid as <Code>__time</Code>.
+      </p>
+      <p>Configure how to define the time column for this data.</p>
+      <p>
+        If your data does not have a time column, you can select <Code>None</Code> to use a
+        placeholder value. If the time information is spread across multiple columns you can combine
+        them into one by selecting <Code>Expression</Code> and defining a transform expression.
+      </p>
+      <LearnMore href={`${getLink('DOCS')}/ingestion/index.html#timestampspec`} />
+    </Callout>
+  );
+});
+
+export const TransformMessage = React.memo(function TransformMessage() {
+  return (
+    <Callout className="intro">
+      <p>
+        Druid can perform per-row{' '}
+        <ExternalLink href={`${getLink('DOCS')}/ingestion/transform-spec.html#transforms`}>
+          transforms
+        </ExternalLink>{' '}
+        of column values allowing you to create new derived columns or alter existing column.
+      </p>
+      <LearnMore href={`${getLink('DOCS')}/ingestion/index.html#transforms`} />
+    </Callout>
+  );
+});
+
+export const FilterMessage = React.memo(function FilterMessage() {
+  return (
+    <Callout className="intro">
+      <p>
+        Druid can filter out unwanted data by applying per-row{' '}
+        <ExternalLink href={`${getLink('DOCS')}/querying/filters.html`}>filters</ExternalLink>.
+      </p>
+      <LearnMore href={`${getLink('DOCS')}/ingestion/index.html#filter`} />
+    </Callout>
+  );
+});
+
+export interface SchemaMessageProps {
+  dimensionMode: DimensionMode;
+}
+
+export const SchemaMessage = React.memo(function SchemaMessage(props: SchemaMessageProps) {
+  const { dimensionMode } = props;
+
+  return (
+    <Callout className="intro">
+      <p>
+        Each column in Druid must have an assigned type (string, long, float, double, complex, etc).
+      </p>
+      {dimensionMode === 'specific' && (
+        <p>
+          Default primitive types have been automatically assigned to your columns. If you want to
+          change the type, click on the column header.
+        </p>
+      )}
+      <LearnMore href={`${getLink('DOCS')}/ingestion/schema-design.html`} />
+    </Callout>
+  );
+});
+
+export const PartitionMessage = React.memo(function PartitionMessage() {
+  return (
+    <Callout className="intro">
+      <p>Configure how Druid will partition data.</p>
+      <LearnMore href={`${getLink('DOCS')}/ingestion/index.html#partitioning`} />
+    </Callout>
+  );
+});
+
+export const TuningMessage = React.memo(function TuningMessage() {
+  return (
+    <Callout className="intro">
+      <p>Fine tune how Druid will ingest data.</p>
+      <LearnMore href={`${getLink('DOCS')}/ingestion/index.html#tuningconfig`} />
+    </Callout>
+  );
+});
+
+export const PublishMessage = React.memo(function PublishMessage() {
+  return (
+    <Callout className="intro">
+      <p>Configure behavior of indexed data once it reaches Druid.</p>
+    </Callout>
+  );
+});
+
+export const SpecMessage = React.memo(function SpecMessage() {
+  return (
+    <Callout className="intro">
+      <p>
+        Druid begins ingesting data once you submit a JSON ingestion spec. If you modify any values
+        in this view, the values entered in previous sections will update accordingly. If you modify
+        any values in previous sections, this spec will automatically update.
+      </p>
+      <p>Submit the spec to begin loading data into Druid.</p>
+      <LearnMore href={`${getLink('DOCS')}/ingestion/index.html#ingestion-specs`} />
+    </Callout>
+  );
+});
diff --git a/web-console/src/views/load-data-view/load-data-view.tsx b/web-console/src/views/load-data-view/load-data-view.tsx
index 4db8286bf53..d13e17b95d3 100644
--- a/web-console/src/views/load-data-view/load-data-view.tsx
+++ b/web-console/src/views/load-data-view/load-data-view.tsx
@@ -30,6 +30,7 @@ import {
   HTMLSelect,
   Icon,
   IconName,
+  InputGroup,
   Intent,
   Menu,
   MenuItem,
@@ -61,9 +62,12 @@ import {
   DIMENSION_SPEC_FIELDS,
   FILTER_FIELDS,
   FLATTEN_FIELD_FIELDS,
+  getDimensionSpecName,
+  getMetricSpecName,
   getTimestampExpressionFields,
   getTimestampSchema,
   INPUT_FORMAT_FIELDS,
+  issueWithSampleData,
   METRIC_SPEC_FIELDS,
   removeTimestampTransform,
   TIMESTAMP_SPEC_FIELDS,
@@ -78,14 +82,12 @@ import {
   computeFlattenPathsForData,
   DimensionMode,
   DimensionSpec,
-  DimensionsSpec,
   DruidFilter,
   fillDataSourceNameIfNeeded,
   fillInputFormat,
   FlattenField,
   getDimensionMode,
   getIngestionComboType,
-  getIngestionDocLink,
   getIngestionImage,
   getIngestionTitle,
   getIoConfigFormFields,
@@ -133,6 +135,7 @@ import {
   localStorageGet,
   LocalStorageKeys,
   localStorageSet,
+  moveElement,
   oneOf,
   parseJson,
   pluralIfNeeded,
@@ -160,12 +163,24 @@ import {
 
 import { ExamplePicker } from './example-picker/example-picker';
 import { FilterTable, filterTableSelectedColumnName } from './filter-table/filter-table';
-import { LearnMore } from './learn-more/learn-more';
+import {
+  ConnectMessage,
+  FilterMessage,
+  ParserMessage,
+  PartitionMessage,
+  PublishMessage,
+  SchemaMessage,
+  SpecMessage,
+  TimestampMessage,
+  TransformMessage,
+  TuningMessage,
+} from './info-messages';
 import { ParseDataTable } from './parse-data-table/parse-data-table';
 import {
   ParseTimeTable,
   parseTimeTableSelectedColumnName,
 } from './parse-time-table/parse-time-table';
+import { ReorderMenu } from './reorder-menu/reorder-menu';
 import { SchemaTable } from './schema-table/schema-table';
 import {
   TransformTable,
@@ -174,6 +189,8 @@ import {
 
 import './load-data-view.scss';
 
+const DEFAULT_ROLLUP_SETTING = false;
+
 function showRawLine(line: SampleEntry): string {
   if (!line.parsed) return 'No parse';
   const raw = line.parsed.raw;
@@ -248,8 +265,11 @@ const STEPS: Step[] = [
 ];
 
 const SECTIONS: { name: string; steps: Step[] }[] = [
-  { name: 'Connect and parse raw data', steps: ['welcome', 'connect', 'parser', 'timestamp'] },
-  { name: 'Transform data and configure schema', steps: ['transform', 'filter', 'schema'] },
+  { name: 'Connect and parse raw data', steps: ['welcome', 'connect', 'parser'] },
+  {
+    name: 'Transform data and configure schema',
+    steps: ['timestamp', 'transform', 'filter', 'schema'],
+  },
   { name: 'Tune parameters', steps: ['partition', 'tuning', 'publish'] },
   { name: 'Verify and submit', steps: ['spec'] },
 ];
@@ -328,9 +348,10 @@ export interface LoadDataViewState {
   // for schema
   schemaQueryState: QueryState<{
     headerAndRows: HeaderAndRows;
-    dimensionsSpec: DimensionsSpec;
-    metricsSpec: MetricSpec[];
+    dimensions: (string | DimensionSpec)[] | undefined;
+    metricsSpec: MetricSpec[] | undefined;
   }>;
+  selectedAutoDimension?: string;
   selectedDimensionSpecIndex: number;
   selectedDimensionSpec?: DimensionSpec;
   selectedMetricSpecIndex: number;
@@ -442,15 +463,28 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
         return Boolean(!druidSource && spec.type && !issueWithIoConfig(ioConfig));
 
       case 'timestamp':
-        return Boolean(!druidSource && cacheRows);
+        return Boolean(!druidSource && cacheRows && deepGet(spec, 'spec.dataSchema.timestampSpec'));
 
       case 'transform':
       case 'filter':
+        return Boolean(cacheRows && deepGet(spec, 'spec.dataSchema.timestampSpec'));
+
       case 'schema':
+        return Boolean(
+          cacheRows &&
+            deepGet(spec, 'spec.dataSchema.timestampSpec') &&
+            deepGet(spec, 'spec.dataSchema.dimensionsSpec'),
+        );
+
       case 'partition':
       case 'tuning':
       case 'publish':
-        return Boolean(cacheRows);
+        return Boolean(
+          cacheRows &&
+            deepGet(spec, 'spec.dataSchema.timestampSpec') &&
+            deepGet(spec, 'spec.dataSchema.dimensionsSpec') &&
+            deepGet(spec, 'spec.dataSchema.granularitySpec.type'),
+        );
 
       default:
         return true;
@@ -477,14 +511,14 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
   };
 
   private applyPreviewSpec = () => {
-    this.setState(state => {
-      localStorageSet(LocalStorageKeys.INGESTION_SPEC, JSON.stringify(state.specPreview));
-      return { spec: Object.assign({}, state.specPreview) };
+    this.setState(({ specPreview }) => {
+      localStorageSet(LocalStorageKeys.INGESTION_SPEC, JSON.stringify(specPreview));
+      return { spec: specPreview };
     });
   };
 
   private revertPreviewSpec = () => {
-    this.setState(state => ({ specPreview: state.spec }));
+    this.setState(({ spec }) => ({ specPreview: spec }));
   };
 
   isPreviewSpecSame() {
@@ -586,7 +620,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     );
   }
 
-  renderApplyButtonBar(queryState: QueryState<unknown>) {
+  renderApplyButtonBar(queryState: QueryState<unknown>, issue: string | undefined) {
     const previewSpecSame = this.isPreviewSpecSame();
     const queryStateHasError = Boolean(queryState && queryState.error);
 
@@ -594,17 +628,11 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       <FormGroup className="control-buttons">
         <Button
           text="Apply"
-          disabled={previewSpecSame && !queryStateHasError}
+          disabled={(previewSpecSame && !queryStateHasError) || Boolean(issue)}
           intent={Intent.PRIMARY}
           onClick={this.applyPreviewSpec}
         />
-        {!previewSpecSame && (
-          <Button
-            text="Cancel"
-            disabled={this.isPreviewSpecSame()}
-            onClick={this.revertPreviewSpec}
-          />
-        )}
+        {!previewSpecSame && <Button text="Cancel" onClick={this.revertPreviewSpec} />}
       </FormGroup>
     );
   }
@@ -636,7 +664,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     );
   }
 
-  renderNextBar(options: { nextStep?: Step; disabled?: boolean; onNextStep?: () => void }) {
+  renderNextBar(options: { nextStep?: Step; disabled?: boolean; onNextStep?: () => boolean }) {
     const { disabled, onNextStep } = options;
     const { step } = this.state;
     const nextStep = options.nextStep || STEPS[STEPS.indexOf(step) + 1] || STEPS[0];
@@ -647,10 +675,10 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           text={`Next: ${VIEW_TITLE[nextStep]}`}
           rightIcon={IconNames.ARROW_RIGHT}
           intent={Intent.PRIMARY}
-          disabled={disabled}
+          disabled={disabled || !this.isPreviewSpecSame()}
           onClick={() => {
             if (disabled) return;
-            if (onNextStep) onNextStep();
+            if (onNextStep && !onNextStep()) return;
 
             this.updateStep(nextStep);
           }}
@@ -1098,57 +1126,49 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           <Icon icon={IconNames.ARROW_RIGHT} />
         </CenterMessage>
       );
-    } else if (inputQueryState.isLoading()) {
-      mainFill = <Loader />;
-    } else if (inputQueryState.error) {
-      mainFill = <CenterMessage>{`Error: ${inputQueryState.getErrorMessage()}`}</CenterMessage>;
-    } else if (inputQueryState.data) {
-      const inputData = inputQueryState.data.data;
+    } else {
+      const data = inputQueryState.getSomeData();
+      const inputData = data ? data.data : undefined;
       mainFill = (
-        <TextArea
-          className="raw-lines"
-          readOnly
-          value={
-            inputData.length
-              ? (inputData.every(l => !l.parsed)
-                  ? inputData.map(showBlankLine)
-                  : druidSource
-                  ? inputData.map(showDruidLine)
-                  : inputData.map(showRawLine)
-                ).join('\n')
-              : 'No data returned from sampler'
-          }
-        />
+        <>
+          {inputData && (
+            <TextArea
+              className="raw-lines"
+              readOnly
+              value={
+                inputData.length
+                  ? (inputData.every(l => !l.parsed)
+                      ? inputData.map(showBlankLine)
+                      : druidSource
+                      ? inputData.map(showDruidLine)
+                      : inputData.map(showRawLine)
+                    ).join('\n')
+                  : 'No data returned from sampler'
+              }
+            />
+          )}
+          {inputQueryState.isLoading() && <Loader />}
+          {inputQueryState.error && (
+            <CenterMessage>{`Error: ${inputQueryState.getErrorMessage()}`}</CenterMessage>
+          )}
+        </>
       );
     }
 
     const ingestionComboType = getIngestionComboType(spec);
+    const ioConfigFields = ingestionComboType
+      ? getIoConfigFormFields(ingestionComboType)
+      : undefined;
+
     return (
       <>
         <div className="main">{mainFill}</div>
         <div className="control">
-          <Callout className="intro">
-            <p>
-              Druid ingests raw data and converts it into a custom,{' '}
-              <ExternalLink href={`${getLink('DOCS')}/design/segments.html`}>
-                indexed format
-              </ExternalLink>{' '}
-              that is optimized for analytic queries.
-            </p>
-            {inlineMode ? (
-              <>
-                <p>To get started, please paste some data in the box to the left.</p>
-                <p>Click "Apply" to verify your data with Druid.</p>
-              </>
-            ) : (
-              <p>To get started, please specify what data you want to ingest.</p>
-            )}
-            <LearnMore href={getIngestionDocLink(spec)} />
-          </Callout>
-          {ingestionComboType ? (
+          <ConnectMessage inlineMode={inlineMode} spec={spec} />
+          {ioConfigFields ? (
             <>
               <AutoForm
-                fields={getIoConfigFormFields(ingestionComboType)}
+                fields={ioConfigFields}
                 model={ioConfig}
                 onChange={c => this.updateSpecPreview(deepSet(spec, 'spec.ioConfig', c))}
               />
@@ -1189,13 +1209,16 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
               </HTMLSelect>
             </FormGroup>
           )}
-          {this.renderApplyButtonBar(inputQueryState)}
+          {this.renderApplyButtonBar(
+            inputQueryState,
+            ioConfigFields ? AutoForm.issueWithModel(ioConfig, ioConfigFields) : undefined,
+          )}
         </div>
         {this.renderNextBar({
           disabled: !inputQueryState.data,
           nextStep: druidSource ? 'transform' : 'parser',
           onNextStep: () => {
-            if (!inputQueryState.data) return;
+            if (!inputQueryState.data) return false;
             const inputData = inputQueryState.data;
 
             if (druidSource) {
@@ -1244,15 +1267,24 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
 
               this.updateSpec(fillDataSourceNameIfNeeded(newSpec));
             } else {
-              this.updateSpec(
-                fillDataSourceNameIfNeeded(
-                  fillInputFormat(
-                    spec,
-                    filterMap(inputQueryState.data.data, l => (l.input ? l.input.raw : undefined)),
-                  ),
-                ),
+              const sampleLines = filterMap(inputQueryState.data.data, l =>
+                l.input ? l.input.raw : undefined,
               );
+
+              const issue = issueWithSampleData(sampleLines);
+              if (issue) {
+                AppToaster.show({
+                  icon: IconNames.WARNING_SIGN,
+                  intent: Intent.WARNING,
+                  message: issue,
+                  timeout: 10000,
+                });
+                return false;
+              }
+
+              this.updateSpec(fillDataSourceNameIfNeeded(fillInputFormat(spec, sampleLines)));
             }
+            return true;
           },
         })}
       </>
@@ -1273,32 +1305,39 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     }
 
     if (issue) {
-      this.setState({
-        parserQueryState: initRun ? QueryState.INIT : new QueryState({ error: new Error(issue) }),
-      });
+      this.setState(({ parserQueryState }) => ({
+        parserQueryState: initRun
+          ? QueryState.INIT
+          : new QueryState({ error: new Error(issue), lastData: parserQueryState.getSomeData() }),
+      }));
       return;
     }
 
-    this.setState({
-      parserQueryState: new QueryState({ loading: true }),
-    });
+    this.setState(({ parserQueryState }) => ({
+      parserQueryState: new QueryState({ loading: true, lastData: parserQueryState.getSomeData() }),
+    }));
 
     let sampleResponse: SampleResponse;
     try {
       sampleResponse = await sampleForParser(spec, sampleStrategy);
     } catch (e) {
-      this.setState({
-        parserQueryState: new QueryState({ error: e }),
-      });
+      this.setState(({ parserQueryState }) => ({
+        parserQueryState: new QueryState({ error: e, lastData: parserQueryState.getSomeData() }),
+      }));
       return;
     }
 
-    this.setState({
+    this.setState(({ parserQueryState }) => ({
       cacheRows: getCacheRowsFromSampleResponse(sampleResponse),
       parserQueryState: new QueryState({
-        data: headerAndRowsFromSampleResponse(sampleResponse, '__time', inputFormatColumns),
+        data: headerAndRowsFromSampleResponse({
+          sampleResponse,
+          ignoreTimeColumn: true,
+          columnOrder: inputFormatColumns,
+        }),
+        lastData: parserQueryState.getSomeData(),
       }),
-    });
+    }));
   }
 
   renderParserStep() {
@@ -1322,11 +1361,8 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           Please enter the parser details on the right <Icon icon={IconNames.ARROW_RIGHT} />
         </CenterMessage>
       );
-    } else if (parserQueryState.isLoading()) {
-      mainFill = <Loader />;
-    } else if (parserQueryState.error) {
-      mainFill = <CenterMessage>{`Error: ${parserQueryState.getErrorMessage()}`}</CenterMessage>;
-    } else if (parserQueryState.data) {
+    } else {
+      const data = parserQueryState.getSomeData();
       mainFill = (
         <div className="table-with-control">
           <div className="table-control">
@@ -1344,14 +1380,20 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
               />
             )}
           </div>
-          <ParseDataTable
-            sampleData={parserQueryState.data}
-            columnFilter={columnFilter}
-            canFlatten={canFlatten}
-            flattenedColumnsOnly={specialColumnsOnly}
-            flattenFields={flattenFields}
-            onFlattenFieldSelect={this.onFlattenFieldSelect}
-          />
+          {data && (
+            <ParseDataTable
+              sampleData={data}
+              columnFilter={columnFilter}
+              canFlatten={canFlatten}
+              flattenedColumnsOnly={specialColumnsOnly}
+              flattenFields={flattenFields}
+              onFlattenFieldSelect={this.onFlattenFieldSelect}
+            />
+          )}
+          {parserQueryState.isLoading() && <Loader />}
+          {parserQueryState.error && (
+            <CenterMessage>{`Error: ${parserQueryState.getErrorMessage()}`}</CenterMessage>
+          )}
         </div>
       );
     }
@@ -1369,24 +1411,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       <>
         <div className="main">{mainFill}</div>
         <div className="control">
-          <Callout className="intro">
-            <p>
-              Druid requires flat data (non-nested, non-hierarchical). Each row should represent a
-              discrete event.
-            </p>
-            {canFlatten && (
-              <p>
-                If you have nested data, you can{' '}
-                <ExternalLink href={`${getLink('DOCS')}/ingestion/index.html#flattenspec`}>
-                  flatten
-                </ExternalLink>{' '}
-                it here. If the provided flattening capabilities are not sufficient, please
-                pre-process your data before ingesting it into Druid.
-              </p>
-            )}
-            <p>Ensure that your data appears correctly in a row/column orientation.</p>
-            <LearnMore href={`${getLink('DOCS')}/ingestion/data-formats.html`} />
-          </Callout>
+          <ParserMessage canFlatten={canFlatten} />
           {!selectedFlattenField && (
             <>
               <AutoForm
@@ -1396,7 +1421,10 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
                   this.updateSpecPreview(deepSet(spec, 'spec.ioConfig.inputFormat', p))
                 }
               />
-              {this.renderApplyButtonBar(parserQueryState)}
+              {this.renderApplyButtonBar(
+                parserQueryState,
+                AutoForm.issueWithModel(inputFormat, INPUT_FORMAT_FIELDS),
+              )}
             </>
           )}
           {this.renderFlattenControls()}
@@ -1423,7 +1451,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
         {this.renderNextBar({
           disabled: !parserQueryState.data,
           onNextStep: () => {
-            if (!parserQueryState.data) return;
+            if (!parserQueryState.data) return false;
             let possibleTimestampSpec: TimestampSpec;
             if (isDruidSource(spec)) {
               possibleTimestampSpec = {
@@ -1442,6 +1470,8 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
               );
               this.updateSpec(newSpec);
             }
+
+            return true;
           },
         })}
       </>
@@ -1515,6 +1545,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
         <FormGroup>
           <Button
             text="Add column flattening"
+            disabled={!this.isPreviewSpecSame()}
             onClick={() => {
               this.setState({
                 selectedFlattenField: { type: 'path', name: '', expr: '' },
@@ -1541,40 +1572,49 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       deepGet(spec, 'spec.ioConfig.inputFormat.columns') || EMPTY_ARRAY;
 
     if (!cacheRows) {
-      this.setState({
+      this.setState(({ timestampQueryState }) => ({
         timestampQueryState: initRun
           ? QueryState.INIT
-          : new QueryState({ error: new Error('must complete parse step') }),
-      });
+          : new QueryState({
+              error: new Error('must complete parse step'),
+              lastData: timestampQueryState.getSomeData(),
+            }),
+      }));
       return;
     }
 
-    this.setState({
-      timestampQueryState: new QueryState({ loading: true }),
-    });
+    this.setState(({ timestampQueryState }) => ({
+      timestampQueryState: new QueryState({
+        loading: true,
+        lastData: timestampQueryState.getSomeData(),
+      }),
+    }));
 
     let sampleResponse: SampleResponse;
     try {
       sampleResponse = await sampleForTimestamp(spec, cacheRows);
     } catch (e) {
-      this.setState({
-        timestampQueryState: new QueryState({ error: e }),
-      });
+      this.setState(({ timestampQueryState }) => ({
+        timestampQueryState: new QueryState({
+          error: e,
+          lastData: timestampQueryState.getSomeData(),
+        }),
+      }));
       return;
     }
 
-    this.setState({
+    this.setState(({ timestampQueryState }) => ({
       timestampQueryState: new QueryState({
         data: {
-          headerAndRows: headerAndRowsFromSampleResponse(
+          headerAndRows: headerAndRowsFromSampleResponse({
             sampleResponse,
-            undefined,
-            ['__time'].concat(inputFormatColumns),
-          ),
+            columnOrder: ['__time'].concat(inputFormatColumns),
+          }),
           spec,
         },
+        lastData: timestampQueryState.getSomeData(),
       }),
-    });
+    }));
   }
 
   renderTimestampStep() {
@@ -1593,11 +1633,8 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           <Icon icon={IconNames.ARROW_RIGHT} />
         </CenterMessage>
       );
-    } else if (timestampQueryState.isLoading()) {
-      mainFill = <Loader />;
-    } else if (timestampQueryState.error) {
-      mainFill = <CenterMessage>{`Error: ${timestampQueryState.getErrorMessage()}`}</CenterMessage>;
-    } else if (timestampQueryState.data) {
+    } else {
+      const data = timestampQueryState.getSomeData();
       mainFill = (
         <div className="table-with-control">
           <div className="table-control">
@@ -1612,16 +1649,22 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
               onChange={() => this.setState({ specialColumnsOnly: !specialColumnsOnly })}
             />
           </div>
-          <ParseTimeTable
-            sampleBundle={timestampQueryState.data}
-            columnFilter={columnFilter}
-            possibleTimestampColumnsOnly={specialColumnsOnly}
-            selectedColumnName={parseTimeTableSelectedColumnName(
-              timestampQueryState.data.headerAndRows,
-              timestampSpec,
-            )}
-            onTimestampColumnSelect={this.onTimestampColumnSelect}
-          />
+          {data && (
+            <ParseTimeTable
+              sampleBundle={data}
+              columnFilter={columnFilter}
+              possibleTimestampColumnsOnly={specialColumnsOnly}
+              selectedColumnName={parseTimeTableSelectedColumnName(
+                data.headerAndRows,
+                timestampSpec,
+              )}
+              onTimestampColumnSelect={this.onTimestampColumnSelect}
+            />
+          )}
+          {timestampQueryState.isLoading() && <Loader />}
+          {timestampQueryState.error && (
+            <CenterMessage>{`Error: ${timestampQueryState.getErrorMessage()}`}</CenterMessage>
+          )}
         </div>
       );
     }
@@ -1630,19 +1673,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       <>
         <div className="main">{mainFill}</div>
         <div className="control">
-          <Callout className="intro">
-            <p>
-              Druid partitions data based on the primary time column of your data. This column is
-              stored internally in Druid as <Code>__time</Code>.
-            </p>
-            <p>Configure how to define the time column for this data.</p>
-            <p>
-              If your data does not have a time column, you can select "None" to use a placeholder
-              value. If the time information is spread across multiple columns you can combine them
-              into one by selecting "Expression" and defining a transform expression.
-            </p>
-            <LearnMore href={`${getLink('DOCS')}/ingestion/index.html#timestampspec`} />
-          </Callout>
+          <TimestampMessage />
           <FormGroup label="Parse timestamp from">
             <ButtonGroup>
               <Button
@@ -1714,7 +1745,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
               }}
             />
           )}
-          {this.renderApplyButtonBar(timestampQueryState)}
+          {this.renderApplyButtonBar(timestampQueryState, undefined)}
         </div>
         {this.renderNextBar({
           disabled: !timestampQueryState.data,
@@ -1736,37 +1767,46 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       deepGet(spec, 'spec.ioConfig.inputFormat.columns') || EMPTY_ARRAY;
 
     if (!cacheRows) {
-      this.setState({
+      this.setState(({ transformQueryState }) => ({
         transformQueryState: initRun
           ? QueryState.INIT
-          : new QueryState({ error: new Error('must complete parse step') }),
-      });
+          : new QueryState({
+              error: new Error('must complete parse step'),
+              lastData: transformQueryState.getSomeData(),
+            }),
+      }));
       return;
     }
 
-    this.setState({
-      transformQueryState: new QueryState({ loading: true }),
-    });
+    this.setState(({ transformQueryState }) => ({
+      transformQueryState: new QueryState({
+        loading: true,
+        lastData: transformQueryState.getSomeData(),
+      }),
+    }));
 
     let sampleResponse: SampleResponse;
     try {
       sampleResponse = await sampleForTransform(spec, cacheRows);
     } catch (e) {
-      this.setState({
-        transformQueryState: new QueryState({ error: e }),
-      });
+      this.setState(({ transformQueryState }) => ({
+        transformQueryState: new QueryState({
+          error: e,
+          lastData: transformQueryState.getSomeData(),
+        }),
+      }));
       return;
     }
 
-    this.setState({
+    this.setState(({ transformQueryState }) => ({
       transformQueryState: new QueryState({
-        data: headerAndRowsFromSampleResponse(
+        data: headerAndRowsFromSampleResponse({
           sampleResponse,
-          undefined,
-          ['__time'].concat(inputFormatColumns),
-        ),
+          columnOrder: ['__time'].concat(inputFormatColumns),
+        }),
+        lastData: transformQueryState.getSomeData(),
       }),
-    });
+    }));
   }
 
   renderTransformStep() {
@@ -1784,11 +1824,8 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     let mainFill: JSX.Element | string = '';
     if (transformQueryState.isInit()) {
       mainFill = <CenterMessage>{`Please fill in the previous steps`}</CenterMessage>;
-    } else if (transformQueryState.isLoading()) {
-      mainFill = <Loader />;
-    } else if (transformQueryState.error) {
-      mainFill = <CenterMessage>{`Error: ${transformQueryState.getErrorMessage()}`}</CenterMessage>;
-    } else if (transformQueryState.data) {
+    } else {
+      const data = transformQueryState.getSomeData();
       mainFill = (
         <div className="table-with-control">
           <div className="table-control">
@@ -1804,17 +1841,20 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
               disabled={!transforms.length}
             />
           </div>
-          <TransformTable
-            sampleData={transformQueryState.data}
-            columnFilter={columnFilter}
-            transformedColumnsOnly={specialColumnsOnly}
-            transforms={transforms}
-            selectedColumnName={transformTableSelectedColumnName(
-              transformQueryState.data,
-              selectedTransform,
-            )}
-            onTransformSelect={this.onTransformSelect}
-          />
+          {data && (
+            <TransformTable
+              sampleData={data}
+              columnFilter={columnFilter}
+              transformedColumnsOnly={specialColumnsOnly}
+              transforms={transforms}
+              selectedColumnName={transformTableSelectedColumnName(data, selectedTransform)}
+              onTransformSelect={this.onTransformSelect}
+            />
+          )}
+          {transformQueryState.isLoading() && <Loader />}
+          {transformQueryState.error && (
+            <CenterMessage>{`Error: ${transformQueryState.getErrorMessage()}`}</CenterMessage>
+          )}
         </div>
       );
     }
@@ -1823,17 +1863,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       <>
         <div className="main">{mainFill}</div>
         <div className="control">
-          <Callout className="intro">
-            <p className="optional">Optional</p>
-            <p>
-              Druid can perform per-row{' '}
-              <ExternalLink href={`${getLink('DOCS')}/ingestion/transform-spec.html#transforms`}>
-                transforms
-              </ExternalLink>{' '}
-              of column values allowing you to create new derived columns or alter existing column.
-            </p>
-            <LearnMore href={`${getLink('DOCS')}/ingestion/index.html#transforms`} />
-          </Callout>
+          <TransformMessage />
           {Boolean(transformQueryState.error && transforms.length) && (
             <FormGroup>
               <Button
@@ -1854,12 +1884,24 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
         {this.renderNextBar({
           disabled: !transformQueryState.data,
           onNextStep: () => {
-            if (!transformQueryState.data) return;
-            if (!isDruidSource(spec)) {
-              this.updateSpec(
-                updateSchemaWithSample(spec, transformQueryState.data, 'specific', true),
+            if (!transformQueryState.data) return false;
+
+            let newSpec = spec;
+            if (!deepGet(newSpec, 'spec.dataSchema.dimensionsSpec')) {
+              newSpec = updateSchemaWithSample(
+                newSpec,
+                transformQueryState.data,
+                'specific',
+                DEFAULT_ROLLUP_SETTING,
               );
             }
+
+            if (!deepGet(newSpec, 'spec.dataSchema.granularitySpec.type')) {
+              newSpec = deepSet(newSpec, 'spec.dataSchema.granularitySpec.type', 'uniform');
+            }
+
+            this.updateSpec(newSpec);
+            return true;
           },
         })}
       </>
@@ -1951,39 +1993,42 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       deepGet(spec, 'spec.ioConfig.inputFormat.columns') || EMPTY_ARRAY;
 
     if (!cacheRows) {
-      this.setState({
+      this.setState(({ filterQueryState }) => ({
         filterQueryState: initRun
           ? QueryState.INIT
-          : new QueryState({ error: new Error('must complete parse step') }),
-      });
+          : new QueryState({
+              error: new Error('must complete parse step'),
+              lastData: filterQueryState.getSomeData(),
+            }),
+      }));
       return;
     }
 
-    this.setState({
-      filterQueryState: new QueryState({ loading: true }),
-    });
+    this.setState(({ filterQueryState }) => ({
+      filterQueryState: new QueryState({ loading: true, lastData: filterQueryState.getSomeData() }),
+    }));
 
     let sampleResponse: SampleResponse;
     try {
       sampleResponse = await sampleForFilter(spec, cacheRows);
     } catch (e) {
-      this.setState({
-        filterQueryState: new QueryState({ error: e }),
-      });
+      this.setState(({ filterQueryState }) => ({
+        filterQueryState: new QueryState({ error: e, lastData: filterQueryState.getSomeData() }),
+      }));
       return;
     }
 
     if (sampleResponse.data.length) {
-      this.setState({
+      this.setState(({ filterQueryState }) => ({
         filterQueryState: new QueryState({
-          data: headerAndRowsFromSampleResponse(
+          data: headerAndRowsFromSampleResponse({
             sampleResponse,
-            undefined,
-            ['__time'].concat(inputFormatColumns),
-            true,
-          ),
+            columnOrder: ['__time'].concat(inputFormatColumns),
+            parsedOnly: true,
+          }),
+          lastData: filterQueryState.getSomeData(),
         }),
-      });
+      }));
       return;
     }
 
@@ -1993,25 +2038,25 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       const specNoFilter = deepSet(spec, 'spec.dataSchema.transformSpec.filter', null);
       sampleResponseNoFilter = await sampleForFilter(specNoFilter, cacheRows);
     } catch (e) {
-      this.setState({
-        filterQueryState: new QueryState({ error: e }),
-      });
+      this.setState(({ filterQueryState }) => ({
+        filterQueryState: new QueryState({ error: e, lastData: filterQueryState.getSomeData() }),
+      }));
       return;
     }
 
-    const headerAndRowsNoFilter = headerAndRowsFromSampleResponse(
-      sampleResponseNoFilter,
-      undefined,
-      ['__time'].concat(inputFormatColumns),
-      true,
-    );
+    const headerAndRowsNoFilter = headerAndRowsFromSampleResponse({
+      sampleResponse: sampleResponseNoFilter,
+      columnOrder: ['__time'].concat(inputFormatColumns),
+      parsedOnly: true,
+    });
 
-    this.setState({
+    this.setState(({ filterQueryState }) => ({
       // cacheRows: sampleResponseNoFilter.cacheKey,
       filterQueryState: new QueryState({
         data: deepSet(headerAndRowsNoFilter, 'rows', []),
+        lastData: filterQueryState.getSomeData(),
       }),
-    });
+    }));
   }
 
   private getMemoizedDimensionFiltersFromSpec = memoize(spec => {
@@ -2026,11 +2071,8 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     let mainFill: JSX.Element | string = '';
     if (filterQueryState.isInit()) {
       mainFill = <CenterMessage>Please enter more details for the previous steps</CenterMessage>;
-    } else if (filterQueryState.isLoading()) {
-      mainFill = <Loader />;
-    } else if (filterQueryState.error) {
-      mainFill = <CenterMessage>{`Error: ${filterQueryState.getErrorMessage()}`}</CenterMessage>;
-    } else if (filterQueryState.data) {
+    } else {
+      const data = filterQueryState.getSomeData();
       mainFill = (
         <div className="table-with-control">
           <div className="table-control">
@@ -2040,17 +2082,20 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
               placeholder="Search columns"
             />
           </div>
-          <FilterTable
-            sampleData={filterQueryState.data}
-            columnFilter={columnFilter}
-            dimensionFilters={dimensionFilters}
-            selectedFilterName={filterTableSelectedColumnName(
-              filterQueryState.data,
-              selectedFilter,
-            )}
-            onShowGlobalFilter={this.onShowGlobalFilter}
-            onFilterSelect={this.onFilterSelect}
-          />
+          {data && (
+            <FilterTable
+              sampleData={data}
+              columnFilter={columnFilter}
+              dimensionFilters={dimensionFilters}
+              selectedFilterName={filterTableSelectedColumnName(data, selectedFilter)}
+              onShowGlobalFilter={this.onShowGlobalFilter}
+              onFilterSelect={this.onFilterSelect}
+            />
+          )}
+          {filterQueryState.isLoading() && <Loader />}
+          {filterQueryState.error && (
+            <CenterMessage>{`Error: ${filterQueryState.getErrorMessage()}`}</CenterMessage>
+          )}
         </div>
       );
     }
@@ -2059,15 +2104,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       <>
         <div className="main">{mainFill}</div>
         <div className="control">
-          <Callout className="intro">
-            <p className="optional">Optional</p>
-            <p>
-              Druid can{' '}
-              <ExternalLink href={`${getLink('DOCS')}/querying/filters.html`}>filter</ExternalLink>{' '}
-              out unwanted data by applying per-row filters.
-            </p>
-            <LearnMore href={`${getLink('DOCS')}/ingestion/index.html#filter`} />
-          </Callout>
+          <FilterMessage />
           {!showGlobalFilter && this.renderColumnFilterControls()}
           {!selectedFilter && this.renderGlobalFilterControls()}
         </div>
@@ -2226,48 +2263,52 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
 
   async queryForSchema(initRun = false) {
     const { spec, cacheRows } = this.state;
-    const inputFormatColumns: string[] =
-      deepGet(spec, 'spec.ioConfig.inputFormat.columns') || EMPTY_ARRAY;
-    const metricsSpec: MetricSpec[] = deepGet(spec, 'spec.dataSchema.metricsSpec') || EMPTY_ARRAY;
-    const dimensionsSpec: DimensionsSpec =
-      deepGet(spec, 'spec.dataSchema.dimensionsSpec') || EMPTY_OBJECT;
+    const metricsSpec: MetricSpec[] | undefined = deepGet(spec, 'spec.dataSchema.metricsSpec');
+    const dimensions: (string | DimensionSpec)[] = deepGet(
+      spec,
+      'spec.dataSchema.dimensionsSpec.dimensions',
+    );
 
     if (!cacheRows) {
-      this.setState({
+      this.setState(({ schemaQueryState }) => ({
         schemaQueryState: initRun
           ? QueryState.INIT
-          : new QueryState({ error: new Error('must complete parse step') }),
-      });
+          : new QueryState({
+              error: new Error('must complete parse step'),
+              lastData: schemaQueryState.getSomeData(),
+            }),
+      }));
       return;
     }
 
-    this.setState({
-      schemaQueryState: new QueryState({ loading: true }),
-    });
+    this.setState(({ schemaQueryState }) => ({
+      schemaQueryState: new QueryState({ loading: true, lastData: schemaQueryState.getSomeData() }),
+    }));
 
     let sampleResponse: SampleResponse;
     try {
       sampleResponse = await sampleForSchema(spec, cacheRows);
     } catch (e) {
-      this.setState({
-        schemaQueryState: new QueryState({ error: e }),
-      });
+      this.setState(({ schemaQueryState }) => ({
+        schemaQueryState: new QueryState({ error: e, lastData: schemaQueryState.getSomeData() }),
+      }));
       return;
     }
 
-    this.setState({
+    this.setState(({ schemaQueryState }) => ({
       schemaQueryState: new QueryState({
         data: {
-          headerAndRows: headerAndRowsFromSampleResponse(
+          headerAndRows: headerAndRowsFromSampleResponse({
             sampleResponse,
-            undefined,
-            ['__time'].concat(inputFormatColumns),
-          ),
-          dimensionsSpec,
+            columnOrder: ['__time'].concat(dimensions ? dimensions.map(getDimensionSpecName) : []),
+            suffixColumnOrder: metricsSpec ? metricsSpec.map(getMetricSpecName) : undefined,
+          }),
+          dimensions,
           metricsSpec,
         },
+        lastData: schemaQueryState.getSomeData(),
       }),
-    });
+    }));
   }
 
   renderSchemaStep() {
@@ -2275,23 +2316,23 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       specPreview: spec,
       columnFilter,
       schemaQueryState,
+      selectedAutoDimension,
       selectedDimensionSpec,
       selectedDimensionSpecIndex,
       selectedMetricSpec,
       selectedMetricSpecIndex,
     } = this.state;
     const rollup: boolean = Boolean(deepGet(spec, 'spec.dataSchema.granularitySpec.rollup'));
-    const somethingSelected = Boolean(selectedDimensionSpec || selectedMetricSpec);
+    const somethingSelected = Boolean(
+      selectedAutoDimension || selectedDimensionSpec || selectedMetricSpec,
+    );
     const dimensionMode = getDimensionMode(spec);
 
     let mainFill: JSX.Element | string = '';
     if (schemaQueryState.isInit()) {
       mainFill = <CenterMessage>Please enter more details for the previous steps</CenterMessage>;
-    } else if (schemaQueryState.isLoading()) {
-      mainFill = <Loader />;
-    } else if (schemaQueryState.error) {
-      mainFill = <CenterMessage>{`Error: ${schemaQueryState.getErrorMessage()}`}</CenterMessage>;
-    } else if (schemaQueryState.data) {
+    } else {
+      const data = schemaQueryState.getSomeData();
       mainFill = (
         <div className="table-with-control">
           <div className="table-control">
@@ -2301,13 +2342,22 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
               placeholder="Search columns"
             />
           </div>
-          <SchemaTable
-            sampleBundle={schemaQueryState.data}
-            columnFilter={columnFilter}
-            selectedDimensionSpecIndex={selectedDimensionSpecIndex}
-            selectedMetricSpecIndex={selectedMetricSpecIndex}
-            onDimensionOrMetricSelect={this.onDimensionOrMetricSelect}
-          />
+          {data && (
+            <SchemaTable
+              sampleBundle={data}
+              columnFilter={columnFilter}
+              selectedAutoDimension={selectedAutoDimension}
+              selectedDimensionSpecIndex={selectedDimensionSpecIndex}
+              selectedMetricSpecIndex={selectedMetricSpecIndex}
+              onAutoDimensionSelect={this.onAutoDimensionSelect}
+              onDimensionSelect={this.onDimensionSelect}
+              onMetricSelect={this.onMetricSelect}
+            />
+          )}
+          {schemaQueryState.isLoading() && <Loader />}
+          {schemaQueryState.error && (
+            <CenterMessage>{`Error: ${schemaQueryState.getErrorMessage()}`}</CenterMessage>
+          )}
         </div>
       );
     }
@@ -2316,19 +2366,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       <>
         <div className="main">{mainFill}</div>
         <div className="control">
-          <Callout className="intro">
-            <p>
-              Each column in Druid must have an assigned type (string, long, float, double, complex,
-              etc).
-            </p>
-            {dimensionMode === 'specific' && (
-              <p>
-                Default primitive types have been automatically assigned to your columns. If you
-                want to change the type, click on the column header.
-              </p>
-            )}
-            <LearnMore href={`${getLink('DOCS')}/ingestion/schema-design.html`} />
-          </Callout>
+          <SchemaMessage dimensionMode={dimensionMode} />
           {!somethingSelected && (
             <>
               <FormGroupWithInfo
@@ -2419,7 +2457,20 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
                     name: 'spec.dataSchema.granularitySpec.queryGranularity',
                     label: 'Query granularity',
                     type: 'string',
-                    suggestions: ['NONE', 'SECOND', 'MINUTE', 'HOUR', 'DAY'],
+                    suggestions: [
+                      'none',
+                      'second',
+                      'minute',
+                      'fifteen_minute',
+                      'thirty_minute',
+                      'hour',
+                      'day',
+                      'week',
+                      'month',
+                      'quarter',
+                      'year',
+                      'all',
+                    ],
                     info: (
                       <>
                         This granularity determines how timestamps will be truncated (not at all, to
@@ -2433,10 +2484,41 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
                 onChange={s => this.updateSpecPreview(s)}
                 onFinalize={this.applyPreviewSpec}
               />
+              <FormGroup>
+                <Button
+                  text="Add dimension"
+                  disabled={dimensionMode !== 'specific'}
+                  onClick={() => {
+                    this.setState({
+                      selectedDimensionSpecIndex: -1,
+                      selectedDimensionSpec: {
+                        name: 'new_dimension',
+                        type: 'string',
+                      },
+                    });
+                  }}
+                />
+              </FormGroup>
+              <FormGroup>
+                <Button
+                  text="Add metric"
+                  onClick={() => {
+                    this.setState({
+                      selectedMetricSpecIndex: -1,
+                      selectedMetricSpec: {
+                        name: 'sum_blah',
+                        type: 'doubleSum',
+                        fieldName: '',
+                      },
+                    });
+                  }}
+                />
+              </FormGroup>
             </>
           )}
-          {!selectedMetricSpec && this.renderDimensionSpecControls()}
-          {!selectedDimensionSpec && this.renderMetricSpecControls()}
+          {this.renderAutoDimensionControls()}
+          {this.renderDimensionSpecControls()}
+          {this.renderMetricSpecControls()}
           {this.renderChangeRollupAction()}
           {this.renderChangeDimensionModeAction()}
         </div>
@@ -2451,22 +2533,46 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
               newSpec = deepSet(newSpec, 'spec.tuningConfig.partitionsSpec', { type: 'dynamic' });
               newSpec = deepDelete(newSpec, 'spec.tuningConfig.forceGuaranteedRollup');
             }
+
             this.updateSpec(newSpec);
+            return true;
           },
         })}
       </>
     );
   }
 
-  private onDimensionOrMetricSelect = (
+  private onAutoDimensionSelect = (selectedAutoDimension: string) => {
+    this.setState({
+      selectedAutoDimension,
+      selectedDimensionSpec: undefined,
+      selectedDimensionSpecIndex: -1,
+      selectedMetricSpec: undefined,
+      selectedMetricSpecIndex: -1,
+    });
+  };
+
+  private onDimensionSelect = (
     selectedDimensionSpec: DimensionSpec | undefined,
     selectedDimensionSpecIndex: number,
+  ) => {
+    this.setState({
+      selectedAutoDimension: undefined,
+      selectedDimensionSpec,
+      selectedDimensionSpecIndex,
+      selectedMetricSpec: undefined,
+      selectedMetricSpecIndex: -1,
+    });
+  };
+
+  private onMetricSelect = (
     selectedMetricSpec: MetricSpec | undefined,
     selectedMetricSpecIndex: number,
   ) => {
     this.setState({
-      selectedDimensionSpec,
-      selectedDimensionSpecIndex,
+      selectedAutoDimension: undefined,
+      selectedDimensionSpec: undefined,
+      selectedDimensionSpecIndex: -1,
       selectedMetricSpec,
       selectedMetricSpecIndex,
     });
@@ -2483,7 +2589,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           this.updateSpec(
             updateSchemaWithSample(
               spec,
-              headerAndRowsFromSampleResponse(sampleResponse),
+              headerAndRowsFromSampleResponse({ sampleResponse }),
               getDimensionMode(spec),
               newRollup,
             ),
@@ -2513,7 +2619,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           this.updateSpec(
             updateSchemaWithSample(
               spec,
-              headerAndRowsFromSampleResponse(sampleResponse),
+              headerAndRowsFromSampleResponse({ sampleResponse }),
               newDimensionMode,
               getRollup(spec),
             ),
@@ -2537,8 +2643,49 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     );
   }
 
+  renderAutoDimensionControls() {
+    const { spec, selectedAutoDimension } = this.state;
+    if (!selectedAutoDimension) return;
+
+    const close = () => {
+      this.setState({
+        selectedAutoDimension: undefined,
+      });
+    };
+
+    return (
+      <div className="edit-controls">
+        <FormGroup label="Name">
+          <InputGroup value={selectedAutoDimension} onChange={() => {}} readOnly />
+        </FormGroup>
+        <FormGroup>
+          <Button
+            icon={IconNames.CROSS}
+            text="Exclude"
+            intent={Intent.DANGER}
+            onClick={() => {
+              this.updateSpec(
+                deepSet(
+                  spec,
+                  `spec.dataSchema.dimensionsSpec.dimensionExclusions.[append]`,
+                  selectedAutoDimension,
+                ),
+              );
+              close();
+            }}
+          />
+        </FormGroup>
+        <FormGroup>
+          <Button text="Close" onClick={close} />
+        </FormGroup>
+      </div>
+    );
+  }
+
   renderDimensionSpecControls() {
     const { spec, selectedDimensionSpec, selectedDimensionSpecIndex } = this.state;
+    if (!selectedDimensionSpec) return;
+    const dimensionMode = getDimensionMode(spec);
 
     const close = () => {
       this.setState({
@@ -2547,139 +2694,141 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       });
     };
 
-    if (selectedDimensionSpec) {
-      const curDimensions =
-        deepGet(spec, `spec.dataSchema.dimensionsSpec.dimensions`) || EMPTY_ARRAY;
+    const dimensions = deepGet(spec, `spec.dataSchema.dimensionsSpec.dimensions`) || EMPTY_ARRAY;
 
-      const convertToMetric = (type: string, prefix: string) => {
-        const specWithoutDimension = deepDelete(
-          spec,
-          `spec.dataSchema.dimensionsSpec.dimensions.${selectedDimensionSpecIndex}`,
-        );
+    const moveTo = (newIndex: number) => {
+      const newDimension = moveElement(dimensions, selectedDimensionSpecIndex, newIndex);
+      const newSpec = deepSet(spec, `spec.dataSchema.dimensionsSpec.dimensions`, newDimension);
+      this.updateSpec(newSpec);
+      close();
+    };
 
-        const specWithMetric = deepSet(
-          specWithoutDimension,
-          `spec.dataSchema.metricsSpec.[append]`,
-          {
-            name: `${prefix}_${selectedDimensionSpec.name}`,
-            type,
-            fieldName: selectedDimensionSpec.name,
-          },
-        );
+    const reorderDimensionMenu = (
+      <ReorderMenu things={dimensions} selectedIndex={selectedDimensionSpecIndex} moveTo={moveTo} />
+    );
 
-        this.updateSpec(specWithMetric);
-        close();
-      };
+    const convertToMetric = (type: string, prefix: string) => {
+      const specWithoutDimension =
+        dimensionMode === 'specific'
+          ? deepDelete(
+              spec,
+              `spec.dataSchema.dimensionsSpec.dimensions.${selectedDimensionSpecIndex}`,
+            )
+          : spec;
 
-      const convertToMetricMenu = (
-        <Menu>
-          <MenuItem
-            text="Convert to longSum metric"
-            onClick={() => convertToMetric('longSum', 'sum')}
-          />
-          <MenuItem
-            text="Convert to doubleSum metric"
-            onClick={() => convertToMetric('doubleSum', 'sum')}
-          />
-          <MenuItem
-            text="Convert to thetaSketch metric"
-            onClick={() => convertToMetric('thetaSketch', 'theta')}
-          />
-          <MenuItem
-            text="Convert to HLLSketchBuild metric"
-            onClick={() => convertToMetric('HLLSketchBuild', 'hll')}
-          />
-          <MenuItem
-            text="Convert to quantilesDoublesSketch metric"
-            onClick={() => convertToMetric('quantilesDoublesSketch', 'quantiles_doubles')}
-          />
-          <MenuItem
-            text="Convert to hyperUnique metric"
-            onClick={() => convertToMetric('hyperUnique', 'unique')}
-          />
-        </Menu>
-      );
+      const specWithMetric = deepSet(specWithoutDimension, `spec.dataSchema.metricsSpec.[append]`, {
+        name: `${prefix}_${selectedDimensionSpec.name}`,
+        type,
+        fieldName: selectedDimensionSpec.name,
+      });
 
-      return (
-        <div className="edit-controls">
-          <AutoForm
-            fields={DIMENSION_SPEC_FIELDS}
-            model={selectedDimensionSpec}
-            onChange={selectedDimensionSpec => this.setState({ selectedDimensionSpec })}
+      this.updateSpec(specWithMetric);
+      close();
+    };
+
+    const convertToMetricMenu = (
+      <Menu>
+        <MenuItem
+          text="Convert to longSum metric"
+          onClick={() => convertToMetric('longSum', 'sum')}
+        />
+        <MenuItem
+          text="Convert to doubleSum metric"
+          onClick={() => convertToMetric('doubleSum', 'sum')}
+        />
+        <MenuItem
+          text="Convert to thetaSketch metric"
+          onClick={() => convertToMetric('thetaSketch', 'theta')}
+        />
+        <MenuItem
+          text="Convert to HLLSketchBuild metric"
+          onClick={() => convertToMetric('HLLSketchBuild', 'hll')}
+        />
+        <MenuItem
+          text="Convert to quantilesDoublesSketch metric"
+          onClick={() => convertToMetric('quantilesDoublesSketch', 'quantiles_doubles')}
+        />
+        <MenuItem
+          text="Convert to hyperUnique metric"
+          onClick={() => convertToMetric('hyperUnique', 'unique')}
+        />
+      </Menu>
+    );
+
+    return (
+      <div className="edit-controls">
+        <AutoForm
+          fields={DIMENSION_SPEC_FIELDS}
+          model={selectedDimensionSpec}
+          onChange={selectedDimensionSpec => this.setState({ selectedDimensionSpec })}
+        />
+        {reorderDimensionMenu && (
+          <FormGroup>
+            <Popover content={reorderDimensionMenu}>
+              <Button
+                icon={IconNames.ARROWS_HORIZONTAL}
+                text="Reorder dimension"
+                rightIcon={IconNames.CARET_DOWN}
+              />
+            </Popover>
+          </FormGroup>
+        )}
+        {selectedDimensionSpecIndex !== -1 && deepGet(spec, 'spec.dataSchema.metricsSpec') && (
+          <FormGroup>
+            <Popover content={convertToMetricMenu}>
+              <Button
+                icon={IconNames.EXCHANGE}
+                text="Convert to metric"
+                rightIcon={IconNames.CARET_DOWN}
+                disabled={dimensions.length <= 1}
+              />
+            </Popover>
+          </FormGroup>
+        )}
+        <div className="control-buttons">
+          <Button
+            text="Apply"
+            intent={Intent.PRIMARY}
+            onClick={() => {
+              this.updateSpec(
+                deepSet(
+                  spec,
+                  `spec.dataSchema.dimensionsSpec.dimensions.${selectedDimensionSpecIndex}`,
+                  selectedDimensionSpec,
+                ),
+              );
+              close();
+            }}
           />
-          {selectedDimensionSpecIndex !== -1 && deepGet(spec, 'spec.dataSchema.metricsSpec') && (
-            <FormGroup>
-              <Popover content={convertToMetricMenu}>
-                <Button
-                  icon={IconNames.EXCHANGE}
-                  text="Convert to metric"
-                  rightIcon={IconNames.CARET_DOWN}
-                  disabled={curDimensions.length <= 1}
-                />
-              </Popover>
-            </FormGroup>
-          )}
-          <div className="control-buttons">
+          <Button text="Cancel" onClick={close} />
+          {selectedDimensionSpecIndex !== -1 && (
             <Button
-              text="Apply"
-              intent={Intent.PRIMARY}
+              className="right"
+              icon={IconNames.TRASH}
+              intent={Intent.DANGER}
+              disabled={dimensions.length <= 1}
               onClick={() => {
+                if (dimensions.length <= 1) return; // Guard against removing the last dimension
+
                 this.updateSpec(
-                  deepSet(
+                  deepDelete(
                     spec,
                     `spec.dataSchema.dimensionsSpec.dimensions.${selectedDimensionSpecIndex}`,
-                    selectedDimensionSpec,
                   ),
                 );
                 close();
               }}
             />
-            <Button text="Cancel" onClick={close} />
-            {selectedDimensionSpecIndex !== -1 && (
-              <Button
-                className="right"
-                icon={IconNames.TRASH}
-                intent={Intent.DANGER}
-                disabled={curDimensions.length <= 1}
-                onClick={() => {
-                  if (curDimensions.length <= 1) return; // Guard against removing the last dimension
-
-                  this.updateSpec(
-                    deepDelete(
-                      spec,
-                      `spec.dataSchema.dimensionsSpec.dimensions.${selectedDimensionSpecIndex}`,
-                    ),
-                  );
-                  close();
-                }}
-              />
-            )}
-          </div>
+          )}
         </div>
-      );
-    } else {
-      return (
-        <FormGroup>
-          <Button
-            text="Add dimension"
-            disabled={getDimensionMode(spec) !== 'specific'}
-            onClick={() => {
-              this.setState({
-                selectedDimensionSpecIndex: -1,
-                selectedDimensionSpec: {
-                  name: 'new_dimension',
-                  type: 'string',
-                },
-              });
-            }}
-          />
-        </FormGroup>
-      );
-    }
+      </div>
+    );
   }
 
   renderMetricSpecControls() {
     const { spec, selectedMetricSpec, selectedMetricSpecIndex } = this.state;
+    if (!selectedMetricSpec) return;
+    const dimensionMode = getDimensionMode(spec);
 
     const close = () => {
       this.setState({
@@ -2688,110 +2837,84 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       });
     };
 
-    if (selectedMetricSpec) {
-      const convertToDimension = (type: string) => {
-        const specWithoutMetric = deepDelete(
-          spec,
-          `spec.dataSchema.metricsSpec.${selectedMetricSpecIndex}`,
-        );
-
-        const specWithDimension = deepSet(
-          specWithoutMetric,
-          `spec.dataSchema.dimensionsSpec.dimensions.[append]`,
-          {
-            type,
-            name: selectedMetricSpec.fieldName,
-          },
-        );
-
-        this.updateSpec(specWithDimension);
-        close();
-      };
-
-      const convertToDimensionMenu = (
-        <Menu>
-          <MenuItem
-            text="Convert to string dimension"
-            onClick={() => convertToDimension('string')}
-          />
-          <MenuItem text="Convert to long dimension" onClick={() => convertToDimension('long')} />
-          <MenuItem text="Convert to float dimension" onClick={() => convertToDimension('float')} />
-          <MenuItem
-            text="Convert to double dimension"
-            onClick={() => convertToDimension('double')}
-          />
-        </Menu>
+    const convertToDimension = (type: string) => {
+      const specWithoutMetric = deepDelete(
+        spec,
+        `spec.dataSchema.metricsSpec.${selectedMetricSpecIndex}`,
       );
 
-      return (
-        <div className="edit-controls">
-          <AutoForm
-            fields={METRIC_SPEC_FIELDS}
-            model={selectedMetricSpec}
-            onChange={selectedMetricSpec => this.setState({ selectedMetricSpec })}
+      const specWithDimension = deepSet(
+        specWithoutMetric,
+        `spec.dataSchema.dimensionsSpec.dimensions.[append]`,
+        {
+          type,
+          name: selectedMetricSpec.fieldName,
+        },
+      );
+
+      this.updateSpec(specWithDimension);
+      close();
+    };
+
+    const convertToDimensionMenu = (
+      <Menu>
+        <MenuItem text="Convert to string dimension" onClick={() => convertToDimension('string')} />
+        <MenuItem text="Convert to long dimension" onClick={() => convertToDimension('long')} />
+        <MenuItem text="Convert to float dimension" onClick={() => convertToDimension('float')} />
+        <MenuItem text="Convert to double dimension" onClick={() => convertToDimension('double')} />
+      </Menu>
+    );
+
+    return (
+      <div className="edit-controls">
+        <AutoForm
+          fields={METRIC_SPEC_FIELDS}
+          model={selectedMetricSpec}
+          onChange={selectedMetricSpec => this.setState({ selectedMetricSpec })}
+        />
+        {selectedMetricSpecIndex !== -1 && dimensionMode === 'specific' && (
+          <FormGroup>
+            <Popover content={convertToDimensionMenu}>
+              <Button
+                icon={IconNames.EXCHANGE}
+                text="Convert to dimension"
+                rightIcon={IconNames.CARET_DOWN}
+              />
+            </Popover>
+          </FormGroup>
+        )}
+        <div className="control-buttons">
+          <Button
+            text="Apply"
+            intent={Intent.PRIMARY}
+            onClick={() => {
+              this.updateSpec(
+                deepSet(
+                  spec,
+                  `spec.dataSchema.metricsSpec.${selectedMetricSpecIndex}`,
+                  selectedMetricSpec,
+                ),
+              );
+              close();
+            }}
           />
+          <Button text="Cancel" onClick={close} />
           {selectedMetricSpecIndex !== -1 && (
-            <FormGroup>
-              <Popover content={convertToDimensionMenu}>
-                <Button
-                  icon={IconNames.EXCHANGE}
-                  text="Convert to dimension"
-                  rightIcon={IconNames.CARET_DOWN}
-                />
-              </Popover>
-            </FormGroup>
-          )}
-          <div className="control-buttons">
             <Button
-              text="Apply"
-              intent={Intent.PRIMARY}
+              className="right"
+              icon={IconNames.TRASH}
+              intent={Intent.DANGER}
               onClick={() => {
                 this.updateSpec(
-                  deepSet(
-                    spec,
-                    `spec.dataSchema.metricsSpec.${selectedMetricSpecIndex}`,
-                    selectedMetricSpec,
-                  ),
+                  deepDelete(spec, `spec.dataSchema.metricsSpec.${selectedMetricSpecIndex}`),
                 );
                 close();
               }}
             />
-            <Button text="Cancel" onClick={close} />
-            {selectedMetricSpecIndex !== -1 && (
-              <Button
-                className="right"
-                icon={IconNames.TRASH}
-                intent={Intent.DANGER}
-                onClick={() => {
-                  this.updateSpec(
-                    deepDelete(spec, `spec.dataSchema.metricsSpec.${selectedMetricSpecIndex}`),
-                  );
-                  close();
-                }}
-              />
-            )}
-          </div>
+          )}
         </div>
-      );
-    } else {
-      return (
-        <FormGroup>
-          <Button
-            text="Add metric"
-            onClick={() => {
-              this.setState({
-                selectedMetricSpecIndex: -1,
-                selectedMetricSpec: {
-                  name: 'sum_blah',
-                  type: 'doubleSum',
-                  fieldName: '',
-                },
-              });
-            }}
-          />
-        </FormGroup>
-      );
-    }
+      </div>
+    );
   }
 
   // ==================================================================
@@ -2802,6 +2925,68 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     const granularitySpec: GranularitySpec =
       deepGet(spec, 'spec.dataSchema.granularitySpec') || EMPTY_OBJECT;
     const isStreaming = oneOf(spec.type, 'kafka', 'kinesis');
+    const dimensions: (string | DimensionSpec)[] | undefined = deepGet(
+      spec,
+      'spec.dataSchema.dimensionsSpec.dimensions',
+    );
+    const dimensionNames = dimensions ? dimensions.map(getDimensionSpecName) : undefined;
+
+    let nonsensicalSingleDimPartitioningMessage: JSX.Element | undefined;
+    const partitionDimension = deepGet(tuningConfig, 'partitionsSpec.partitionDimension');
+    if (
+      dimensions &&
+      Array.isArray(dimensionNames) &&
+      dimensionNames.length &&
+      deepGet(tuningConfig, 'partitionsSpec.type') === 'single_dim' &&
+      typeof partitionDimension === 'string' &&
+      partitionDimension !== dimensionNames[0]
+    ) {
+      const firstDimensionName = dimensionNames[0];
+      nonsensicalSingleDimPartitioningMessage = (
+        <Callout intent={Intent.WARNING}>
+          <p>Your partitioning and sorting configuration does not make sense.</p>
+          <p>
+            For best performance the first dimension in your schema (
+            <Code>{firstDimensionName}</Code>), which is what the data will be primarily sorted on,
+            should match the partitioning dimension (<Code>{partitionDimension}</Code>).
+          </p>
+          <p>
+            <Button
+              intent={Intent.WARNING}
+              text={`Put '${partitionDimension}' first in the dimensions list`}
+              onClick={() => {
+                this.updateSpec(
+                  deepSet(
+                    spec,
+                    'spec.dataSchema.dimensionsSpec.dimensions',
+                    moveElement(
+                      dimensions,
+                      dimensions.findIndex(d => getDimensionSpecName(d) === partitionDimension),
+                      0,
+                    ),
+                  ),
+                );
+              }}
+            />
+          </p>
+          <p>
+            <Button
+              intent={Intent.WARNING}
+              text={`Partition on '${firstDimensionName}' instead`}
+              onClick={() => {
+                this.updateSpec(
+                  deepSet(
+                    spec,
+                    'spec.tuningConfig.partitionsSpec.partitionDimension',
+                    firstDimensionName,
+                  ),
+                );
+              }}
+            />
+          </p>
+        </Callout>
+      );
+    }
 
     return (
       <>
@@ -2809,16 +2994,10 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           <H5>Primary partitioning (by time)</H5>
           <AutoForm
             fields={[
-              {
-                name: 'type',
-                type: 'string',
-                suggestions: ['uniform', 'arbitrary'],
-                info: <>This spec is used to generated segments with uniform intervals.</>,
-              },
               {
                 name: 'segmentGranularity',
                 type: 'string',
-                suggestions: ['HOUR', 'DAY', 'WEEK', 'MONTH', 'YEAR'],
+                suggestions: ['hour', 'day', 'week', 'month', 'year'],
                 defined: (g: GranularitySpec) => g.type === 'uniform',
                 required: true,
                 info: (
@@ -2857,18 +3036,18 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
         <div className="other">
           <H5>Secondary partitioning</H5>
           <AutoForm
-            fields={getPartitionRelatedTuningSpecFormFields(getSpecType(spec) || 'index_parallel')}
+            fields={getPartitionRelatedTuningSpecFormFields(
+              getSpecType(spec) || 'index_parallel',
+              dimensionNames,
+            )}
             model={tuningConfig}
             globalAdjustment={adjustTuningConfig}
             onChange={t => this.updateSpec(deepSet(spec, 'spec.tuningConfig', t))}
           />
         </div>
         <div className="control">
-          <Callout className="intro">
-            <p className="optional">Optional</p>
-            <p>Configure how Druid will partition data.</p>
-            <LearnMore href={`${getLink('DOCS')}/ingestion/index.html#partitioning`} />
-          </Callout>
+          <PartitionMessage />
+          {nonsensicalSingleDimPartitioningMessage}
         </div>
         {this.renderNextBar({
           disabled:
@@ -2928,11 +3107,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           />
         </div>
         <div className="control">
-          <Callout className="intro">
-            <p className="optional">Optional</p>
-            <p>Fine tune how Druid will ingest data.</p>
-            <LearnMore href={`${getLink('DOCS')}/ingestion/index.html#tuningconfig`} />
-          </Callout>
+          <TuningMessage />
         </div>
         {this.renderNextBar({
           disabled: invalidIoConfig(ioConfig),
@@ -3033,9 +3208,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           />
         </div>
         <div className="control">
-          <Callout className="intro">
-            <p>Configure behavior of indexed data once it reaches Druid.</p>
-          </Callout>
+          <PublishMessage />
         </div>
         {this.renderNextBar({})}
       </>
@@ -3078,6 +3251,12 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
   renderSpecStep() {
     const { spec, submitting } = this.state;
 
+    const fullSpec = Boolean(
+      deepGet(spec, 'spec.dataSchema.timestampSpec') &&
+        deepGet(spec, 'spec.dataSchema.dimensionsSpec') &&
+        deepGet(spec, 'spec.dataSchema.granularitySpec.type'),
+    );
+
     return (
       <>
         <div className="main">
@@ -3091,15 +3270,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           />
         </div>
         <div className="control">
-          <Callout className="intro">
-            <p className="optional">Optional</p>
-            <p>
-              Druid begins ingesting data once you submit a JSON ingestion spec. If you modify any
-              values in this view, the values entered in previous sections will update accordingly.
-              If you modify any values in previous sections, this spec will automatically update.
-            </p>
-            <p>Submit the spec to begin loading data into Druid.</p>
-          </Callout>
+          <SpecMessage />
         </div>
         <div className="next-bar">
           {!isEmptyIngestionSpec(spec) && (
@@ -3114,7 +3285,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
             text="Submit"
             rightIcon={IconNames.CLOUD_UPLOAD}
             intent={Intent.PRIMARY}
-            disabled={submitting}
+            disabled={submitting || !fullSpec}
             onClick={this.handleSubmit}
           />
         </div>
diff --git a/web-console/src/views/load-data-view/reorder-menu/reorder-menu.tsx b/web-console/src/views/load-data-view/reorder-menu/reorder-menu.tsx
new file mode 100644
index 00000000000..631b0b3df0c
--- /dev/null
+++ b/web-console/src/views/load-data-view/reorder-menu/reorder-menu.tsx
@@ -0,0 +1,66 @@
+/*
+ * 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 { Menu, MenuItem } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import React from 'react';
+
+export interface ReorderMenuProps {
+  things: any[] | undefined;
+  selectedIndex: number;
+  moveTo: (newIndex: number) => void;
+}
+
+export const ReorderMenu = React.memo(function ReorderMenu(props: ReorderMenuProps) {
+  const { things, selectedIndex, moveTo } = props;
+
+  if (!Array.isArray(things) || things.length <= 1 || selectedIndex === -1) return null;
+  const lastIndex = things.length - 1;
+  return (
+    <Menu>
+      {selectedIndex > 0 && (
+        <MenuItem
+          icon={IconNames.DOUBLE_CHEVRON_LEFT}
+          text="Make first"
+          onClick={() => moveTo(0)}
+        />
+      )}
+      {selectedIndex > 0 && (
+        <MenuItem
+          icon={IconNames.CHEVRON_LEFT}
+          text="Move left (earlier in the sort order)"
+          onClick={() => moveTo(selectedIndex - 1)}
+        />
+      )}
+      {selectedIndex < lastIndex && (
+        <MenuItem
+          icon={IconNames.CHEVRON_RIGHT}
+          text="Move right (later in the sort order)"
+          onClick={() => moveTo(selectedIndex + 1)}
+        />
+      )}
+      {selectedIndex < lastIndex && (
+        <MenuItem
+          icon={IconNames.DOUBLE_CHEVRON_RIGHT}
+          text="Make last"
+          onClick={() => moveTo(lastIndex)}
+        />
+      )}
+    </Menu>
+  );
+});
diff --git a/web-console/src/views/load-data-view/schema-table/__snapshots__/schema-table.spec.tsx.snap b/web-console/src/views/load-data-view/schema-table/__snapshots__/schema-table.spec.tsx.snap
index e9d47e05787..fb54c306fce 100644
--- a/web-console/src/views/load-data-view/schema-table/__snapshots__/schema-table.spec.tsx.snap
+++ b/web-console/src/views/load-data-view/schema-table/__snapshots__/schema-table.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`schema table matches snapshot 1`] = `
+exports[`SchemaTable matches snapshot 1`] = `
 <div
   class="ReactTable schema-table -striped -highlight"
 >
@@ -19,7 +19,7 @@ exports[`schema table matches snapshot 1`] = `
         <div
           class="rt-th dimension string rt-resizable-header"
           role="columnheader"
-          style="flex: 100 0 auto; width: 100px;"
+          style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           tabindex="-1"
         >
           <div
@@ -62,7 +62,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span
               class="table-cell plain"
@@ -83,7 +83,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -102,7 +102,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -121,7 +121,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -140,7 +140,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -159,7 +159,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -178,7 +178,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -197,7 +197,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -216,7 +216,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -235,7 +235,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -254,7 +254,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -273,7 +273,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -292,7 +292,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -311,7 +311,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -330,7 +330,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -349,7 +349,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -368,7 +368,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -387,7 +387,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -406,7 +406,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -425,7 +425,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -444,7 +444,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -463,7 +463,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -482,7 +482,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -501,7 +501,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -520,7 +520,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -539,7 +539,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -558,7 +558,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -577,7 +577,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -596,7 +596,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -615,7 +615,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -634,7 +634,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -653,7 +653,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -672,7 +672,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -691,7 +691,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -710,7 +710,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -729,7 +729,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -748,7 +748,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -767,7 +767,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -786,7 +786,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -805,7 +805,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -824,7 +824,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -843,7 +843,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -862,7 +862,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -881,7 +881,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -900,7 +900,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -919,7 +919,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -938,7 +938,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -957,7 +957,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -976,7 +976,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
@@ -995,7 +995,7 @@ exports[`schema table matches snapshot 1`] = `
           <div
             class="rt-td dimension string"
             role="gridcell"
-            style="flex: 100 0 auto; width: 100px;"
+            style="flex: 100 0 auto; width: 100px; max-width: 100px;"
           >
             <span>
                
diff --git a/web-console/src/views/load-data-view/schema-table/schema-table.spec.tsx b/web-console/src/views/load-data-view/schema-table/schema-table.spec.tsx
index 2a4dad98c75..62650136664 100644
--- a/web-console/src/views/load-data-view/schema-table/schema-table.spec.tsx
+++ b/web-console/src/views/load-data-view/schema-table/schema-table.spec.tsx
@@ -21,7 +21,7 @@ import React from 'react';
 
 import { SchemaTable } from './schema-table';
 
-describe('schema table', () => {
+describe('SchemaTable', () => {
   it('matches snapshot', () => {
     const sampleData = {
       header: ['c1'],
@@ -37,13 +37,16 @@ describe('schema table', () => {
       <SchemaTable
         sampleBundle={{
           headerAndRows: sampleData,
-          dimensionsSpec: {},
+          dimensions: [],
           metricsSpec: [],
         }}
         columnFilter=""
+        selectedAutoDimension={undefined}
         selectedDimensionSpecIndex={-1}
         selectedMetricSpecIndex={-1}
-        onDimensionOrMetricSelect={() => {}}
+        onAutoDimensionSelect={() => {}}
+        onDimensionSelect={() => {}}
+        onMetricSelect={() => {}}
       />
     );
 
diff --git a/web-console/src/views/load-data-view/schema-table/schema-table.tsx b/web-console/src/views/load-data-view/schema-table/schema-table.tsx
index ecb50e5206e..6228b09af63 100644
--- a/web-console/src/views/load-data-view/schema-table/schema-table.tsx
+++ b/web-console/src/views/load-data-view/schema-table/schema-table.tsx
@@ -23,14 +23,13 @@ import ReactTable from 'react-table';
 import { TableCell } from '../../../components';
 import {
   DimensionSpec,
-  DimensionsSpec,
   getDimensionSpecName,
   getDimensionSpecType,
   getMetricSpecName,
   inflateDimensionSpec,
   MetricSpec,
 } from '../../../druid-models';
-import { caseInsensitiveContains, filterMap, sortWithPrefixSuffix } from '../../../utils';
+import { caseInsensitiveContains, filterMap } from '../../../utils';
 import { HeaderAndRows, SampleEntry } from '../../../utils/sampler';
 
 import './schema-table.scss';
@@ -38,15 +37,19 @@ import './schema-table.scss';
 export interface SchemaTableProps {
   sampleBundle: {
     headerAndRows: HeaderAndRows;
-    dimensionsSpec: DimensionsSpec;
-    metricsSpec: MetricSpec[];
+    dimensions: (string | DimensionSpec)[] | undefined;
+    metricsSpec: MetricSpec[] | undefined;
   };
   columnFilter: string;
+  selectedAutoDimension: string | undefined;
   selectedDimensionSpecIndex: number;
   selectedMetricSpecIndex: number;
-  onDimensionOrMetricSelect: (
+  onAutoDimensionSelect: (dimensionName: string) => void;
+  onDimensionSelect: (
     selectedDimensionSpec: DimensionSpec | undefined,
     selectedDimensionSpecIndex: number,
+  ) => void;
+  onMetricSelect: (
     selectedMetricSpec: MetricSpec | undefined,
     selectedMetricSpecIndex: number,
   ) => void;
@@ -56,28 +59,26 @@ export const SchemaTable = React.memo(function SchemaTable(props: SchemaTablePro
   const {
     sampleBundle,
     columnFilter,
+    selectedAutoDimension,
     selectedDimensionSpecIndex,
     selectedMetricSpecIndex,
-    onDimensionOrMetricSelect,
+    onAutoDimensionSelect,
+    onDimensionSelect,
+    onMetricSelect,
   } = props;
-  const { headerAndRows, dimensionsSpec, metricsSpec } = sampleBundle;
-
-  const dimensionMetricSortedHeader = sortWithPrefixSuffix(
-    headerAndRows.header,
-    ['__time'],
-    metricsSpec.map(getMetricSpecName),
-    null,
-  );
+  const { headerAndRows, dimensions, metricsSpec } = sampleBundle;
 
   return (
     <ReactTable
       className="schema-table -striped -highlight"
       data={headerAndRows.rows}
-      columns={filterMap(dimensionMetricSortedHeader, (columnName, i) => {
+      columns={filterMap(headerAndRows.header, (columnName, i) => {
         if (!caseInsensitiveContains(columnName, columnFilter)) return;
 
-        const metricSpecIndex = metricsSpec.findIndex(m => getMetricSpecName(m) === columnName);
-        const metricSpec = metricsSpec[metricSpecIndex];
+        const metricSpecIndex = metricsSpec
+          ? metricsSpec.findIndex(m => getMetricSpecName(m) === columnName)
+          : -1;
+        const metricSpec = metricsSpec ? metricsSpec[metricSpecIndex] : undefined;
 
         if (metricSpec) {
           const columnClassName = classNames('metric', {
@@ -87,9 +88,7 @@ export const SchemaTable = React.memo(function SchemaTable(props: SchemaTablePro
             Header: (
               <div
                 className="clickable"
-                onClick={() =>
-                  onDimensionOrMetricSelect(undefined, -1, metricSpec, metricSpecIndex)
-                }
+                onClick={() => onMetricSelect(metricSpec, metricSpecIndex)}
               >
                 <div className="column-name">{columnName}</div>
                 <div className="column-detail">{metricSpec.type}&nbsp;</div>
@@ -102,20 +101,20 @@ export const SchemaTable = React.memo(function SchemaTable(props: SchemaTablePro
             Cell: ({ value }) => <TableCell value={value} />,
           };
         } else {
-          const timestamp = columnName === '__time';
-          const dimensionSpecIndex = dimensionsSpec.dimensions
-            ? dimensionsSpec.dimensions.findIndex(d => getDimensionSpecName(d) === columnName)
+          const isTimestamp = columnName === '__time';
+          const dimensionSpecIndex = dimensions
+            ? dimensions.findIndex(d => getDimensionSpecName(d) === columnName)
             : -1;
-          const dimensionSpec = dimensionsSpec.dimensions
-            ? dimensionsSpec.dimensions[dimensionSpecIndex]
-            : null;
-          const dimensionSpecType = dimensionSpec ? getDimensionSpecType(dimensionSpec) : null;
+          const dimensionSpec = dimensions ? dimensions[dimensionSpecIndex] : undefined;
+          const dimensionSpecType = dimensionSpec ? getDimensionSpecType(dimensionSpec) : undefined;
 
           const columnClassName = classNames(
-            timestamp ? 'timestamp' : 'dimension',
+            isTimestamp ? 'timestamp' : 'dimension',
             dimensionSpecType || 'string',
             {
-              selected: dimensionSpec && dimensionSpecIndex === selectedDimensionSpecIndex,
+              selected:
+                (dimensionSpec && dimensionSpecIndex === selectedDimensionSpecIndex) ||
+                selectedAutoDimension === columnName,
             },
           );
           return {
@@ -123,31 +122,27 @@ export const SchemaTable = React.memo(function SchemaTable(props: SchemaTablePro
               <div
                 className="clickable"
                 onClick={() => {
-                  if (timestamp) {
-                    onDimensionOrMetricSelect(undefined, -1, undefined, -1);
-                    return;
-                  }
+                  if (isTimestamp) return;
 
-                  if (!dimensionSpec) return;
-                  onDimensionOrMetricSelect(
-                    inflateDimensionSpec(dimensionSpec),
-                    dimensionSpecIndex,
-                    undefined,
-                    -1,
-                  );
+                  if (dimensionSpec) {
+                    onDimensionSelect(inflateDimensionSpec(dimensionSpec), dimensionSpecIndex);
+                  } else {
+                    onAutoDimensionSelect(columnName);
+                  }
                 }}
               >
                 <div className="column-name">{columnName}</div>
                 <div className="column-detail">
-                  {timestamp ? 'long (time column)' : dimensionSpecType || 'string (auto)'}&nbsp;
+                  {isTimestamp ? 'long (time column)' : dimensionSpecType || 'string (auto)'}&nbsp;
                 </div>
               </div>
             ),
             headerClassName: columnClassName,
             className: columnClassName,
             id: String(i),
+            width: isTimestamp ? 200 : 100,
             accessor: (row: SampleEntry) => (row.parsed ? row.parsed[columnName] : null),
-            Cell: row => <TableCell value={timestamp ? new Date(row.value) : row.value} />,
+            Cell: row => <TableCell value={isTimestamp ? new Date(row.value) : row.value} />,
           };
         }
       })}
diff --git a/web-console/src/views/query-view/query-view.tsx b/web-console/src/views/query-view/query-view.tsx
index c44a3d3858b..4cb2a2ff7c1 100644
--- a/web-console/src/views/query-view/query-view.tsx
+++ b/web-console/src/views/query-view/query-view.tsx
@@ -459,6 +459,7 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
       }
     }
 
+    const someQueryResult = queryResultState.getSomeData();
     const runeMode = QueryView.isJsonLike(queryString);
     return (
       <SplitterLayout
@@ -501,10 +502,10 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
           </div>
         </div>
         <div className="output-pane">
-          {queryResult && (
+          {someQueryResult && (
             <QueryOutput
               runeMode={runeMode}
-              queryResult={queryResult}
+              queryResult={someQueryResult}
               onQueryChange={this.handleQueryChange}
             />
           )}