Function HTMLAnnotator

frontend/src/components/HtmlAnnotator.tsx:92–777

({ error, id }: HTMLAnnotatorProps)

}

export default function HTMLAnnotator({ error, id }: HTMLAnnotatorProps) {
	const currentUI = useContext(CurrentUIContext)

	// Only point to our local annotator in development / running locally otherwise use github pages
	const iframeSrc = /127\.0\.0\.1|localhost/.test(document.location.hostname)
		? `http://${document.location.hostname}:${document.location.port === '5173' ? '7878' : document.location.port}`
		: 'https://wandb.github.io'
	const iframeRef = useRef<HTMLIFrameElement | null>(null)
	const annotatorRef = useRef<HTMLDivElement | null>(null)
	const iframeId = useMemo(() => nanoid(8), [])
	const saveHistory = useSaveHistory()
	const [rawItem, setRawItem] = useAtom(historyAtomFamily({ id }))
	const item = useMemo(
		() => new ItemWrapper(rawItem, setRawItem, saveHistory),
		[rawItem, setRawItem, saveHistory]
	)
	const [versionIdx] = useVersion(item)
	const navigation = useNavigate()

	// global state
	const [comments, setComments] = useAtom(commentsAtom)
	const [facets, setFacets] = useAtom(facetsAtom)
	const darkMode = useAtomValue(darkModeAtom)
	const [inspectorEnabled, setInspectorEnabled] = useAtom(inspectorEnabledAtom)
	const setSidebarState = useSetAtom(historySidebarStateAtom)
	const uiState = useAtomValue(uiStateAtom)
	const [uiTheme, setUiTheme] = useAtom(uiThemeAtom)
	const modelSupportsImages = useAtomValue(modelSupportsImagesAtom)
	const [image, setImage] = useAtom(
		imageDB.item(`screenshot-${id}-${versionIdx}`)
	)
	const isRendering = uiState.rendering // && `${html}`.length < 10

	// Local state
	const [isReady, setIsReady] = useState<boolean>(false)
	const [popoverOpen, setPopoverOpen] = useState<boolean>(false)
	const [themePopoverOpen, setThemePopoverOpen] = useState<boolean>(false)
	const [previewDarkMode, setPreviewDarkMode] = useState<string>(darkMode)
	const [voted, setVoted] = useState<string>('')
	// TODO: wire this up to jotai and make the versions pane absolute
	const [isCodeVisible, setIsCodeVisible] = useState<boolean>(false)
	const [userMedia, setUserMedia] = useState<
		'desktop' | 'mobile' | 'tablet' | undefined
	>()
	const [autoMedia, setAutoMedia] = useState<'mobile' | 'tablet' | undefined>()
	const media = userMedia ?? autoMedia ?? 'desktop'
	const [inspectorToggled, setInspectorToggled] = useState<boolean>(false)
	const [scale, setScale] = useState<number>(1)

	useLayoutEffect(() => {
		if (darkMode === 'system') {
			if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
				setPreviewDarkMode('dark')
			} else {
				setPreviewDarkMode('light')
			}
		}
	}, [darkMode])