diff --git a/app/dashboard/src/assets/ReadAndFilter.png b/app/dashboard/src/assets/ReadAndFilter.png new file mode 100644 index 000000000000..b95966b171f1 Binary files /dev/null and b/app/dashboard/src/assets/ReadAndFilter.png differ diff --git a/app/dashboard/src/assets/aggregate.png b/app/dashboard/src/assets/aggregate.png new file mode 100644 index 000000000000..465918d20f80 Binary files /dev/null and b/app/dashboard/src/assets/aggregate.png differ diff --git a/app/dashboard/src/assets/blankProject.png b/app/dashboard/src/assets/blankProject.png new file mode 100644 index 000000000000..257b9c57619a Binary files /dev/null and b/app/dashboard/src/assets/blankProject.png differ diff --git a/app/dashboard/src/assets/book.png b/app/dashboard/src/assets/book.png new file mode 100644 index 000000000000..4635abd90051 Binary files /dev/null and b/app/dashboard/src/assets/book.png differ diff --git a/app/dashboard/src/assets/cleansing.png b/app/dashboard/src/assets/cleansing.png new file mode 100644 index 000000000000..63b1e5945d8c Binary files /dev/null and b/app/dashboard/src/assets/cleansing.png differ diff --git a/app/dashboard/src/assets/covid.png b/app/dashboard/src/assets/covid.png new file mode 100644 index 000000000000..eff3b1a73384 Binary files /dev/null and b/app/dashboard/src/assets/covid.png differ diff --git a/app/dashboard/src/assets/enso_logo_large.svg b/app/dashboard/src/assets/enso_logo_large.svg new file mode 100644 index 000000000000..3967417a715e --- /dev/null +++ b/app/dashboard/src/assets/enso_logo_large.svg @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/app/dashboard/src/assets/joining.png b/app/dashboard/src/assets/joining.png new file mode 100644 index 000000000000..7b9cfad33bdc Binary files /dev/null and b/app/dashboard/src/assets/joining.png differ diff --git a/app/dashboard/src/assets/kmeans.png b/app/dashboard/src/assets/kmeans.png new file mode 100644 index 000000000000..aaef5a2cbdf5 Binary files /dev/null and b/app/dashboard/src/assets/kmeans.png differ diff --git a/app/dashboard/src/assets/monthSales.png b/app/dashboard/src/assets/monthSales.png new file mode 100644 index 000000000000..7c8f4d221979 Binary files /dev/null and b/app/dashboard/src/assets/monthSales.png differ diff --git a/app/dashboard/src/assets/nasdaq.png b/app/dashboard/src/assets/nasdaq.png new file mode 100644 index 000000000000..36cfaadf3ed4 Binary files /dev/null and b/app/dashboard/src/assets/nasdaq.png differ diff --git a/app/dashboard/src/assets/weather.png b/app/dashboard/src/assets/weather.png new file mode 100644 index 000000000000..9286d7183d5e Binary files /dev/null and b/app/dashboard/src/assets/weather.png differ diff --git a/app/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx b/app/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx index 434744036892..6b76a961adbf 100644 --- a/app/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx +++ b/app/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx @@ -100,10 +100,10 @@ const DIALOG_STYLES = twv.tv({ }, slots: { header: - 'sticky top-0 grid grid-cols-[1fr_auto_1fr] items-center border-b border-primary/10 transition-[border-color] duration-150', + 'sticky z-1 top-0 grid grid-cols-[1fr_auto_1fr] items-center border-b border-primary/10 transition-[border-color] duration-150', closeButton: 'col-start-1 col-end-1 mr-auto', heading: 'col-start-2 col-end-2 my-0 text-center', - content: 'relative flex-auto', + content: 'relative flex-auto overflow-y-auto max-h-[inherit]', }, compoundVariants: [ { type: 'modal', size: 'small', class: 'max-w-sm' }, @@ -144,7 +144,7 @@ export function Dialog(props: DialogProps) { testId = 'dialog', size, rounded, - padding, + padding = type === 'modal' ? 'medium' : 'xlarge', fitContent, ...ariaDialogProps } = props diff --git a/app/dashboard/src/components/AriaComponents/Text/Text.tsx b/app/dashboard/src/components/AriaComponents/Text/Text.tsx index 28bb614cb834..3af44bec3c61 100644 --- a/app/dashboard/src/components/AriaComponents/Text/Text.tsx +++ b/app/dashboard/src/components/AriaComponents/Text/Text.tsx @@ -34,7 +34,7 @@ export const TEXT_STYLE = twv.tv({ danger: 'text-danger', success: 'text-accent-dark', disabled: 'text-primary/30', - invert: 'text-white', + invert: 'text-invert', inherit: 'text-inherit', current: 'text-current', }, @@ -89,7 +89,7 @@ export const TEXT_STYLE = twv.tv({ }, monospace: { true: 'font-mono' }, italic: { true: 'italic' }, - nowrap: { true: 'whitespace-nowrap' }, + nowrap: { true: 'whitespace-nowrap', normal: 'whitespace-normal', false: '' }, textSelection: { auto: '', none: 'select-none', diff --git a/app/dashboard/src/layouts/Samples.tsx b/app/dashboard/src/layouts/Samples.tsx index 3d80df441e5c..b6262ba25d3e 100644 --- a/app/dashboard/src/layouts/Samples.tsx +++ b/app/dashboard/src/layouts/Samples.tsx @@ -1,33 +1,21 @@ /** @file Renders the list of templates from which a project can be created. */ import * as React from 'react' -import Logo from '#/assets/enso_logo.svg' +import ReadAndFilterImage from '#/assets/ReadAndFilter.png' +import AggregatingImage from '#/assets/aggregate.png' +import BlankImage from '#/assets/blankProject.png' +import CleansingImage from '#/assets/cleansing.png' +import CovidImage from '#/assets/covid.png' import GeoImage from '#/assets/geo.svg' -import HeartIcon from '#/assets/heart.svg' -import OpenCountIcon from '#/assets/open_count.svg' +import JoinImage from '#/assets/joining.png' +import KMeansImage from '#/assets/kmeans.png' +import MonthSalesImage from '#/assets/monthSales.png' +import NasdaqImage from '#/assets/nasdaq.png' import SpreadsheetsImage from '#/assets/spreadsheets.svg' import VisualizeImage from '#/assets/visualize.png' +import WeatherImage from '#/assets/weather.png' -import * as textProvider from '#/providers/TextProvider' - -import * as aria from '#/components/aria' -import FocusArea from '#/components/styled/FocusArea' -import FocusRing from '#/components/styled/FocusRing' -import SvgMask from '#/components/SvgMask' - -import * as tailwindMerge from '#/utilities/tailwindMerge' - -// ================= -// === Constants === -// ================= - -/** A placeholder author for a sample, for use until the backend implements an endpoint. */ -const DUMMY_AUTHOR = 'Enso Team' -/** A placeholder number of times a sample has been opened, for use until the backend implements - * an endpoint. */ -const DUMMY_OPEN_COUNT = 10 -/** A placeholder number of likes for a sample, for use until the backend implements an endpoint. */ -const DUMMY_LIKE_COUNT = 10 +import { Button, Text } from '#/components/AriaComponents' // ========================= // === List of templates === @@ -41,42 +29,101 @@ export interface Sample { readonly description: string readonly id: string readonly background?: string + readonly group?: string } /** The full list of templates. */ export const SAMPLES: Sample[] = [ { - title: 'Colorado COVID', - id: 'Colorado_COVID', - description: 'Learn to glue multiple spreadsheets to analyses all your data at once.', + title: 'Blank Project', + id: 'Default', + description: 'Start with a blank workflow.', + background: `url("${BlankImage}") center / cover`, + group: 'Getting Started', }, { - title: 'KMeans', - id: 'KMeans', - description: 'Learn where to open a coffee shop to maximize your income.', + title: 'Reading and Filterng Data', + id: 'Getting_Started_Reading', + description: 'Learn how to bring data into Enso.', + background: `url("${ReadAndFilterImage}") center / cover`, + group: 'Getting Started', + }, + { + title: 'Aggregating and Pivoting', + id: 'Getting_Started_Aggregating', + description: 'Learn how to group and aggregate data, and pivot.', + background: `url("${AggregatingImage}") center / cover`, + group: 'Getting Started', + }, + { + title: 'Cleaning and Parsing Data', + id: 'Getting_Started_Cleansing', + description: 'Learn how to cleanse and parse text values.', + background: `url("${CleansingImage}") center / cover`, + group: 'Getting Started', + }, + { + title: 'Selecting Columns and Joining Tables', + id: 'Getting_Started_Selecting', + description: 'Learn how to choose columns and join tables.', + background: `url("${JoinImage}") center / cover`, + group: 'Getting Started', + }, + { + title: 'Analyze GitHub stars', + id: 'Stargazers', + description: "Find out which of Enso's repositories are most popular over time.", + background: `url("${VisualizeImage}") center / cover`, + group: 'Advanced', }, { title: 'NASDAQ Returns', id: 'NASDAQReturns', description: 'Learn how to clean your data to prepare it for advanced analysis.', + background: `url("${NasdaqImage}") center / cover`, + group: 'Advanced', + }, + { + title: 'KMeans', + id: 'KMeans', + description: 'Learn where to open a coffee shop to maximize your income.', + background: `url("${KMeansImage}") center / cover`, + group: 'Advanced', }, { title: 'Combine spreadsheets', id: 'Orders', description: 'Glue multiple spreadsheets together to analyse all your data at once.', - background: `url('${SpreadsheetsImage}') center / 50% no-repeat, rgba(255, 255, 255, 0.30)`, + background: `url("${SpreadsheetsImage}") center / 50% no-repeat, rgba(255, 255, 255, 0.30)`, + group: 'Examples', + }, + { + title: 'Month on Month Sales', + id: 'Monthly_Sales', + description: 'Learn how to compare with previous month sales.', + background: `url("${MonthSalesImage}") center / cover`, + group: 'Examples', + }, + { + title: 'Colorado COVID', + id: 'Colorado_COVID', + description: 'Learn to glue multiple spreadsheets to analyses all your data at once.', + background: `url('${CovidImage}') center / 100% no-repeat, rgba(255, 255, 255, 0.30)`, + group: 'Examples', + }, + { + title: 'Web API analysis', + id: 'Bank_Holiday_Rain', + description: 'Learn whether it rains on UK Bank Holidays via REST APIs.', + background: `url('${WeatherImage}') center / 100% no-repeat, rgba(255, 255, 255, 0.30)`, + group: 'Examples', }, { title: 'Geospatial analysis', id: 'Restaurants', description: 'Learn where to open a coffee shop to maximize your income.', background: `url('${GeoImage}') 50% 20% / 100% no-repeat`, - }, - { - title: 'Analyze GitHub stars', - id: 'Stargazers', - description: "Find out which of Enso's repositories are most popular over time.", - background: `url("${VisualizeImage}") center / cover`, + group: 'Examples', }, ] @@ -93,61 +140,31 @@ interface InternalProjectTileProps { /** A button that, when clicked, creates and opens a new project based on a template. */ function ProjectTile(props: InternalProjectTileProps) { const { sample, createProject } = props - const { getText } = textProvider.useText() const { id, title, description, background } = sample - const author = DUMMY_AUTHOR - const opens = DUMMY_OPEN_COUNT - const likes = DUMMY_LIKE_COUNT return ( -