T
tscircuit•6mo ago
Seve

unfortunately this one is in dark mode,

unfortunately this one is in dark mode, but the arrows are inline and to the left of the text, the arrow box doesn't have an outline etc.
No description
34 Replies
Seve
SeveOP•6mo ago
@Abse I asked V0 to create it, here was the result, i think the code is mostly usable as long as you put the arrows above the red box (not inside it) 
"use client"

import { ChevronLeft, ChevronRight } from "lucide-react"

export default function ErrorComponent() {
  return (
    <div className="w-full max-w-md mx-auto bg-white border border-gray-200 rounded-md shadow-sm overflow-hidden">
      <div className="p-4">
        <div className="flex items-center gap-2 mb-4 text-sm text-gray-600">
          <button className="p-1 hover:bg-gray-100 rounded-full transition-colors">
            <ChevronLeft className="h-4 w-4 text-red-500" />
          </button>
          <button className="p-1 hover:bg-gray-100 rounded-full transition-colors">
            <ChevronRight className="h-4 w-4 text-red-500" />
          </button>
          <span>1 of 1 error</span>
        </div>

        <div className="py-2">
          <h2 className="text-2xl font-bold text-gray-900">Unhandled Runtime Error</h2>
        </div>
      </div>
    </div>
  )
}
"use client"

import { ChevronLeft, ChevronRight } from "lucide-react"

export default function ErrorComponent() {
  return (
    <div className="w-full max-w-md mx-auto bg-white border border-gray-200 rounded-md shadow-sm overflow-hidden">
      <div className="p-4">
        <div className="flex items-center gap-2 mb-4 text-sm text-gray-600">
          <button className="p-1 hover:bg-gray-100 rounded-full transition-colors">
            <ChevronLeft className="h-4 w-4 text-red-500" />
          </button>
          <button className="p-1 hover:bg-gray-100 rounded-full transition-colors">
            <ChevronRight className="h-4 w-4 text-red-500" />
          </button>
          <span>1 of 1 error</span>
        </div>

        <div className="py-2">
          <h2 className="text-2xl font-bold text-gray-900">Unhandled Runtime Error</h2>
        </div>
      </div>
    </div>
  )
}
No description
Abse
Abse•6mo ago
@Seve
No description
Abse
Abse•6mo ago
Seve
SeveOP•6mo ago
Can you remove the gray background? Same as v0 Also lets not change the error box at all, just add the pagination on top of it
Abse
Abse•6mo ago
Ok
Abse
Abse•6mo ago
Seve
SeveOP•6mo ago
Looks good!
Abse
Abse•6mo ago
Abse
Abse•6mo ago
can you review it
Seve
SeveOP•6mo ago
Done. Youre close but the errorMessages pattern definitely isnt the right approach. You might want to start from a clean branch. You should construct that error list inside CircuitJsonPreview, and the tab should only change when errorMessage changes, otherwise autorouter errors will cause the tab to change to the error tab on every run It is very close though
Abse
Abse•6mo ago
Abse
Abse•6mo ago
Sorry for the delay — I was involved in a car accident and had to sort things out.
Abse
Abse•6mo ago
Seve
SeveOP•6mo ago
Sorry to hear that, hope you’re ok!!!!
Abse
Abse•6mo ago
Abse
Abse•6mo ago
Seve
SeveOP•6mo ago
Looks like your reaolving some of my comments without fixing? Not sure whats going on there but i would resolve after fixing not before
Abse
Abse•6mo ago
which ones ?
Seve
SeveOP•6mo ago
errorList and combined errors I dont like constructing variants of the same type, so when we have a CircuitJsonError we shouldnt need to transform it
Abse
Abse•6mo ago
I removed combined errors if I recal errorList has the circuitJson errors only now I think Im bad with naming tbh
Seve
SeveOP•6mo ago
Yea i think the naming is throwing me off sry
Seve
SeveOP•6mo ago
No description
Abse
Abse•6mo ago
I need an Ai trained for naming lol
Seve
SeveOP•6mo ago
For your “error” var, that should be activeError For your “combined”, that should not be a variable, but if you wanted it to be then “errorTextToCopy”
Abse
Abse•6mo ago
got you
Seve
SeveOP•6mo ago
For this part, the confusing thing is you’re creating a new type for representing errors and also using errorList to refer to it. You can either 1) call the memoized value circuitJsonErrors, and make sure it has the exact type of the circuit JSON errors (just filter the circuit json) or… 2) name the var to make the type less ambiguous. This is worse than 1 because the type isnt needed. But you could call it formattedCircuitJsonErrors for example
No description
Abse
Abse•6mo ago
is this ok for filtering 
  const circuitJsonErrors = useMemo(() => {
    if (!circuitJson) return null;
  
    const extractedErrors = circuitJson.filter((e) => e && 'error_type' in e);
  
    return extractedErrors.length > 0 ? extractedErrors : null;
  }, [circuitJson]);
  
  const circuitJsonErrors = useMemo(() => {
    if (!circuitJson) return null;
  
    const extractedErrors = circuitJson.filter((e) => e && 'error_type' in e);
  
    return extractedErrors.length > 0 ? extractedErrors : null;
  }, [circuitJson]);
