744 reinvestigate iframe (#745)

* rewrite iframe to html

* unpack html and append to the div; this way also enable scripts

Author: longshuicy

frontend/src/components/visualizations/Html/Html.tsx

@@ -0,0 +1,49 @@
+import React, {useEffect, useRef, useState} from "react";
+import {downloadVisData, fileDownloaded,} from "../../../utils/visualization";
+import {readTextFromFile} from "../../../utils/common";
+
+type htmlProps = {
+	fileId?: string;
+	visualizationId?: string;
+};
+
+export default function Html(props: htmlProps) {
+	const {fileId, visualizationId} = props;
+	const divRef = useRef(null);
+	const isFirstRender = useRef(true);
+
+	const [html, setHtml] = useState();
+
+	useEffect(() => {
+		const processBlob = async () => {
+			try {
+				let blob;
+				if (visualizationId) {
+					blob = await downloadVisData(visualizationId);
+				} else {
+					blob = await fileDownloaded(fileId, 0);
+				}
+				const file = new File([blob], "text.tmp");
+				const text = await readTextFromFile(file);
+				setHtml(text);
+			} catch (error) {
+				console.error("Error fetching data:", error);
+			}
+		};
+
+		processBlob();
+	}, [visualizationId, fileId]);
+
+	useEffect(() => {
+		if (html && divRef.current) {
+			const slotHtml = document.createRange().createContextualFragment(html);
+			divRef.current.innerHTML = ""; // Clear the container
+			divRef.current.appendChild(slotHtml); // Append the new content
+		}
+
+		if (!isFirstRender.current) return;
+		isFirstRender.current = false;
+	}, [html, divRef])
+
+	return (<div ref={divRef} style={{width: "auto", maxHeight: "100vh", overflow: "auto"}}/>);
+}

…ents/visualizations/Iframe/manifest.json …onents/visualizations/Html/manifest.jsonfrontend/src/components/visualizations/Iframe/manifest.json renamed to frontend/src/components/visualizations/Html/manifest.json frontend/src/components/visualizations/Iframe/manifest.json renamed to frontend/src/components/visualizations/Html/manifest.json

@@ -2,14 +2,14 @@
 	"name": "basic-iframe-component",
 	"version": "1.0.0",
 	"description": "A React component for html",
-	"main": "Iframe.tsx",
+	"main": "Html.tsx",
 	"dependencies": {
 		"clowder2-core": "1.0.0",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2"
 	},
 	"visConfig": {
-		"name": "Iframe",
+		"name": "Html",
 		"mainType": "text",
 		"mimeTypes": [
 			"text/html"

frontend/src/components/visualizations/Iframe/Iframe.tsx

@@ -1,4 +1,4 @@
-import React, { lazy } from "react";
+import React, {lazy} from "react";
 
 export interface VisComponentDefinitions {
 	name: string;
@@ -9,14 +9,14 @@ export interface VisComponentDefinitions {
 
 const visComponentDefinitions: VisComponentDefinitions[] = <
 	VisComponentDefinitions[]
->[];
+	>[];
 
 function registerComponent(config) {
 	return lazy(
 		() =>
 			import(
 				/* webpackChunkName: "[request]" */ `./components/visualizations/${config.visConfig.name}/${config.main}`
-			)
+				)
 	);
 }
 
@@ -36,12 +36,12 @@ visComponentDefinitions.push({
 // 	component: React.createElement(registerComponent(configDemo)),
 // });
 
-const configIframe = require("./components/visualizations/Iframe/manifest.json");
+const configHtml = require("./components/visualizations/Html/manifest.json");
 visComponentDefinitions.push({
-	name: configIframe.name,
-	mainType: configIframe.visConfig.mainType,
-	mimeTypes: configIframe.visConfig.mimeTypes,
-	component: React.createElement(registerComponent(configIframe)),
+	name: configHtml.name,
+	mainType: configHtml.visConfig.mainType,
+	mimeTypes: configHtml.visConfig.mimeTypes,
+	component: React.createElement(registerComponent(configHtml)),
 });
 
 const configImage = require("./components/visualizations/Image/manifest.json");
@@ -84,4 +84,4 @@ visComponentDefinitions.push({
 	component: React.createElement(registerComponent(configVega)),
 });
 
-export { visComponentDefinitions };
+export {visComponentDefinitions};