large led matrix test and fix for memoization (#115)

Author: seveibar

biome.json

@@ -8,7 +8,7 @@
     "indentStyle": "space"
   },
   "files": {
-    "ignore": ["cosmos-export", "dist", "package.json"]
+    "ignore": ["cosmos-export", "dist", "package.json", "*.circuit.json"]
   },
   "javascript": {
     "formatter": {
@@ -28,6 +28,9 @@
       "suspicious": {
         "noExplicitAny": "off"
       },
+      "correctness": {
+        "useExhaustiveDependencies": "off"
+      },
       "style": {
         "noNonNullAssertion": "off",
         "useNumberNamespace": "off",

package.json

@@ -35,6 +35,7 @@
     "@types/react": "^18.3.3",
     "circuit-json": "^0.0.128",
     "next": "^14.1.4",
+    "pixi.js": "^8.6.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-use": "^17.4.0",

src/PCBViewer.tsx

@@ -35,12 +35,13 @@ export const PCBViewer = ({
   editEvents: editEventsProp,
   onEditEventsChanged,
 }: Props) => {
-  soup ??= circuitJson
+  circuitJson ??= soup
   const {
     circuitJson: circuitJsonFromChildren,
     error: errorFromChildren,
     isLoading,
   } = useRenderedCircuit(children)
+  circuitJson ??= circuitJsonFromChildren ?? []
 
   const [ref, refDimensions] = useMeasure()
   const [transform, setTransformInternal] = useState(defaultTransform)
@@ -55,8 +56,6 @@ export const PCBViewer = ({
   let [editEvents, setEditEvents] = useState<EditEvent[]>([])
   editEvents = editEventsProp ?? editEvents
 
-  const stateElements = circuitJsonFromChildren ?? soup ?? []
-
   const resetTransform = () => {
     const elmBounds =
       refDimensions?.width > 0 ? refDimensions : { width: 500, height: 500 }
@@ -88,12 +87,12 @@ export const PCBViewer = ({
     }
   }, [children, refDimensions])
 
-  const pcbElmsPreEdit: AnyCircuitElement[] = (
-    circuitJson ??
-    soup ??
-    stateElements
-  ).filter(
-    (e: any) => e.type.startsWith("pcb_") || e.type.startsWith("source_"),
+  const pcbElmsPreEdit: AnyCircuitElement[] = useMemo(
+    () =>
+      circuitJson.filter(
+        (e: any) => e.type.startsWith("pcb_") || e.type.startsWith("source_"),
+      ),
+    [circuitJson],
   )
 
   const elements = useMemo(() => {

src/stories/repros/repro4-large-led-matrix/large-led-matrix.circuit.json

@@ -0,0 +1,19 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { PCBViewer } from "../../../PCBViewer"
+import circuitJson from "./large-led-matrix.circuit.json"
+
+export const Repro4LargeLedMatrix: React.FC = () => {
+  return (
+    <div style={{ backgroundColor: "black" }}>
+      <PCBViewer circuitJson={circuitJson as any} />
+    </div>
+  )
+}
+
+const meta: Meta<typeof Repro4LargeLedMatrix> = {
+  title: "Repros",
+  component: Repro4LargeLedMatrix,
+}
+
+export default meta