refactor: move css outside of components (619256df) · Commits · INJECT / frontend

analyst/src/components/Plots/TimeScatterPlot/TimeRangeSelector/index.tsx

+49 −52

Original line number	Diff line number	Diff line
		@@ -14,6 +14,30 @@ import { ExerciseContext } from '../../../ExerciseContext'
		import { MIN_TO_MS } from '../../../utilities'
		import type { TimeRange } from '../types'

		const timestampTagClassName = css`
		padding: 0.25rem !important;
		`
		const centerTextClassName = css`
		text-align: center;
		`
		const moveTagUpClassName = css`
		margin-top: -3.2rem;
		`
		const noTextWrapClassName = css`
		white-space: nowrap;
		`
		const wrapperClassName = css`
		padding: 2.5rem 5rem 0 5rem;
		position: relative;
		`
		const labelClassName = css`
		position: absolute;
		left: 50%;
		top: 70%;
		transform: translate(-50%, -50%);
		z-index: -1;
		`

		interface TimeRangeSelectorProps {
		earliestStartTime: number
		selectedTimeRangeInitialStart: number
		@@ -55,9 +79,7 @@ export const TimeRangeSelector: FC<TimeRangeSelectorProps> = ({
		minimal: !opts?.isHandleTooltip,
		}}
		tagProps={{
		className: css`
		padding: 0.25rem !important;
		`,
		className: timestampTagClassName,
		}}
		/>
		)
		@@ -91,15 +113,10 @@ export const TimeRangeSelector: FC<TimeRangeSelectorProps> = ({
		return (
		<div
		className={cx({
		[css`
		text-align: center;
		`]: true,
		[css`
		margin-top: -3.2rem;
		`]: !opts?.isHandleTooltip,
		[css`
		white-space: nowrap;
		`]: timeFormat !== 'absolute' \|\| !opts?.isHandleTooltip,
		[centerTextClassName]: true,
		[moveTagUpClassName]: !opts?.isHandleTooltip,
		[noTextWrapClassName]:
		timeFormat !== 'absolute' \|\| !opts?.isHandleTooltip,
		})}
		>
		{children}
		@@ -117,16 +134,7 @@ export const TimeRangeSelector: FC<TimeRangeSelectorProps> = ({
		).sort((a, b) => a - b)

		return (
		<div
		className={css`
		padding: 2.5rem 5rem 0 5rem;
		`}
		>
		<div
		className={css`
		position: relative;
		`}
		>
		<div className={wrapperClassName}>
		<RangeSlider
		min={0}
		max={selectedTimeRangeInitialEnd}
		@@ -143,21 +151,10 @@ export const TimeRangeSelector: FC<TimeRangeSelectorProps> = ({
		labelRenderer={labelRenderer}
		/>
		<span
		className={cx(
		Classes.TEXT_SMALL,
		Classes.TEXT_MUTED,
		css`
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: -1;
		`
		)}
		className={cx(Classes.TEXT_SMALL, Classes.TEXT_MUTED, labelClassName)}
		>
		Select Time Range
		</span>
		</div>
		</div>
		)
		}

analyst/src/components/TeamSelector/index.tsx

+22 −25

Original line number	Diff line number	Diff line
		@@ -11,6 +11,24 @@ import type { Dispatch, FC, SetStateAction } from 'react'
		import { TeamButton } from './TeamButton'
		import type { TeamSelectorProps } from './types'

		const overflowClassName = css`
		margin-left: auto;
		align-self: center;
		`
		const overflowListClassName = css`
		display: flex;
		flex-direction: column;
		padding: 0.5rem;
		overflow-y: auto;
		max-height: 60vh;
		`
		const breadcrumbClassName = css`
		margin: 0.25rem;
		`
		const wrapperClassName = css`
		align-items: stretch;
		`

		export const TeamSelector: FC<TeamSelectorProps> = ({
		selectedTeam,
		setSelectedTeam,
		@@ -20,24 +38,10 @@ export const TeamSelector: FC<TeamSelectorProps> = ({
		(setSelectedTeam as Dispatch<SetStateAction<Team \| undefined>>)(item)

		const overflowRenderer = (overflowItems: (Team \| undefined)[]) => (
		<div
		className={css`
		margin-left: auto;
		align-self: center;
		`}
		>
		<div className={overflowClassName}>
		<Popover
		content={
		<ButtonGroup
		vertical
		className={css`
		display: flex;
		flex-direction: column;
		padding: 0.5rem;
		overflow-y: auto;
		max-height: 60vh;
		`}
		>
		<ButtonGroup vertical className={overflowListClassName}>
		{overflowItems.map(item => (
		<TeamButton
		key={item?.id \|\| 'all-teams-tab'}
		@@ -51,12 +55,7 @@ export const TeamSelector: FC<TeamSelectorProps> = ({
		position='bottom-left'
		>
		<span
		className={cx(
		Classes.BREADCRUMBS_COLLAPSED,
		css`
		margin: 0.25rem;
		`
		)}
		className={cx(Classes.BREADCRUMBS_COLLAPSED, breadcrumbClassName)}
		/>
		</Popover>
		</div>
		@@ -73,9 +72,7 @@ export const TeamSelector: FC<TeamSelectorProps> = ({

		return (
		<OverflowList
		className={css`
		align-items: stretch;
		`}
		className={wrapperClassName}
		collapseFrom={Boundary.END}
		items={items}
		overflowRenderer={overflowRenderer}

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

+27 −30

Original line number	Diff line number	Diff line
		@@ -27,6 +27,28 @@ import { useTeamSelectorProps } from '../../../components/TeamSelector/useTeamSe
		// a) inside the histogram
		// b) a separate bar chart

		const mainClassName = css`
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: auto;
		`
		const topSectionClassName = css`
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		`
		const searchAndFiltersClassName = css`
		display: flex;
		align-items: center;
		gap: 1rem;
		padding: 1rem 0;
		`
		const bodyClassName = css`
		flex: 1;
		overflow: auto;
		`

		const RouteComponent = () => {
		const { exerciseId } = SandboxLogsRoute.useParams()
		const teams = useSubscribedTeams({ exerciseId, context: 'analyst' })
		@@ -129,28 +151,15 @@ const RouteComponent = () => {
		)

		return (
		<main
		className={css`
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: auto;
		`}
		>
		<div
		className={css`
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		`}
		>
		<main className={mainClassName}>
		<section className={topSectionClassName}>
		<TeamSelector {...teamSelectorProps} />
		<TeamLimitSelect
		teamLimit={teamLimit}
		setTeamLimit={setTeamLimit}
		teamCount={teamIds.length}
		/>
		</div>
		</section>

		<TimeRangeSelector
		earliestStartTime={earliestStartTime}
		@@ -159,14 +168,7 @@ const RouteComponent = () => {
		setSelectedTimeRange={setSelectedTimeRange}
		/>

		<section
		className={css`
		display: flex;
		align-items: center;
		gap: 1rem;
		padding: 1rem 0;
		`}
		>
		<section className={searchAndFiltersClassName}>
		<InputGroup
		fill
		leftIcon='search'
		@@ -193,12 +195,7 @@ const RouteComponent = () => {
		/>
		</section>

		<section
		className={css`
		flex: 1;
		overflow: auto;
		`}
		>
		<section className={bodyClassName}>
		{(fetching \|\| !data) && <CenteredSpinner />}
		{data && (
		<SandboxLogsTable