@tscircuit/schematic-viewer 2.0.23 → 2.0.25

package/lib/components/SpicePlot.tsx

@@ -0,0 +1,193 @@
+import {
+  Chart as ChartJS,
+  type ChartOptions,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js"
+import { Line } from "react-chartjs-2"
+import type { PlotPoint } from "../hooks/useSpiceSimulation"
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+)
+
+const colors = ["#8884d8", "#82ca9d", "#ffc658", "#ff7300", "#387908"]
+
+const formatTimeWithUnits = (seconds: number) => {
+  if (seconds === 0) return "0s"
+  const absSeconds = Math.abs(seconds)
+
+  let unit = "s"
+  let scale = 1
+  if (absSeconds < 1e-12) {
+    unit = "fs"
+    scale = 1e15
+  } else if (absSeconds < 1e-9) {
+    unit = "ps"
+    scale = 1e12
+  } else if (absSeconds < 1e-6) {
+    unit = "ns"
+    scale = 1e9
+  } else if (absSeconds < 1e-3) {
+    unit = "us"
+    scale = 1e6
+  } else if (absSeconds < 1) {
+    unit = "ms"
+    scale = 1e3
+  }
+
+  return `${parseFloat((seconds * scale).toPrecision(3))}${unit}`
+}
+
+export const SpicePlot = ({
+  plotData,
+  nodes,
+  isLoading,
+  error,
+}: {
+  plotData: PlotPoint[]
+  nodes: string[]
+  isLoading: boolean
+  error: string | null
+}) => {
+  if (isLoading) {
+    return (
+      <div
+        style={{
+          height: "300px",
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        Running simulation...
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div
+        style={{
+          height: "300px",
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "red",
+        }}
+      >
+        Error: {error}
+      </div>
+    )
+  }
+
+  if (plotData.length === 0) {
+    return (
+      <div
+        style={{
+          height: "300px",
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        No data to plot. Check simulation output or SPICE netlist.
+      </div>
+    )
+  }
+
+  const chartData = {
+    datasets: nodes.map((node, i) => ({
+      label: node,
+      data: plotData.map((p) => ({
+        x: Number(p.name),
+        y: p[node] as number,
+      })),
+      borderColor: colors[i % colors.length],
+      backgroundColor: colors[i % colors.length],
+      fill: false,
+      tension: 0.1,
+    })),
+  }
+
+  const options: ChartOptions<"line"> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        position: "top" as const,
+        labels: {
+          font: {
+            family: "sans-serif",
+          },
+        },
+      },
+      title: {
+        display: false,
+      },
+      tooltip: {
+        callbacks: {
+          title: (tooltipItems) => {
+            if (tooltipItems.length > 0) {
+              const item = tooltipItems[0]
+              return formatTimeWithUnits(item.parsed.x)
+            }
+            return ""
+          },
+        },
+      },
+    },
+    scales: {
+      x: {
+        type: "linear",
+        title: {
+          display: true,
+          text: "Time",
+          font: {
+            family: "sans-serif",
+          },
+        },
+        ticks: {
+          callback: (value) => formatTimeWithUnits(value as number),
+          font: {
+            family: "sans-serif",
+          },
+        },
+      },
+      y: {
+        title: {
+          display: true,
+          text: "Voltage",
+          font: {
+            family: "sans-serif",
+          },
+        },
+        ticks: {
+          font: {
+            family: "sans-serif",
+          },
+        },
+      },
+    },
+  }
+
+  return (
+    <div style={{ position: "relative", height: "300px", width: "100%" }}>
+      <Line options={options} data={chartData} />
+    </div>
+  )
+}

package/lib/components/SpiceSimulationIcon.tsx

@@ -0,0 +1,31 @@
+import { SpiceIcon } from "./SpiceIcon"
+import { zIndexMap } from "../utils/z-index-map"
+
+export const SpiceSimulationIcon = ({
+  onClick,
+}: {
+  onClick: () => void
+}) => {
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        position: "absolute",
+        top: "16px",
+        right: "56px",
+        backgroundColor: "#fff",
+        color: "#000",
+        padding: "8px",
+        borderRadius: "4px",
+        cursor: "pointer",
+        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+        display: "flex",
+        alignItems: "center",
+        gap: "4px",
+        zIndex: zIndexMap.spiceSimulationIcon,
+      }}
+    >
+      <SpiceIcon />
+    </div>
+  )
+}

package/lib/components/SpiceSimulationOverlay.tsx

