create-interview-cockpit 0.4.0 → 0.6.0

package/template/client/src/components/PlotEmbed.tsx

@@ -0,0 +1,173 @@
+import { memo, useEffect, useRef, useState } from "react";
+import { Loader2, RefreshCw } from "lucide-react";
+import { parse as parseYaml } from "yaml";
+
+interface Props {
+  spec: string;
+}
+
+function sanitizePlotSpec(raw: string): string {
+  return raw
+    .trim()
+    .replace(/^```(?:plot|vega|vega-lite|json|yaml)?\s*/i, "")
+    .replace(/```\s*$/i, "")
+    .replace(/[\u201C\u201D]/g, '"')
+    .replace(/[\u2018\u2019\u02BC]/g, "'")
+    .replace(/\u2013|\u2014/g, "-");
+}
+
+function parsePlotSpec(raw: string): unknown {
+  const trimmed = sanitizePlotSpec(raw);
+  if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
+    return JSON.parse(trimmed);
+  }
+  return parseYaml(trimmed);
+}
+
+const EMBED_OPTIONS = {
+  actions: false,
+  renderer: "svg" as const,
+  theme: "dark" as const,
+  config: {
+    background: "transparent",
+    title: {
+      color: "#e2e8f0",
+      subtitleColor: "#94a3b8",
+    },
+    axis: {
+      domainColor: "#475569",
+      gridColor: "rgba(71, 85, 105, 0.35)",
+      tickColor: "#64748b",
+      labelColor: "#cbd5e1",
+      titleColor: "#e2e8f0",
+    },
+    legend: {
+      labelColor: "#cbd5e1",
+      titleColor: "#e2e8f0",
+    },
+    view: {
+      stroke: "transparent",
+    },
+  },
+};
+
+export default memo(function PlotEmbed({ spec }: Props) {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const finalizeRef = useRef<null | (() => void)>(null);
+  const [activeSpec, setActiveSpec] = useState(spec);
+  const [error, setError] = useState<string | null>(null);
+  const [fixing, setFixing] = useState(false);
+  const [rendering, setRendering] = useState(true);
+
+  useEffect(() => {
+    setActiveSpec(spec);
+  }, [spec]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const renderPlot = async () => {
+      setRendering(true);
+      setError(null);
+      finalizeRef.current?.();
+      finalizeRef.current = null;
+      if (hostRef.current) {
+        hostRef.current.innerHTML = "";
+      }
+
+      try {
+        const parsed = parsePlotSpec(activeSpec);
+        const { default: vegaEmbed } = await import("vega-embed");
+        if (cancelled || !hostRef.current) return;
+        const result = await vegaEmbed(
+          hostRef.current,
+          parsed as any,
+          EMBED_OPTIONS,
+        );
+        finalizeRef.current = () => result.finalize();
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : String(err));
+        }
+      } finally {
+        if (!cancelled) {
+          setRendering(false);
+        }
+      }
+    };
+
+    void renderPlot();
+
+    return () => {
+      cancelled = true;
+      finalizeRef.current?.();
+      finalizeRef.current = null;
+    };
+  }, [activeSpec]);
+
+  const handleFix = async () => {
+    setFixing(true);
+    try {
+      const res = await fetch("/api/fix-plot", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ spec: activeSpec, error }),
+      });
+      if (!res.ok) throw new Error("Fix request failed");
+      const { spec: fixed } = (await res.json()) as { spec: string };
+      setActiveSpec(fixed);
+    } catch (err) {
+      console.error("Fix plot error:", err);
+    } finally {
+      setFixing(false);
+    }
+  };
+
+  if (error) {
+    return (
+      <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 my-2">
+        <div className="flex items-center justify-between mb-1 gap-3">
+          <div>
+            <p className="text-xs text-red-400">Plot error:</p>
+            <p className="text-[11px] text-slate-500 mt-1 whitespace-pre-wrap">
+              {error}
+            </p>
+          </div>
+          <button
+            onClick={handleFix}
+            disabled={fixing}
+            className="flex items-center gap-1 px-2 py-0.5 text-[11px] rounded bg-slate-700 text-slate-300 hover:bg-slate-600 disabled:opacity-50 transition-colors shrink-0"
+          >
+            {fixing ? (
+              <>
+                <Loader2 className="w-3 h-3 animate-spin" />
+                Fixing…
+              </>
+            ) : (
+              <>
+                <RefreshCw className="w-3 h-3" />
+                Fix plot
+              </>
+            )}
+          </button>
+        </div>
+        <pre className="text-xs text-slate-400 whitespace-pre-wrap overflow-x-auto">
+          {activeSpec}
+        </pre>
+      </div>
+    );
+  }
+
+  return (
+    <div className="my-3 bg-slate-800/30 rounded-lg p-4 overflow-x-auto">
+      {rendering && (
+        <div className="flex justify-center pb-4">
+          <span className="text-xs text-slate-500 animate-pulse">
+            Rendering plot…
+          </span>
+        </div>
+      )}
+      <div ref={hostRef} className="plot-embed min-w-[280px]" />
+    </div>
+  );
+});