Zoo Modeling App

live at app.zoo.dev

A CAD application from the future, brought to you by the Zoo team.

Modeling App is our take on what a modern modelling experience can be. It is applying several lessons learned in the decades since most major CAD tools came into existence:

• All artifacts—including parts and assemblies—should be represented as human-readable code. At the end of the day, your CAD project should be "plain text"
  • This makes version control—which is a solved problem in software engineering—trivial for CAD
• All GUI (or point-and-click) interactions should be actions performed on this code representation under the hood
  • This unlocks a hybrid approach to modeling. Whether you point-and-click as you always have or you write your own KCL code, you are performing the same action in Modeling App
• Everything graphics has to be built for the GPU
  • Most CAD applications have had to retrofit support for GPUs, but our geometry engine is made for GPUs (primarily Nvidia's Vulkan), getting the order of magnitude rendering performance boost with it
• Make the resource-intensive pieces of an application auto-scaling
  • One of the bottlenecks of today's hardware design tools is that they all rely on the local machine's resources to do the hardest parts, which include geometry rendering and analysis. Our geometry engine parallelizes rendering and just sends video frames back to the app (seriously, inspect source, it's just a <video> element), and our API will offload analysis as we build it in

We are excited about what a small team of people could build in a short time with our API. We welcome you to try our API, build your own applications, or contribute to ours!

Modeling App is a hybrid user interface for CAD modeling. You can point-and-click to design parts (and soon assemblies), but everything you make is really just kcl code under the hood. All of your CAD models can be checked into source control such as GitHub and responsibly versioned, rolled back, and more.

The 3D view in Modeling App is just a video stream from our hosted geometry engine. The app sends new modeling commands to the engine via WebSockets, which returns back video frames of the view within the engine.

Tools

• UI
  • React
  • Headless UI
  • TailwindCSS
  • XState
• Networking
  • WebSockets (via KittyCAD TS client)
• Code Editor
  • CodeMirror
  • Custom WASM LSP Server
• Modeling
  • KittyCAD TypeScript client

Original demo video

Original demo slides

Get started

We recommend downloading the latest application binary from our Releases page. If you don't see your platform or architecture supported there, please file an issue.

Running a development build

First, install Rust via rustup. This project uses a lot of Rust compiled to WASM within it. We always use the latest stable version of Rust, so you may need to run rustup update stable. Then, run:

yarn install

followed by:

yarn build:wasm-dev

or if you have the gh cli installed

./get-latest-wasm-bundle.sh # this will download the latest main wasm bundle

That will build the WASM binary and put in the public dir (though gitignored)

finally, to run the web app only, run:

yarn start

If you're not an KittyCAD employee you won't be able to access the dev environment, you should copy everything from .env.production to .env.development to make it point to production instead, then when you navigate to localhost:3000 the easiest way to sign in is to paste localStorage.setItem('TOKEN_PERSIST_KEY', "your-token-from-https://zoo.dev/account/api-tokens") replacing the with a real token from https://zoo.dev/account/api-tokens ofcourse, then navigate to localhost:3000 again. Note that navigating to localhost:3000/signin removes your token so you will need to set the token again.

Development environment variables

The Copilot LSP plugin in the editor requires a Zoo API token to run. In production, we authenticate this with a token via cookie in the browser and device auth token in the desktop environment, but this token is inaccessible in the dev browser version because the cookie is considered "cross-site" (from localhost to dev.zoo.dev). There is an optional environment variable called VITE_KC_DEV_TOKEN that you can populate with a dev token in a .env.development.local file to not check it into Git, which will use that token instead of other methods for the LSP service.

Developing in Chrome

Chrome is in the process of rolling out a new default which blocks Third-Party Cookies. If you're having trouble logging into the modeling-app, you may need to enable third-party cookies. You can enable third-party cookies by clicking on the eye with a slash through it in the URL bar, and clicking on "Enable Third-Party Cookies".

Running tests

First, start the dev server following "Running a development build" above.

Then in another terminal tab, run:

yarn test

Which will run our suite of Vitest unit and React Testing Library E2E tests, in interactive mode by default.

For running the rust (not tauri rust though) only, you can

cd src/wasm-lib
cargo test

Tauri

To spin up up tauri dev, yarn install and yarn build:wasm-dev need to have been done before hand then

yarn tauri dev

Will spin up the web app before opening up the tauri dev desktop app. Note that it's probably a good idea to close the browser tab that gets opened since at the time of writing they can conflict.

The dev instance automatically opens up the browser devtools which can be disabled by commenting it out

To build, run yarn tauri build, or yarn tauri build --debug to keep access to the devtools.

Note that these became separate apps on Macos, so make sure you open the right one after a build 😉

Before submitting a PR

Before you submit a contribution PR to this repo, please ensure that:

• There is a corresponding issue for the changes you want to make, so that discussion of approach can be had before work begins.
• You have separated out refactoring commits from feature commits as much as possible
• You have run all of the following commands locally:
  • yarn fmt
  • yarn tsc
  • yarn test
  • Here they are all together: yarn fmt && yarn tsc && yarn test

Release a new version

1. Bump the versions in the .json files by creating a Cut release v{x}.{y}.{z} PR, committing the changes from

VERSION=x.y.z yarn run bump-jsons

Alternatively you can try the experimental make-release.sh bash script that will create the branch with the updated json files for you. run ./make-release.sh for a patch update run ./make-release.sh "minor" for minor run ./make-release.sh "major" for major

The PR may serve as a place to discuss the human-readable changelog and extra QA. A quick way of getting PR's merged since the last bump is to use this PR filter, open up the browser console and paste in the following

console.log(
  '- ' +
    Array.from(
      document.querySelectorAll('[data-hovercard-type="pull_request"]')
    ).map((a) => `[${a.innerText}](${a.href})`).join(`
- `)
)

grab the md list and delete any that are older than the last bump

2. Merge the PR

3. Create a new release and tag pointing to the bump version commit using semantic versioning v{x}.{y}.{z}

4. A new Action kicks in at https://github.com/KittyCAD/modeling-app/actions, uploading artifacts to the release

Fuzzing the parser

Make sure you install cargo fuzz:

$ cargo install cargo-fuzz

$ cd src/wasm-lib/kcl

# list the fuzz targets
$ cargo fuzz list

# run the parser fuzzer
$ cargo +nightly fuzz run parser

For more information on fuzzing you can check out this guide.

Playwright

First time running plawright locally, you'll need to add the secrets file

touch ./e2e/playwright/playwright-secrets.env
printf 'token="your-token"\nsnapshottoken="your-snapshot-token"' > ./e2e/playwright/playwright-secrets.env

then replace "your-token" with a dev token from dev.zoo.dev/account/api-tokens

then: run playwright

yarn playwright test

run a specific test suite

yarn playwright test src/e2e-tests/example.spec.ts

run a specific test change the test from test('... to test.only('... (note if you commit this, the tests will instantly fail without running any of the tests)

run headed

yarn playwright test --headed

run with step through debugger

PWDEBUG=1 yarn playwright test

However, if you want a debugger I recommend using VSCode and the playwright extension, as the above command is a cruder debugger that steps into every function call which is annoying. With the extension you can set a breakpoint after waitForDefaultPlanesVisibilityChange in order to skip app loading, then the vscode debugger's "step over" is much better for being able to stay at the right level of abstraction as you debug the code.

If you want to limit to a single browser use --project="webkit" or firefox, Google Chrome Or comment out browsers in playwright.config.ts.

note chromium has encoder compat issues which is why were testing against the branded 'Google Chrome'

You may consider using the VSCode extension, it's useful for running individual threads, but some some reason the "record a test" is locked to chromium with we can't use. A work around is to us the CI yarn playwright codegen -b wk --load-storage ./store localhost:3000

Where ./store should look like this

{
  "cookies": [],
  "origins": [
    {
      "origin": "http://localhost:3000",
      "localStorage": [
        {
          "name": "store",
          "value": "{\"state\":{\"openPanes\":[\"code\"]},\"version\":0}"
        },
        {
          "name": "persistCode",
          "value": ""
        },
        {
          "name": "TOKEN_PERSIST_KEY",
          "value": "your-token"
        }
      ]
    }
  ]
}

However because much of our tests involve clicking in the stream at specific locations, it's code-gen looks await page.locator('video').click(); when really we need to use a pixel coord, so I think it's of limited use.

Some notes on CI

The tests are broken into snapshot tests and non-snapshot tests, and they run in that order, they automatically commit new snap shots, so if you see an image commit check it was an intended change. If we have non-determinism in the snapshots such that they are always committing new images, hopefully this annoyance makes us fix them asap, if you notice this happening let Kurt know. But for the odd occasion git reset --hard HEAD~ && git push -f is your friend.

How to interpret failing playwright tests? If your tests fail, click through to the action and see that the tests failed on a line that includes await page.getByTestId('loading').waitFor({ state: 'detached' }), this means the test fail because the stream never started. It's you choice if you want to re-run the test, or ignore the failure.

We run on ubuntu and macos, because safari doesn't work on linux because of the dreaded "no RTCPeerConnection variable" error. But linux runs first and then macos for the same reason that we limit the number of parallel tests to 1 because we limit stream connections per user, so tests would start failing we if let them run together.

If something fails on CI you can download the artifact, unzip it and then open playwright-report/data/<UUID>.zip with https://trace.playwright.dev/ to see what happened.

Getting started writing a playwright test in our app

Besides following the instructions above and using the playwright docs, our app is weird because of the whole stream thing, which means our testing is weird. Because we've just figured out this stuff and therefore docs might go stale quick here's a 15min vid/tutorial

Screen.Recording.2023-11-21.at.11.37.07.am.mp4

PS: for the debug panel, the following JSON is useful for snapping the camera

{"type":"modeling_cmd_req","cmd_id":"054e5472-e5e9-4071-92d7-1ce3bac61956","cmd":{"type":"default_camera_look_at","center":{"x":15,"y":0,"z":0},"up":{"x":0,"y":0,"z":1},"vantage":{"x":30,"y":30,"z":30}}}