fix: prevent ontology popup flash by using useLayoutEffect for centering
All checks were successful
Deploy Frontend / build-and-deploy (push) Successful in 3m56s
DSPy RAG Evaluation / Layer 1 - Unit Tests (push) Successful in 11m5s
DSPy RAG Evaluation / Layer 2 - DSPy Module Tests (push) Successful in 12m50s
DSPy RAG Evaluation / Layer 3 - Integration Tests (push) Successful in 10m51s
DSPy RAG Evaluation / Layer 4 - Comprehensive Evaluation (push) Successful in 11m59s
DSPy RAG Evaluation / Quality Gate (push) Successful in 1s

This commit is contained in:
kempersc 2026-01-13 20:38:21 +01:00
parent 92b490d690
commit fcf36f9a11
2 changed files with 8 additions and 3 deletions

View file

@ -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": {

View file

@ -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<OntologyTermPopupProps> = ({
// Draggable state
const [position, setPosition] = useState<Position | null>(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<HTMLDivElement>(null);
@ -705,13 +706,15 @@ export const OntologyTermPopup: React.FC<OntologyTermPopupProps> = ({
}, [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<OntologyTermPopupProps> = ({
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,