fix(docs): show correct dot in playground

docs/components/playground-page/data/atom-hooks.ts

@@ -1,6 +1,15 @@
-import { useAtomValue, useSetAtom, useStore } from 'jotai'
+import { ExtractAtomValue, useAtomValue, useSetAtom, useStore } from 'jotai'
 import { useRef } from 'react'
-import { currentFileAtom, currentViewAtom, editorRevealRequestAtom, filesAtom, loadableDiagramAtom, updateCurrentFileAtom, viewsAtom } from './atoms'
+import {
+  currentFileAtom,
+  currentViewAtom,
+  editorRevealRequestAtom,
+  filesAtom,
+  loadableDiagramAtom,
+  updateCurrentFileAtom,
+  viewsAtom
+} from './atoms'
+import type { DotLayoutResult } from '@likec4/layouts'
 
 export const useCurrentFile = () => useAtomValue(currentFileAtom)
 
@@ -19,7 +28,7 @@ export const useUpdateViews = () => useSetAtom(viewsAtom)
 
 export const useCurrentView = () => useAtomValue(currentViewAtom)
 
-export const useCurrentDiagram = () => useAtomValue(loadableDiagramAtom)
-
+export const useCurrentDiagramState = () => useAtomValue(loadableDiagramAtom)
+export type DiagramState = DotLayoutResult
 
 export const useRevealInEditor = () => useSetAtom(editorRevealRequestAtom)

docs/components/playground-page/data/atoms.ts

@@ -83,8 +83,7 @@ export const diagramAtom = atom(async get => {
   if (!view) return null
   const layouter = await getDotLayouter()
   try {
-    const { diagram } = await layouter.layout(view)
-    return diagram
+    return await layouter.layout(view)
   } catch (e) {
     console.error(e)
     throw e

docs/components/playground-page/playground.tsx

@@ -19,8 +19,9 @@ import {
   PlaygroundDataProvider,
   type PlaygroundDataProviderProps
 } from './data/PlaygroundDataProvider'
+import type { DiagramState } from './data'
 import {
-  useCurrentDiagram,
+  useCurrentDiagramState,
   useCurrentFile,
   useInitialFiles,
   useRevealInEditor,
@@ -44,16 +45,16 @@ const ViewModes = {
 } as const
 type ViewMode = keyof typeof ViewModes
 
-const renderView = (viewMode: Omit<ViewMode, 'diagram'>, diagram: DiagramView) => {
+const renderView = (viewMode: Omit<ViewMode, 'diagram'>, state: DiagramState) => {
   switch (viewMode) {
     case 'd2':
-      return <PlaygroundViewD2 diagram={diagram} />
+      return <PlaygroundViewD2 diagram={state.diagram} />
     case 'dot':
-      return <PlaygroundViewDot diagram={diagram} />
+      return <PlaygroundViewDot diagram={state.diagram} dot={state.dot} />
     case 'mermaid':
-      return <PlaygroundViewMermaid diagram={diagram} />
+      return <PlaygroundViewMermaid diagram={state.diagram} />
     default:
-      return <PlaygroundViewNotReady diagram={diagram} />
+      return <PlaygroundViewNotReady diagram={state.diagram} />
   }
 }
 
@@ -66,18 +67,22 @@ const PlaygroundPreview = ({
 }) => {
   const padding = useMemo((): DiagramPaddings => [20, 20, 20, sidebarWidth + 20], [sidebarWidth])
   const [viewId, setDiagramFromViewId] = useAtom(diagramIdAtom)
-  const diagramState = useCurrentDiagram()
+  const diagramState = useCurrentDiagramState()
   const [viewMode, setViewMode] = useState<ViewMode>('diagram')
   const isReady = useAtomValue(viewsReadyAtom)
   const revealInEditor = useRevealInEditor()
 
-  const previousDiagramRef = useRef<DiagramView | null>(null)
-  if (diagramState.state === 'hasData' && diagramState.data) {
-    previousDiagramRef.current = diagramState.data
-  }
-  const previousDiagram = previousDiagramRef.current
+  const previousStateRef = useRef<DiagramState | null>(null)
+  const loadState = diagramState.state
+  const currentState = (loadState === 'hasData' && diagramState.data) || null
+  useEffect(() => {
+    if (loadState === 'hasData' && currentState) {
+      previousStateRef.current = currentState
+    }
+  }, [loadState, currentState])
+  const previousState = previousStateRef.current
 
-  if (diagramState.state !== 'hasData' && !previousDiagram) {
+  if (loadState !== 'hasData' && !previousState) {
     //console.log('PlaygroundPreview: diagramState.state !== "hasData" && !previousDiagram')
     return (
       <div
@@ -96,9 +101,9 @@ const PlaygroundPreview = ({
       </div>
     )
   }
+  const state = currentState || previousState
 
-  const diagram = diagramState.state === 'hasData' ? diagramState.data : previousDiagram
-  if (!diagram) {
+  if (!state) {
     //console.log('PlaygroundPreview: !diagram')
     return (
       <div
@@ -112,6 +117,7 @@ const PlaygroundPreview = ({
       </div>
     )
   }
+  const { diagram } = state
 
   return (
     <>
@@ -148,7 +154,7 @@ const PlaygroundPreview = ({
             paddingLeft: sidebarWidth + 5
           }}
         >
-          {renderView(viewMode, diagram)}
+          {renderView(viewMode, state)}
         </div>
       )}
       <div

docs/components/playground-page/view-dot.tsx

@@ -1,7 +1,6 @@
 import { cn } from '$/lib'
 import type { DiagramView } from '@likec4/diagrams'
-import { printToDot } from '@likec4/layouts'
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
 import useSWR from 'swr'
 import { CodePanel } from '../CodePanel'
 import styles from './view-dot.module.css'
@@ -23,6 +22,7 @@ const fetchFromKroki = async (dot: string) => {
 
 type PlaygroundViewDotProps = {
   diagram: DiagramView
+  dot: string
 }
 
 const tabClassName = (isActive = false) =>
@@ -34,9 +34,8 @@ const tabClassName = (isActive = false) =>
     isActive && 'bg-neutral-600 text-slate-300'
   )
 
-export default function PlaygroundViewDot({ diagram }: PlaygroundViewDotProps) {
+export default function PlaygroundViewDot({ dot }: PlaygroundViewDotProps) {
   const [tab, setTab] = useState<'source' | 'render'>('source')
-  const dot = useMemo(() => printToDot(diagram), [diagram])
 
   const { data } = useSWR(tab == 'render' ? dot : null, fetchFromKroki, {
     revalidateIfStale: false,