?
Seve
SeveOP•6mo ago
yep! well it's a bit weird you're returning null tbh when the length is 0 i would just return a zero length array
Abse
Abse•6mo ago
@Seve hey Im having an issue with types , so my issue is that I filtered the circuitJson in CircuitJsonPreview.tsx but Im having trouble to use the type in ErrorTabContent.tsx I exported the type like this and it is working but Im not sure this is the right approach, can I get an advise about it. CircuitJsonPreview.tsx 
function getCircuitJsonErrors(circuitJson: CircuitJson| null) {
  if (!circuitJson) return null;
  return circuitJson.filter((e) => e && "error_type" in e);
}

export type CircuitJsonErrors = ReturnType<typeof getCircuitJsonErrors>;

export const CircuitJsonPreview = ({


  const circuitJsonErrors = useMemo(
    () => getCircuitJsonErrors(circuitJson),
    [circuitJson]
  );
})
function getCircuitJsonErrors(circuitJson: CircuitJson| null) {
  if (!circuitJson) return null;
  return circuitJson.filter((e) => e && "error_type" in e);
}

export type CircuitJsonErrors = ReturnType<typeof getCircuitJsonErrors>;

export const CircuitJsonPreview = ({


  const circuitJsonErrors = useMemo(
    () => getCircuitJsonErrors(circuitJson),
    [circuitJson]
  );
})
ErrorTabContent.tsx 
import type { CircuitJsonErrors } from "../../components/CircuitJsonPreview/CircuitJsonPreview"

export const ErrorTabContent = ({
  code,
  autoroutingLog,
  isStreaming,
  circuitJsonErrors,
  onReportAutoroutingLog,
  errorMessage,
}: {
  code?: string
  autoroutingLog?: Record<string, { simpleRouteJson: any }>
  isStreaming?: boolean
  circuitJsonErrors: CircuitJsonErrors | null
  errorMessage?: string | null
  onReportAutoroutingLog?: (
    name: string,
    data: { simpleRouteJson: any },
  ) => void
})
import type { CircuitJsonErrors } from "../../components/CircuitJsonPreview/CircuitJsonPreview"

