Skip to content

Commit

Permalink
Datasets upload modal UI (#135)
Browse files Browse the repository at this point in the history
  • Loading branch information
andresgutgon authored Sep 5, 2024
1 parent 6391a0d commit df04807
Show file tree
Hide file tree
Showing 19 changed files with 434 additions and 106 deletions.
8 changes: 8 additions & 0 deletions apps/web/src/app/(private)/_lib/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,16 @@ import {
LATITUDE_DOCS_URL,
LATITUDE_HELP_URL,
} from '@latitude-data/core/browser'
import { ROUTES } from '$/services/routes'

export const NAV_LINKS = [
{ label: 'Docs', href: LATITUDE_DOCS_URL },
{ label: 'Help', href: LATITUDE_HELP_URL },
]

export const MAIN_NAV_LINKS = [
{ label: 'Projects', href: ROUTES.dashboard.root },
{ label: 'Evaluations', href: ROUTES.evaluations.root },
{ label: 'Datasets', href: ROUTES.datasets.root },
{ label: 'Settings', href: ROUTES.settings.root },
]
37 changes: 18 additions & 19 deletions apps/web/src/app/(private)/dashboard/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import { ReactNode } from 'react'

import { Button, TableBlankSlate, Text } from '@latitude-data/web-ui'
import {
Container,
ListingHeader,
TableBlankSlate,
Text,
} from '@latitude-data/web-ui'
import { AppLayout } from '$/components/layouts'
import { getCurrentUser } from '$/services/auth/getCurrentUser'
import { getSession } from '$/services/auth/getSession'
Expand All @@ -12,7 +17,7 @@ import {
getActiveProjectsCached,
getDocumentsFromMergedCommitsCache,
} from '../_data-access'
import { NAV_LINKS } from '../_lib/constants'
import { MAIN_NAV_LINKS, NAV_LINKS } from '../_lib/constants'
import { ProjectsTable } from './_components/ProjectsTable'

export default async function DashboardLayout({
Expand All @@ -26,12 +31,6 @@ export default async function DashboardLayout({
const { workspace, user } = await getCurrentUser()
const projects = await getActiveProjectsCached({ workspaceId: workspace.id })
const documents = await getDocumentsFromMergedCommitsCache(workspace.id)
const sectionLinks = [
{ label: 'Projects', href: ROUTES.dashboard.root },
{ label: 'Evaluations', href: ROUTES.evaluations.root },
{ label: 'Settings', href: ROUTES.settings.root },
]

const breadcrumbs = [
{
name: <Text.H5M>{workspace.name}</Text.H5M>,
Expand All @@ -43,19 +42,19 @@ export default async function DashboardLayout({
navigationLinks={NAV_LINKS}
currentUser={{ ...user }}
breadcrumbs={breadcrumbs}
sectionLinks={sectionLinks}
sectionLinks={MAIN_NAV_LINKS}
>
<div className='flex justify-center items-center max-w-screen-xl m-auto py-6'>
<Container>
{children}
<div className='flex-1'>
<div className='flex flex-row justify-between items-center gap-4 pb-4'>
<Text.H4B>Projects</Text.H4B>
<Link href={ROUTES.dashboard.projects.new.root}>
<Button fancy variant='outline'>
Add project
</Button>
</Link>
</div>
<ListingHeader
title='Projects'
actions={
<Link href={ROUTES.dashboard.projects.new.root}>
<ListingHeader.Button>Add project</ListingHeader.Button>
</Link>
}
/>
<div className='flex flex-col gap-2'>
{projects.length > 0 && (
<ProjectsTable documents={documents} projects={projects} />
Expand All @@ -74,7 +73,7 @@ export default async function DashboardLayout({
)}
</div>
</div>
</div>
</Container>
</AppLayout>
)
}
56 changes: 56 additions & 0 deletions apps/web/src/app/(private)/datasets/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { ReactNode } from 'react'

import {
Container,
ListingHeader,
TableBlankSlate,
} from '@latitude-data/web-ui'
import { AppLayout } from '$/components/layouts'
import { getCurrentUser } from '$/services/auth/getCurrentUser'
import { getSession } from '$/services/auth/getSession'
import { ROUTES } from '$/services/routes'
import Link from 'next/link'
import { redirect } from 'next/navigation'

import { MAIN_NAV_LINKS, NAV_LINKS } from '../_lib/constants'

export default async function DatasetsList({
children,
}: Readonly<{
children: ReactNode
}>) {
const data = await getSession()
if (!data.session) return redirect(ROUTES.auth.login)

const { user } = await getCurrentUser()

return (
<AppLayout
navigationLinks={NAV_LINKS}
currentUser={{ ...user }}
sectionLinks={MAIN_NAV_LINKS}
>
<Container>
{children}
<ListingHeader
title='Datasets'
actions={
<Link href={ROUTES.datasets.new.root}>
<ListingHeader.Button>Upload dataset</ListingHeader.Button>
</Link>
}
/>
<TableBlankSlate
description='There are no datasets yet. Create one to start testing your prompts.'
link={
<Link href={ROUTES.datasets.new.root}>
<TableBlankSlate.Button>
Create your first dataset
</TableBlankSlate.Button>
</Link>
}
/>
</Container>
</AppLayout>
)
}
69 changes: 69 additions & 0 deletions apps/web/src/app/(private)/datasets/new/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
'use client'

import {
Button,
CloseTrigger,
DropzoneInput,
FormWrapper,
Input,
Modal,
// useToast,
} from '@latitude-data/web-ui'
// import { useFormAction } from '$/hooks/useFormAction'
import { useNavigate } from '$/hooks/useNavigate'
import { ROUTES } from '$/services/routes'

// import useProjects from '$/stores/projects'

export default function NewDataset() {
const data = { name: '' }
const navigate = useNavigate()
// const { toast } = useToast()
// const { create } = useProjects()
// const { data, action } = useFormAction(create, {
// onSuccess: (project) => {
// toast({
// title: 'Success',
// description: `Project "${project.name}" created.`,
// })
//
// navigate.push(ROUTES.datasets.root)
// },
// })
return (
<Modal
open
onOpenChange={(open) => !open && navigate.push(ROUTES.datasets.root)}
title='Create new dataset'
description='Datasets allow you to test prompts and evaluations with your own data.'
footer={
<>
<CloseTrigger />
<Button fancy form='createDatasetForm' type='submit'>
Create dataset
</Button>
</>
}
>
<form className='min-w-0' id='createDatasetForm'>
<FormWrapper>
<Input
required
type='text'
label='Name'
name='name'
defaultValue={data?.name}
placeholder='Amazing dataset'
/>
<DropzoneInput
label='Upload dataset'
name='dataset_file'
placeholder='Upload csv'
multiple={false}
accept='.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'
/>
</FormWrapper>
</form>
</Modal>
)
}
3 changes: 3 additions & 0 deletions apps/web/src/app/(private)/datasets/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function DatasetsRoot() {
return null // --> layout.tsx
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Button, TableBlankSlate, Text } from '@latitude-data/web-ui'
import { ListingHeader, TableBlankSlate } from '@latitude-data/web-ui'
import useEvaluations from '$/stores/evaluationsStore'

import ActiveEvaluationsTable from './Table'
Expand All @@ -12,12 +12,14 @@ export default function ActiveEvaluations({

return (
<div className='w-full flex flex-col gap-4'>
<div className='w-full flex flex-row justify-between items-center'>
<Text.H4M>Your evaluations</Text.H4M>
<Button fancy variant='outline' onClick={onCreateEvaluation}>
Add evaluation
</Button>
</div>
<ListingHeader
title='Your evaluations'
actions={
<ListingHeader.Button onClick={onCreateEvaluation}>
Add evaluation
</ListingHeader.Button>
}
/>
{evaluations?.length ? (
<ActiveEvaluationsTable evaluations={evaluations} />
) : (
Expand Down
42 changes: 24 additions & 18 deletions apps/web/src/app/(private)/evaluations/_components/Evaluations.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,32 +20,38 @@ export default function Evaluations({
useState<CreateEvaluationData>()

return (
<Container>
<ActiveEvaluations
onCreateEvaluation={() =>
setNewEvaluationData({
title: 'New Evaluation',
description: '',
prompt: '',
})
}
/>
{evaluationTemplates.length > 0 && (
<EvaluationTemplates
evaluationTemplates={evaluationTemplates}
onSelectTemplate={(template) =>
<>
<Container>
<ActiveEvaluations
onCreateEvaluation={() =>
setNewEvaluationData({
title: template.name,
description: template.description,
prompt: template.prompt,
title: 'New Evaluation',
description: '',
prompt: '',
})
}
/>
</Container>
{evaluationTemplates.length > 0 && (
<div className='mt-6'>
<Container>
<EvaluationTemplates
evaluationTemplates={evaluationTemplates}
onSelectTemplate={(template) =>
setNewEvaluationData({
title: template.name,
description: template.description,
prompt: template.prompt,
})
}
/>
</Container>
</div>
)}
<CreateEvaluationModal
data={newEvaluationData}
onClose={() => setNewEvaluationData(undefined)}
/>
</Container>
</>
)
}
10 changes: 2 additions & 8 deletions apps/web/src/app/(private)/evaluations/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,17 @@ import { ReactNode } from 'react'

import { AppLayout } from '$/components/layouts'
import { getCurrentUser } from '$/services/auth/getCurrentUser'
import { ROUTES } from '$/services/routes'

import { NAV_LINKS } from '../_lib/constants'
import { MAIN_NAV_LINKS, NAV_LINKS } from '../_lib/constants'

export default async function Layout({ children }: { children: ReactNode }) {
const session = await getCurrentUser()
const sectionLinks = [
{ label: 'Projects', href: ROUTES.dashboard.root },
{ label: 'Evaluations', href: ROUTES.evaluations.root },
{ label: 'Settings', href: ROUTES.settings.root },
]
return (
<AppLayout
navigationLinks={NAV_LINKS}
currentUser={session.user}
breadcrumbs={[{ name: session.workspace.name }, { name: 'Evaluations' }]}
sectionLinks={sectionLinks}
sectionLinks={MAIN_NAV_LINKS}
>
{children}
</AppLayout>
Expand Down
13 changes: 4 additions & 9 deletions apps/web/src/app/(private)/settings/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { ReactNode } from 'react'

import { Container, Text } from '@latitude-data/web-ui'
import { Container, ListingHeader, Text } from '@latitude-data/web-ui'
import { AppLayout } from '$/components/layouts'
import { getCurrentUser } from '$/services/auth/getCurrentUser'
import { getSession } from '$/services/auth/getSession'
import { ROUTES } from '$/services/routes'
import { redirect } from 'next/navigation'

import { NAV_LINKS } from '../_lib/constants'
import { MAIN_NAV_LINKS, NAV_LINKS } from '../_lib/constants'
import Memberships from './_components/Memberships'
import ProviderApiKeys from './_components/ProviderApiKeys'
import WorkspaceName from './_components/WorkspaceName'
Expand All @@ -21,12 +21,6 @@ export default async function SettingsLayout({
if (!data.session) return redirect(ROUTES.auth.login)

const { workspace, user } = await getCurrentUser()
const sectionLinks = [
{ label: 'Projects', href: ROUTES.dashboard.root },
{ label: 'Evaluations', href: ROUTES.evaluations.root },
{ label: 'Settings', href: ROUTES.settings.root },
]

const breadcrumbs = [
{
name: <Text.H5M>{workspace.name}</Text.H5M>,
Expand All @@ -38,10 +32,11 @@ export default async function SettingsLayout({
navigationLinks={NAV_LINKS}
currentUser={{ ...user }}
breadcrumbs={breadcrumbs}
sectionLinks={sectionLinks}
sectionLinks={MAIN_NAV_LINKS}
>
<Container>
{children}
<ListingHeader title='Workspace' />
<WorkspaceName />
<ProviderApiKeys />
<Memberships />
Expand Down
6 changes: 6 additions & 0 deletions apps/web/src/services/routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,12 @@ export const ROUTES = {
},
},
},
datasets: {
root: '/datasets',
new: {
root: `/datasets/new`,
},
},
evaluations: {
root: '/evaluations',
detail: ({ uuid }: { uuid: string }) => {
Expand Down
1 change: 0 additions & 1 deletion packages/mailers/src/mailers/adapters/mailpit.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { MailerOptions } from '.'
export default function createMailtrapTransport({
transportOptions,
}: MailerOptions) {
// TODO: change
return nodemailer.createTransport(
{
port: 1025,
Expand Down
Loading

0 comments on commit df04807

Please sign in to comment.