Hitonabi/mission-control-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve SVG dimension observer loading mount lifecycle issue using callback refs

Browse Source
This commit is contained in:
Hitonabi
2026-06-26 08:06:01 +02:00
parent dbe6e4b4f3
commit 18f361d485
5 changed files with 383 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/dist/assets/index-CFlBNApe.js
Vendored
-350
View File
File diff suppressed because one or more lines are too long
frontend/dist/assets/index-izDdu6A_.js
Vendored
+350
View File
File diff suppressed because one or more lines are too long
frontend/dist/index.html
Vendored
+1 -1
View File
@@ -7,7 +7,7 @@
<link rel="manifest" href="/manifest.webmanifest" /> <link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>Mission Control 2.0</title> <title>Mission Control 2.0</title>
<script type="module" crossorigin src="/assets/index-CFlBNApe.js"></script> <script type="module" crossorigin src="/assets/index-izDdu6A_.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-mQ1DUIFB.css"> <link rel="stylesheet" crossorigin href="/assets/index-mQ1DUIFB.css">
</head> </head>
<body> <body>
frontend/src/views/AgentView.tsx
+11 -6
View File
@@ -1,4 +1,4 @@
import { useEffect, useState, useRef } from "react" import { useEffect, useState, useRef, useCallback } from "react"
import { Bot, ExternalLink, Activity, Cpu, Wrench, Shield, X, Check, Copy } from "lucide-react" import { Bot, ExternalLink, Activity, Cpu, Wrench, Shield, X, Check, Copy } from "lucide-react"
import { api, type AgentStatus, type ModelInfo, type RoutingResp, type ConnectResp } from "@/lib/api" import { api, type AgentStatus, type ModelInfo, type RoutingResp, type ConnectResp } from "@/lib/api"
import { cn, resolveExternalUrl } from "@/lib/utils" import { cn, resolveExternalUrl } from "@/lib/utils"
@@ -50,17 +50,22 @@ export function AgentView() {
// Canvas pixel tracking for pixel-perfect connection graph without non-uniform scaling // Canvas pixel tracking for pixel-perfect connection graph without non-uniform scaling
const [dimensions, setDimensions] = useState({ width: 800, height: 360 }) const [dimensions, setDimensions] = useState({ width: 800, height: 360 })
const containerRef = useRef<HTMLDivElement>(null) const observerRef = useRef<ResizeObserver | null>(null)
useEffect(() => { const containerRef = useCallback((node: HTMLDivElement | null) => {
if (!containerRef.current) return if (observerRef.current) {
observerRef.current.disconnect()
observerRef.current = null
}
if (node) {
const observer = new ResizeObserver((entries) => { const observer = new ResizeObserver((entries) => {
if (!entries || entries.length === 0) return if (!entries || entries.length === 0) return
const rect = entries[0].contentRect const rect = entries[0].contentRect
setDimensions({ width: rect.width, height: rect.height }) setDimensions({ width: rect.width, height: rect.height })
}) })
observer.observe(containerRef.current) observer.observe(node)
return () => observer.disconnect() observerRef.current = observer
}
}, []) }, [])
const w = dimensions.width const w = dimensions.width
frontend/src/views/ModelsView.tsx
+11 -6
View File
@@ -1,4 +1,4 @@
import { useEffect, useState, useRef } from "react" import { useEffect, useState, useRef, useCallback } from "react"
import { Download, Search, Trash2, Edit3, Star, Layers, Activity, HardDrive, X, Check, Copy, Bot, Eye, Code, Brain, Compass, ChevronDown, ChevronUp } from "lucide-react" import { Download, Search, Trash2, Edit3, Star, Layers, Activity, HardDrive, X, Check, Copy, Bot, Eye, Code, Brain, Compass, ChevronDown, ChevronUp } from "lucide-react"
import { api, type DiscoverResp, type Fit, type Job, type ModelInfo, type RoutingResp, type UpdatesResp, type ConnectResp } from "@/lib/api" import { api, type DiscoverResp, type Fit, type Job, type ModelInfo, type RoutingResp, type UpdatesResp, type ConnectResp } from "@/lib/api"
import { CapsChips } from "@/components/CapsChips" import { CapsChips } from "@/components/CapsChips"
@@ -142,17 +142,22 @@ function Cockpit() {
// Canvas pixel tracking for pixel-perfect connection graph without non-uniform scaling // Canvas pixel tracking for pixel-perfect connection graph without non-uniform scaling
const [dimensions, setDimensions] = useState({ width: 800, height: 360 }) const [dimensions, setDimensions] = useState({ width: 800, height: 360 })
const containerRef = useRef<HTMLDivElement>(null) const observerRef = useRef<ResizeObserver | null>(null)
useEffect(() => { const containerRef = useCallback((node: HTMLDivElement | null) => {
if (!containerRef.current) return if (observerRef.current) {
observerRef.current.disconnect()
observerRef.current = null
}
if (node) {
const observer = new ResizeObserver((entries) => { const observer = new ResizeObserver((entries) => {
if (!entries || entries.length === 0) return if (!entries || entries.length === 0) return
const rect = entries[0].contentRect const rect = entries[0].contentRect
setDimensions({ width: rect.width, height: rect.height }) setDimensions({ width: rect.width, height: rect.height })
}) })
observer.observe(containerRef.current) observer.observe(node)
return () => observer.disconnect() observerRef.current = observer
}
}, []) }, [])
const w = dimensions.width const w = dimensions.width