export const ErrorTabContent = ({
  code,
  autoroutingLog,
  isStreaming,
  circuitJsonErrors,
  onReportAutoroutingLog,
  errorMessage,
}: {
  code?: string
  autoroutingLog?: Record<string, { simpleRouteJson: any }>
  isStreaming?: boolean
  circuitJsonErrors: CircuitJsonErrors | null
  errorMessage?: string | null
  onReportAutoroutingLog?: (
    name: string,
    data: { simpleRouteJson: any },
  ) => void
})
is this right ?
Seve
SeveOP•6mo ago
yea it's not really the right approach, you should import CircuitJsonError from circuit-json, if it's not exported there, you need to create the export export type CircuitJsonError = PcbTraceError | ...
Abse
Abse•6mo ago
I will do that. @Seve for the trace hint issue I found that the db in Group.ts does not have pcb_trace_hint in it while when I get the circuitJson from the test circuit.getCircuitJson() it does , do you know why? , also 
  doInitialCreateTraceHintsFromProps(): void {
    const { _parsedProps: props } = this
    const { db } = this.root!

    const groupProps = props as SubcircuitGroupProps

    if (!this.isSubcircuit) return

    const manualTraceHints = groupProps.layout?.manual_trace_hints

    if (!manualTraceHints) return

    for (const manualTraceHint of manualTraceHints) {
      this.add(
        new TraceHint({
          for: manualTraceHint.pcb_port_selector,
          offsets: manualTraceHint.offsets,
        }),
      )
    }
  }
  doInitialCreateTraceHintsFromProps(): void {
    const { _parsedProps: props } = this
    const { db } = this.root!

    const groupProps = props as SubcircuitGroupProps

    if (!this.isSubcircuit) return

    const manualTraceHints = groupProps.layout?.manual_trace_hints

    if (!manualTraceHints) return

    for (const manualTraceHint of manualTraceHints) {
      this.add(
        new TraceHint({
          for: manualTraceHint.pcb_port_selector,
          offsets: manualTraceHint.offsets,
        }),
      )
    }
  }
_parsedProps only have children and autorouter (no layout.manual_trace_hints), any idea what is the cause ?
Seve
SeveOP•6mo ago
Hmm not sure but definitely something we need to build more testing around
Abse
Abse•6mo ago
@Seve 
  doInitialCreateTraceHintsFromProps(): void {
    const { _parsedProps: props } = this
    const { db } = this.root!

    const groupProps = props as SubcircuitGroupProps

    if (!this.isSubcircuit) return

    const manualTraceHints = groupProps.children.filter(
      (child:any) => child.type === "tracehint",
    )
    //console.log(JSON.stringify(groupProps, null, 2))
    if (!manualTraceHints) return

  for (const manualTraceHint of manualTraceHints) {
    db.pcb_trace_hint.insert({
      pcb_component_id: this.pcb_component_id!,
      pcb_port_id: manualTraceHint.props.for,
      route:[ manualTraceHint.props.offset],
    })
  }
}
  doInitialCreateTraceHintsFromProps(): void {
    const { _parsedProps: props } = this
    const { db } = this.root!

    const groupProps = props as SubcircuitGroupProps

    if (!this.isSubcircuit) return

    const manualTraceHints = groupProps.children.filter(
      (child:any) => child.type === "tracehint",
    )
    //console.log(JSON.stringify(groupProps, null, 2))
    if (!manualTraceHints) return

  for (const manualTraceHint of manualTraceHints) {
    db.pcb_trace_hint.insert({
      pcb_component_id: this.pcb_component_id!,
      pcb_port_id: manualTraceHint.props.for,
      route:[ manualTraceHint.props.offset],
    })
  }
}
when using db.pcb_trace_hint.insert we get the trace hint inside the db before calling getSimpleRouteJsonFromCircuitJson while when using 
 this.add(
        new TraceHint({
          for: manualTraceHint.pcb_port_selector,
          offsets: manualTraceHint.offsets,
        }),
      )
 this.add(
        new TraceHint({
          for: manualTraceHint.pcb_port_selector,
          offsets: manualTraceHint.offsets,
        }),
      )
the trace hint is generated after the getSimpleRouteJsonFromCircuitJson
Seve
SeveOP•6mo ago
Ahh yea we may need to move a render phase around or something

Did you find this page helpful?