feat(onboarding): New project onboarding

app/package.json

@@ -10,6 +10,7 @@
     "@arizeai/openinference-semantic-conventions": "^0.8.0",
     "@arizeai/point-cloud": "^3.0.6",
     "@codemirror/autocomplete": "6.12.0",
+    "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-python": "6.1.3",
     "@codemirror/lint": "^6.8.1",
@@ -86,25 +87,10 @@
     "build:static": "cpy ./static ../src/phoenix/server",
     "build:relay": "relay-compiler",
     "test": "jest --config ./jest.config.js",
-    "dev": "pnpm run dev:server & pnpm run build:static && pnpm run build:relay && vite",
+    "dev": "pnpm run dev:server:init & pnpm run build:static && pnpm run build:relay && vite",
     "dev:auth": "export DANGEROUSLY_SET_PHOENIX_ENABLE_AUTH=true && export DANGEROUSLY_SET_PHOENIX_SECRET=secret && pnpm run dev:server & pnpm run build:static && pnpm run build:relay && vite",
     "dev:ui": "pnpm run build:static && pnpm run build:relay && vite",
-    "dev:server:mnist": "python3 -m phoenix.server.main --dev --umap_params 0,30,550 fixture fashion_mnist",
-    "dev:server:mnist:single": "python3 -m phoenix.server.main --dev fixture fashion_mnist --primary-only true",
-    "dev:server:sentiment": "python3 -m phoenix.server.main --dev fixture sentiment_classification_language_drift",
-    "dev:server:image": "python3 -m phoenix.server.main --dev fixture image_classification",
-    "dev:server:image:single": "python3 -m phoenix.server.main --dev fixture image_classification --primary-only true",
-    "dev:server:ner": "python3 -m phoenix.server.main --dev fixture ner_token_drift",
-    "dev:server:credit_card_fraud": "python3 -m phoenix.server.main --dev fixture credit_card_fraud",
-    "dev:server:credit_card_fraud:single": "python3 -m phoenix.server.main --dev fixture credit_card_fraud --primary-only true",
-    "dev:server:llm": "python3 -m phoenix.server.main --dev fixture llm_summarization",
-    "dev:server:wiki": "python3 -m phoenix.server.main --dev fixture wiki",
-    "dev:server:chatbot": "python3 -m phoenix.server.main --dev fixture chatbot",
-    "dev:server:traces:llama_index_rag": "python3 -m phoenix.server.main --dev trace-fixture llama_index_rag",
-    "dev:server:traces:llama_index_calculator_agent": "python3 -m phoenix.server.main --dev trace-fixture llama_index_calculator_agent",
-    "dev:server:traces:langchain_qa_with_sources": "python3 -m phoenix.server.main --dev trace-fixture langchain_qa_with_sources",
-    "dev:server:traces:random": "python3 -m phoenix.server.main --dev trace-fixture random --simulate-streaming true",
-    "dev:server:demo": "python3 -m phoenix.server.main --dev demo chatbot llama_index_rag ",
+    "dev:server:init": "python3 -m phoenix.server.main --dev serve --with-fixture=chatbot --with-project=demo_llama_index --force-fixture-ingestion",
     "dev:server": "python3 -m phoenix.server.main --dev serve",
     "typecheck": "tsc --noEmit",
     "lint": "eslint ./src",

app/src/components/ExternalLink.tsx

