From 9562d54218196086eb59b68f6d3632e0c2689c18 Mon Sep 17 00:00:00 2001 From: masachika-kamada <63488322+masachika-kamada@users.noreply.github.com> Date: Mon, 14 Jul 2025 00:52:14 +0900 Subject: [PATCH 1/3] Update Node.js version requirement in documentation - Update from Node.js 16.14.2 to 20.18.2 to match .nvmrc - Change npm requirement to "8.15.2 or later" for flexibility - Align CONTRIBUTING.md with actual project configuration --- CONTRIBUTING.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 637b63c..6343c17 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -4,8 +4,8 @@ ### Prerequisites -1. [Node.js](https://nodejs.org/) 16.14.2 -1. npm 8.15.2 +1. [Node.js](https://nodejs.org/) 20.18.2 (see `.nvmrc` file) +1. npm 8.15.2 or later 1. Windows, macOS, or Linux 1. [Visual Studio Code](https://code.visualstudio.com/) 1. The following VS Code extensions: From 870ff532905594b6669c56af9aa28cd78e95357a Mon Sep 17 00:00:00 2001 From: masachika-kamada <63488322+masachika-kamada@users.noreply.github.com> Date: Mon, 14 Jul 2025 01:17:35 +0900 Subject: [PATCH 2/3] Remove non-functional cell expand buttons - Hide AG Grid expand buttons that don't work - Add consistent ellipsis styling for cell overflow - Improve visual consistency in data table --- src/client/datatable.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/client/datatable.tsx b/src/client/datatable.tsx index e4262e4..ff418d5 100644 --- a/src/client/datatable.tsx +++ b/src/client/datatable.tsx @@ -52,6 +52,12 @@ function renderOutput(value: OutputItem, element: HTMLElement) { .ag-header-viewport { overflow-x: hidden !important; } + .ag-cell-wrapper .ag-cell-expand-button { + display: none !important; + } + .ag-cell .ag-cell-expand-button { + display: none !important; + } `; // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -157,7 +163,15 @@ function DataTable(props: { columnDefs: any; rowData: any }) { domLayout="autoHeight" pagination={true} paginationPageSize={10} - defaultColDef={{ resizable: true, filter: true, sortable: true, floatingFilter: true }} + defaultColDef={{ + resizable: true, + filter: true, + sortable: true, + floatingFilter: true, + wrapText: false, + autoHeight: false, + cellStyle: { overflow: 'hidden', textOverflow: 'ellipsis' } + }} columnDefs={props.columnDefs} rowData={props.rowData} enableCellTextSelection={true} From 7a0b63896ff3310474e3b674ab7537fdc1457080 Mon Sep 17 00:00:00 2001 From: masachika-kamada <63488322+masachika-kamada@users.noreply.github.com> Date: Mon, 14 Jul 2025 01:39:41 +0900 Subject: [PATCH 3/3] Enhance cell detail view for all data types - Extend double-click functionality to all cell types, not just JSON - Add improved detail panel with close button and better styling - Support both JSON and text content display with appropriate formatting - Add scrollable container for long content with monospace font - Align behavior with Kusto Desktop UX patterns --- src/client/datatable.tsx | 112 +++++++++++++++++++++++++++++++-------- 1 file changed, 89 insertions(+), 23 deletions(-) diff --git a/src/client/datatable.tsx b/src/client/datatable.tsx index ff418d5..f4c12fb 100644 --- a/src/client/datatable.tsx +++ b/src/client/datatable.tsx @@ -121,22 +121,33 @@ function renderDataTable(results: KustoResponseDataSet, ele: HTMLElement) { // eslint-disable-next-line @typescript-eslint/no-explicit-any function DataTable(props: { columnDefs: any; rowData: any }) { function onCellDoubleClicked(e: CellDoubleClickedEvent) { - if (columnDataType.get(e.colDef.field || '') === 'dynamic' && e.colDef.field) { - try { - const json = - typeof e.data[e.colDef.field] === 'string' - ? JSON.parse(e.data[e.colDef.field]) - : e.data[e.colDef.field]; - console.info(`Displaying details for ${e.colDef.field}`); - setDetailsField(e.colDef.field); - setDetailsJson(json); - displayDetails(true); - } catch (ex) { + if (e.colDef.field) { + const fieldType = columnDataType.get(e.colDef.field); + const cellValue = e.data[e.colDef.field]; + + setDetailsField(e.colDef.field); + + if (fieldType === 'dynamic') { + // JSON data - use ReactJson for pretty display + try { + const json = typeof cellValue === 'string' ? JSON.parse(cellValue) : cellValue; + console.info(`Displaying JSON details for ${e.colDef.field}`); + setDetailsJson(json); + setDetailsText(undefined); + displayDetails(true); + } catch (ex) { + // If JSON parsing fails, treat as text + console.info(`JSON parsing failed, displaying as text for ${e.colDef.field}`); + setDetailsText(String(cellValue || '')); + setDetailsJson(undefined); + displayDetails(true); + } + } else { + // Regular text data - display as formatted text + console.info(`Displaying text details for ${e.colDef.field}`); + setDetailsText(String(cellValue || '')); setDetailsJson(undefined); - console.error( - `Failed to parse details into JSON for ${e.colDef.field} with data ${e.data[e.colDef.field]}`, - ex - ); + displayDetails(true); } } } @@ -145,18 +156,30 @@ function DataTable(props: { columnDefs: any; rowData: any }) { console.info(`Nothing to render`); return; } - try { - const json = - typeof e.data[detailsField] === 'string' ? JSON.parse(e.data[detailsField]) : e.data[detailsField]; - console.info(`Displaying details for ${detailsField}`); - setDetailsJson(json); - } catch (ex) { + + const fieldType = columnDataType.get(detailsField); + const cellValue = e.data[detailsField]; + + if (fieldType === 'dynamic') { + try { + const json = typeof cellValue === 'string' ? JSON.parse(cellValue) : cellValue; + console.info(`Displaying JSON details for ${detailsField}`); + setDetailsJson(json); + setDetailsText(undefined); + } catch (ex) { + console.info(`JSON parsing failed, displaying as text for ${detailsField}`); + setDetailsText(String(cellValue || '')); + setDetailsJson(undefined); + } + } else { + setDetailsText(String(cellValue || '')); setDetailsJson(undefined); } } const [detailsVisible, displayDetails] = React.useState(false); const [detailsField, setDetailsField] = React.useState(undefined); const [detailsJson, setDetailsJson] = React.useState(undefined); + const [detailsText, setDetailsText] = React.useState(undefined); return (
- {detailsVisible && detailsJson && ( - + {detailsVisible && (detailsJson || detailsText) && ( +
+
+ Details for column: {detailsField} + +
+ {detailsJson && } + {detailsText && ( +
+ {detailsText} +
+ )} +
)}
);