Skip to content

Commit

Permalink
feat(onboarding): New project onboarding (#4372)
Browse files Browse the repository at this point in the history
* feat(onboarding): New project onboarding

* WIP

* work in progress

* add integrations

* finish python onboarding

* Final

* add crewai

* WIP
  • Loading branch information
mikeldking authored Aug 26, 2024
1 parent 4018c2c commit 16ac5ed
Show file tree
Hide file tree
Showing 28 changed files with 1,538 additions and 249 deletions.
20 changes: 3 additions & 17 deletions app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
233 changes: 138 additions & 95 deletions app/pnpm-lock.yaml

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions app/src/components/ExternalLink.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`}
Expand Down
35 changes: 35 additions & 0 deletions app/src/components/code/CodeLanguageRadioGroup.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
11 changes: 11 additions & 0 deletions app/src/components/code/CodeWrap.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
15 changes: 2 additions & 13 deletions app/src/components/code/PythonBlockWithCopy.tsx
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
36 changes: 36 additions & 0 deletions app/src/components/code/TypeScriptBlock.tsx
Original file line number Diff line number Diff line change
@@ -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}
/>
);
}
16 changes: 16 additions & 0 deletions app/src/components/code/TypeScriptBlockWithCopy.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
4 changes: 4 additions & 0 deletions app/src/components/code/index.tsx
Original file line number Diff line number Diff line change
@@ -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";
10 changes: 10 additions & 0 deletions app/src/components/code/styles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`;
441 changes: 441 additions & 0 deletions app/src/components/project/IntegrationIcons.tsx

Large diffs are not rendered by default.

Loading

0 comments on commit 16ac5ed

Please sign in to comment.