@@ -16,14 +16,14 @@ export function ExternalLink({ href, children }: ExternalLinkProps) {
       css={css`
         color: var(--ac-global-color-primary);
         text-decoration: none;
-        display: flex;
-        flex-direction: row;
-        align-items: end;
-        gap: var(--px-spacing-sm);
+        position: relative;
         &:hover {
           text-decoration: underline;
         }
         .ac-icon-wrap {
+          display: inline-block;
+          margin-left: 0.1em;
+          vertical-align: middle;
           font-size: 1em;
         }
       `}

app/src/components/code/CodeLanguageRadioGroup.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+import { Radio, RadioGroup } from "@arizeai/components";
+
+export type CodeLanguage = "Python" | "TypeScript";
+
+export function CodeLanguageRadioGroup({
+  language,
+  onChange,
+}: {
+  language: CodeLanguage;
+  onChange: (language: CodeLanguage) => void;
+}) {
+  return (
+    <RadioGroup
+      defaultValue={language}
+      variant="inline-button"
+      size="compact"
+      onChange={(v) => {
+        if (v === "Python" || v === "TypeScript") {
+          onChange(v);
+        } else {
+          throw new Error(`Unknown language: ${v}`);
+        }
+      }}
+    >
+      <Radio label="Python" value={"Python"}>
+        Python
+      </Radio>
+      <Radio label="TypeScript" value={"TypeScript"}>
+        TypeScript
+      </Radio>
+    </RadioGroup>
+  );
+}

app/src/components/code/CodeWrap.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+
+import { View } from "@arizeai/components";
+
+export function CodeWrap({ children }: { children: ReactNode }) {
+  return (
+    <View borderColor="light" borderWidth="thin" borderRadius="small">
+      {children}
+    </View>
+  );
+}

app/src/components/code/PythonBlockWithCopy.tsx

@@ -1,25 +1,14 @@
 import React from "react";
-import { css } from "@emotion/react";
 
 import { CopyToClipboardButton } from "../CopyToClipboardButton";
 
 import { PythonBlock } from "./PythonBlock";
+import { codeBlockWithCopyCSS } from "./styles";
 
 export function PythonBlockWithCopy(props: { value: string }) {
   const { value } = props;
   return (
-    <div
-      className="python-code-block"
-      css={css`
-        position: relative;
-        .copy-to-clipboard-button {
-          position: absolute;
-          top: var(--ac-global-dimension-size-100);
-          right: var(--ac-global-dimension-size-100);
-          z-index: 1;
-        }
-      `}
-    >
+    <div className="python-code-block" css={codeBlockWithCopyCSS}>
       <CopyToClipboardButton text={value} />
       <PythonBlock value={value} />
     </div>

app/src/components/code/TypeScriptBlock.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { javascript } from "@codemirror/lang-javascript";
+import { nord } from "@uiw/codemirror-theme-nord";
+import CodeMirror, { ReactCodeMirrorProps } from "@uiw/react-codemirror";
+
+import { useTheme } from "@phoenix/contexts";
+
+import { readOnlyCodeMirrorCSS } from "./styles";
+
+type TypeScriptBlockProps = Omit<
+  ReactCodeMirrorProps,
+  "theme" | "extensions" | "editable" | "basicSetup"
+>;
+
+export function TypeScriptBlock(props: TypeScriptBlockProps) {
+  const { theme } = useTheme();
+  const codeMirrorTheme = theme === "light" ? undefined : nord;
+  return (
+    <CodeMirror
+      value={props.value}
+      extensions={[javascript({ typescript: true })]}
+      editable={false}
+      theme={codeMirrorTheme}
+      {...props}
+      basicSetup={{
+        lineNumbers: false,
+        foldGutter: true,
+        bracketMatching: true,
+        syntaxHighlighting: true,
+        highlightActiveLine: false,
+        highlightActiveLineGutter: false,
+      }}
+      css={readOnlyCodeMirrorCSS}
+    />
+  );
+}

app/src/components/code/TypeScriptBlockWithCopy.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import { CopyToClipboardButton } from "../CopyToClipboardButton";
+
+import { codeBlockWithCopyCSS } from "./styles";
+import { TypeScriptBlock } from "./TypeScriptBlock";
+
+export function TypeScriptBlockWithCopy(props: { value: string }) {
+  const { value } = props;
+  return (
+    <div className="typescript-code-block" css={codeBlockWithCopyCSS}>
+      <CopyToClipboardButton text={value} />
+      <TypeScriptBlock value={value} />
+    </div>
+  );
+}

app/src/components/code/index.tsx

@@ -1,4 +1,8 @@
 export * from "./JSONEditor";
 export * from "./JSONBlock";
 export * from "./PythonBlock";
+export * from "./PythonBlockWithCopy";
+export * from "./CodeWrap";
+export * from "./TypeScriptBlock";
 export * from "./CodeEditorFieldWrapper";
+export * from "./CodeLanguageRadioGroup";

app/src/components/code/styles.tsx

@@ -9,3 +9,13 @@ export const readOnlyCodeMirrorCSS = css`
     background-color: transparent;
   }
 `;
+
+export const codeBlockWithCopyCSS = css`
+  position: relative;
+  .copy-to-clipboard-button {
+    position: absolute;
+    top: var(--ac-global-dimension-size-100);
+    right: var(--ac-global-dimension-size-100);
+    z-index: 1;
+  }
+`;