feat: add a team-selector sandbox-logs page (5491cf86) · Commits · INJECT / frontend

analyst/src/components/NavigationBar/index.tsx

+24 −5

Original line number	Diff line number	Diff line
		@@ -35,6 +35,7 @@ import { LearningObjectivesPageRoute } from '../../routes/_layout/$exerciseId/le
		import { MilestonesPageRoute } from '../../routes/_layout/$exerciseId/milestones'
		import { QuestionnairesPageRoute } from '../../routes/_layout/$exerciseId/questionnaires'
		import { RoomViewRoute } from '../../routes/_layout/$exerciseId/room'
		import { SandboxLogsRoute } from '../../routes/_layout/$exerciseId/sandbox-logs'
		import { SelectTeamsPageRoute } from '../../routes/_layout/$exerciseId/select-teams'
		import { TeamClusteringPageRoute } from '../../routes/_layout/$exerciseId/team-clustering'
		import { ToolsPageRoute } from '../../routes/_layout/$exerciseId/tools'
		@@ -78,6 +79,11 @@ export const NavigationBar: FC<NavigationBarProps> = ({
		[nav]
		)

		const hide = useHideSidebar()

		const { exercise } = useContext(ExerciseContext)
		const teams = useSubscribedTeams({ exerciseId, context: 'analyst' })

		const emailsEnabled = useChannelTypeEnabled('EMAIL', {
		variables: { exerciseId: exerciseId! },
		pause: !exerciseId,
		@@ -90,10 +96,7 @@ export const NavigationBar: FC<NavigationBarProps> = ({
		variables: { exerciseId: exerciseId! },
		pause: !exerciseId,
		})
		const hide = useHideSidebar()

		const { exercise } = useContext(ExerciseContext)
		const teams = useSubscribedTeams({ exerciseId, context: 'analyst' })
		const sandboxLogsEnabled = exercise.sandbox

		// Grouped and renamed views
		const overviewPaths: PathType[] = useMemo(() => {
		@@ -199,8 +202,24 @@ export const NavigationBar: FC<NavigationBarProps> = ({
		text: 'Questionnaires',
		})
		}
		if (sandboxLogsEnabled) {
		arr.push({
		link: {
		to: SandboxLogsRoute.to,
		params: { exerciseId },
		},
		icon: 'console',
		text: 'Sandbox Logs',
		})
		}
		return arr
		}, [emailsEnabled, exerciseId, questionnairesEnabled, toolsEnabled])
		}, [
		emailsEnabled,
		exerciseId,
		questionnairesEnabled,
		sandboxLogsEnabled,
		toolsEnabled,
		])

		const stickySections: Section[] = useMemo(
		() => [

analyst/src/routeTree.gen.ts

+28 −0

Original line number	Diff line number	Diff line
		@@ -18,6 +18,7 @@ import { Route as LayoutExerciseIdIndexImport } from './routes/_layout/$exercise
		import { Route as LayoutExerciseIdToolsImport } from './routes/_layout/$exerciseId/tools'
		import { Route as LayoutExerciseIdTeamClusteringImport } from './routes/_layout/$exerciseId/team-clustering'
		import { Route as LayoutExerciseIdSelectTeamsImport } from './routes/_layout/$exerciseId/select-teams'
		import { Route as LayoutExerciseIdSandboxLogsImport } from './routes/_layout/$exerciseId/sandbox-logs'
		import { Route as LayoutExerciseIdRoomImport } from './routes/_layout/$exerciseId/room'
		import { Route as LayoutExerciseIdQuestionnairesImport } from './routes/_layout/$exerciseId/questionnaires'
		import { Route as LayoutExerciseIdMilestonesImport } from './routes/_layout/$exerciseId/milestones'
		@@ -74,6 +75,13 @@ const LayoutExerciseIdSelectTeamsRoute =
		getParentRoute: () => LayoutExerciseIdRouteRoute,
		} as any)

		const LayoutExerciseIdSandboxLogsRoute =
		LayoutExerciseIdSandboxLogsImport.update({
		id: '/sandbox-logs',
		path: '/sandbox-logs',
		getParentRoute: () => LayoutExerciseIdRouteRoute,
		} as any)

		const LayoutExerciseIdRoomRoute = LayoutExerciseIdRoomImport.update({
		id: '/room',
		path: '/room',
		@@ -220,6 +228,13 @@ declare module '@tanstack/react-router' {
		preLoaderRoute: typeof LayoutExerciseIdRoomImport
		parentRoute: typeof LayoutExerciseIdRouteImport
		}
		'/_layout/$exerciseId/sandbox-logs': {
		id: '/_layout/$exerciseId/sandbox-logs'
		path: '/sandbox-logs'
		fullPath: '/$exerciseId/sandbox-logs'
		preLoaderRoute: typeof LayoutExerciseIdSandboxLogsImport
		parentRoute: typeof LayoutExerciseIdRouteImport
		}
		'/_layout/$exerciseId/select-teams': {
		id: '/_layout/$exerciseId/select-teams'
		path: '/select-teams'
		@@ -298,6 +313,7 @@ interface LayoutExerciseIdRouteRouteChildren {
		LayoutExerciseIdMilestonesRoute: typeof LayoutExerciseIdMilestonesRoute
		LayoutExerciseIdQuestionnairesRoute: typeof LayoutExerciseIdQuestionnairesRoute
		LayoutExerciseIdRoomRoute: typeof LayoutExerciseIdRoomRoute
		LayoutExerciseIdSandboxLogsRoute: typeof LayoutExerciseIdSandboxLogsRoute
		LayoutExerciseIdSelectTeamsRoute: typeof LayoutExerciseIdSelectTeamsRoute
		LayoutExerciseIdTeamClusteringRoute: typeof LayoutExerciseIdTeamClusteringRoute
		LayoutExerciseIdToolsRoute: typeof LayoutExerciseIdToolsRoute
		@@ -315,6 +331,7 @@ const LayoutExerciseIdRouteRouteChildren: LayoutExerciseIdRouteRouteChildren = {
		LayoutExerciseIdMilestonesRoute: LayoutExerciseIdMilestonesRoute,
		LayoutExerciseIdQuestionnairesRoute: LayoutExerciseIdQuestionnairesRoute,
		LayoutExerciseIdRoomRoute: LayoutExerciseIdRoomRoute,
		LayoutExerciseIdSandboxLogsRoute: LayoutExerciseIdSandboxLogsRoute,
		LayoutExerciseIdSelectTeamsRoute: LayoutExerciseIdSelectTeamsRoute,
		LayoutExerciseIdTeamClusteringRoute: LayoutExerciseIdTeamClusteringRoute,
		LayoutExerciseIdToolsRoute: LayoutExerciseIdToolsRoute,
		@@ -352,6 +369,7 @@ export interface FileRoutesByFullPath {
		'/$exerciseId/milestones': typeof LayoutExerciseIdMilestonesRoute
		'/$exerciseId/questionnaires': typeof LayoutExerciseIdQuestionnairesRoute
		'/$exerciseId/room': typeof LayoutExerciseIdRoomRoute
		'/$exerciseId/sandbox-logs': typeof LayoutExerciseIdSandboxLogsRoute
		'/$exerciseId/select-teams': typeof LayoutExerciseIdSelectTeamsRoute
		'/$exerciseId/team-clustering': typeof LayoutExerciseIdTeamClusteringRoute
		'/$exerciseId/tools': typeof LayoutExerciseIdToolsRoute
		@@ -369,6 +387,7 @@ export interface FileRoutesByTo {
		'/$exerciseId/milestones': typeof LayoutExerciseIdMilestonesRoute
		'/$exerciseId/questionnaires': typeof LayoutExerciseIdQuestionnairesRoute
		'/$exerciseId/room': typeof LayoutExerciseIdRoomRoute
		'/$exerciseId/sandbox-logs': typeof LayoutExerciseIdSandboxLogsRoute
		'/$exerciseId/select-teams': typeof LayoutExerciseIdSelectTeamsRoute
		'/$exerciseId/team-clustering': typeof LayoutExerciseIdTeamClusteringRoute
		'/$exerciseId/tools': typeof LayoutExerciseIdToolsRoute
		@@ -390,6 +409,7 @@ export interface FileRoutesById {
		'/_layout/$exerciseId/milestones': typeof LayoutExerciseIdMilestonesRoute
		'/_layout/$exerciseId/questionnaires': typeof LayoutExerciseIdQuestionnairesRoute
		'/_layout/$exerciseId/room': typeof LayoutExerciseIdRoomRoute
		'/_layout/$exerciseId/sandbox-logs': typeof LayoutExerciseIdSandboxLogsRoute
		'/_layout/$exerciseId/select-teams': typeof LayoutExerciseIdSelectTeamsRoute
		'/_layout/$exerciseId/team-clustering': typeof LayoutExerciseIdTeamClusteringRoute
		'/_layout/$exerciseId/tools': typeof LayoutExerciseIdToolsRoute
		@@ -412,6 +432,7 @@ export interface FileRouteTypes {
		\| '/$exerciseId/milestones'
		\| '/$exerciseId/questionnaires'
		\| '/$exerciseId/room'
		\| '/$exerciseId/sandbox-logs'
		\| '/$exerciseId/select-teams'
		\| '/$exerciseId/team-clustering'
		\| '/$exerciseId/tools'
		@@ -428,6 +449,7 @@ export interface FileRouteTypes {
		\| '/$exerciseId/milestones'
		\| '/$exerciseId/questionnaires'
		\| '/$exerciseId/room'
		\| '/$exerciseId/sandbox-logs'
		\| '/$exerciseId/select-teams'
		\| '/$exerciseId/team-clustering'
		\| '/$exerciseId/tools'
		@@ -447,6 +469,7 @@ export interface FileRouteTypes {
		\| '/_layout/$exerciseId/milestones'
		\| '/_layout/$exerciseId/questionnaires'
		\| '/_layout/$exerciseId/room'
		\| '/_layout/$exerciseId/sandbox-logs'
		\| '/_layout/$exerciseId/select-teams'
		\| '/_layout/$exerciseId/team-clustering'
		\| '/_layout/$exerciseId/tools'
		@@ -496,6 +519,7 @@ export const routeTree = rootRoute
		"/_layout/$exerciseId/milestones",
		"/_layout/$exerciseId/questionnaires",
		"/_layout/$exerciseId/room",
		"/_layout/$exerciseId/sandbox-logs",
		"/_layout/$exerciseId/select-teams",
		"/_layout/$exerciseId/team-clustering",
		"/_layout/$exerciseId/tools",
		@@ -539,6 +563,10 @@ export const routeTree = rootRoute
		"filePath": "_layout/$exerciseId/room.tsx",
		"parent": "/_layout/$exerciseId"
		},
		"/_layout/$exerciseId/sandbox-logs": {
		"filePath": "_layout/$exerciseId/sandbox-logs.tsx",
		"parent": "/_layout/$exerciseId"
		},
		"/_layout/$exerciseId/select-teams": {
		"filePath": "_layout/$exerciseId/select-teams.tsx",
		"parent": "/_layout/$exerciseId"

analyst/src/routes/_layout/$exerciseId/sandbox-logs.tsx

0 → 100644

+46 −0

Original line number	Diff line number	Diff line
		import { Divider } from '@blueprintjs/core'
		import { css } from '@emotion/css'
		import { useSubscribedTeams } from '@inject/frontend'
		import { createFileRoute } from '@tanstack/react-router'
		import { TeamSelector } from '../../../components/TeamSelector'
		import { useTeamSelectorProps } from '../../../components/TeamSelector/useTeamSelectorProps'

		// TODO: table
		// TODO: sortable table
		// TODO: filtered table
		// TODO: searchbar
		// TODO: histogram
		// TODO: time range selector like action-logs
		// TODO: when all teams selected, show how many logs per team
		// a) inside the histogram
		// b) a separate bar chart

		const wrapper = css`
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: auto;
		`

		const RouteComponent = () => {
		const { exerciseId } = SandboxLogsRoute.useParams()
		const teams = useSubscribedTeams({ exerciseId, context: 'analyst' })

		const teamSelectorProps = useTeamSelectorProps({
		teams,
		includeAll: true,
		})

		return (
		<div className={wrapper}>
		<TeamSelector {...teamSelectorProps} />
		<Divider />
		</div>
		)
		}

		export const Route = createFileRoute('/_layout/$exerciseId/sandbox-logs')({
		component: RouteComponent,
		})

		export const SandboxLogsRoute = Route