The Phoenix application is a web application built to enable rapid troubleshooting and EDA of model inferences and LLM applications. It is hosted by the Phoenix server and consumes the GraphQL API served by the Python runtime.

To build and develop the web application, you must first install the dependencies via pnpm (performant node package manager). Once installed, install the dependencies using the following command:

pnpm install --frozen-lockfile

NB: The --frozen-lockfile flag forces pnpm to install the exact versions specified in pnpm-lock.yaml and will not re-build the lockfile.

To develop the UI, you must run the app in conjunction with the backend server. You can start the application in development mode via the following:

pnpm run dev

Before running the script above you should configure your running environment by creating a .env file besides the .env.example file in the root of this project. You can find an example of the .env file in the .env.example file.

Depending on what flows you are trying to build features for, you may want to adjust the scripts block within the package.json file so that the server is serving the appropriate fixture data.

The app is written in typescript and leverages esbuild as well as the relay-compiler to compile highly efficient graphql queries. Because of this, the build script involves:

1. Building the javascript and css assets using esbuild
2. Building the compiled graphql queries using the relay-compiler
3. Building the static assets, e.g. scaffolding the server static serving directory

The web build ensures that the UI as well as the data-fetching layer is fully type safe with regards to the GraphQL schema. The type safety of the application is statically validated via the typescript CI pipeline.

The Phoenix app is statically analyzed for type safety via typescript, statically analyzed for best practices via eslint, and the formatting is enforced via the prettier code formatter. For unit testing, the app leverages vitest as a unit testing framework. Lastly, for integration tests (e.g. end-to-end or e2e), playwright is used. The following pnpm commands correspond to the above safeguards.

pnpm run typecheck
pnpm run lint
pnpm run prettier:check
pnpm test
pnpm run test:e2e

NB: prettier is also enforced via pre-commit hooks.

The integration tests run against the phoenix server built in "production" mode. Meaning you will have to have phoenix installed in your local python environment.

# from the root of the repository
pip install -e .

# from the app directory
pnpm run build
pnpm run test:e2e

The Phoenix app is a react application built on top of a graphql API. The data-fetching for the API is managed via react-relay, an opinionated data fetching and storage library. The API contract between the server and the app is managed via a schema.graphql file stored at the root of this directory. The schema is generated via server build scripts. Similarly the queries against the schema are compiled via the relay-compiler. relay allows the application to colocate the data requirements of components with the components itself, enabling maximal efficiency and clarity as to how data flows through the system.

Within the react app, there is additional state and context that is managed via react's built-in hooks. In addition to react's built-in state management, zustand is also leveraged as central store to manage the large amount of state for the point-cloud visualization. zustand provides a highly scalable way to manage a large amount of state across components without paying a performance penalty when sub-parts of the state changes due to user interaction.

The phoenix app is a client-side only SPA (single-page application), meaning that it entirely manages the routing of the pages via react-router. react-router is leveraged to provide nested routing (e.g. rendering different parts of the UI based on the path) and is also utilized to load data as routes change (see loaders).

All UI components used in Phoenix are managed by Arize's design system and @arizeai/components. Arize also maintains @arizeai/point-cloud a 3D visualization library built on top of threejs and react-three-fiber.