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
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:
parent
92b490d690
commit
fcf36f9a11
2 changed files with 8 additions and 3 deletions
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue