diff --git a/web/src/components/overlay/detail/AnnotationSettingsPane.tsx b/web/src/components/overlay/detail/AnnotationSettingsPane.tsx index 64f41d4d4..e073f72a6 100644 --- a/web/src/components/overlay/detail/AnnotationSettingsPane.tsx +++ b/web/src/components/overlay/detail/AnnotationSettingsPane.tsx @@ -121,7 +121,7 @@ export function AnnotationSettingsPane({ } return ( -
+
Annotation Settings @@ -152,8 +152,8 @@ export function AnnotationSettingsPane({ render={({ field }) => ( Annotation Offset -
-
+
+
This data comes from your camera's detect feed but is @@ -161,7 +161,7 @@ export function AnnotationSettingsPane({ unlikely that the two streams are perfectly in sync. As a result, the bounding box and the footage will not line up perfectly. However, the annotation_offset{" "} - field in your config can be used to adjust this. + field can be used to adjust this.
- + {eventSequence.map((item, index) => ( diff --git a/web/src/components/overlay/detail/ReviewDetailDialog.tsx b/web/src/components/overlay/detail/ReviewDetailDialog.tsx index 44e569c7a..b90d438d0 100644 --- a/web/src/components/overlay/detail/ReviewDetailDialog.tsx +++ b/web/src/components/overlay/detail/ReviewDetailDialog.tsx @@ -234,7 +234,7 @@ export default function ReviewDetailDialog({ )} {pane == "details" && selectedEvent && ( -
+
)} diff --git a/web/src/pages/ConfigEditor.tsx b/web/src/pages/ConfigEditor.tsx index dc351e7f7..58a36b65d 100644 --- a/web/src/pages/ConfigEditor.tsx +++ b/web/src/pages/ConfigEditor.tsx @@ -31,6 +31,7 @@ function ConfigEditor() { const editorRef = useRef(null); const modelRef = useRef(null); const configRef = useRef(null); + const schemaConfiguredRef = useRef(false); const onHandleSaveConfig = useCallback( async (save_option: SaveOptions) => { @@ -79,50 +80,59 @@ function ConfigEditor() { return; } - if (modelRef.current != null) { - // we don't need to recreate the editor if it already exists - editorRef.current?.layout(); - return; + const modelUri = monaco.Uri.parse( + `a://b/api/config/schema_${Date.now()}.json`, + ); + + // Configure Monaco YAML schema only once + if (!schemaConfiguredRef.current) { + configureMonacoYaml(monaco, { + enableSchemaRequest: true, + hover: true, + completion: true, + validate: true, + format: true, + schemas: [ + { + uri: `${apiHost}api/config/schema.json`, + fileMatch: [String(modelUri)], + }, + ], + }); + schemaConfiguredRef.current = true; } - const modelUri = monaco.Uri.parse("a://b/api/config/schema.json"); - - if (monaco.editor.getModels().length > 0) { - modelRef.current = monaco.editor.getModel(modelUri); - } else { + if (!modelRef.current) { modelRef.current = monaco.editor.createModel(config, "yaml", modelUri); + } else { + modelRef.current.setValue(config); } - configureMonacoYaml(monaco, { - enableSchemaRequest: true, - hover: true, - completion: true, - validate: true, - format: true, - schemas: [ - { - uri: `${apiHost}api/config/schema.json`, - fileMatch: [String(modelUri)], - }, - ], - }); - const container = configRef.current; - if (container != null) { + if (container && !editorRef.current) { editorRef.current = monaco.editor.create(container, { language: "yaml", model: modelRef.current, scrollBeyondLastLine: false, theme: (systemTheme || theme) == "dark" ? "vs-dark" : "vs-light", }); + } else if (editorRef.current) { + editorRef.current.setModel(modelRef.current); } return () => { - configRef.current = null; - modelRef.current = null; + if (editorRef.current) { + editorRef.current.dispose(); + editorRef.current = null; + } + if (modelRef.current) { + modelRef.current.dispose(); + modelRef.current = null; + } + schemaConfiguredRef.current = false; }; - }); + }, [config, apiHost, systemTheme, theme]); // monitoring state