Need to fix the update part of this

frontend/package.json

@@ -35,6 +35,7 @@
 	"author": "NCSA",
 	"dependencies": {
 		"@appbaseio/reactivesearch": "^3.40.2",
+		"@codemirror/lang-json": "^6.0.1",
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@material-ui/core": "^4.12.3",
@@ -49,6 +50,7 @@
 		"@rjsf/validator-ajv8": "^5.18.4",
 		"@types/d3": "^7.4.3",
 		"@types/react-gravatar": "^2.6.10",
+		"@uiw/react-codemirror": "^4.23.5",
 		"babel-polyfill": "^6.26.0",
 		"classnames": "^2.2.6",
 		"csvtojson": "^2.0.10",

frontend/src/components/visualizations/JSON/JSON.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from "react";
+import { Button, Card, CardContent, CardActions } from "@mui/material";
+import CodeMirror from "@uiw/react-codemirror"; // CodeMirror editor
+import { json } from "@codemirror/lang-json"; // JSON language support for CodeMirror
+import {
+	downloadVisData,
+	fileDownloaded,
+	updateFile,
+} from "../../../utils/visualization";
+import { readTextFromFile } from "../../../utils/common";
+import { downloadPublicVisData } from "../../../actions/public_visualization";
+import { filePublicDownloaded } from "../../../actions/public_file";
+
+type jsonProps = {
+	fileId?: string;
+	visualizationId?: string;
+	publicView?: boolean;
+};
+
+export default function JSON(props: jsonProps) {
+	const { fileId, visualizationId, publicView } = props;
+	const [jsonContent, setJsonContent] = useState<string | undefined>();
+
+	useEffect(() => {
+		const fetchData = async () => {
+			try {
+				let blob;
+				if (visualizationId) {
+					blob = publicView
+						? await downloadPublicVisData(visualizationId)
+						: await downloadVisData(visualizationId);
+				} else {
+					blob = publicView
+						? await filePublicDownloaded(fileId)
+						: await fileDownloaded(fileId, 0);
+				}
+
+				const file = new File([blob], "data.json");
+				const text = await readTextFromFile(file);
+				setJsonContent(text);
+			} catch (error) {
+				console.error("Error fetching data:", error);
+			}
+		};
+		fetchData();
+	}, [visualizationId, fileId, publicView]);
+
+	const handleSave = async () => {
+		try {
+			await updateFile(fileId, jsonContent);
+		} catch (error) {
+			console.error("Error updating file:", error);
+		}
+	};
+
+	return (
+		<Card>
+			<CardContent>
+				<CodeMirror
+					value={jsonContent}
+					extensions={[json()]}
+					onChange={(value) => setJsonContent(value)}
+					theme="dark"
+				/>
+			</CardContent>
+			<CardActions>
+				<Button variant="contained" color="primary" onClick={handleSave}>
+					Save Changes
+				</Button>
+			</CardActions>
+		</Card>
+	);
+}

frontend/src/components/visualizations/JSON/manifest.json

@@ -0,0 +1,19 @@
+{
+	"name": "json-editor",
+	"version": "1.0.0",
+	"description": "A React component for visualizing and editing JSON data",
+	"main": "JSON.tsx",
+	"dependencies": {
+		"clowder2-core": "1.0.0",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2",
+		"@uiw/react-codemirror": "^4.23.5",
+		"@codemirror/lang-json": "^6.0.1"
+	},
+	"visConfig": {
+		"name": "JSON",
+		"mainType": "application",
+		"mimeTypes": ["application/json"],
+		"fields": []
+	}
+}

frontend/src/visualization.config.ts

@@ -92,4 +92,12 @@ visComponentDefinitions.push({
 	component: React.createElement(registerComponent(configWordCloudSpec)),
 });
 
+const configJSON = require("./components/visualizations/JSON/manifest.json");
+visComponentDefinitions.push({
+	name: configJSON.name,
+	mainType: configJSON.visConfig.mainType,
+	mimeTypes: configJSON.visConfig.mimeTypes,
+	component: React.createElement(registerComponent(configJSON)),
+});
+
 export { visComponentDefinitions };