@tscircuit/schematic-viewer 2.0.30 → 2.0.31

package/lib/components/SchematicViewer.tsx

@@ -58,6 +58,12 @@ export const SchematicViewer = ({
     enableDebug()
   }
   const [showSpiceOverlay, setShowSpiceOverlay] = useState(false)
+  const [spiceSimOptions, setSpiceSimOptions] = useState({
+    showVoltage: true,
+    showCurrent: false,
+    startTime: 0, // in ms
+    duration: 20, // in ms
+  })
 
   const getCircuitHash = (circuitJson: CircuitJson) => {
     return `${circuitJson?.length || 0}_${(circuitJson as any)?.editCount || 0}`
@@ -71,12 +77,17 @@ export const SchematicViewer = ({
   const spiceString = useMemo(() => {
     if (!spiceSimulationEnabled) return null
     try {
-      return getSpiceFromCircuitJson(circuitJson)
+      return getSpiceFromCircuitJson(circuitJson, spiceSimOptions)
     } catch (e) {
       console.error("Failed to generate SPICE string", e)
       return null
     }
-  }, [circuitJsonKey, spiceSimulationEnabled])
+  }, [
+    circuitJsonKey,
+    spiceSimulationEnabled,
+    spiceSimOptions.startTime,
+    spiceSimOptions.duration,
+  ])
 
   const {
     plotData,
@@ -369,6 +380,8 @@ export const SchematicViewer = ({
           nodes={nodes}
           isLoading={isSpiceSimLoading}
           error={spiceSimError}
+          simOptions={spiceSimOptions}
+          onSimOptionsChange={setSpiceSimOptions}
         />
       )}
       {svgDiv}

package/lib/components/SpicePlot.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react"
 import {
   Chart as ChartJS,
   type ChartOptions,
@@ -61,6 +62,15 @@ export const SpicePlot = ({
   isLoading: boolean
   error: string | null
 }) => {
+  const yAxisLabel = useMemo(() => {
+    const hasVoltage = nodes.some((n) => n.toLowerCase().startsWith("v("))
+    const hasCurrent = nodes.some((n) => n.toLowerCase().startsWith("i("))
+    if (hasVoltage && hasCurrent) return "Value"
+    if (hasVoltage) return "Voltage (V)"
+    if (hasCurrent) return "Current (A)"
+    return "Value"
+  }, [nodes])
+
   if (isLoading) {
     return (
       <div
@@ -171,7 +181,7 @@ export const SpicePlot = ({
       y: {
         title: {
           display: true,
-          text: "Voltage",
+          text: yAxisLabel,
           font: {
             family: "sans-serif",
           },

package/lib/components/SpiceSimulationOverlay.tsx

@@ -1,5 +1,6 @@
 import { SpicePlot } from "./SpicePlot"
 import type { PlotPoint } from "../hooks/useSpiceSimulation"
+import { useEffect, useState } from "react"
 
 interface SpiceSimulationOverlayProps {
   spiceString: string | null
@@ -8,6 +9,15 @@ interface SpiceSimulationOverlayProps {
   nodes: string[]
   isLoading: boolean
   error: string | null
+  simOptions: {
+    showVoltage: boolean
+    showCurrent: boolean
+    startTime: number
+    duration: number
+  }
+  onSimOptionsChange: (
+    options: SpiceSimulationOverlayProps["simOptions"],
+  ) => void
 }
 
 export const SpiceSimulationOverlay = ({
@@ -17,7 +27,37 @@ export const SpiceSimulationOverlay = ({
   nodes,
   isLoading,
   error,
+  simOptions,
+  onSimOptionsChange,
 }: SpiceSimulationOverlayProps) => {
+  const [startTimeDraft, setStartTimeDraft] = useState(
+    String(simOptions.startTime),
+  )
+  const [durationDraft, setDurationDraft] = useState(
+    String(simOptions.duration),
+  )
+
+  useEffect(() => {
+    setStartTimeDraft(String(simOptions.startTime))
+    setDurationDraft(String(simOptions.duration))
+  }, [simOptions.startTime, simOptions.duration])
+
+  const handleRerun = () => {
+    onSimOptionsChange({
+      ...simOptions,
+      startTime: Number(startTimeDraft),
+      duration: Number(durationDraft),
+    })
+  }
+
+  const filteredNodes = nodes.filter((node) => {
+    const isVoltage = node.toLowerCase().startsWith("v(")
+    const isCurrent = node.toLowerCase().startsWith("i(")
+    if (simOptions.showVoltage && isVoltage) return true
+    if (simOptions.showCurrent && isCurrent) return true
+    return false
+  })
+
   return (
     <div
       style={{
@@ -82,11 +122,97 @@ export const SpiceSimulationOverlay = ({
         <div>
           <SpicePlot
             plotData={plotData}
-            nodes={nodes}
+            nodes={filteredNodes}
             isLoading={isLoading}
             error={error}
           />
         </div>
+        <div
+          style={{
+            marginTop: "16px",
+            padding: "12px",
+            backgroundColor: "#f7f7f7",
+            borderRadius: "6px",
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "24px",
+            alignItems: "center",
+            fontSize: "14px",
+          }}
+        >
+          <div style={{ display: "flex", gap: "16px" }}>
+            <label
+              style={{ display: "flex", alignItems: "center", gap: "6px" }}
+            >
+              <input
+                type="checkbox"
+                checked={simOptions.showVoltage}
+                onChange={(e) =>
+                  onSimOptionsChange({
+                    ...simOptions,
+                    showVoltage: e.target.checked,
+                  })
+                }
+              />
+              Voltage
+            </label>
+            <label
+              style={{ display: "flex", alignItems: "center", gap: "6px" }}
+            >
+              <input
+                type="checkbox"
+                checked={simOptions.showCurrent}
+                onChange={(e) =>
+                  onSimOptionsChange({
+                    ...simOptions,
+                    showCurrent: e.target.checked,
+                  })
+                }
+              />
+              Current
+            </label>
+          </div>
+          <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
+            <label htmlFor="startTime">Start Time (ms):</label>
+            <input
+              id="startTime"
+              type="number"
+              value={startTimeDraft}
+              onChange={(e) => setStartTimeDraft(e.target.value)}
+              style={{
+                width: "80px",
+                padding: "4px 8px",
+                borderRadius: "4px",
+                border: "1px solid #ccc",
+              }}
+            />
+            <label htmlFor="duration">Duration (ms):</label>
+            <input
+              id="duration"
+              type="number"
+              value={durationDraft}
+              onChange={(e) => setDurationDraft(e.target.value)}
+              style={{
+                width: "80px",
+                padding: "4px 8px",
+                borderRadius: "4px",
+                border: "1px solid #ccc",
+              }}
+            />
+            <button
+              onClick={handleRerun}
+              style={{
+                padding: "4px 12px",
+                borderRadius: "4px",
+                border: "1px solid #ccc",
+                backgroundColor: "#f0f0f0",
+                cursor: "pointer",
+              }}
+            >
+              Rerun
+            </button>
+          </div>
+        </div>
         <div style={{ marginTop: "24px" }}>
           <h3
             style={{

package/lib/hooks/useSpiceSimulation.ts

@@ -67,14 +67,12 @@ const parseEecEngineOutput = (
   }
   const timeValues = columnData[timeKey]
   const probedVariables = Object.keys(columnData).filter((k) => k !== timeKey)
-  const plotableNodes = probedVariables.map((n) =>
-    n.replace(/v\(([^)]+)\)/i, "$1"),
-  )
+  const plotableNodes = probedVariables
 
   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]
+    probedVariables.forEach((variable) => {
+      point[variable] = columnData[variable][i]
     })
     return point
   })

package/lib/utils/spice-utils.ts

@@ -1,7 +1,33 @@
 import { circuitJsonToSpice } from "circuit-json-to-spice"
 import type { CircuitJson } from "circuit-json"
 
-export const getSpiceFromCircuitJson = (circuitJson: CircuitJson): string => {
+export interface SpiceSimOptions {
+  showVoltage: boolean
+  showCurrent: boolean
+  startTime: number // in ms
+  duration: number // in ms
+}
+
+const formatSimTime = (seconds: number): string => {
+  if (seconds === 0) return "0"
+  const absSeconds = Math.abs(seconds)
+
+  const precision = (v: number) => v.toPrecision(4)
+
+  if (absSeconds >= 1) return precision(seconds)
+  if (absSeconds >= 1e-3) return `${precision(seconds * 1e3)}m`
+  if (absSeconds >= 1e-6) return `${precision(seconds * 1e6)}u`
+  if (absSeconds >= 1e-9) return `${precision(seconds * 1e9)}n`
+  if (absSeconds >= 1e-12) return `${precision(seconds * 1e12)}p`
+  if (absSeconds >= 1e-15) return `${precision(seconds * 1e15)}f`
+
+  return seconds.toExponential(3)
+}
+
+export const getSpiceFromCircuitJson = (
+  circuitJson: CircuitJson,
+  options?: Partial<SpiceSimOptions>,
+): string => {
   const spiceNetlist = circuitJsonToSpice(circuitJson as any)
   const baseSpiceString = spiceNetlist.toSpiceString()
 
@@ -12,16 +38,22 @@ export const getSpiceFromCircuitJson = (circuitJson: CircuitJson): string => {
 
   const allNodes = new Set<string>()
   const capacitorNodes = new Set<string>()
+  const componentNamesToProbeCurrent = new Set<string>()
 
   for (const line of componentLines) {
     const parts = line.trim().split(/\s+/)
     if (parts.length < 3) continue
 
-    const componentType = parts[0][0].toUpperCase()
+    const componentName = parts[0]
+    const componentType = componentName[0].toUpperCase()
     let nodesOnLine: string[] = []
 
     if (["R", "C", "L", "V", "I", "D"].includes(componentType)) {
       nodesOnLine = parts.slice(1, 3)
+      // Only probe current on voltage sources
+      if (componentType === "V") {
+        componentNamesToProbeCurrent.add(componentName)
+      }
     } else if (componentType === "Q" && parts.length >= 4) {
       // BJT
       nodesOnLine = parts.slice(1, 4)
@@ -49,11 +81,26 @@ export const getSpiceFromCircuitJson = (circuitJson: CircuitJson): string => {
 
   const icLines = Array.from(capacitorNodes).map((node) => `.ic V(${node})=0`)
 
-  const probeNodes = Array.from(allNodes).map((node) => `V(${node})`)
-  const probeLine =
-    probeNodes.length > 0 ? `.probe ${probeNodes.join(" ")}` : ""
+  const probes: string[] = []
+  const probeVoltages = Array.from(allNodes).map((node) => `V(${node})`)
+  probes.push(...probeVoltages)
+  const probeCurrents = Array.from(componentNamesToProbeCurrent).map(
+    (name) => `I(${name})`,
+  )
+  probes.push(...probeCurrents)
+
+  const probeLine = probes.length > 0 ? `.probe ${probes.join(" ")}` : ""
+
+  const tstart_ms = options?.startTime ?? 0
+  const duration_ms = options?.duration ?? 20
+  const tstart = tstart_ms * 1e-3 // s
+  const duration = duration_ms * 1e-3 // s
 
-  const tranLine = ".tran 0.1ms 50ms UIC"
+  const tstop = tstart + duration
+  const tstep = duration / 50
+  const tranLine = `.tran ${formatSimTime(tstep)} ${formatSimTime(
+    tstop,
+  )} ${formatSimTime(tstart)} UIC`
 
   const endStatement = ".end"
   const originalLines = baseSpiceString.split("\n")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "2.0.30",
+  "version": "2.0.31",
   "main": "dist/index.js",
   "type": "module",
   "scripts": {
@@ -15,18 +15,19 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "tscircuit": "^0.0.580",
     "@types/bun": "latest",
     "@types/debug": "^4.1.12",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
     "@types/recharts": "^2.0.1",
     "@vitejs/plugin-react": "^4.3.4",
-    "react": "18",
+    "react": "^19.1.0",
     "react-cosmos": "^6.2.1",
     "react-cosmos-plugin-vite": "^6.2.0",
-    "react-dom": "18",
+    "react-dom": "^19.1.0",
     "react-reconciler": "^0.31.0",
+    "semver": "^7.7.2",
+    "tscircuit": "^0.0.611",
     "tsup": "^8.3.5",
     "vite": "^6.0.3"
   },
@@ -36,7 +37,7 @@
   },
   "dependencies": {
     "chart.js": "^4.5.0",
-    "circuit-json-to-spice": "^0.0.9",
+    "circuit-json-to-spice": "^0.0.10",
     "debug": "^4.4.0",
     "performance-now": "^2.1.0",
     "react-chartjs-2": "^5.3.0",