Web console: Add columnMapping information to the Explain dialog (#16598)

* Add columnMapping information in the Explain dialog

* use arrow char

web-console/src/utils/druid-query.ts

@@ -23,7 +23,7 @@ import axios from 'axios';
 import { Api } from '../singletons';
 
 import type { RowColumn } from './general';
-import { assemble } from './general';
+import { assemble, lookupBy } from './general';
 
 const CANCELED_MESSAGE = 'Query canceled by user.';
 
@@ -345,10 +345,24 @@ export async function queryDruidSql<T = any>(
 export interface QueryExplanation {
   query: any;
   signature: { name: string; type: string }[];
+  columnMappings: {
+    queryColumn: string;
+    outputColumn: string;
+  }[];
 }
 
-export function formatSignature(queryExplanation: QueryExplanation): string {
+export function formatColumnMappingsAndSignature(queryExplanation: QueryExplanation): string {
-  return queryExplanation.signature
+  const columnNameToType = lookupBy(
-    .map(({ name, type }) => `${C.optionalQuotes(name)}::${type}`)
+    queryExplanation.signature,
+    c => c.name,
+    c => c.type,
+  );
+  return queryExplanation.columnMappings
+    .map(({ queryColumn, outputColumn }) => {
+      const type = columnNameToType[queryColumn];
+      return `${C.optionalQuotes(queryColumn)}${type ? `::${type}` : ''}→${C.optionalQuotes(
+        outputColumn,
+      )}`;
+    })
     .join(', ');
 }

web-console/src/views/workbench-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap

@@ -185,7 +185,7 @@ exports[`ExplainDialog matches snapshot on some data (many queries) 1`] = `
               label="Signature"
             >
               <Blueprint5.InputGroup
-                defaultValue="channel::STRING"
+                defaultValue="channel::STRING→channel"
                 readOnly={true}
               />
             </Blueprint5.FormGroup>
@@ -287,7 +287,7 @@ exports[`ExplainDialog matches snapshot on some data (many queries) 1`] = `
               label="Signature"
             >
               <Blueprint5.InputGroup
-                defaultValue="channel::STRING"
+                defaultValue="channel::STRING→channel"
                 readOnly={true}
               />
             </Blueprint5.FormGroup>
@@ -473,7 +473,7 @@ exports[`ExplainDialog matches snapshot on some data (one query) 1`] = `
         label="Signature"
       >
         <Blueprint5.InputGroup
-          defaultValue="d0::STRING, a0::LONG"
+          defaultValue="d0::STRING→channel, a0::LONG→"Count""
           readOnly={true}
         />
       </Blueprint5.FormGroup>

web-console/src/views/workbench-view/explain-dialog/explain-dialog.spec.tsx

@@ -160,6 +160,16 @@ describe('ExplainDialog', () => {
               type: 'LONG',
             },
           ],
+          columnMappings: [
+            {
+              queryColumn: 'd0',
+              outputColumn: 'channel',
+            },
+            {
+              queryColumn: 'a0',
+              outputColumn: 'Count',
+            },
+          ],
         },
       ],
     });
@@ -199,6 +209,12 @@ describe('ExplainDialog', () => {
               type: 'STRING',
             },
           ],
+          columnMappings: [
+            {
+              queryColumn: 'channel',
+              outputColumn: 'channel',
+            },
+          ],
         },
         {
           query: {
@@ -234,6 +250,12 @@ describe('ExplainDialog', () => {
               type: 'STRING',
             },
           ],
+          columnMappings: [
+            {
+              queryColumn: 'channel',
+              outputColumn: 'channel',
+            },
+          ],
         },
       ],
     });

web-console/src/views/workbench-view/explain-dialog/explain-dialog.tsx

@@ -40,7 +40,7 @@ import { Api } from '../../../singletons';
 import type { QueryExplanation } from '../../../utils';
 import {
   deepGet,
-  formatSignature,
+  formatColumnMappingsAndSignature,
   getDruidErrorMessage,
   nonEmptyArray,
   queryDruidSql,
@@ -141,7 +141,7 @@ export const ExplainDialog = React.memo(function ExplainDialog(props: ExplainDia
           />
         </FormGroup>
         <FormGroup className="signature-group" label="Signature">
-          <InputGroup defaultValue={formatSignature(queryExplanation)} readOnly />
+          <InputGroup defaultValue={formatColumnMappingsAndSignature(queryExplanation)} readOnly />
         </FormGroup>
         {openQueryLabel && (
           <Button