Spaces:
Running
Running
fix 3dmol import
Browse files
lynxkite-app/web/src/workspace/nodes/NodeWithMolecule.tsx
CHANGED
@@ -1,6 +1,5 @@
|
|
1 |
import React, { useEffect, type CSSProperties } from "react";
|
2 |
import NodeWithParams from "./NodeWithParams";
|
3 |
-
const $3Dmol = await import("3dmol");
|
4 |
|
5 |
const NodeWithMolecule = (props: any) => {
|
6 |
const containerRef = React.useRef<HTMLDivElement>(null);
|
@@ -9,36 +8,38 @@ const NodeWithMolecule = (props: any) => {
|
|
9 |
useEffect(() => {
|
10 |
const config = props.data?.display?.value;
|
11 |
if (!config || !containerRef.current) return;
|
|
|
|
|
12 |
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
20 |
|
21 |
-
|
22 |
|
23 |
-
|
24 |
-
|
25 |
|
26 |
-
|
27 |
-
|
28 |
-
|
29 |
-
|
30 |
-
|
31 |
-
|
32 |
-
|
|
|
33 |
}
|
34 |
-
|
35 |
const resizeObserver = new ResizeObserver(() => {
|
36 |
viewerRef.current?.resize();
|
37 |
});
|
38 |
|
39 |
const observed = containerRef.current;
|
40 |
resizeObserver.observe(observed);
|
41 |
-
|
42 |
return () => {
|
43 |
resizeObserver.unobserve(observed);
|
44 |
if (viewerRef.current) {
|
|
|
1 |
import React, { useEffect, type CSSProperties } from "react";
|
2 |
import NodeWithParams from "./NodeWithParams";
|
|
|
3 |
|
4 |
const NodeWithMolecule = (props: any) => {
|
5 |
const containerRef = React.useRef<HTMLDivElement>(null);
|
|
|
8 |
useEffect(() => {
|
9 |
const config = props.data?.display?.value;
|
10 |
if (!config || !containerRef.current) return;
|
11 |
+
async function run() {
|
12 |
+
const $3Dmol = await import("3dmol");
|
13 |
|
14 |
+
try {
|
15 |
+
// Initialize viewer only once
|
16 |
+
if (!viewerRef.current) {
|
17 |
+
viewerRef.current = $3Dmol.createViewer(containerRef.current, {
|
18 |
+
backgroundColor: "white",
|
19 |
+
});
|
20 |
+
}
|
21 |
|
22 |
+
const viewer = viewerRef.current;
|
23 |
|
24 |
+
// Clear previous models
|
25 |
+
viewer.clear();
|
26 |
|
27 |
+
// Add new model and style it
|
28 |
+
viewer.addModel(config.data, config.format);
|
29 |
+
viewer.setStyle({}, { stick: {} });
|
30 |
+
viewer.zoomTo();
|
31 |
+
viewer.render();
|
32 |
+
} catch (error) {
|
33 |
+
console.error("Error rendering 3D molecule:", error);
|
34 |
+
}
|
35 |
}
|
36 |
+
run();
|
37 |
const resizeObserver = new ResizeObserver(() => {
|
38 |
viewerRef.current?.resize();
|
39 |
});
|
40 |
|
41 |
const observed = containerRef.current;
|
42 |
resizeObserver.observe(observed);
|
|
|
43 |
return () => {
|
44 |
resizeObserver.unobserve(observed);
|
45 |
if (viewerRef.current) {
|