@@ -0,0 +1,121 @@
+import { SpicePlot } from "./SpicePlot"
+import type { PlotPoint } from "../hooks/useSpiceSimulation"
+
+interface SpiceSimulationOverlayProps {
+  spiceString: string | null
+  onClose: () => void
+  plotData: PlotPoint[]
+  nodes: string[]
+  isLoading: boolean
+  error: string | null
+}
+
+export const SpiceSimulationOverlay = ({
+  spiceString,
+  onClose,
+  plotData,
+  nodes,
+  isLoading,
+  error,
+}: SpiceSimulationOverlayProps) => {
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1002,
+        fontFamily: "sans-serif",
+      }}
+    >
+      <div
+        style={{
+          backgroundColor: "white",
+          padding: "24px",
+          borderRadius: "12px",
+          width: "90%",
+          maxWidth: "900px",
+          boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "24px",
+            borderBottom: "1px solid #eee",
+            paddingBottom: "16px",
+          }}
+        >
+          <h2
+            style={{
+              margin: 0,
+              fontSize: "22px",
+              fontWeight: 600,
+              color: "#333",
+            }}
+          >
+            SPICE Simulation
+          </h2>
+          <button
+            onClick={onClose}
+            style={{
+              background: "none",
+              border: "none",
+              fontSize: "28px",
+              cursor: "pointer",
+              color: "#888",
+              padding: 0,
+              lineHeight: 1,
+            }}
+          >
+            &times;
+          </button>
+        </div>
+        <div>
+          <SpicePlot
+            plotData={plotData}
+            nodes={nodes}
+            isLoading={isLoading}
+            error={error}
+          />
+        </div>
+        <div style={{ marginTop: "24px" }}>
+          <h3
+            style={{
+              marginTop: 0,
+              marginBottom: "12px",
+              fontSize: "18px",
+              fontWeight: 600,
+              color: "#333",
+            }}
+          >
+            SPICE Netlist
+          </h3>
+          <pre
+            style={{
+              backgroundColor: "#fafafa",
+              padding: "16px",
+              borderRadius: "6px",
+              maxHeight: "150px",
+              overflowY: "auto",
+              border: "1px solid #eee",
+              color: "#333",
+              fontSize: "13px",
+              fontFamily: "monospace",
+            }}
+          >
+            {spiceString}
+          </pre>
+        </div>
+      </div>
+    </div>
+  )
+}

package/lib/hooks/useSpiceSimulation.ts

