fix: table refactoring design for full data on cell

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) {
     }
 }

src/app/app.module.ts

@@ -1,3 +1,4 @@
+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';
@@ -44,6 +45,7 @@ import { NgxUplotModule } from 'ngx-uplot';
         AceEditorExtModule,
         LoadingCircleModule,
         ChHelpModule,
+        PopupTextModule,
         NgxUplotModule,
         // MatDialogModule,
         // MatButtonModule,

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;

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>

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;
+    // }
+}

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;
     }

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"

src/app/components/custom-ag-grid/custom-ag-grid.component.scss

@@ -6,4 +6,4 @@
 }
 .paginator[hidden] {
     display: none;
-}
+}

src/app/components/custom-ag-grid/custom-ag-grid.component.ts

@@ -124,13 +124,13 @@ export class CustomAgGridComponent implements OnInit, AfterContentChecked {
                 this._columns = Object.entries(firstItemOfDetails).map(
                     ([key]: any) => {
                         let isAutoHeight = false;
-                        if (
-                            typeof firstItemOfDetails[key] === 'string' &&
-                            this.details.some((value) => regex.test(value[key]))
-                        ) {
-                            // isAutoHeight = true;
-                            // this.autoHeightColumns.push(key)
-                        }
+                        // if (
+                        //     typeof firstItemOfDetails[key] === 'string' &&
+                        //     this.details.some((value) => regex.test(value[key]))
+                        // ) {
+                        //     // isAutoHeight = true;
+                        //     // this.autoHeightColumns.push(key)
+                        // }
                         return {
                             field: key,
                             hide: !val.includes(key),
@@ -192,8 +192,7 @@ export class CustomAgGridComponent implements OnInit, AfterContentChecked {
     public resizeGrid() {
         requestAnimationFrame(() => {
             if (this.agGridSizeControl.selectedType === GRID_FIT) {
-                this.gridColumnApi?.autoSizeAllColumns();
-
+                // this.gridColumnApi?.autoSizeAllColumns();
             } else {
                 this.gridApi?.sizeColumnsToFit();
             }
@@ -216,34 +215,35 @@ export class CustomAgGridComponent implements OnInit, AfterContentChecked {
             settings: SettingButtonComponent,
             cellHeader: CellHeaderComponent,
             cellTypeDetector: CellTypeDetectorComponent,
-            expandRenderer: ExpandRendererComponent,
+            // expandRenderer: ExpandRendererComponent,
         };
     }
     public getRowHeight(params: RowHeightParams) {
-        const isFullWidth = params.data.isExpanded;
-        // changing defaultRowHeight also requires changing th and tr height in full-row-renderer.component.scss
-        const margins = 10;
-        // changing maxRowHeight also requires changing :host max-height in full-row-renderer.component.scss
-        if (isFullWidth) {
-            const columnCount = Object.keys(params.data)?.length;
-            const exapndedRowSize = (columnCount * defaultRowHeight) + margins;
-            return Math.min(exapndedRowSize, maxRowHeight);
-        } else {
-            let maxNewlineCount = 1;
-            Object.values(params.data).forEach((element) => {
-                if (typeof element === 'string'){
-                    const newLineCount = element.split(/\n|\r\n/).length - 1;
-                    if (newLineCount > maxNewlineCount) {
-                        maxNewlineCount = newLineCount;
-                    }
-                }
-            });
-            const rowHeightWithNewLines = maxNewlineCount * defaultRowHeight;
-            return Math.min(rowHeightWithNewLines, maxRowHeight)
-        }
-
-
+        return 30;
     }
+    // public getRowHeight_(params: RowHeightParams) {
+    //     const isFullWidth = params.data.isExpanded;
+    //     // changing defaultRowHeight also requires changing th and tr height in full-row-renderer.component.scss
+    //     const margins = 10;
+    //     // changing maxRowHeight also requires changing :host max-height in full-row-renderer.component.scss
+    //     if (isFullWidth) {
+    //         const columnCount = Object.keys(params.data)?.length;
+    //         const exapndedRowSize = (columnCount * defaultRowHeight) + margins;
+    //         return Math.min(exapndedRowSize, maxRowHeight);
+    //     } else {
+    //         let maxNewlineCount = 1;
+    //         Object.values(params.data).forEach((element) => {
+    //             if (typeof element === 'string'){
+    //                 const newLineCount = element.split(/\n|\r\n/).length - 1;
+    //                 if (newLineCount > maxNewlineCount) {
+    //                     maxNewlineCount = newLineCount;
+    //                 }
+    //             }
+    //         });
+    //         const rowHeightWithNewLines = maxNewlineCount * defaultRowHeight;
+    //         return Math.min(rowHeightWithNewLines, maxRowHeight);
+    //     }
+    // }
     ngOnInit() {
         this.agEventService.listen().subscribe((data) => {
             if (data) {

src/app/components/custom-ag-grid/renderers/full-row-renderer/full-row-renderer.component.html

@@ -9,7 +9,7 @@
         }}</mat-icon>
     </button>
 </div>
-<div class="tableWrapper">
+<!-- <div class="tableWrapper">
 <table mat-table *ngIf="dataSource" [dataSource]="dataSource">
     <ng-container
         *ngFor="let item of columns; let i = index"
@@ -27,7 +27,7 @@
                     </span>
                 </span>
                 <ng-template #jsonViewer>
-                    
+
                     <ngx-json-viewer [json]='element[item].value'></ngx-json-viewer>
                 </ng-template>
             </td>
@@ -38,4 +38,4 @@
         <tr mat-row *matRowDef="let row; index as i; columns: columns"></tr>
     </tbody>
 </table>
-</div>
+</div> -->

src/app/components/popup-text/popup-text.component.html

@@ -0,0 +1,7 @@
+<div *ngIf="text">
+    <div class="back-place" (click)="onHide()"></div>
+    <div class="full-text-popup" [style.top.px]="top" [style.left.px]="left" #textPopup>
+        <span *ngIf="!isJson">{{ text }}</span>
+        <ngx-json-viewer *ngIf="isJson" [json]="getJSON()"></ngx-json-viewer>
+    </div>
+</div>

src/app/components/popup-text/popup-text.component.scss

@@ -0,0 +1,28 @@
+.back-place {
+    position: absolute;
+    // display: none;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.2);
+    z-index: 99999999;
+}
+.full-text-popup {
+    position: absolute;
+    // display: none;
+    top: 0;
+    left: 0;
+    padding: 6px 4px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+    white-space: pre;
+    z-index: 99999999;
+    max-width: 400px;
+    max-height: 400px;
+    overflow: auto;
+    transition: top 0.3s, left 0.3s;
+}