Skip to content

Session detail tweaks #1329

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
annavik merged 3 commits into from
May 29, 2026
+106 −120
Merged

Session detail tweaks #1329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
aa10dd4
layout: tweak content order for small screens
annavik May 29, 2026
6feef84
feat: exclude snap to detections view setting after navigation improv…
annavik May 29, 2026
e885c9b
layout: stabilize layout for small screens
annavik May 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 7 additions & 10 deletions ui/src/pages/session-details/activity-plot/activity-plot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,11 @@ const tooltipBorderColor = CONSTANTS.COLOR_THEME.border
export interface ActivityPlotProps {
session: SessionDetails
setActiveCaptureId: (captureId: string) => void
snapToDetections?: boolean
timeline: TimelineTick[]
}

export const ActivityPlot = ({
session,
snapToDetections,
timeline,
setActiveCaptureId,
}: ActivityPlotProps) => {
Expand Down Expand Up @@ -156,14 +154,13 @@ export const ActivityPlot = ({
return
}

const captureId =
snapToDetections || !timelineTick.representativeCaptureId
? findClosestCaptureId({
snapToDetections,
timeline,
targetDate: timelineTick.startDate,
})
: timelineTick.representativeCaptureId
const captureId = !timelineTick.representativeCaptureId
? findClosestCaptureId({
snapToDetections: false,
timeline,
targetDate: timelineTick.startDate,
})
: timelineTick.representativeCaptureId

if (captureId) {
setActiveCaptureId(captureId)
Expand Down
11 changes: 10 additions & 1 deletion ui/src/pages/session-details/process/process.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,22 @@ import { STRING, translate } from 'utils/language'
import { UserPermission } from 'utils/user/types'
import { ProcessNow } from './process-now'

export const Process = ({ capture }: { capture: CaptureDetails }) => {
export const Process = ({ capture }: { capture?: CaptureDetails }) => {
const { projectId } = useParams()
const { project } = useProjectDetails(projectId as string, true)
const [pipelineId, setPipelineId] = useState(
project?.settings.defaultProcessingPipeline?.id
)

if (!capture) {
return (
<Button disabled size="small" variant="outline">
<span>{translate(STRING.PROCESS)}</span>
<ChevronDownIcon className="w-4 h-4" />
</Button>
)
}
Comment thread
annavik marked this conversation as resolved.

return (
<Popover.Root>
<Popover.Trigger asChild>
Expand Down
179 changes: 88 additions & 91 deletions ui/src/pages/session-details/session-details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,6 @@ const Content = ({ session }: { session: SessionDetails }) => {
const [settings, setSettings] = useState({
defaultFilters: true,
showDetections: true,
snapToDetections: session.numDetections ? true : false,
})

// Data
Expand Down Expand Up @@ -124,107 +123,105 @@ const Content = ({ session }: { session: SessionDetails }) => {
})}
tooltip={translate(STRING.TOOLTIP_SESSION)}
>
{activeCapture ? <Process capture={activeCapture} /> : null}
{user.loggedIn ? <Process capture={activeCapture} /> : null}
</PageHeader>
<div className="flex flex-col gap-4 md:gap-6">
<div className="flex flex-col gap-4 mt-6 md:flex-row md:gap-6">
<Box className="p-2 bg-background rounded-lg md:p-4 md:rounded-xl">
<Tabs.Root defaultValue={TABS.SESSION}>
<Tabs.List>
<Tabs.Trigger
value={TABS.SESSION}
label={translate(STRING.TAB_ITEM_SESSION)}
/>
<Tabs.Trigger
value={TABS.CAPTURE}
label={translate(STRING.TAB_ITEM_CAPTURE)}
/>
<Tabs.Trigger
value={TABS.CHARTS}
label={translate(STRING.TAB_ITEM_CHARTS)}
/>
</Tabs.List>
<Tabs.Content value={TABS.SESSION}>
<div className="w-72">
<SessionInfo session={session} />
</div>
</Tabs.Content>
<Tabs.Content value={TABS.CAPTURE}>
<div className="w-72">
{activeCapture ? (
<CaptureInfo capture={activeCapture} />
) : null}
</div>
</Tabs.Content>
<Tabs.Content className="overflow-x-auto" value={TABS.CHARTS}>
<div className="w-96 space-y-4">
<SessionPlots session={session} />
</div>
</Tabs.Content>
</Tabs.Root>
</Box>
<div className="grow flex flex-col bg-background rounded-lg border border-border overflow-hidden md:rounded-xl">
<div className="grow flex items-center justify-center bg-foreground">
<Capture
defaultFilters={settings.defaultFilters}
detections={activeCapture?.detections ?? []}
height={activeCapture?.height ?? session.firstCapture.height}
showDetections={settings.showDetections}
src={activeCapture?.src}
width={activeCapture?.width ?? session.firstCapture.width}
<div className="grid grid-cols-1 gap-4 mt-6 md:grid-cols-[auto_1fr] md:gap-6">
<Box className="order-last p-2 bg-background rounded-lg md:order-first md:p-4 md:rounded-xl">
<Tabs.Root defaultValue={TABS.SESSION}>
<Tabs.List>
<Tabs.Trigger
value={TABS.SESSION}
label={translate(STRING.TAB_ITEM_SESSION)}
/>
</div>
<div className="flex flex-wrap justify-between gap-x-8 gap-y-2 p-2 border-t border-border md:p-6">
<div className="flex-1 flex items-center gap-2">
{activeCapture ? (
<>
<span className="pt-0.5 text-muted-foreground truncate">
{activeCapture.dateTimeLabel}
</span>
<StarButton
capture={activeCapture}
canStar={user.loggedIn && activeCapture.canStar}
/>
<BasicTooltip
asChild
content={translate(STRING.TOOLTIP_VIEW_SOURCE_FILE)}
>
<a
href={activeCapture.url}
className={cn(
buttonVariants({ size: 'icon', variant: 'ghost' })
)}
rel="noreferrer"
target="_blank"
>
<ExternalLinkIcon className="w-4 h-4" />
</a>
</BasicTooltip>
</>
) : null}
<Tabs.Trigger
value={TABS.CAPTURE}
label={translate(STRING.TAB_ITEM_CAPTURE)}
/>
<Tabs.Trigger
value={TABS.CHARTS}
label={translate(STRING.TAB_ITEM_CHARTS)}
/>
</Tabs.List>
<Tabs.Content value={TABS.SESSION}>
<div className="w-72">
<SessionInfo session={session} />
</div>
<div className="flex items-center justify-center">
<CaptureNavigation
activeCapture={activeCapture}
timeline={timeline}
setActiveCaptureId={setActiveCaptureId}
/>
</Tabs.Content>
<Tabs.Content value={TABS.CAPTURE}>
<div className="w-72">
{activeCapture ? <CaptureInfo capture={activeCapture} /> : null}
</div>
<div className="flex-1 flex items-center justify-end">
<ViewSettings
session={session}
onSettingsChange={setSettings}
settings={settings}
/>
</Tabs.Content>
<Tabs.Content className="overflow-x-auto" value={TABS.CHARTS}>
<div className="w-96 space-y-4">
<SessionPlots session={session} />
</div>
</Tabs.Content>
</Tabs.Root>
</Box>
Comment thread
annavik marked this conversation as resolved.
<div className="grow flex flex-col bg-background rounded-lg border border-border overflow-hidden md:rounded-xl">
<div className="grow flex items-center justify-center bg-foreground">
<Capture
defaultFilters={settings.defaultFilters}
detections={activeCapture?.detections ?? []}
height={activeCapture?.height ?? session.firstCapture.height}
showDetections={settings.showDetections}
src={activeCapture?.src}
width={activeCapture?.width ?? session.firstCapture.width}
/>
</div>
<div className="flex flex-col flex-wrap justify-between gap-2 p-2 border-t border-border md:flex-row md:p-6">
<div className="min-h-8 flex-1 flex items-center gap-2">
{activeCapture ? (
<>
<span className="pt-0.5 text-muted-foreground truncate">
{activeCapture.dateTimeLabel}
</span>
<StarButton
capture={activeCapture}
canStar={user.loggedIn && activeCapture.canStar}
/>
<BasicTooltip
asChild
content={translate(STRING.TOOLTIP_VIEW_SOURCE_FILE)}
>
<a
href={activeCapture.url}
className={cn(
buttonVariants({ size: 'icon', variant: 'ghost' })
)}
rel="noreferrer"
target="_blank"
>
<ExternalLinkIcon className="w-4 h-4" />
</a>
</BasicTooltip>
</>
) : (
<span className="pt-0.5 text-muted-foreground truncate">
{translate(STRING.LOADING_DATA)}...
</span>
)}
</div>
<div className="flex items-center md:justify-center">
<CaptureNavigation
activeCapture={activeCapture}
timeline={timeline}
setActiveCaptureId={setActiveCaptureId}
/>
</div>
<div className="flex-1 flex items-center md:justify-end">
<ViewSettings
onSettingsChange={setSettings}
settings={settings}
/>
</div>
</div>
</div>
<div className="bg-background rounded-lg border border-border p-2 md:p-4">
<div className="p-2 bg-background rounded-lg border border-border overflow-hidden md:col-span-2 md:p-4">
<ActivityPlot
session={session}
setActiveCaptureId={setActiveCaptureId}
snapToDetections={settings.snapToDetections}
timeline={timeline}
/>
<TimelineSlider
Expand Down
19 changes: 1 addition & 18 deletions ui/src/pages/session-details/view-settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,21 @@
import { DefaultFiltersTooltip } from 'components/filtering/default-filter-control'
import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
import { SessionDetails } from 'data-services/models/session-details'
import { SettingsIcon } from 'lucide-react'
import { BasicTooltip, Button, Checkbox, Popover } from 'nova-ui-kit'
import { useParams } from 'react-router-dom'
import { STRING, translate } from 'utils/language'

export const ViewSettings = ({
onSettingsChange,
session,
settings,
}: {
onSettingsChange: (settings: {
defaultFilters: boolean
showDetections: boolean
snapToDetections: boolean
}) => void
session: SessionDetails
settings: {
defaultFilters: boolean
showDetections: boolean
snapToDetections: boolean
}
}) => {
const { projectId } = useParams()
Expand All @@ -33,7 +28,7 @@ export const ViewSettings = ({
<Button
aria-label={translate(STRING.VIEW_SETTINGS)}
size="icon"
variant="ghost"
variant="outline"
>
<SettingsIcon className="w-4 h-4" />
</Button>
Expand Down Expand Up @@ -70,18 +65,6 @@ export const ViewSettings = ({
/>
{project ? <DefaultFiltersTooltip project={project} /> : null}
</div>
<Checkbox
id="snap-to-detections"
label={translate(STRING.SNAP_TO_DETECTIONS)}
checked={settings.snapToDetections}
onCheckedChange={() =>
onSettingsChange({
...settings,
snapToDetections: !settings.snapToDetections,
})
}
disabled={session.numDetections ? false : true}
/>
</div>
</Popover.Content>
</Popover.Root>
Expand Down