diff --git a/frontend/public/schemas/20251121/linkml/manifest.json b/frontend/public/schemas/20251121/linkml/manifest.json index 287b1eb18c..ca5c32814a 100644 --- a/frontend/public/schemas/20251121/linkml/manifest.json +++ b/frontend/public/schemas/20251121/linkml/manifest.json @@ -1,5 +1,5 @@ { - "generated": "2026-01-13T19:29:48.201Z", + "generated": "2026-01-13T19:37:31.837Z", "schemaRoot": "/schemas/20251121/linkml", "totalFiles": 2894, "categoryCounts": { diff --git a/frontend/src/components/ontology/OntologyTermPopup.tsx b/frontend/src/components/ontology/OntologyTermPopup.tsx index db2e2ad6b6..c22ad66ec6 100644 --- a/frontend/src/components/ontology/OntologyTermPopup.tsx +++ b/frontend/src/components/ontology/OntologyTermPopup.tsx @@ -12,7 +12,7 @@ * - Falls back to Wikidata API for wd: prefixed terms */ -import React, { useEffect, useState, useRef, useCallback } from 'react'; +import React, { useEffect, useLayoutEffect, useState, useRef, useCallback } from 'react'; import DOMPurify from 'dompurify'; import { loadOntology, @@ -660,6 +660,7 @@ export const OntologyTermPopup: React.FC = ({ // Draggable state const [position, setPosition] = useState(initialPosition || null); + const [isPositioned, setIsPositioned] = useState(!!initialPosition); // Track if we've calculated position const [isDragging, setIsDragging] = useState(false); const dragStartRef = useRef<{ x: number; y: number; posX: number; posY: number } | null>(null); const panelRef = useRef(null); @@ -705,13 +706,15 @@ export const OntologyTermPopup: React.FC = ({ }, [curie]); // Center the popup on initial load if no position provided - useEffect(() => { + // Using useLayoutEffect to calculate position before browser paints (prevents flash) + useLayoutEffect(() => { if (!initialPosition && panelRef.current && !position) { const rect = panelRef.current.getBoundingClientRect(); setPosition({ x: (window.innerWidth - rect.width) / 2, y: (window.innerHeight - rect.height) / 3, }); + setIsPositioned(true); } }, [initialPosition, position]); @@ -927,6 +930,8 @@ export const OntologyTermPopup: React.FC = ({ const panelStyle: React.CSSProperties = { width: size.width, height: isMinimized ? 'auto' : size.height, + // Hide until position is calculated to prevent flash + visibility: isPositioned ? 'visible' : 'hidden', ...(position && { position: 'fixed', left: position.x,