Fix #37 Display README and CHANGES with line wrapping and ellipsis overflow

Author: Hari Kiran

src/pages/DatasetDetailPage.tsx

@@ -40,6 +40,31 @@ interface InternalDataLink {
 	arraySize?: number[];
 }
 
+const transformJsonForDisplay = (obj: any): any => {
+	if (typeof obj !== "object" || obj === null) return obj;
+
+	const transformed: any = Array.isArray(obj) ? [] : {};
+
+	for (const key in obj) {
+		if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
+
+		const value = obj[key];
+
+		// Match README, CHANGES, or file extensions
+		const isLongTextKey = /^(README|CHANGES)$|\.md$|\.txt$|\.m$/i.test(key);
+
+		if (typeof value === "string" && isLongTextKey) {
+			transformed[key] = `<code class="puretext">${value}</code>`;
+		} else if (typeof value === "object") {
+			transformed[key] = transformJsonForDisplay(value);
+		} else {
+			transformed[key] = value;
+		}
+	}
+
+	return transformed;
+};
+
 const DatasetDetailPage: React.FC = () => {
 	const { dbName, docId } = useParams<{ dbName: string; docId: string }>();
 	const navigate = useNavigate();
@@ -208,7 +233,20 @@ const DatasetDetailPage: React.FC = () => {
 			element.classList.remove("highlighted");
 		  });
 		};
-	  }, [searchTerm, datasetDocument]);
+	}, [searchTerm, datasetDocument]);
+
+	useEffect(() => {
+		if (!transformedDataset) return;
+	
+		const spans = document.querySelectorAll(".string-value");
+	
+		spans.forEach((el) => {
+			if (el.textContent?.includes("<code class=\"puretext\">")) {
+				// Inject as HTML so it renders code block correctly
+				el.innerHTML = el.textContent ?? "";
+			}
+		});
+	}, [transformedDataset]);		
 
 	const handleDownloadDataset = () => {
 		if (!datasetDocument) return;
@@ -402,6 +440,32 @@ const DatasetDetailPage: React.FC = () => {
 	}
 
 	return (
+		<>
+		{/* 🔧 Inline CSS for string formatting */}
+		<style>
+		{`
+		code.puretext {
+		white-space: pre-wrap;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 4;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-family: monospace;
+		color: #d14;
+		font-size: 14px;
+		background-color: transparent;
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+
+	code.puretext:hover, code.puretext:focus {
+		-webkit-line-clamp: unset;
+		overflow: visible;
+		background-color: #f0f0f0;
+	}`}
+
+    </style>
 		<Box sx={{ padding: 4 }}>
 			<Button
 				variant="contained"
@@ -413,12 +477,12 @@ const DatasetDetailPage: React.FC = () => {
 
 			<Box 
 				sx={{ 
-					position: "sticky", // ✅ Keeps title & search bar fixed
-					top: 0, // ✅ Sticks to the top
-					backgroundColor: "white", // ✅ Ensures smooth UI
-					zIndex: 10, // ✅ Keeps it above scrollable content
-					paddingBottom: 2, // ✅ Adds space for clarity
-					borderBottom: `1px solid ${Colors.lightGray}`, // ✅ Adds subtle separator
+					position: "sticky",
+					top: 0,
+					backgroundColor: "white",
+					zIndex: 10,
+					paddingBottom: 2,
+					borderBottom: `1px solid ${Colors.lightGray}`,
 				}}>
 
 				{/* ✅ Dataset Title (From dataset_description.json) */}
@@ -542,7 +606,7 @@ const DatasetDetailPage: React.FC = () => {
   {/* ✅ JSON Viewer (left panel) */}
   <Box sx={{ flex: 3, backgroundColor: "#f5f5f5", padding: 2, borderRadius: "8px", overflowX: "auto" }}>
     <ReactJson
-      src={datasetDocument}
+      src={transformedDataset || datasetDocument}
       name={false}
       enableClipboard={true}
       displayDataTypes={false}
@@ -761,7 +825,8 @@ const DatasetDetailPage: React.FC = () => {
 						isInternal={previewIsInternal}
 						onClose={handleClosePreview}
 					/>
-				</Box>
+		</Box>
+		</>
 	)};
 
 export default DatasetDetailPage;