@tscircuit/schematic-viewer 2.0.55 → 2.0.57

package/lib/components/SpicePlot.tsx

@@ -1,221 +0,0 @@
-import { useMemo } from "react"
-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,
-  hasRun,
-}: {
-  plotData: PlotPoint[]
-  nodes: string[]
-  isLoading: boolean
-  error: string | null
-  hasRun: boolean
-}) => {
-  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
-        style={{
-          height: "300px",
-          width: "100%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        Running simulation...
-      </div>
-    )
-  }
-
-  if (!hasRun) {
-    return (
-      <div
-        style={{
-          height: "300px",
-          width: "100%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        Click "Run" to start the 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 as number)
-            }
-            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: yAxisLabel,
-          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

@@ -1,32 +0,0 @@
-import { SpiceIcon } from "./SpiceIcon"
-import { zIndexMap } from "../utils/z-index-map"
-
-export const SpiceSimulationIcon = ({
-  onClick,
-}: {
-  onClick: () => void
-}) => {
-  return (
-    <div
-      onClick={onClick}
-      title="Run SPICE simulation"
-      style={{
-        position: "absolute",
-        top: "16px",
-        right: "112px",
-        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

@@ -1,250 +0,0 @@
-import { SpicePlot } from "./SpicePlot"
-import type { PlotPoint } from "../hooks/useSpiceSimulation"
-import { useEffect, useState } from "react"
-
-interface SpiceSimulationOverlayProps {
-  spiceString: string | null
-  onClose: () => void
-  plotData: PlotPoint[]
-  nodes: string[]
-  isLoading: boolean
-  error: string | null
-  simOptions: {
-    showVoltage: boolean
-    showCurrent: boolean
-    startTime: number
-    duration: number
-  }
-  onSimOptionsChange: (
-    options: SpiceSimulationOverlayProps["simOptions"],
-  ) => void
-  hasRun: boolean
-}
-
-export const SpiceSimulationOverlay = ({
-  spiceString,
-  onClose,
-  plotData,
-  nodes,
-  isLoading,
-  error,
-  simOptions,
-  onSimOptionsChange,
-  hasRun,
-}: 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={{
-        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={filteredNodes}
-            isLoading={isLoading}
-            error={error}
-            hasRun={hasRun}
-          />
-        </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",
-              }}
-            >
-              {hasRun ? "Rerun" : "Run"}
-            </button>
-          </div>
-        </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/components/ViewMenu.tsx

@@ -1,218 +0,0 @@
-import { useMemo } from "react"
-import { su } from "@tscircuit/soup-util"
-import type { CircuitJson } from "circuit-json"
-import { zIndexMap } from "../utils/z-index-map"
-import packageJson from "../../package.json"
-
-interface ViewMenuProps {
-  circuitJson: CircuitJson
-  circuitJsonKey: string
-  isVisible: boolean
-  onClose: () => void
-  showGroups: boolean
-  onToggleGroups: (show: boolean) => void
-  showGrid: boolean
-  onToggleGrid: (show: boolean) => void
-}
-
-export const ViewMenu = ({
-  circuitJson,
-  circuitJsonKey,
-  isVisible,
-  onClose,
-  showGroups,
-  onToggleGroups,
-  showGrid,
-  onToggleGrid,
-}: ViewMenuProps) => {
-  const hasGroups = useMemo(() => {
-    if (!circuitJson || circuitJson.length === 0) return false
-
-    try {
-      // Check if there are explicit groups
-      const sourceGroups = su(circuitJson).source_group?.list() || []
-      if (sourceGroups.length > 0) return true
-
-      // Check if we can create virtual groups by component type
-      const schematicComponents =
-        su(circuitJson).schematic_component?.list() || []
-      if (schematicComponents.length > 1) {
-        const componentTypes = new Set()
-        for (const comp of schematicComponents) {
-          const sourceComp = su(circuitJson).source_component.get(
-            comp.source_component_id!,
-          )
-          if (sourceComp?.ftype) {
-            componentTypes.add(sourceComp.ftype)
-          }
-        }
-        return componentTypes.size > 1 // Only show if there are multiple types
-      }
-
-      return false
-    } catch (error) {
-      console.error("Error checking for groups:", error)
-      return false
-    }
-  }, [circuitJsonKey])
-
-  if (!isVisible) return null
-
-  return (
-    <>
-      {/* Backdrop */}
-      <div
-        onClick={onClose}
-        onTouchEnd={(e) => {
-          e.preventDefault()
-          onClose()
-        }}
-        style={{
-          position: "absolute",
-          inset: 0,
-          backgroundColor: "transparent",
-          zIndex: zIndexMap.viewMenuBackdrop,
-        }}
-      />
-
-      {/* Menu */}
-      <div
-        style={{
-          position: "absolute",
-          top: "56px",
-          right: "16px",
-          backgroundColor: "#ffffff",
-          color: "#000000",
-          border: "1px solid #ccc",
-          borderRadius: "4px",
-          boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
-          minWidth: "200px",
-          zIndex: zIndexMap.viewMenu,
-        }}
-      >
-        {/* Groups Toggle Option */}
-        <div
-          onClick={() => {
-            if (hasGroups) {
-              onToggleGroups(!showGroups)
-            }
-          }}
-          onTouchEnd={(e) => {
-            e.preventDefault()
-            if (hasGroups) {
-              onToggleGroups(!showGroups)
-            }
-          }}
-          style={{
-            padding: "8px 12px",
-            cursor: hasGroups ? "pointer" : "not-allowed",
-            opacity: hasGroups ? 1 : 0.5,
-            fontSize: "13px",
-            color: "#000000",
-            fontFamily: "sans-serif",
-            display: "flex",
-            alignItems: "center",
-            gap: "8px",
-          }}
-          onMouseEnter={(e) => {
-            if (hasGroups) {
-              e.currentTarget.style.backgroundColor = "#f0f0f0"
-            }
-          }}
-          onMouseLeave={(e) => {
-            if (hasGroups) {
-              e.currentTarget.style.backgroundColor = "transparent"
-            }
-          }}
-        >
-          <div
-            style={{
-              width: "16px",
-              height: "16px",
-              border: "2px solid #000",
-              borderRadius: "2px",
-              backgroundColor: "transparent",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: "10px",
-              fontWeight: "bold",
-            }}
-          >
-            {showGroups && "✓"}
-          </div>
-          View Schematic Groups
-        </div>
-
-        {!hasGroups && (
-          <div
-            style={{
-              padding: "8px 12px",
-              fontSize: "11px",
-              color: "#666",
-              fontStyle: "italic",
-            }}
-          >
-            No groups found in this schematic
-          </div>
-        )}
-
-        {/* Grid Toggle Option */}
-        <div
-          onClick={() => onToggleGrid(!showGrid)}
-          onTouchEnd={(e) => {
-            e.preventDefault()
-            onToggleGrid(!showGrid)
-          }}
-          style={{
-            padding: "8px 12px",
-            cursor: "pointer",
-            fontSize: "13px",
-            color: "#000000",
-            fontFamily: "sans-serif",
-            display: "flex",
-            alignItems: "center",
-            gap: "8px",
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.backgroundColor = "#f0f0f0"
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.backgroundColor = "transparent"
-          }}
-        >
-          <div
-            style={{
-              width: "16px",
-              height: "16px",
-              border: "2px solid #000",
-              borderRadius: "2px",
-              backgroundColor: "transparent",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: "10px",
-              fontWeight: "bold",
-            }}
-          >
-            {showGrid && "✓"}
-          </div>
-          Show Grid
-        </div>
-
-        {/* Version Info */}
-        <div
-          style={{
-            padding: "4px 8px",
-            fontSize: "12px",
-            color: "#999",
-            borderTop: "1px solid #eee",
-            textAlign: "center",
-          }}
-        >
-          v{String(packageJson?.version)}
-        </div>
-      </div>
-    </>
-  )
-}