doragera commited on
Commit
c6246d1
·
1 Parent(s): 84a2044

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
- try {
14
- // Initialize viewer only once
15
- if (!viewerRef.current) {
16
- viewerRef.current = $3Dmol.createViewer(containerRef.current, {
17
- backgroundColor: "white",
18
- });
19
- }
20
 
21
- const viewer = viewerRef.current;
22
 
23
- // Clear previous models
24
- viewer.clear();
25
 
26
- // Add new model and style it
27
- viewer.addModel(config.data, config.format);
28
- viewer.setStyle({}, { stick: {} });
29
- viewer.zoomTo();
30
- viewer.render();
31
- } catch (error) {
32
- console.error("Error rendering 3D molecule:", error);
 
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) {