Kamu UI 514 query explainer improve input data section view (#518)

* improved input data section view for query explainer

* changed CHANGELOG.md

* extract common code to shared helper

---------

Co-authored-by: Dmitriy Borzenko <[email protected]>

Author: dmitriy-borzenko

CHANGELOG.md

@@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 ### Added
 - Added initialization messages at the start of the flow
+### Changed
+- Query explainer: improved `INPUT DATA` section view
+  - added `Run` and `Copy` buttons for a sql code
 ### Fixed
 - Flows table: fixed broken filters in pagination
 

src/app/common/app.helpers.ts

@@ -111,3 +111,39 @@ export function changeCopyIcon(event: MouseEvent): void {
         htmlButtonElement.classList.add("clipboard-btn--success");
     }
 }
+
+export function addMarkdownRunButton(sqlQueries: RegExpMatchArray | null, path: string): void {
+    const containerRunButtonElement: HTMLCollectionOf<Element> =
+        document.getElementsByClassName("container-run-button");
+
+    if (sqlQueries?.length && !containerRunButtonElement.length) {
+        const preElements: NodeListOf<Element> = document.querySelectorAll("pre.language-sql");
+        preElements.forEach((preElement: Element, index: number) => {
+            const divElement: HTMLDivElement = document.createElement("div");
+            divElement.classList.add("container-run-button");
+            divElement.style.position = "absolute";
+            divElement.style.top = "10px";
+            divElement.style.right = "65px";
+            const linkElement = document.createElement("a");
+            linkElement.classList.add("markdown-run-button");
+            linkElement.style.padding = "3.6px 16px";
+            linkElement.style.color = "#ffff";
+            linkElement.style.fontSize = "13px";
+            linkElement.style.textDecoration = "none";
+            linkElement.style.backgroundColor = "rgba(255,255, 255, 0.07)";
+            linkElement.style.borderRadius = "4px";
+            linkElement.style.transition = "all 250ms ease-out";
+            linkElement.setAttribute("target", "_blank");
+            linkElement.setAttribute("href", `${path}=${encodeURI(sqlQueries[index])}`);
+            linkElement.addEventListener("mouseover", () => {
+                linkElement.style.backgroundColor = "rgba(255,255, 255, 0.14)";
+            });
+            linkElement.addEventListener("mouseleave", () => {
+                linkElement.style.backgroundColor = "rgba(255,255, 255, 0.07)";
+            });
+            linkElement.innerHTML = "Run";
+            divElement.appendChild(linkElement);
+            preElement.after(divElement);
+        });
+    }
+}

src/app/dataset-view/additional-components/overview-component/components/readme-section/readme-section.component.ts

@@ -18,6 +18,8 @@ import { DatasetCommitService } from "../../services/dataset-commit.service";
 import { LoggedUserService } from "src/app/auth/logged-user.service";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { DatasetViewTypeEnum } from "src/app/dataset-view/dataset-view.interface";
+import ProjectLinks from "src/app/project-links";
+import { addMarkdownRunButton } from "src/app/common/app.helpers";
 
 @Component({
     selector: "app-readme-section",
@@ -101,42 +103,10 @@ export class ReadmeSectionComponent extends BaseComponent implements OnChanges,
         if (this.readmeState) {
             // Find all sql queries between ```sql and ```
             const sqlQueries = this.readmeState.match(/(?<=```sql\s+).*?(?=\s+```)/gs);
-            const containerRunButtonElement: HTMLCollectionOf<Element> =
-                document.getElementsByClassName("container-run-button");
-
-            if (sqlQueries?.length && !containerRunButtonElement.length) {
-                const preElements: NodeListOf<Element> = document.querySelectorAll("pre.language-sql");
-                preElements.forEach((preElement: Element, index: number) => {
-                    const divElement: HTMLDivElement = document.createElement("div");
-                    divElement.classList.add("container-run-button");
-                    divElement.style.position = "absolute";
-                    divElement.style.top = "10px";
-                    divElement.style.right = "65px";
-                    const linkElement = document.createElement("a");
-                    linkElement.classList.add("markdown-run-button");
-                    linkElement.style.padding = "3.6px 16px";
-                    linkElement.style.color = "#ffff";
-                    linkElement.style.fontSize = "13px";
-                    linkElement.style.textDecoration = "none";
-                    linkElement.style.backgroundColor = "rgba(255,255, 255, 0.07)";
-                    linkElement.style.borderRadius = "4px";
-                    linkElement.style.transition = "all 250ms ease-out";
-                    linkElement.setAttribute("target", "_blank");
-                    linkElement.setAttribute(
-                        "href",
-                        `/${this.datasetBasics.owner.accountName}/${this.datasetBasics.name}?tab=${DatasetViewTypeEnum.Data}&sqlQuery=${encodeURI(sqlQueries[index])}`,
-                    );
-                    linkElement.addEventListener("mouseover", () => {
-                        linkElement.style.backgroundColor = "rgba(255,255, 255, 0.14)";
-                    });
-                    linkElement.addEventListener("mouseleave", () => {
-                        linkElement.style.backgroundColor = "rgba(255,255, 255, 0.07)";
-                    });
-                    linkElement.innerHTML = "Run";
-                    divElement.appendChild(linkElement);
-                    preElement.after(divElement);
-                });
-            }
+            addMarkdownRunButton(
+                sqlQueries,
+                `/${this.datasetBasics.owner.accountName}/${this.datasetBasics.name}?${ProjectLinks.URL_QUERY_PARAM_TAB}=${DatasetViewTypeEnum.Data}&${ProjectLinks.URL_QUERY_PARAM_SQL_QUERY}`,
+            );
         }
     }
 }