@@ -0,0 +1,161 @@
+import { useState, useEffect } from "react"
+import type * as EecircuitEngine from "../types/eecircuit-engine"
+// @ts-ignore
+import { getSpiceSimulationWorkerBlobUrl } from "../workers/spice-simulation.worker.blob.js"
+
+// Types from eecircuit-engine interface
+type RealDataType = {
+  name: string
+  type: string
+  values: number[]
+}
+type ComplexNumber = {
+  real: number
+  img: number
+}
+type ComplexDataType = {
+  name: string
+  type: string
+  values: ComplexNumber[]
+}
+type EecEngineResult =
+  | {
+      header: string
+      numVariables: number
+      variableNames: string[]
+      numPoints: number
+      dataType: "real"
+      data: RealDataType[]
+    }
+  | {
+      header: string
+      numVariables: number
+      variableNames: string[]
+      numPoints: number
+      dataType: "complex"
+      data: ComplexDataType[]
+    }
+
+export interface PlotPoint {
+  name: string // time or sweep variable
+  [key: string]: number | string
+}
+
+const parseEecEngineOutput = (
+  result: EecEngineResult,
+): { plotData: PlotPoint[]; nodes: string[] } => {
+  const columnData: Record<string, number[]> = {}
+
+  if (result.dataType === "real") {
+    result.data.forEach((col) => {
+      columnData[col.name] = col.values
+    })
+  } else if (result.dataType === "complex") {
+    result.data.forEach((col) => {
+      // For now, plot the real part of complex numbers
+      columnData[col.name] = col.values.map((v) => v.real)
+    })
+  } else {
+    throw new Error("Unsupported data type in simulation result")
+  }
+
+  const timeKey = Object.keys(columnData).find(
+    (k) => k.toLowerCase() === "time" || k.toLowerCase() === "frequency",
+  )
+  if (!timeKey) {
+    throw new Error("No time or frequency data in simulation result")
+  }
+  const timeValues = columnData[timeKey]
+  const probedVariables = Object.keys(columnData).filter((k) => k !== timeKey)
+  const plotableNodes = probedVariables.map((n) =>
+    n.replace(/v\(([^)]+)\)/i, "$1"),
+  )
+
+  const plotData: PlotPoint[] = timeValues.map((t: number, i: number) => {
+    const point: PlotPoint = { name: t.toExponential(2) }
+    probedVariables.forEach((variable, j) => {
+      point[plotableNodes[j]] = columnData[variable][i]
+    })
+    return point
+  })
+
+  return { plotData, nodes: plotableNodes }
+}
+
+type WorkerMessage =
+  | {
+      type: "result"
+      result: EecEngineResult
+    }
+  | { type: "error"; error: string }
+
+export const useSpiceSimulation = (spiceString: string | null) => {
+  const [plotData, setPlotData] = useState<PlotPoint[]>([])
+  const [nodes, setNodes] = useState<string[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!spiceString) {
+      setIsLoading(false)
+      setPlotData([])
+      setNodes([])
+      setError(null)
+      return
+    }
+    setIsLoading(true)
+    setError(null)
+    setPlotData([])
+    setNodes([])
+
+    let worker: Worker
+
+    // In development, Vite will handle the worker bundling.
+    // In production, we use a pre-built blob URL.
+    if (import.meta.env.DEV) {
+      worker = new Worker(
+        new URL("../workers/spice-simulation.worker.ts", import.meta.url),
+        { type: "module" },
+      )
+    } else {
+      const workerUrl = getSpiceSimulationWorkerBlobUrl()
+
+      if (!workerUrl) {
+        setError("Could not create SPICE simulation worker.")
+        setIsLoading(false)
+        return
+      }
+      worker = new Worker(workerUrl, { type: "module" })
+    }
+
+    worker.onmessage = (event: MessageEvent<WorkerMessage>) => {
+      if (event.data.type === "result") {
+        try {
+          const { plotData: parsedData, nodes: parsedNodes } =
+            parseEecEngineOutput(event.data.result)
+          setPlotData(parsedData)
+          setNodes(parsedNodes)
+        } catch (e: any) {
+          setError(e.message || "Failed to parse simulation result")
+          console.error(e)
+        }
+      } else if (event.data.type === "error") {
+        setError(event.data.error)
+      }
+      setIsLoading(false)
+    }
+
+    worker.onerror = (err) => {
+      setError(err.message)
+      setIsLoading(false)
+    }
+
+    worker.postMessage({ spiceString })
+
+    return () => {
+      worker.terminate()
+    }
+  }, [spiceString])
+
+  return { plotData, nodes, isLoading, error }
+}

package/lib/types/eecircuit-engine.d.ts

@@ -0,0 +1,147 @@
+export declare type ComplexDataType = {
+  name: string
+
+  type: string
+
+  values: ComplexNumber[]
+}
+
+export declare type ComplexNumber = {
+  real: number
+
+  img: number
+}
+
+/**
+
+ * Read output from spice
+
+ */
+
+export declare type RealDataType = {
+  name: string
+
+  type: string
+
+  values: RealNumber[]
+}
+
+export declare type RealNumber = number
+
+export declare type ResultType =
+  | {
+      header: string
+
+      numVariables: number
+
+      variableNames: string[]
+
+      numPoints: number
+
+      dataType: "real"
+
+      data: RealDataType[]
+    }
+  | {
+      header: string
+
+      numVariables: number
+
+      variableNames: string[]
+
+      numPoints: number
+
+      dataType: "complex"
+
+      data: ComplexDataType[]
+    }
+
+export declare class Simulation {
+  private pass
+
+  private commandList
+
+  private cmd
+
+  private dataRaw
+
+  private results
+
+  private output
+
+  private info
+
+  private initInfo
+
+  private error
+
+  private initialized
+
+  private netList
+
+  private initPromiseResolve
+
+  private runPromiseResolve
+
+  private getInput
+
+  /**
+
+     * Internal startup method that sets up the Module and simulation loop.
+
+     */
+
+  private startInternal
+
+  /**
+
+     * Public start method.
+
+     * Returns a promise that resolves when the simulation module is initialized.
+
+     */
+
+  start: () => Promise<void>
+
+  /**
+
+     * Triggers a simulation run and returns a promise that resolves with the results.
+
+     */
+
+  runSim: () => Promise<ResultType>
+
+  /**
+
+     * Waits for a new simulation trigger.
+
+     */
+
+  private waitForNextRun
+
+  /**
+
+     * Resolves the waiting promise to continue the simulation loop.
+
+     */
+
+  private continueRun
+
+  private outputEvent
+
+  setNetList: (input: string) => void
+
+  private setOutputEvent
+
+  getInfo: () => string
+
+  getInitInfo: () => string
+
+  getError: () => string[]
+
+  isInitialized: () => boolean
+
+  private log_debug
+}
+
+export {}