Merge pull request #27 from metrico/devel

fixes
metrico · Sep 22, 2022 · 4fc25ad · 4fc25ad
2 parents 9a861fb + d237a00
commit 4fc25ad
Show file tree

Hide file tree

Showing 25 changed files with 334 additions and 343 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "ngx-ace-wrapper": "^12.0.0",
     "ngx-csv-parser": "^1.1.1",
     "ngx-json-viewer": "^3.0.2",
+    "ngx-uplot": "0.0.6",
     "rxjs": "^7.3.0",
     "ts-md5": "^1.3.1",
     "tslib": "^2.3.0",

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,30 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-
-export interface HashParams {
-    query?: string;
-    db_host?: string;
-    db_login?: string;
-    db_pass?: string;
-    kiosk?: boolean;
-    mode?: 'dark' | 'light' | null | undefined;
-    table?: boolean;
-    chart?: boolean;
-    panel?: boolean;
-    query_field?: boolean;
-}
-export let getParam: HashParams = {
-    db_host: "",
-    db_login: "",
-    db_pass: "",
-    query: "",
-    kiosk: false,
-    mode: "light",
-    panel: false,
-    query_field: true,
-    table: true,
-    chart: true,
-};
-
+import { GetParamsService } from './services/get-params.service';
 
 @Component({
     selector: 'app-root',
@@ -35,43 +10,6 @@ export let getParam: HashParams = {
 export class AppComponent {
     title = 'ClickHousePlay';
 
-    constructor() {
-        const params: any[] = location.hash?.replace('#', '')?.split("&")?.map((i: any) => i.split('=')) || [];
-        params.forEach(([key, value]) => {
-            switch (key) {
-                case 'chart':
-                    getParam.chart = !!(+value);
-                    break;
-                case 'db_host':
-                    getParam.db_host = value;
-                    break;
-                case 'db_login':
-                    getParam.db_login = value;
-                    break;
-                case 'db_pass':
-                    getParam.db_pass = value;
-                    break;
-                case 'kiosk':
-                    getParam.kiosk = !!(+value);
-                    break;
-                case 'mode':
-                    getParam.mode = value;
-                    break;
-                case 'panel':
-                    getParam.panel = !!(+value);
-                    break;
-                case 'query':
-                    getParam.query = decodeURI(value + '') || value;
-                    break;
-                case 'query_field':
-                    getParam.query_field = !!(+value);
-                    break;
-                case 'table':
-                    getParam.table = !!(+value);
-                    break;
-            }
-        })
-
-        // console.log('constructor:::', { params, getParam });
+    constructor(private getParamsService: GetParamsService) {
     }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,4 +1,4 @@
-// import { MatButtonModule } from '@angular/material/button';
+import { PopupTextModule } from './components/popup-text/popup-text.module';
 import { ChHelpModule } from './components/ch-help/ch-help.module';
 import { AceEditorExtModule } from './components/ace-editor-ext/ace-editor-ext.module';
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@@ -20,10 +20,10 @@ import { CustomAgGridModule } from './components/custom-ag-grid/custom-ag-grid.m
 import { LoginFormModule } from './components/login-form/login-form.module';
 import { AlertService } from './services/alert.service';
 import { LoadingCircleModule } from './components/loading-circle/loading-circle.module';
-import { NgxUplotModule } from './components/ngx-uplot/ngx-uplot.module';
+// import { NgxUplotModule } from './components/ngx-uplot/ngx-uplot.module';
 import { DialogKioskComponent } from './pages/dialogs/dialog-kiosk/dialog-kiosk.component';
 // import { MatDialogModule } from '@angular/material/dialog';
-
+import { NgxUplotModule } from 'ngx-uplot';
 @NgModule({
     declarations: [
         AppComponent,
@@ -45,6 +45,7 @@ import { DialogKioskComponent } from './pages/dialogs/dialog-kiosk/dialog-kiosk.
         AceEditorExtModule,
         LoadingCircleModule,
         ChHelpModule,
+        PopupTextModule,
         NgxUplotModule,
         // MatDialogModule,
         // MatButtonModule,

diff --git a/src/app/components/ace-editor-ext/ace-editor-ext.component.html b/src/app/components/ace-editor-ext/ace-editor-ext.component.html
@@ -39,39 +39,34 @@
         [style.display]="isAutocompleteVisible && dictionary.length > 0 ? 'block' : 'none'"
         #autocomplete
     >
-        <div
-            *ngFor="let item of dictionary; let i = index"
-            class="item"
-            [class.selected]="autocompleteSelectorIndex === i"
-        >
+        <div *ngFor="let item of dictionary; let i = index" class="item"
+            [class.selected]="autocompleteSelectorIndex === i">
             <div (click)="onItemClick(item)">
-                <mat-icon class="customIconSize" *ngIf="item?.icon === 0"
-                    >line_style</mat-icon
-                >
-                <mat-icon class="customIconSize" *ngIf="item?.icon === 1"
-                    >category</mat-icon
-                >
-                <mat-icon class="customIconSize" *ngIf="item?.icon === 2"
-                    >bubble_chart</mat-icon
-                >
-                <mat-icon class="customIconSize" *ngIf="item?.icon === 3"
-                    >hdr_weak</mat-icon
-                >
-                <mat-icon class="customIconSize" *ngIf="item?.icon === 4"
-                    >subject</mat-icon
-                >
-
+                <mat-icon class="customIconSize" *ngIf="item?.icon === 0">
+                    line_style
+                </mat-icon>
+                <mat-icon class="customIconSize" *ngIf="item?.icon === 1">
+                    category
+                </mat-icon>
+                <mat-icon class="customIconSize" *ngIf="item?.icon === 2">
+                    bubble_chart
+                </mat-icon>
+                <mat-icon class="customIconSize" *ngIf="item?.icon === 3">
+                    hdr_weak
+                </mat-icon>
+                <mat-icon class="customIconSize" *ngIf="item?.icon === 4">
+                    subject
+                </mat-icon>
                 {{ item.name }}
             </div>
             <span
                 style="float: right; flex: 1; text-align: end"
-                *ngIf="!!item.doc_link"
-            >
+                *ngIf="!!item.doc_link">
                 <mat-icon
                     class="customIconSize"
-                    (click)="setInfo(item.doc_link)"
-                    >info</mat-icon
-                >
+                    (click)="setInfo(item.doc_link)">
+                    info
+                </mat-icon>
             </span>
         </div>
     </div>

diff --git a/src/app/components/ace-editor-ext/ace-editor-ext.component.ts b/src/app/components/ace-editor-ext/ace-editor-ext.component.ts
@@ -299,14 +299,14 @@ export class AceEditorExtComponent implements OnInit, AfterViewInit, OnDestroy {
         start = start.match(/^.+\s/mg)?.join('') || '';
         end = end.match(/\s.+$/mg)?.join('') || '';
         this.sqlRequest = start + replacementWord + end;
-        requestAnimationFrame(() => {
+        setTimeout(() => {
             let inc = 0;
             if (replacementWord.match(/\)$/g)) {
                 // is a function word
                 inc = -1;
             }
             this.setCaret((start + replacementWord).length + inc);
-        })
+        }, 50)
     }
     setRequestData() {
         this.sqlRequest = this.getTextElement()?.innerText;

diff --git a/src/app/components/ch-help/ch-help.component.scss b/src/app/components/ch-help/ch-help.component.scss
@@ -3,7 +3,6 @@
     background-color: #fafafa;
     max-height: calc(100% - 1rem);
     overflow: hidden;
-    // flex: 1;
 }
 .frame {
     border: 0;

diff --git a/src/app/components/custom-ag-grid/cell-type-detector/cell-type-detector.component.html b/src/app/components/custom-ag-grid/cell-type-detector/cell-type-detector.component.html
@@ -1,17 +1,16 @@
-<div [style.text-align]="isNumber && 'right'">
+<div class="cell" [style.text-align]="isNumber && 'right'" (click)="onClick()">
     <span
+        #cell
         [style.display]="isNULL && 'none'"
         [style.color]="isNumber && 'purple'"
-        [style.height]="rowHeight+8+'px'"
-        [style.whiteSpace]="isMultiLine ? 'pre-wrap' : ''"
-        [style.overflow]="'auto'"
+        [style.height]="30 + 'px'"
         [style.display]="'block'"
-        [style.lineHeight]="defaultRowHeight+'px'"
+        [style.lineHeight]="30 + 'px'"
     >
         {{ value }}
     </span>
 
-    <span style="color: grey;" [style.display]="!isNULL && 'none'">
+    <span style="color: grey" [style.display]="!isNULL && 'none'">
         <i>NULL</i>
     </span>
 </div>
diff --git a/src/app/components/custom-ag-grid/cell-type-detector/cell-type-detector.component.scss b/src/app/components/custom-ag-grid/cell-type-detector/cell-type-detector.component.scss
@@ -0,0 +1,15 @@
+.cell {
+
+    // .full-text-popup {
+    //     position: absolute;
+    //     // display: none;
+    //     padding: 1rem;
+    //     background-color: #fff;
+    //     border: 1px solid #ccc;
+    //     box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+    //     z-index: 99999999;
+    // }
+    // &:hover .full-text-popup {
+    //     display: block;
+    // }
+}
diff --git a/src/app/components/custom-ag-grid/cell-type-detector/cell-type-detector.component.ts b/src/app/components/custom-ag-grid/cell-type-detector/cell-type-detector.component.ts
@@ -1,10 +1,13 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewChild } from '@angular/core';
+import { PopupTextService } from '@app/components/popup-text/popup-text.service';
 import { ICellRendererAngularComp } from 'ag-grid-angular';
 import { maxRowHeight } from '../custom-ag-grid.component';
 import { defaultRowHeight } from '../custom-ag-grid.component';
+
 @Component({
     selector: 'app-cell-type-detector',
     templateUrl: './cell-type-detector.component.html',
+    styleUrls: ['./cell-type-detector.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CellTypeDetectorComponent implements ICellRendererAngularComp {
@@ -16,14 +19,19 @@ export class CellTypeDetectorComponent implements ICellRendererAngularComp {
     isMultiLine: boolean = false;
     rowHeight = defaultRowHeight;
     defaultRowHeight = defaultRowHeight;
+
+    @ViewChild('cell') cell: any;
+
+    constructor(private popupTextService: PopupTextService) { }
+
     agInit(params: any): void {
         this.params = params;
-        if(/[\n\r]/.test(params.value)) {
-            this.isMultiLine = true
-            const newLineCount = params.value.split(/\n|\r\n/).length - 1;
-            const rowHeightWithNewLines = newLineCount * defaultRowHeight;
-            this.rowHeight = Math.min(rowHeightWithNewLines, maxRowHeight);
-        }
+        // if (/[\n\r]/.test(params.value)) {
+        //     this.isMultiLine = true
+        //     const newLineCount = params.value.split(/\n|\r\n/).length - 1;
+        //     const rowHeightWithNewLines = newLineCount * defaultRowHeight;
+        //     this.rowHeight = Math.min(rowHeightWithNewLines, maxRowHeight);
+        // }
         if (!isNaN(+params.value)) {
             this.isNumber = true;
         }
@@ -36,6 +44,16 @@ export class CellTypeDetectorComponent implements ICellRendererAngularComp {
         // console.log(params.value);
     }
 
+    onClick() {
+        const rect = this.cell.nativeElement.getBoundingClientRect();
+
+        this.popupTextService.setText(this.value);
+        this.popupTextService.setPosition({
+            top: rect.top,
+            left: rect.left
+        })
+    }
+
     refresh(): boolean {
         return false;
     }

diff --git a/src/app/components/custom-ag-grid/custom-ag-grid.component.html b/src/app/components/custom-ag-grid/custom-ag-grid.component.html
@@ -1,16 +1,16 @@
 <!-- style="width: 100%; height: 100%; min-height: 200px" -->
 <!-- class="ag-theme-alpine" -->
+<!-- [getRowStyle]="getRowStyle" -->
+<!-- [isFullWidthCell]="isFullWidthRow" -->
 <ag-grid-angular
     style="min-width: 500px"
     class="ag-theme-material custom"
     [style.height]="'calc(100% - 45px - ' + (isPaginator ? 60 : 9) + 'px)'"
     [rowData]="details"
     [columnDefs]="columns"
-    [getRowStyle]="getRowStyle"
     [gridOptions]="gridOptions"
     [pagination]="true"
     [context]="context"
-    [isFullWidthCell]="isFullWidthRow"
     [getRowHeight]="getRowHeight"
     [fullWidthCellRenderer]="fullWidthCellRenderer"
     [frameworkComponents]="frameworkComponents"

diff --git a/src/app/components/custom-ag-grid/custom-ag-grid.component.scss b/src/app/components/custom-ag-grid/custom-ag-grid.component.scss
@@ -6,4 +6,4 @@
 }
 .paginator[hidden] {
     display: none;
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,4 +6,4 @@ @@
     }
     .paginator[hidden] {
         display: none;
-    }
+    }