(data-tab): changed Load more functionality

kamu-data · Aug 28, 2023 · ff47383 · ff47383
1 parent 3966843
commit ff47383
Show file tree

Hide file tree

Showing 16 changed files with 170 additions and 132 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,19 +2,3 @@
 /node_modules
 /dist
 /coverage
-
-# IDEs and editors
-/.idea
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
-
-# IDE - VSCode
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
diff --git a/src/app/api/dataset.api.ts b/src/app/api/dataset.api.ts
@@ -87,12 +87,14 @@ export class DatasetApi {
     }
 
     public getDatasetDataSqlRun(params: DatasetRequestBySql): Observable<GetDatasetDataSqlRunQuery> {
-        return this.datasetDataSqlRunGQL.watch({ query: params.query, limit: params.limit ?? AppValues.SQL_QUERY_LIMIT }).valueChanges.pipe(
-            first(),
-            map((result: ApolloQueryResult<GetDatasetDataSqlRunQuery>) => {
-                return result.data;
-            }),
-        );
+        return this.datasetDataSqlRunGQL
+            .watch({ query: params.query, limit: params.limit ?? AppValues.SQL_QUERY_LIMIT, skip: params.skip })
+            .valueChanges.pipe(
+                first(),
+                map((result: ApolloQueryResult<GetDatasetDataSqlRunQuery>) => {
+                    return result.data;
+                }),
+            );
     }
 
     public getDatasetHistory(params: {

diff --git a/src/app/api/gql/dataset-data-sql-run.graphql b/src/app/api/gql/dataset-data-sql-run.graphql
@@ -1,11 +1,12 @@
-query getDatasetDataSQLRun($query: String!, $limit: Int!) {
+query getDatasetDataSQLRun($query: String!, $limit: Int!, $skip: Int) {
   data {
     query(
       query: $query
       queryDialect: SQL_DATA_FUSION
       schemaFormat: PARQUET_JSON
       dataFormat: JSON
       limit: $limit
+      skip: $skip
     ) {
       __typename
       ... on DataQueryResultSuccess {

diff --git a/src/app/api/kamu.graphql.interface.ts b/src/app/api/kamu.graphql.interface.ts
@@ -1210,6 +1210,7 @@ export type DatasetByIdQuery = {
 export type GetDatasetDataSqlRunQueryVariables = Exact<{
     query: Scalars["String"];
     limit: Scalars["Int"];
+    skip?: InputMaybe<Scalars["Int"]>;
 }>;
 
 export type GetDatasetDataSqlRunQuery = {
@@ -2576,14 +2577,15 @@ export class DatasetByIdGQL extends Apollo.Query<DatasetByIdQuery, DatasetByIdQu
     }
 }
 export const GetDatasetDataSqlRunDocument = gql`
-    query getDatasetDataSQLRun($query: String!, $limit: Int!) {
+    query getDatasetDataSQLRun($query: String!, $limit: Int!, $skip: Int) {
         data {
             query(
                 query: $query
                 queryDialect: SQL_DATA_FUSION
                 schemaFormat: PARQUET_JSON
                 dataFormat: JSON
                 limit: $limit
+                skip: $skip
             ) {
                 __typename
                 ... on DataQueryResultSuccess {

diff --git a/src/app/auth/account/account.component.sass b/src/app/auth/account/account.component.sass
@@ -37,13 +37,12 @@ mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay
   border-right: none
   border-bottom: 2px solid !important
   border-radius: 0
-  background-color: none !important
+  background-color: transparent !important
 
 .mat-button-toggle-input
-  background-color: none !important
+  background-color: transparent !important
   padding-left: 32px !important
-
-    ///////////////
+
 .custom-container 
     display: grid
     grid-template-columns: 300px 1fr
@@ -59,12 +58,12 @@ mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay
     font-weight: 500
 
 .btn-custom
-    background-color:#f6f8fa
-    border-color:#dee2e6 !important
+    background-color: #f6f8fa
+    border-color: #dee2e6 !important
     color: $app-dark
     font-weight: 500 
     &:hover,&:active,&:focus
-         background-color:#ebedf0
+         background-color: #ebedf0
          color: $app-dark
 
 
diff --git a/src/app/components/dynamic-table/dynamic-table.component.ts b/src/app/components/dynamic-table/dynamic-table.component.ts
@@ -1,4 +1,4 @@
-import { AfterContentInit, Component, Input, OnChanges, OnInit } from "@angular/core";
+import { AfterContentInit, ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from "@angular/core";
 import { MatTableDataSource } from "@angular/material/table";
 import { DataRow, DataSchemaField } from "src/app/interface/dataset.interface";
 import { TableSourceRowInterface } from "./dynamic-table.interface";
@@ -7,7 +7,7 @@ import { TableSourceRowInterface } from "./dynamic-table.interface";
     selector: "app-dynamic-table",
     templateUrl: "./dynamic-table.component.html",
     styleUrls: ["./dynamic-table.sass"],
-    // changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DynamicTableComponent implements OnInit, OnChanges, AfterContentInit {
     @Input() public hasTableHeader: boolean;

diff --git a/src/app/dataset-block/metadata-block/metadata-block.component.sass b/src/app/dataset-block/metadata-block/metadata-block.component.sass
@@ -16,4 +16,4 @@ mat-button-toggle
   border-right: none
   border-bottom: 2px #000 solid !important
   border-radius: 0
-  background-color: none !important
+  background-color: transparent !important
diff --git a/src/app/dataset-view/additional-components/data-component/data-component.html b/src/app/dataset-view/additional-components/data-component/data-component.html
@@ -8,6 +8,7 @@ <h2 class="box-title align-items-center pb-3 m-0">Schema:</h2>
                 [idTable]="'schema-block-table'"
             ></app-dynamic-table>
         </ng-container>
+
         <div>
             <h2 class="box-title align-items-center pb-3 pt-3 m-0">Saved Queries</h2>
             <cdk-accordion class="example-accordion">
@@ -70,7 +71,7 @@ <h2 class="box-title align-items-center pb-3 pt-3 m-0">Saved Queries</h2>
                                     mat-icon-button
                                     data-test-id="runSqlQueryRequestCode"
                                     name="run sql button"
-                                    (click)="runSQLRequest(item.query)"
+                                    (click)="runSQLRequest({ query: item.query })"
                                     class="sql-run-button rounded-2 btnGroup-item btn d-flex justify-content-center align-items-center"
                                 >
                                     <span>Run</span><mat-icon>play_arrow</mat-icon>
@@ -82,6 +83,7 @@ <h2 class="box-title align-items-center pb-3 pt-3 m-0">Saved Queries</h2>
             </cdk-accordion>
         </div>
     </div>
+
     <div class="search-result-container__content">
         <div class="sql-query-editor-header flex-column justify-content-around">
             <h2 class="box-title align-items-center pb-3 m-0">Query:</h2>
@@ -90,7 +92,7 @@ <h2 class="box-title align-items-center pb-3 m-0">Query:</h2>
                     mat-icon-button
                     data-test-id="runSqlQueryButton"
                     name="run sql button"
-                    (click)="runSQLRequest(sqlRequestCode)"
+                    (click)="runSQLRequest({ query: sqlRequestCode })"
                     [disabled]="!currentData.length"
                     class="sql-run-button rounded-left-2 border-right-0 btnGroup-item btn d-flex justify-content-center align-items-center"
                 >
@@ -100,8 +102,7 @@ <h2 class="box-title align-items-center pb-3 m-0">Query:</h2>
                     class="starred rounded-right-2 border-1 border btn-sm btn btnGroup-item d-flex justify-content-center align-items-center"
                     mat-icon-button
                     mat-button
-                    #menuTrigger="matMenuTrigger"
-                    [matMenuTriggerFor]="menu2"
+                    [matMenuTriggerFor]="menu"
                     aria-label="Example icon-button with a menu"
                     data-test-id="searchAdditionalButtons"
                 >
@@ -146,38 +147,18 @@ <h2 class="box-title align-items-center pb-3 pt-3 m-0">Error:</h2>
         <ng-container *ngIf="!sqlErrorMarker && currentSchema && currentData">
             <h2 class="box-title align-items-center py-3 m-0">Result:</h2>
 
-            <div class="query-limit mb-4 mt-4 d-flex align-items-center">
-                <p class="mb-0 mr-2">Query Limit: </p>
-                <mat-button-toggle-group
-                  name="query-limits"
-                  aria-label="Font Style"
-                  class="mr-4"
-                >
-                    <ng-container *ngFor="let limit of queryLimits;">
-                        <mat-button-toggle (change)="changeLimit(limit)" [checked]="limit === defaultLimit">{{ limit }}</mat-button-toggle>
-                    </ng-container>
-                </mat-button-toggle-group>
-            </div>
-
             <app-dynamic-table
                 [hasTableHeader]="true"
                 [schemaFields]="currentSchema ? currentSchema.fields : []"
                 [dataRows]="currentData || []"
             ></app-dynamic-table>
 
-            <div class="query-limit mb-4 mt-4 d-flex align-items-center">
-                <p class="mb-0 mr-2">Query Limit: </p>
-                <mat-button-toggle-group
-                  name="query-limits"
-                  aria-label="Font Style"
-                  class="mr-4"
-                >
-                    <ng-container *ngFor="let limit of queryLimits;">
-                        <mat-button-toggle (change)="changeLimit(limit)" [checked]="limit === defaultLimit">{{ limit }}</mat-button-toggle>
-                    </ng-container>
-                </mat-button-toggle-group>
-            </div>
+            <app-load-more [isAllDataLoaded]="isAllDataLoaded"
+                           (loadMoreEmit)="loadMore($event)"
+                           class="mt-4"
+            ></app-load-more>
         </ng-container>
+
         <ng-container *ngIf="!sqlErrorMarker && !currentSchema">
             <mat-divider></mat-divider>
             <h3 class="box-title text-center pt-4 author" *ngIf="!currentData.length">

diff --git a/src/app/dataset-view/additional-components/data-component/data-component.ts b/src/app/dataset-view/additional-components/data-component/data-component.ts
@@ -28,16 +28,17 @@ import { sqlEditorOptions } from "src/app/dataset-block/metadata-block/component
 export class DataComponent extends BaseComponent implements OnInit {
     @Input() public datasetBasics?: DatasetBasicsFragment;
     @Output() public runSQLRequestEmit = new EventEmitter<DatasetRequestBySql>();
+
     public sqlEditorOptions = sqlEditorOptions;
     public savedQueries = DataTabValues.savedQueries;
     public sqlRequestCode = `select\n  *\nfrom `;
-
     public sqlErrorMarker: MaybeNull<string> = null;
     public currentSchema: MaybeNull<DatasetSchema> = null;
     public currentData: DataRow[] = [];
-    public defaultLimit = AppValues.SQL_QUERY_LIMIT;
-    public queryLimits: number[] = [AppValues.SQL_QUERY_LIMIT, 100, 200, 500];
+    public isAllDataLoaded = false;
 
+    private skipRows: number;
+    private rowsLimit: number;
     private offsetColumnName = AppValues.DEFAULT_OFFSET_COLUMN_NAME;
 
     constructor(
@@ -48,8 +49,8 @@ export class DataComponent extends BaseComponent implements OnInit {
         super();
     }
 
-    public runSQLRequest(query: string, limit?: number): void {
-        this.runSQLRequestEmit.emit({ query, limit });
+    public runSQLRequest(params: DatasetRequestBySql): void {
+        this.runSQLRequestEmit.emit(params);
     }
 
     public ngOnInit(): void {
@@ -64,7 +65,9 @@ export class DataComponent extends BaseComponent implements OnInit {
                 if (dataUpdate.currentVocab?.offsetColumn) {
                     this.offsetColumnName = dataUpdate.currentVocab.offsetColumn;
                 }
-                this.currentData = dataUpdate.content;
+
+                this.isAllDataLoaded = dataUpdate.content.length < this.rowsLimit;
+                this.currentData = this.skipRows ? [...this.currentData, ...dataUpdate.content] : dataUpdate.content;
                 this.currentSchema = dataUpdate.schema;
                 this.sqlErrorMarker = null;
                 this.cdr.markForCheck();
@@ -73,14 +76,22 @@ export class DataComponent extends BaseComponent implements OnInit {
         this.buildSqlRequestCode();
     }
 
-    public changeLimit(limit: number): void {
-        this.defaultLimit = limit;
-        this.runSQLRequest(this.sqlRequestCode, this.defaultLimit);
+    public loadMore(limit: number): void {
+        this.skipRows = this.skipRows ? this.skipRows + limit : AppValues.SQL_QUERY_LIMIT;
+        this.rowsLimit = limit;
+
+        const params = {
+            query: this.sqlRequestCode,
+            skip: this.skipRows,
+            limit,
+        };
+
+        this.runSQLRequest(params);
     }
 
     public onInitEditor(editor: monaco.editor.IStandaloneCodeEditor): void {
         const runQueryFn = () => {
-            this.runSQLRequest(this.sqlRequestCode, this.defaultLimit);
+            this.runSQLRequest({ query: this.sqlRequestCode });
         };
         editor.addAction({
             // An unique identifier of the contributed action.
@@ -97,13 +108,13 @@ export class DataComponent extends BaseComponent implements OnInit {
             run: runQueryFn,
         });
         if (this.currentData.length > 0) {
-            this.runSQLRequest(this.sqlRequestCode, this.defaultLimit);
+            this.runSQLRequest({ query: this.sqlRequestCode });
         }
     }
 
     private buildSqlRequestCode(): void {
         if (this.datasetBasics) {
-            this.sqlRequestCode += `'${this.datasetBasics.name }'`;
+            this.sqlRequestCode += `'${this.datasetBasics.name}'`;
             const offset = this.location.getState() as Partial<OffsetInterval>;
             if (typeof offset.start !== "undefined" && typeof offset.end !== "undefined") {
                 this.sqlRequestCode += `\nwhere ${this.offsetColumnName}>=${offset.start} and ${this.offsetColumnName}<=${offset.end}\norder by ${this.offsetColumnName} desc`;

diff --git a/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.html b/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.html
@@ -0,0 +1,26 @@
+<button mat-button
+        class="mr-4"
+        [disabled]="isAllDataLoaded"
+        [title]="isAllDataLoaded ? 'No more data to load' : 'Load more data'"
+        (click)="loadMore()">
+    Load more data
+</button>
+
+<button mat-button
+        class="mr-4 btn-toggle"
+        [class.opened]="isHolderVisible"
+        (click)="toggleOptions()">
+    Options
+    <mat-icon fontIcon="chevron_right"></mat-icon>
+</button>
+
+<div class="d-flex align-items-center holder" [class.hidden]="!isHolderVisible">
+    <p class="mb-0 mr-4">Select number of rows to load:</p>
+    <mat-button-toggle-group name="query-limits" [(ngModel)]="rowsNumber" class="mr-4">
+        <ng-container *ngFor="let option of ROWS_OPTIONS;">
+            <mat-button-toggle [checked]="option === rowsNumber" [value]="option">{{ option }}</mat-button-toggle>
+        </ng-container>
+    </mat-button-toggle-group>
+    <p class="mb-0 mr-4">Or enter your number:</p>
+    <input type="number" placeholder="Enter number of rows" [(ngModel)]="rowsNumber" class="form-control small-width">
+</div>
diff --git a/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.sass b/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.sass
@@ -0,0 +1,31 @@
+:host
+  display: flex
+  align-items: center
+  min-height: 46px
+
+.small-width
+  width: 75px
+
+button
+  border: 1px solid transparent
+  transition: background-color .3s ease-in-out
+  &:hover:not([disabled])
+    background-color: #C4C4C4
+
+.btn-toggle
+  mat-icon
+    transform: rotate(00deg)
+    transition: transform .3s ease-in-out
+
+  &.opened
+    border: 1px solid #000
+
+    mat-icon
+      transform: rotate(-90deg)
+
+.holder
+  opacity: 1
+  transition: opacity .3s ease-in-out
+
+  &.hidden
+    opacity: 0