From 3f0d849751dfbb59624f357ff5c2f3af8babae47 Mon Sep 17 00:00:00 2001
From: balaji-jr <balaji.joshua1998@gmail.com>
Date: Mon, 23 Sep 2024 21:52:37 +0530
Subject: [PATCH] fixed png export for table viz

---
 src/pages/Dashboards/Table.tsx |  2 +-
 src/pages/Dashboards/Tile.tsx  |  5 +++--
 src/utils/exportImage.ts       | 29 ++++++++++++++++++++++++++++-
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/pages/Dashboards/Table.tsx b/src/pages/Dashboards/Table.tsx
index 7d235ad4..543c9419 100644
--- a/src/pages/Dashboards/Table.tsx
+++ b/src/pages/Dashboards/Table.tsx
@@ -59,7 +59,7 @@ const TableViz = (props: { data: TileQueryResponse; tick_config: TickConfig[] })
 
 	return (
 		<Stack ref={containerRef} style={{ flex: 1, width: '100%' }}>
-			<Stack style={{ height: initialHeight }}>
+			<Stack style={{ height: initialHeight }} className='png-export-table-container'>
 				{hasNoData ? (
 					<NoDataView />
 				) : (
diff --git a/src/pages/Dashboards/Tile.tsx b/src/pages/Dashboards/Tile.tsx
index 0089ced3..e3942340 100644
--- a/src/pages/Dashboards/Tile.tsx
+++ b/src/pages/Dashboards/Tile.tsx
@@ -174,7 +174,7 @@ function TileControls(props: { tile: TileType; data: TileQueryResponse }) {
 
 	const exportTileConfig = useCallback(async () => {
 		const santizedConfig = _.omit(props.tile, 'tile_id');
-		return exportJson(JSON.stringify(santizedConfig, null, 2), name)
+		return exportJson(JSON.stringify(santizedConfig, null, 2), name);
 	}, [name]);
 
 	if (allowDrag)
@@ -258,9 +258,10 @@ const Tile = (props: { id: string }) => {
 	const vizType = _.get(tile, 'visualization.visualization_type', null);
 	const tick_config = _.get(tile, 'visualization.tick_config', []);
 	const Viz = getViz(vizType);
+	const vizTypeExportClassName = `png-export-${vizType || ''}`;
 
 	return (
-		<Stack h="100%" gap={0} className={`png-export-tile-container ${classes.container}`}>
+		<Stack h="100%" gap={0} className={`png-export-tile-container ${classes.container} ${vizTypeExportClassName}`}>
 			<Stack className={`png-export-tile-header ${classes.tileHeader}`} gap={0}>
 				<Stack gap={0}>
 					<Text title={tile.name} lineClamp={1} className={`png-export-tile-title ${classes.tileTitle}`}>
diff --git a/src/utils/exportImage.ts b/src/utils/exportImage.ts
index a9a908ae..1bef0e3e 100644
--- a/src/utils/exportImage.ts
+++ b/src/utils/exportImage.ts
@@ -6,7 +6,7 @@ export const makeExportClassName = (name: string) => {
 	return `png-capture-${sanitizedName}`;
 };
 
-const onCloneCallback = (element: HTMLElement) => {
+export const onCloneCallback = (element: HTMLElement) => {
 	const containerDiv = element.querySelector('.png-export-tile-container') as HTMLElement;
 	const menuIcon = element.querySelector('.png-export-menu-icon') as HTMLElement;
 	const tileTitleDiv = element.querySelector('.png-export-tile-title') as HTMLElement;
@@ -14,6 +14,7 @@ const onCloneCallback = (element: HTMLElement) => {
 	const tileDescriptionDiv = element.querySelector('.png-export-tile-description') as HTMLElement;
 	const timeRangeText = element.querySelector('.png-export-tile-timerange') as HTMLElement;
 	const logoImage = element.querySelector('.png-export-parseable-logo') as HTMLElement;
+
 	if (headerDiv) {
 		headerDiv.style.height = 'auto';
 		headerDiv.style.alignItems = 'flex-start';
@@ -48,6 +49,32 @@ const onCloneCallback = (element: HTMLElement) => {
 		logoImage.style.marginTop = '4px';
 		logoImage.style.marginLeft = '4px';
 	}
+
+	// checking if its a table
+	// add modular logic if we need customization specific to chart typea
+	if (element.querySelector(':scope > .png-export-table')) {
+		const layoutRow = element.closest('.react-grid-layout') as HTMLElement;
+		const tableContainer = element.querySelector('.png-export-table-container') as HTMLElement;
+
+		if (element) {
+			element.style.width = 'auto';
+		}
+
+		if (layoutRow) {
+			layoutRow.style.height = '100000px';
+		}
+
+		if (tableContainer) {
+			tableContainer.style.height = 'auto';
+		}
+
+		const tbodyCells = element.querySelectorAll('tbody td') as NodeListOf<HTMLElement>;
+
+		tbodyCells.forEach((cell) => {
+			cell.style.maxWidth = 'none';
+			cell.style.whiteSpace = 'normal';
+		});
+	}
 };
 
 const handleCapture = (opts: { className: string; fileName: string }) => {