init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
import { memo, useEffect, useRef } from "react";
import type { FC } from "react";
import { generateSampleTaskFromConfig } from "../../utils/generateSampleTask";
import { useAtom, useAtomValue, useSetAtom } from "jotai";
import {
  configAtom,
  errorAtom,
  loadingAtom,
  showPreviewAtom,
  interfacesAtom,
  annotationAtom,
  sampleTaskAtom,
  displayModeAtom,
} from "../../atoms/configAtoms";
import { onSnapshot } from "mobx-state-tree";
 
type PreviewPanelProps = {
  onAnnotationUpdate?: (annotation: any) => void;
};
 
// Clear localStorage of any LabelStudio:settings as it may cause issues with fullscreen mode
// if coming from the old playground
localStorage.removeItem("labelStudio:settings");
 
export const PreviewPanel: FC<PreviewPanelProps> = memo(
  ({ onAnnotationUpdate }) => {
    const config = useAtomValue(configAtom);
    const loading = useAtomValue(loadingAtom);
    const error = useAtomValue(errorAtom);
    const interfaces = useAtomValue(interfacesAtom);
    const setAnnotation = useSetAtom(annotationAtom);
    const setSampleTask = useSetAtom(sampleTaskAtom);
    const displayMode = useAtomValue(displayModeAtom);
    const [showPreview, setShowPreview] = useAtom(showPreviewAtom);
    const rootRef = useRef<HTMLDivElement>(null);
    const lsfInstance = useRef<any>(null);
    const rafId = useRef<number | null>(null);
 
    useEffect(() => {
      let LabelStudio: any;
      let dependencies: any;
      let snapshotDisposer: any;
 
      function cleanup() {
        if (typeof window !== "undefined" && (window as any).LabelStudio) {
          delete (window as any).LabelStudio;
        }
        setShowPreview(false);
        if (lsfInstance.current) {
          try {
            lsfInstance.current.destroy();
          } catch {
            // do nothing, it would otherwise complain about not being a node of the tree in HMR development scenarios
          }
          lsfInstance.current = null;
        }
        if (rafId.current !== null) {
          cancelAnimationFrame(rafId.current);
          rafId.current = null;
        }
        if (snapshotDisposer) {
          snapshotDisposer();
          snapshotDisposer = null;
        }
      }
 
      async function loadLSF() {
        dependencies = await import("@humansignal/editor");
        LabelStudio = dependencies.LabelStudio;
        if (!LabelStudio) return;
        cleanup();
        setShowPreview(true);
        const sampleTask = await generateSampleTaskFromConfig(config);
        setSampleTask(sampleTask);
 
        setTimeout(() => {
          lsfInstance.current = new LabelStudio(rootRef.current, {
            config,
            task: sampleTask,
            interfaces,
            instanceOptions: {
              reactVersion: "v18",
            },
            settings: {
              forceBottomPanel: true,
              collapsibleBottomPanel: true,
              // Default collapsed in all,preview-inline, but not in preview
              defaultCollapsedBottomPanel: displayMode !== "preview",
              fullscreen: false,
            },
            onStorageInitialized: (LS: any) => {
              const initAnnotation = () => {
                const as = LS.annotationStore;
                const c = as.createAnnotation();
                as.selectAnnotation(c.id);
 
                const annotation = as.selected;
                if (annotation) {
                  snapshotDisposer = onSnapshot(annotation, () => {
                    setAnnotation(annotation.serializeAnnotation());
                  });
                }
              };
              setTimeout(initAnnotation);
            },
          });
        });
      }
 
      if (!loading && !error && config) {
        rafId.current = requestAnimationFrame(() => {
          loadLSF();
        });
      }
 
      return () => {
        cleanup();
      };
      // eslint-disable-next-line
    }, [config, loading, error, interfaces, onAnnotationUpdate]);
 
    return (
      <div className="h-full flex flex-col min-h-0">
        {error ? (
          <div className="text-danger-foreground text-body-medium flex-1 flex items-center justify-center">{error}</div>
        ) : loading ? (
          <div className="text-secondary-foreground text-body-medium flex-1 flex items-center justify-center">
            Loading config...
          </div>
        ) : showPreview ? (
          <div ref={rootRef} className="w-full h-full flex-1 min-h-0 flex flex-col" />
        ) : null}
      </div>
    );
  },
  () => true,
);