From 1bc8f7ed59de335288552c9b89c35ac3bb3a5aa0 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 13 Jun 2024 12:42:36 -0700
Subject: [PATCH 1/2] Add columnMapping information in the Explain dialog

---
 web-console/src/utils/druid-query.ts          | 22 +++++++++++++++----
 .../explain-dialog.spec.tsx.snap              |  6 ++---
 .../explain-dialog/explain-dialog.spec.tsx    | 22 +++++++++++++++++++
 .../explain-dialog/explain-dialog.tsx         |  4 ++--
 4 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/web-console/src/utils/druid-query.ts b/web-console/src/utils/druid-query.ts
index 154103297044..773eebb98787 100644
--- a/web-console/src/utils/druid-query.ts
+++ b/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 {
-  return queryExplanation.signature
-    .map(({ name, type }) => `${C.optionalQuotes(name)}::${type}`)
+export function formatColumnMappingsAndSignature(queryExplanation: QueryExplanation): string {
+  const columnNameToType = lookupBy(
+    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(', ');
 }
diff --git a/web-console/src/views/workbench-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap b/web-console/src/views/workbench-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
index c0332ad0b015..b6aac156dda0 100644
--- a/web-console/src/views/workbench-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
@@ -186,7 +186,7 @@ exports[`ExplainDialog matches snapshot on some data (many queries) 1`] = `
               label="Signature"
             >
               <Blueprint4.InputGroup
-                defaultValue="channel::STRING"
+                defaultValue="channel::STRING->channel"
                 readOnly={true}
               />
             </Blueprint4.FormGroup>
@@ -289,7 +289,7 @@ exports[`ExplainDialog matches snapshot on some data (many queries) 1`] = `
               label="Signature"
             >
               <Blueprint4.InputGroup
-                defaultValue="channel::STRING"
+                defaultValue="channel::STRING->channel"
                 readOnly={true}
               />
             </Blueprint4.FormGroup>
@@ -475,7 +475,7 @@ exports[`ExplainDialog matches snapshot on some data (one query) 1`] = `
         label="Signature"
       >
         <Blueprint4.InputGroup
-          defaultValue="d0::STRING, a0::LONG"
+          defaultValue="d0::STRING->channel, a0::LONG->"Count""
           readOnly={true}
         />
       </Blueprint4.FormGroup>
diff --git a/web-console/src/views/workbench-view/explain-dialog/explain-dialog.spec.tsx b/web-console/src/views/workbench-view/explain-dialog/explain-dialog.spec.tsx
index f3c140e691a2..8f86f5e75525 100644
--- a/web-console/src/views/workbench-view/explain-dialog/explain-dialog.spec.tsx
+++ b/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',
+            },
+          ],
         },
       ],
     });
@@ -200,6 +210,12 @@ describe('ExplainDialog', () => {
               type: 'STRING',
             },
           ],
+          columnMappings: [
+            {
+              queryColumn: 'channel',
+              outputColumn: 'channel',
+            },
+          ],
         },
         {
           query: {
@@ -236,6 +252,12 @@ describe('ExplainDialog', () => {
               type: 'STRING',
             },
           ],
+          columnMappings: [
+            {
+              queryColumn: 'channel',
+              outputColumn: 'channel',
+            },
+          ],
         },
       ],
     });
diff --git a/web-console/src/views/workbench-view/explain-dialog/explain-dialog.tsx b/web-console/src/views/workbench-view/explain-dialog/explain-dialog.tsx
index 4bab7e7bfb05..7f01436babbd 100644
--- a/web-console/src/views/workbench-view/explain-dialog/explain-dialog.tsx
+++ b/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

From 9b879b96e17aba28a9846022a2126eec9892c984 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Fri, 14 Jun 2024 12:24:29 -0700
Subject: [PATCH 2/2] use arrow char

---
 web-console/src/utils/druid-query.ts                        | 2 +-
 .../__snapshots__/explain-dialog.spec.tsx.snap              | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/web-console/src/utils/druid-query.ts b/web-console/src/utils/druid-query.ts
index 773eebb98787..fba63b946000 100644
--- a/web-console/src/utils/druid-query.ts
+++ b/web-console/src/utils/druid-query.ts
@@ -360,7 +360,7 @@ export function formatColumnMappingsAndSignature(queryExplanation: QueryExplanat
   return queryExplanation.columnMappings
     .map(({ queryColumn, outputColumn }) => {
       const type = columnNameToType[queryColumn];
-      return `${C.optionalQuotes(queryColumn)}${type ? `::${type}` : ''}->${C.optionalQuotes(
+      return `${C.optionalQuotes(queryColumn)}${type ? `::${type}` : ''}→${C.optionalQuotes(
         outputColumn,
       )}`;
     })
diff --git a/web-console/src/views/workbench-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap b/web-console/src/views/workbench-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
index b6aac156dda0..4c32476c437b 100644
--- a/web-console/src/views/workbench-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
@@ -186,7 +186,7 @@ exports[`ExplainDialog matches snapshot on some data (many queries) 1`] = `
               label="Signature"
             >
               <Blueprint4.InputGroup
-                defaultValue="channel::STRING->channel"
+                defaultValue="channel::STRING→channel"
                 readOnly={true}
               />
             </Blueprint4.FormGroup>
@@ -289,7 +289,7 @@ exports[`ExplainDialog matches snapshot on some data (many queries) 1`] = `
               label="Signature"
             >
               <Blueprint4.InputGroup
-                defaultValue="channel::STRING->channel"
+                defaultValue="channel::STRING→channel"
                 readOnly={true}
               />
             </Blueprint4.FormGroup>
@@ -475,7 +475,7 @@ exports[`ExplainDialog matches snapshot on some data (one query) 1`] = `
         label="Signature"
       >
         <Blueprint4.InputGroup
-          defaultValue="d0::STRING->channel, a0::LONG->"Count""
+          defaultValue="d0::STRING→channel, a0::LONG→"Count""
           readOnly={true}
         />
       </Blueprint4.FormGroup>