src/app/query-explainer/components/input-data-section/input-data-section.component.html

@@ -4,7 +4,7 @@
         <div class="mt-4 mx-4">
             <div class="fw-semibold">Query:</div>
             <div class="mt-2">
-                <pre><code [highlight]="inputData.sqlQueryExplainerResponse.input.query" [languages]="['sql'] "   [attr.data-test-id]="'query-explainer-viewer'" class="rounded-3"></code></pre>
+                <markdown clipboard class="variable-binding" [data]="sqlWrapper(this.sqlCode)" />
             </div>
         </div>
         <div

src/app/query-explainer/components/input-data-section/input-data-section.component.spec.ts

@@ -16,6 +16,9 @@ import ProjectLinks from "src/app/project-links";
 import { AngularSvgIconModule } from "angular-svg-icon";
 import { HttpClientTestingModule } from "@angular/common/http/testing";
 import { findElementByDataTestId } from "src/app/common/base-test.helpers.spec";
+import { MarkdownModule } from "ngx-markdown";
+import { HttpClient } from "@angular/common/http";
+import { SecurityContext } from "@angular/core";
 
 describe("InputDataSectionComponent", () => {
     let component: InputDataSectionComponent;
@@ -31,6 +34,10 @@ describe("InputDataSectionComponent", () => {
                 RouterModule,
                 AngularSvgIconModule.forRoot(),
                 HttpClientTestingModule,
+                MarkdownModule.forRoot({
+                    loader: HttpClient,
+                    sanitize: SecurityContext.NONE,
+                }),
             ],
             providers: [
                 {

src/app/query-explainer/components/input-data-section/input-data-section.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import { AfterViewChecked, ChangeDetectionStrategy, Component, Input } from "@angular/core";
 import { Observable } from "rxjs";
 import {
     VerifyQueryDatasetBlockNotFoundError,
@@ -10,19 +10,25 @@ import { DatasetInfo } from "src/app/interface/navigation.interface";
 import { MaybeUndefined } from "src/app/common/app.types";
 import AppValues from "src/app/common/app.values";
 import { QueryExplainerComponentData } from "../../query-explainer.component";
+import ProjectLinks from "src/app/project-links";
+import { addMarkdownRunButton } from "src/app/common/app.helpers";
 
 @Component({
     selector: "app-input-data-section",
     templateUrl: "./input-data-section.component.html",
     styleUrls: ["./input-data-section.component.scss"],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class InputDataSectionComponent {
+export class InputDataSectionComponent implements AfterViewChecked {
     @Input({ required: true }) public blockHashObservables$: Observable<Date>[];
     @Input({ required: true }) public datasetInfoObservables$: Observable<DatasetInfo>[];
     @Input({ required: true }) inputData: QueryExplainerComponentData;
     public readonly DATE_FORMAT = AppValues.DISPLAY_FLOW_DATE_FORMAT;
 
+    ngAfterViewChecked(): void {
+        this.addDynamicRunButton();
+    }
+
     public isDatasetBlockNotFoundError(error: MaybeUndefined<VerifyQueryError>, blockHash: string): boolean {
         return (
             error?.kind === VerifyQueryKindError.DatasetBlockNotFound &&
@@ -36,4 +42,18 @@ export class InputDataSectionComponent {
             (error as VerifyQueryDatasetNotFoundError).dataset_id === datasetId
         );
     }
+
+    public get sqlCode(): string {
+        return this.inputData.sqlQueryExplainerResponse.input.query;
+    }
+
+    public sqlWrapper(sqlCode: string): string {
+        return "```sql\n" + sqlCode + "\n```";
+    }
+
+    private addDynamicRunButton(): void {
+        // Find all sql queries between ```sql and ```
+        const sqlQueries = this.sqlWrapper(this.sqlCode).match(/(?<=```sql\s+).*?(?=\s+```)/gs);
+        addMarkdownRunButton(sqlQueries, `/${ProjectLinks.URL_QUERY}?${ProjectLinks.URL_QUERY_PARAM_SQL_QUERY}`);
+    }
 }

src/app/query-explainer/query-explainer.module.ts

@@ -13,6 +13,7 @@ import { DisplayHashModule } from "../components/display-hash/display-hash.modul
 import { DynamicTableModule } from "../components/dynamic-table/dynamic-table.module";
 import { FormsModule } from "@angular/forms";
 import { AutofocusModule } from "../common/directives/autofocus.module";
+import { MarkdownModule } from "ngx-markdown";
 
 @NgModule({
     declarations: [
@@ -32,6 +33,7 @@ import { AutofocusModule } from "../common/directives/autofocus.module";
         DynamicTableModule,
         FormsModule,
         AutofocusModule,
+        MarkdownModule,
     ],
 })
 export class QueryExplainerModule {}