kempersc/glam
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/public/schemas/20251121/linkml/manifest.json
View file

@ -1,5 +1,5 @@
{ {
"generated": "2026-01-13T19:29:48.201Z", "generated": "2026-01-13T19:37:31.837Z",
"schemaRoot": "/schemas/20251121/linkml", "schemaRoot": "/schemas/20251121/linkml",
"totalFiles": 2894, "totalFiles": 2894,
"categoryCounts": { "categoryCounts": {

9
frontend/src/components/ontology/OntologyTermPopup.tsx
View file

@ -12,7 +12,7 @@
* - Falls back to Wikidata API for wd: prefixed terms * - 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 DOMPurify from 'dompurify';
import { import {
loadOntology, loadOntology,
@ -660,6 +660,7 @@ export const OntologyTermPopup: React.FC<OntologyTermPopupProps> = ({
// Draggable state // Draggable state
const [position, setPosition] = useState<Position | null>(initialPosition || null); 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 [isDragging, setIsDragging] = useState(false);
const dragStartRef = useRef<{ x: number; y: number; posX: number; posY: number } | null>(null); const dragStartRef = useRef<{ x: number; y: number; posX: number; posY: number } | null>(null);
const panelRef = useRef<HTMLDivElement>(null); const panelRef = useRef<HTMLDivElement>(null);
@ -705,13 +706,15 @@ export const OntologyTermPopup: React.FC<OntologyTermPopupProps> = ({
}, [curie]); }, [curie]);
// Center the popup on initial load if no position provided // 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) { if (!initialPosition && panelRef.current && !position) {
const rect = panelRef.current.getBoundingClientRect(); const rect = panelRef.current.getBoundingClientRect();
setPosition({ setPosition({
x: (window.innerWidth - rect.width) / 2, x: (window.innerWidth - rect.width) / 2,
y: (window.innerHeight - rect.height) / 3, y: (window.innerHeight - rect.height) / 3,
}); });
setIsPositioned(true);
} }
}, [initialPosition, position]); }, [initialPosition, position]);
@ -927,6 +930,8 @@ export const OntologyTermPopup: React.FC<OntologyTermPopupProps> = ({
const panelStyle: React.CSSProperties = { const panelStyle: React.CSSProperties = {
width: size.width, width: size.width,
height: isMinimized ? 'auto' : size.height, height: isMinimized ? 'auto' : size.height,
// Hide until position is calculated to prevent flash
visibility: isPositioned ? 'visible' : 'hidden',
...(position && { ...(position && {
position: 'fixed', position: 'fixed',
left: position.x, left: position.x,