+
+ Style Analysis
+
+
+ Close
+
+
+ Running style analysis…
+ )} + {state.status === "error" && ( +Style analysis failed: {state.message}
+ )} + {state.status === "complete" && ( + <> ++ {state.artifacts.length === 0 + ? "No style issues found." + : `${state.artifacts.length} style ${state.artifacts.length === 1 ? "issue" : "issues"} found.`} +
+ {state.artifacts.map((artifact) => ( ++ {artifact.issueIndex + 1}.{" "} + {artifact.issue.lineItemType.replace( + /([a-z])([A-Z])/g, + "$1 $2", + )} + {artifact.schematicSheetId && ( + + Sheet: {artifact.schematicSheetId} + + )} +
+ StyleAnalysisArtifact[]
+}
+
+export const STYLE_ANALYZER_URL =
+ "https://jscdn.tscircuit.com/@tscircuit/circuit-json-schematic-placement-analysis/latest/dist/browser.js"
+
+export const styleAnalyzerLoader = {
+ async load(): Promise {
+ // Leave this URL import to the browser, including in downstream Vite/Webpack apps.
+ const analyzer = await import(
+ /* @vite-ignore */ /* webpackIgnore: true */ STYLE_ANALYZER_URL
+ )
+ if (typeof analyzer.createSchematicPlacementIssueArtifacts !== "function") {
+ throw new Error(
+ "The style analyzer module does not export its analysis function.",
+ )
+ }
+ return analyzer
+ },
+}
diff --git a/lib/utils/z-index-map.ts b/lib/utils/z-index-map.ts
index 51f211a..3ea498f 100644
--- a/lib/utils/z-index-map.ts
+++ b/lib/utils/z-index-map.ts
@@ -1,5 +1,6 @@
export const zIndexMap = {
contextMenu: 110,
+ styleAnalysis: 120,
viewMenu: 55,
viewMenuIcon: 48,
clickToInteractOverlay: 100,
diff --git a/package.json b/package.json
index 43582d1..8a471c9 100644
--- a/package.json
+++ b/package.json
@@ -35,13 +35,15 @@
"semver": "^7.7.2",
"tscircuit": "^0.0.2460",
"tsup": "^8.3.5",
- "vite": "^6.0.3"
+ "vite": "^6.0.3",
+ "@tscircuit/circuit-json-schematic-placement-analysis": "https://codeload.github.com/tscircuit/circuit-json-schematic-placement-analysis/tar.gz/refs/heads/main"
},
"peerDependencies": {
"typescript": "^5.0.0",
"tscircuit": "*"
},
"dependencies": {
+ "@radix-ui/react-dialog": "^1.1.23",
"@radix-ui/react-dropdown-menu": "^2.1.16",
"@tscircuit/circuit-json-util": "^0.0.108",
"circuit-json": "^0.0.479",
diff --git a/tests/schematic-context-menu.test.tsx b/tests/schematic-context-menu.test.tsx
index e5509c6..4593ad3 100644
--- a/tests/schematic-context-menu.test.tsx
+++ b/tests/schematic-context-menu.test.tsx
@@ -1,4 +1,13 @@
-import { expect, test } from "bun:test"
+import { afterAll, beforeAll, expect, spyOn, test } from "bun:test"
+import { styleAnalyzerLoader } from "../lib/utils/load-style-analyzer"
+
+let analyzerSpy: ReturnType
+beforeAll(() => {
+ analyzerSpy = spyOn(styleAnalyzerLoader, "load").mockImplementation(
+ () => import("@tscircuit/circuit-json-schematic-placement-analysis"),
+ )
+})
+afterAll(() => analyzerSpy.mockRestore())
import { JSDOM } from "jsdom"
import { createRef, useRef, useState } from "react"
import { act } from "react"
@@ -16,9 +25,13 @@ const installDom = () => {
Event: globalThis.Event,
CustomEvent: globalThis.CustomEvent,
HTMLElement: globalThis.HTMLElement,
+ HTMLInputElement: globalThis.HTMLInputElement,
MouseEvent: globalThis.MouseEvent,
MutationObserver: globalThis.MutationObserver,
Node: globalThis.Node,
+ NodeFilter: globalThis.NodeFilter,
+ requestAnimationFrame: globalThis.requestAnimationFrame,
+ cancelAnimationFrame: globalThis.cancelAnimationFrame,
ResizeObserver: globalThis.ResizeObserver,
getComputedStyle: globalThis.getComputedStyle,
}
@@ -52,9 +65,13 @@ const installDom = () => {
Event: dom.window.Event,
CustomEvent: dom.window.CustomEvent,
HTMLElement: dom.window.HTMLElement,
+ HTMLInputElement: dom.window.HTMLInputElement,
MouseEvent: dom.window.MouseEvent,
MutationObserver: dom.window.MutationObserver,
Node: dom.window.Node,
+ NodeFilter: dom.window.NodeFilter,
+ requestAnimationFrame: dom.window.requestAnimationFrame,
+ cancelAnimationFrame: dom.window.cancelAnimationFrame,
ResizeObserver: TestResizeObserver,
getComputedStyle: dom.window.getComputedStyle,
IS_REACT_ACT_ENVIRONMENT: true,
@@ -116,6 +133,7 @@ test("the context menu toggles schematic ports", async () => {
menuRef={createRef()}
menuPos={{ x: 0, y: 0 }}
onOpenChange={() => {}}
+ onRunStyleAnalysis={() => {}}
showPorts={showPorts}
onTogglePorts={setShowPorts}
showGroups={false}
@@ -340,3 +358,137 @@ test("the warnings menu toggles rendered callouts with mouse and keyboard", asyn
restore()
}
})
+
+test("Run Style Analysis opens real issue SVGs and can be rerun", async () => {
+ const { dom, restore } = installDom()
+ const reactRoot = createRoot(document.getElementById("root")!)
+ const { SchematicViewer } = await import("../lib/components/SchematicViewer")
+ const circuitJson = [
+ ...circuitJsonWithPort,
+ {
+ type: "source_component",
+ source_component_id: "source_component_2",
+ name: "R2",
+ ftype: "simple_resistor",
+ },
+ {
+ type: "schematic_component",
+ schematic_component_id: "schematic_component_2",
+ source_component_id: "source_component_2",
+ center: { x: 0.1, y: 0 },
+ size: { width: 1, height: 1 },
+ },
+ ]
+ const openAnalysis = async () => {
+ const component = document.querySelector(
+ '[data-schematic-component-id="schematic_component_1"]',
+ )!
+ await act(async () => {
+ for (const type of ["mousedown", "contextmenu"]) {
+ component.dispatchEvent(
+ new dom.window.MouseEvent(type, {
+ bubbles: true,
+ cancelable: true,
+ button: 2,
+ clientX: 100,
+ clientY: 100,
+ }),
+ )
+ }
+ })
+ const command = Array.from(
+ document.querySelectorAll('[role="menuitem"]'),
+ ).find((item) => item.textContent === "Run Style Analysis")!
+ expect(command).toBeDefined()
+ await act(async () =>
+ command.dispatchEvent(
+ new dom.window.MouseEvent("click", { bubbles: true }),
+ ),
+ )
+ for (
+ let i = 0;
+ i < 100 &&
+ document.querySelector('[role="status"]')?.textContent ===
+ "Running style analysis…";
+ i++
+ ) {
+ await act(
+ () =>
+ new Promise((resolve) => dom.window.setTimeout(resolve, 10)),
+ )
+ }
+ }
+ const closeAnalysis = async () => {
+ const close = Array.from(document.querySelectorAll("button")).find(
+ (button) => button.textContent === "Close",
+ )!
+ await act(async () => close.click())
+ expect(document.querySelector('[role="dialog"]')).toBeNull()
+ }
+ try {
+ await act(async () =>
+ reactRoot.render(
+ reactRoot.render(((resolve) => dom.window.setTimeout(resolve, 0))
+ restore()
+ }
+})
+
+test("style analysis reports CDN failures in a dismissible dialog", async () => {
+ const { dom, restore } = installDom()
+ const reactRoot = createRoot(document.getElementById("root")!)
+ const { StyleAnalysisDialog } = await import(
+ "../lib/components/StyleAnalysisDialog"
+ )
+ analyzerSpy.mockRejectedValueOnce(
+ new Error("Failed to load the analyzer from the CDN"),
+ )
+ const Harness = () => {
+ const [open, setOpen] = useState(true)
+ return open ? (
+ setOpen(false)}
+ />
+ ) : null
+ }
+ try {
+ await act(async () => reactRoot.render(((resolve) => dom.window.setTimeout(resolve, 10)),
+ )
+ }
+ expect(document.querySelector('[role="alert"]')?.textContent).toContain(
+ "Style analysis failed:",
+ )
+ await act(async () => document.querySelector("button")!.click())
+ expect(document.querySelector('[role="dialog"]')).toBeNull()
+ } finally {
+ await act(async () => reactRoot.unmount())
+ await new Promise((resolve) => dom.window.setTimeout(resolve, 0))
+ restore()
+ }
+})