Debug | Guides

Mafs provides several utilities for debugging your visualizations. Perhaps the most useful utility the debug prop on Mafs. Adding this prop will force a larger SVG viewBox and add a red border around the actual viewBox.

Debug

import * as React from "react"
import { Mafs, Coordinates, Plot } from "mafs"

function Example() {
  const [debug, setDebug] = React.useState(true)

  return (
    <div>
      {/* Set the `debug` prop on Mafs to get a bird's eye view. */}
      <Mafs debug={debug}>
        <Coordinates.Cartesian />
        <Plot.OfX y={(x) => Math.sin(x * Math.PI)} />
      </Mafs>
      <label className="p-4 bg-black flex gap-2 pointer">
        <input
          type="checkbox"
          checked={debug}
          onChange={(e) => setDebug(e.target.checked)}
        />
        Debug
      </label>
    </div>
  )
}

In the above example, you can gain an insight into how Mafs lazy-loads the coordinate grid and the function being visualized. In the bottom left corner, there is also some debug information pinned to the viewport. More on that below.

Other utilities

Mafs also provides some debug components under the Debug namespace.

import { Debug } from "mafs"

Transform widget

This is a little widget that allows you to test applying transforms (translation, rotation, and scale) to components by wrapping them in Debug.TransformWidget. It's mainly useful when building new custom components.

import { Mafs, Coordinates, Debug } from "mafs"
import * as React from "react"
function Example() {
  return (
    <Mafs viewBox={{ y: [-1, 1], x: [-1, 1] }}>
      <Coordinates.Cartesian />

      <Debug.TransformWidget>
        <PizzaSlice />
      </Debug.TransformWidget>
    </Mafs>
  )
}

function PizzaSlice() {
  const maskId = `pizza-slice-mask-${React.useId()}`

  return (
    <g
      style={{
        transform: `var(--mafs-view-transform) var(--mafs-user-transform)`,
      }}
    >
      <defs>
        <mask id={maskId}>
          <polyline points={`0,0 ${1},${1 / 2} ${1},${-1 / 2}`} fill="white" />
        </mask>
      </defs>

      <g mask={`url(#${maskId})`}>
        <circle cx={0} cy={0} r={1} fill="brown" />
        <circle cx={0} cy={0} r={1 * 0.85} fill="yellow" />
        <circle cx={0.4} cy={1 * 0.1} r={0.11} fill="red" />
        <circle cx={0.2} cy={-1 * 0.1} r={0.09} fill="red" />
        <circle cx={0.5} cy={-1 * 0.15} r={0.1} fill="red" />
        <circle cx={0.7} cy={1 * 0.05} r={0.11} fill="red" />
        <circle cx={0.65} cy={1 * 0.35} r={0.1} fill="red" />
        <circle cx={0.65} cy={-1 * 0.37} r={0.08} fill="red" />
      </g>
    </g>
  )
}

Props

<Debug.TransformWidget>...</Debug.TransformWidget>

View on GitHub

Name	Description	Default
`children^*`	The components to transform `ReactNode`	—

Viewport info

This component displays Mafs' understanding of the world space that's in view, showing both the minimum and maximum x and y values, as well as what panes are visible according to the pane context.

import { Mafs, Coordinates, Debug } from "mafs"

function Example() {
  return (
    <Mafs viewBox={{ x: [-1, 1], y: [-1, 1] }}>
      <Coordinates.Cartesian />
      <Debug.ViewportInfo />
    </Mafs>
  )
}

Props

<Debug.ViewportInfo ... />

View on GitHub

Name	Description	Default
`precision`	The number of decimal places to which to round the displayed values. `number`	`3`