From 5ead645d9f8b6a12a97630cee1a1f6353ec0f44e Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Mon, 23 Sep 2024 09:30:08 -0600
Subject: [PATCH] codetour

---
 .tours/app.tour | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/.tours/app.tour b/.tours/app.tour
index b8f538bc06..c1f722305b 100644
--- a/.tours/app.tour
+++ b/.tours/app.tour
@@ -16,11 +16,26 @@
       "description": "The frontend application has various pages - a model home page, a tracing home page and so on. Each one of these pages is a `react` component that gets mounted in the UI based on a route that matches the nested routing structure seen below.",
       "line": 20
     },
+    {
+      "file": "app/src/pages/project/ProjectPage.tsx",
+      "description": "All top-level page components can be found in the `/pages` directory. A page directory encapsulates both styles, components, and network requests to serve that specific page and route. If your components are to be shared across pages, add it in `/components` instead.",
+      "line": 57
+    },
+    {
+      "file": "app/src/pages/project/ProjectPage.tsx",
+      "description": "The Phoenix app uses `react-relay` to execute GraphQL queries efficienatly. Relay expects you to colocate GraphQL queries with the component that needs that data and the queries must match the name of the file name. E.x. above, the query is for the ProjectPage so it must be prefixed with `ProjectPage`",
+      "line": 71
+    },
     {
       "file": "app/package.json",
       "description": "The fontend build is invokable via `npm` scripts. This means that a single command such as `npm run build` will:\n\n- build the static assets for the pages (images, icons)\n- build the optemized `relay` queries for data loading\n- build the javascript bundle by converting the typescript files to a minified entrypoint",
       "line": 89
     },
+    {
+      "file": "app/vite.config.mts",
+      "description": "The app build uses vite. Since the backend for Phoenix is python, Vite compiles the JS chuncks and advertises a manifest file to the backend to be served from the FastAPI server.\n\nNote that in development mode you will be running two servers - the vite web dev server for HMR (hot module reloading) and the backend python server.",
+      "line": 30
+    },
     {
       "file": "app/src/components/trace/__tests__/utils.test.ts",
       "description": "The fontend also utilizes `jest` to run unit tests to make sure certain code paths are properly tested. All tests can be run via the `npm` command `npm run test` which runs all the tests that fall under `__tests__` directories with the postfix `.test.ts`.",
@@ -35,6 +50,11 @@
       "file": "app/package.json",
       "description": "The app is also auto-formatted via `prettier` to ensure that all files are well-formatted and conform to a single style.",
       "line": 102
+    },
+    {
+      "file": "app/global-setup.ts",
+      "description": "The Phoenix app uses playwright to run browser tests (end-to-end). Once a server is launched (see `testServer.mjs`), the app is scaffolded with two user accounts, an admin and a member, which can be used to test different UI flows.",
+      "line": 3
     }
   ]
 }
\ No newline at end of file