|
165 | 165 | ) |
166 | 166 | let highlightRanges: SourcePositionRange[] = $state([]) |
167 | 167 |
|
168 | | - // The graph panel's diagram is hoisted to a <PersistentContent> overlay so it survives the |
169 | | - // sqlPanelFullHeight layout toggle (which would otherwise unmount/remount the snippet's |
170 | | - // <ProfilerDiagram>, discarding the Visualizer's state). The graphPanel snippet renders a |
171 | | - // <PersistentPlaceholder> that mirrors its bounding rect onto this shared handle. |
| 168 | + // The <ProfilerDiagram> is not rendered inside the graphPanel snippet. It is rendered once, at |
| 169 | + // the root of this component, in a <PersistentContent> overlay with a fixed position. The overlay |
| 170 | + // follows the position and size of an empty placeholder div in the graphPanel snippet. Thus the |
| 171 | + // sqlPanelFullHeight layout toggle moves only the placeholder, and the diagram keeps the |
| 172 | + // Visualizer's state. The placeholder div uses `diagramRect.placeholder` to report its bounding |
| 173 | + // rect to this shared handle. |
172 | 174 | const diagramRect = usePersistentRect() |
173 | 175 |
|
174 | | - // The code panel is hoisted the same way. The layout toggle swaps the {#if} branch that renders |
175 | | - // the panel, and Svelte mounts the new branch before it destroys the old branch. An inline panel |
176 | | - // would then create a second Monaco model with the same URI, which Monaco rejects. Each layout |
177 | | - // branch renders only a placeholder. |
| 176 | + // The code panel is also rendered once in an overlay at the root, not inside the layout branches. |
| 177 | + // The layout toggle swaps the {#if} branch that renders the panel, and Svelte mounts the new |
| 178 | + // branch before it destroys the old branch. A panel inside each branch would then create a second |
| 179 | + // Monaco model with the same URI, which Monaco rejects. Each layout branch renders only a |
| 180 | + // placeholder. |
178 | 181 | const sourcePanelRect = usePersistentRect() |
179 | 182 |
|
180 | 183 | const lookup = createLookupCoordinator() |
|