update

2026-06-21 20:00:13 +02:00
parent 885c4811d0
commit 8ba4b94498
18 changed files with 537 additions and 1188 deletions
--- a/frontend/src/components/BausteinFokus.vue
+++ b/frontend/src/components/BausteinFokus.vue
@@ -1,10 +1,11 @@
 <script setup>
 import BausteinPanel from './BausteinPanel.vue'
-import MermaidView from './MermaidView.vue'
+import GraphView from './GraphView.vue'
 import { renderMarkdown } from '../markdown.js'

 const props = defineProps({
  baustein: { type: Object, required: true }, // { title, md, num }
+  graph: { type: Object, default: null },     // {knoten,kanten,richtung} aus dem Grafik-Sidecar
  topic: { type: String, required: true },
  provider: { type: String, default: 'claude' },
  status: { type: Object, default: null },
@@ -89,7 +90,7 @@ const standFarbe = computed(() => {
    </div>
    <div class="fokus-body">
      <div ref="guideEl" class="fokus-col left">
-        <MermaidView v-if="ansicht === 'grafik'" :code="baustein.grafik || ''" />
+        <GraphView v-if="ansicht === 'grafik'" :graph="graph" height="70vh" />
        <div v-else class="markdown" v-html="renderMarkdown(ansicht === 'kompakt' ? (baustein.kompakt || baustein.md) : baustein.md)"></div>
      </div>
      <div ref="rightEl" class="fokus-col right">
--- a/frontend/src/components/GraphView.vue
+++ b/frontend/src/components/GraphView.vue
@@ -0,0 +1,133 @@
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue'
+import { VueFlow, useVueFlow, Handle, Position, MarkerType } from '@vue-flow/core'
+import '@vue-flow/core/dist/style.css'
+import dagre from '@dagrejs/dagre'
+import { renderMarkdownInline } from '../markdown.js'
+
+// Grafik = {knoten:[{id,text}], kanten:[{von,nach,text?}], richtung:'TB'|'LR'}.
+// KI liefert nur die Semantik; Layout macht dagre, Mathe rendert KaTeX im Knoten.
+const props = defineProps({
+  graph: { type: Object, default: null },
+  height: { type: String, default: '380px' },
+})
+
+let _seq = 0
+const flowId = `gv-${++_seq}-${Math.floor(performance.now())}`
+const { findNode, fitView, onNodesInitialized } = useVueFlow(flowId)
+
+const nodes = ref([])
+const edges = ref([])
+const bereit = ref(false)   // erst nach dem Layout sichtbar (sonst kurz bei 0,0 gestapelt)
+const fehler = ref(false)
+
+const richtung = computed(() => (props.graph?.richtung === 'LR' ? 'LR' : 'TB'))
+const istLR = computed(() => richtung.value === 'LR')
+const targetPos = computed(() => (istLR.value ? Position.Left : Position.Top))
+const sourcePos = computed(() => (istLR.value ? Position.Right : Position.Bottom))
+
+function build() {
+  bereit.value = false
+  const g = props.graph
+  const kn = g && Array.isArray(g.knoten) ? g.knoten : []
+  if (!kn.length) {
+    fehler.value = true
+    nodes.value = []
+    edges.value = []
+    return
+  }
+  fehler.value = false
+  const ids = new Set(kn.map((k) => String(k.id)))
+  nodes.value = kn.map((k) => ({
+    id: String(k.id),
+    type: 'math',
+    position: { x: 0, y: 0 },
+    data: { text: String(k.text || '') },
+  }))
+  edges.value = (g.kanten || [])
+    .filter((e) => ids.has(String(e.von)) && ids.has(String(e.nach)))
+    .map((e, i) => ({
+      id: `e${i}`,
+      source: String(e.von),
+      target: String(e.nach),
+      label: e.text ? String(e.text) : undefined,
+      type: 'smoothstep',
+      markerEnd: MarkerType.ArrowClosed,
+    }))
+}
+
+// Two-Pass: Vue Flow misst die Knoten (KaTeX!), erst dann rechnet dagre das Layout.
+function layout() {
+  const g = new dagre.graphlib.Graph()
+  g.setDefaultEdgeLabel(() => ({}))
+  g.setGraph({ rankdir: richtung.value, nodesep: 40, ranksep: 55 })
+  for (const n of nodes.value) {
+    const dim = findNode(n.id)?.dimensions
+    g.setNode(n.id, { width: dim?.width || 160, height: dim?.height || 40 })
+  }
+  for (const e of edges.value) g.setEdge(e.source, e.target)
+  dagre.layout(g)
+  nodes.value = nodes.value.map((n) => {
+    const p = g.node(n.id)
+    return { ...n, position: { x: p.x - p.width / 2, y: p.y - p.height / 2 } }
+  })
+}
+
+onNodesInitialized(async () => {
+  if (!nodes.value.length) return
+  await document.fonts.ready  // sonst misst der Browser Fallback-Font → falsche Breite
+  layout()
+  bereit.value = true
+  await nextTick()
+  fitView({ padding: 0.2 })
+})
+
+watch(() => props.graph, build, { immediate: true })
+</script>
+
+<template>
+  <div class="graph-view" :style="{ height }">
+    <p v-if="fehler" class="graph-fallback">Grafik nicht verfügbar — Bausteine ab „Grafiken" neu bauen.</p>
+    <VueFlow
+      v-else
+      :id="flowId"
+      :nodes="nodes"
+      :edges="edges"
+      :style="{ opacity: bereit ? 1 : 0 }"
+      :nodes-draggable="false"
+      :nodes-connectable="false"
+      :elements-selectable="false"
+      :zoom-on-scroll="false"
+      :zoom-on-double-click="false"
+      :min-zoom="0.2"
+      :max-zoom="2"
+      fit-view-on-init
+    >
+      <template #node-math="{ data }">
+        <Handle type="target" :position="targetPos" />
+        <div class="gv-node markdown" v-html="renderMarkdownInline(data.text)"></div>
+        <Handle type="source" :position="sourcePos" />
+      </template>
+    </VueFlow>
+  </div>
+</template>
+
+<style scoped>
+.graph-view { width: 100%; position: relative; }
+.graph-fallback { color: var(--text-muted); font-size: 0.85rem; padding: 1rem 0; }
+.gv-node {
+  padding: 0.4rem 0.65rem;
+  border: 1px solid var(--border-strong, #999);
+  border-radius: 8px;
+  background: var(--panel, #fff);
+  color: var(--text, #111);
+  font-size: 0.8rem;
+  line-height: 1.3;
+  text-align: center;
+  max-width: 240px;
+}
+/* KaTeX im Knoten nicht umbrechen lassen */
+.gv-node :deep(.katex) { white-space: nowrap; }
+.graph-view :deep(.vue-flow__edge-text) { font-size: 0.72rem; fill: var(--text-muted, #666); }
+.graph-view :deep(.vue-flow__edge-textbg) { fill: var(--panel, #fff); }
+</style>
--- a/frontend/src/components/MermaidView.vue
+++ b/frontend/src/components/MermaidView.vue
@@ -1,41 +0,0 @@
-<script setup>
-import { ref, watch, onMounted } from 'vue'
-import mermaid from 'mermaid'
-
-mermaid.initialize({ startOnLoad: false, securityLevel: 'strict', theme: 'neutral' })
-
-const props = defineProps({ code: { type: String, default: '' } })
-const svg = ref('')
-const fehler = ref(false)
-let n = 0
-
-// Async rendern; bricht das Mermaid-Parsing (kaputte Syntax) → Fallback statt Absturz.
-async function render() {
-  const code = (props.code || '').trim()
-  svg.value = ''
-  fehler.value = false
-  if (!code) { fehler.value = true; return }
-  try {
-    const { svg: out } = await mermaid.render(`mmd-${Date.now()}-${n++}`, code)
-    svg.value = out
-  } catch {
-    fehler.value = true
-  }
-}
-
-watch(() => props.code, render)
-onMounted(render)
-</script>
-
-<template>
-  <div class="mermaid-view">
-    <div v-if="svg" v-html="svg"></div>
-    <p v-else class="mermaid-fallback">Grafik nicht verfügbar — Guide neu bauen.</p>
-  </div>
-</template>
-
-<style scoped>
-.mermaid-view { display: flex; justify-content: center; padding: 0.5rem 0; }
-.mermaid-view :deep(svg) { max-width: 100%; height: auto; }
-.mermaid-fallback { color: var(--text-muted); font-size: 0.85rem; padding: 1rem 0; }
-</style>
--- a/frontend/src/components/TopicDetail.vue
+++ b/frontend/src/components/TopicDetail.vue
@@ -1,11 +1,11 @@
 <script setup>
 import { computed, ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
-import { fetchGuideContent, chatGuide, fetchBausteinLernstand } from '../api.js'
+import { fetchGuideContent, chatGuide, fetchBausteinLernstand, fetchGrafiken } from '../api.js'
 import { renderMarkdown } from '../markdown.js'
 import { useChat } from '../composables/useChat.js'
 import BausteinPanel from './BausteinPanel.vue'
 import BausteinFokus from './BausteinFokus.vue'
-import MermaidView from './MermaidView.vue'
+import GraphView from './GraphView.vue'

 const props = defineProps({
  previewGuide: { type: Object, default: null },
@@ -28,6 +28,7 @@ const CH_COLORS = ['#3b82f6', '#8b5cf6', '#14b8a6', '#f59e0b', '#22c55e', '#6366
 const content = ref(null)
 const loadError = ref(null)
 const scrollEl = ref(null)
+const grafiken = ref({}) // Baustein-Titel → {knoten,kanten,richtung} (Sidecar, von allen Guides geteilt)
 const lernstand = ref({}) // Prüfungs-Stand pro Baustein-Titel — VOR dem immediate-Watch (loadContent nutzt es)

 watch(() => props.previewGuide?.id, loadContent, { immediate: true })
@@ -36,6 +37,7 @@ async function loadContent() {
  content.value = null
  loadError.value = null
  lernstand.value = {}
+  grafiken.value = {}
  const g = props.previewGuide
  if (!g || g.status !== 'done') return
  try {
@@ -49,6 +51,9 @@ async function loadContent() {
    try {
      lernstand.value = (await fetchBausteinLernstand(g.topic)).bausteine || {}
    } catch { /* offline → leer */ }
+    try {
+      grafiken.value = (await fetchGrafiken(g.topic)).grafiken || {}
+    } catch { /* keine Grafiken → Fallback */ }
  }
 }

@@ -205,7 +210,7 @@ function extractContext() {
                <span v-else-if="lernstand[s.title]?.verstanden" class="baustein-done verstanden" title="Vollständig verstanden (10/10)">✓✓ Verstanden</span>
                <span v-else-if="lernstand[s.title]?.absolviert" class="baustein-done" title="Prüfung bestanden">✓ Absolviert</span>
              </h3>
-              <MermaidView v-if="!isOnePager && ansichtModus === 'grafik'" :code="s.grafik || ''" />
+              <GraphView v-if="!isOnePager && ansichtModus === 'grafik'" :graph="grafiken[s.title] || null" />
              <div v-else class="section-body markdown" v-html="renderMarkdown(!isOnePager && ansichtModus === 'kompakt' ? (s.kompakt || s.md) : s.md)"></div>
              <BausteinPanel
                v-if="!isOnePager"
@@ -233,6 +238,7 @@ function extractContext() {
    <BausteinFokus
      v-if="fokusBaustein"
      :baustein="fokusBaustein"
+      :graph="grafiken[fokusBaustein.title] || null"
      :topic="previewGuide.topic"
      :provider="provider"
      :fortschritt="fortschritt"