diff --git a/src/components/DataSamplesTable.tsx b/src/components/DataSamplesTable.tsx index 1f6d7ffcf..42bfe90bf 100644 --- a/src/components/DataSamplesTable.tsx +++ b/src/components/DataSamplesTable.tsx @@ -11,16 +11,10 @@ import { HStack, Text, VStack, + Image, } from "@chakra-ui/react"; import { ButtonEvent } from "@microbit/microbit-connection"; -import { - ReactNode, - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from "react"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { FormattedMessage, useIntl } from "react-intl"; import { useConnectActions } from "../connect-actions-hooks"; import { useConnectionStage } from "../connection-stage-hooks"; @@ -40,6 +34,7 @@ import { ConfirmDialog } from "./ConfirmDialog"; import { actionNameInputId } from "./ActionNameCard"; import { recordButtonId } from "./ActionDataSamplesCard"; import { keyboardShortcuts, useShortcut } from "../keyboard-shortcut-hooks"; +import collectDataImage from "../images/collect-data.svg"; const gridCommonProps: Partial = { gridTemplateColumns: "290px 1fr", @@ -48,7 +43,11 @@ const gridCommonProps: Partial = { w: "100%", }; -const headings: GridColumnHeadingItemProps[] = [ +const getHeadings = ( + options: { + hideItemsRight?: boolean; + } = {} +): GridColumnHeadingItemProps[] => [ { titleId: "action-label", descriptionId: "action-tooltip", @@ -56,7 +55,7 @@ const headings: GridColumnHeadingItemProps[] = [ { titleId: "data-samples-label", descriptionId: "data-samples-tooltip", - itemsRight: ( + itemsRight: options.hideItemsRight ? undefined : ( @@ -225,48 +224,34 @@ const DataSamplesTable = ({ position="sticky" top={0} {...gridCommonProps} - headings={headings} + headings={getHeadings({ + hideItemsRight: actions.length === 0 || !isConnected, + })} /> - {actions.length === 0 ? ( + {actions.length === 0 && !isConnected ? ( - + + - {!isConnected && ( - - ( - - ), - link2: (chunks: ReactNode) => ( - - ), - }} - /> - - )} + + + + ) : ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/pages/DataSamplesPage.tsx b/src/pages/DataSamplesPage.tsx index 584aa3221..2107fde5c 100644 --- a/src/pages/DataSamplesPage.tsx +++ b/src/pages/DataSamplesPage.tsx @@ -71,56 +71,60 @@ const DataSamplesPage = () => { setSelectedActionIdx={setSelectedActionIdx} /> - - - - - - - {model ? ( - - ) : ( + {(actions.length > 0 || isConnected) && ( + + + - )} + + + {model ? ( + + ) : ( + + )} + - - - + + + )} ); diff --git a/src/pages/ImportPage.tsx b/src/pages/ImportPage.tsx index 18d7aa8a1..c26c775a7 100644 --- a/src/pages/ImportPage.tsx +++ b/src/pages/ImportPage.tsx @@ -85,7 +85,7 @@ const ImportPage = () => { } else { // If no resource fetched, start as new empty session // with provided project name - newSession(name); + newSession({ projectName: name }); navigate(createDataSamplesPageUrl()); } }, [loadProject, name, navigate, newSession, project]); diff --git a/src/pages/NewPage.tsx b/src/pages/NewPage.tsx index 5c66d2bf7..5946294cc 100644 --- a/src/pages/NewPage.tsx +++ b/src/pages/NewPage.tsx @@ -30,11 +30,13 @@ import { useLogging } from "../logging/logging-hooks"; import { useStore } from "../store"; import { createDataSamplesPageUrl } from "../urls"; import { useProjectName } from "../hooks/project-hooks"; +import { useConnectionStage } from "../connection-stage-hooks"; const NewPage = () => { const existingSessionTimestamp = useStore((s) => s.timestamp); const projectName = useProjectName(); const newSession = useStore((s) => s.newSession); + const { isConnected } = useConnectionStage(); const navigate = useNavigate(); const logging = useLogging(); @@ -54,9 +56,9 @@ const NewPage = () => { logging.event({ type: "session-open-new", }); - newSession(); + newSession({ hasFirstAction: isConnected }); navigate(createDataSamplesPageUrl()); - }, [logging, newSession, navigate]); + }, [logging, newSession, isConnected, navigate]); const intl = useIntl(); const lastSessionTitle = intl.formatMessage({ diff --git a/src/store.ts b/src/store.ts index f8a120af3..a332fb7dd 100644 --- a/src/store.ts +++ b/src/store.ts @@ -205,6 +205,11 @@ export interface ConnectOptions { postConnectTourTrigger?: TourTrigger; } +interface NewSessionOptions { + projectName?: string; + hasFirstAction?: boolean; +} + export interface Actions { addNewAction(): void; addActionRecordings(id: ActionData["ID"], recs: RecordingData[]): void; @@ -224,7 +229,7 @@ export interface Actions { setEditorOpen(open: boolean): void; recordingStarted(): void; recordingStopped(): void; - newSession(projectName?: string): void; + newSession(options: NewSessionOptions): void; trainModelFlowStart: (callback?: () => void) => Promise; closeTrainModelDialogs: () => void; trainModel(): Promise; @@ -385,11 +390,11 @@ const createMlStore = (logging: Logging) => { ); }, - newSession(projectName?: string) { + newSession({ projectName, hasFirstAction }: NewSessionOptions = {}) { const untitledProject = createUntitledProject(); set( { - actions: [], + actions: hasFirstAction ? [createFirstAction()] : [], dataWindow: currentDataWindow, model: undefined, project: projectName