mirror of
https://github.com/hanzoai/insights.git
synced 2026-10-30 16:15:31 +00:00
zeekay
1b367e2b62
The tree was a debranded snapshot of upstream taken around 2026-02-20, and upstream has moved about five months since. This replaces it with upstream master, mechanically re-derived: bin/debrand does the rename, and the pipeline and squashed migrations are restored from the shipped tree. Not a merge. The previous import replaced the tree wholesale in a single commit, so there is no shared content history to merge against. Reproducing the rename on the new tree is what actually converges. What survives: .hanzo/workflows, the Dockerfiles and bin/docker* entrypoints, compose files, LLM.md, and insights/migrations. The squashed initial migration is load-bearing — the live database records it by name, so upstream's ~918 individual migrations cannot come back. Nine products are dropped as unreferenced. Twenty-one more that we do not run are kept anyway because the core app still imports them; unpicking those is a refactor and does not belong in a rebase. This base does not build yet, and the reasons are not in the rename: upstream now wants Python 3.13.13 against our 3.12.12 and Django 5.2 against our 4.2, and the dependency manifests still name upstream packages that we republish under our own names. Those are decisions, not renames.
114 lines
4.6 KiB
TypeScript
114 lines
4.6 KiB
TypeScript
import { useCallback, useMemo } from 'react'
|
||
|
||
import { Button, SpinnerOverlay } from '@hanzo/elements'
|
||
|
||
import { Sparkline } from 'lib/components/Sparkline'
|
||
|
||
import {
|
||
formatBucketLabel,
|
||
selectionToDurationRange,
|
||
snapDurationToBucket,
|
||
type TracingDurationHistogramData,
|
||
} from './durationBuckets'
|
||
import type { DurationRange } from './operationFilters'
|
||
import { categoryDurationXScale } from './TracingSparkline'
|
||
|
||
interface OperationHistogramProps {
|
||
data: TracingDurationHistogramData
|
||
loading: boolean
|
||
selection: DurationRange | null
|
||
onSelect: (selection: DurationRange) => void
|
||
onClear: () => void
|
||
/** Clearing the selection refetches samples — disable the button while that's in flight. */
|
||
samplesLoading?: boolean
|
||
/** Extra header content, right-aligned (e.g. the histogram/heatmap chart toggle). */
|
||
actions?: React.ReactNode
|
||
}
|
||
|
||
export function OperationHistogram({
|
||
data,
|
||
loading,
|
||
selection,
|
||
onSelect,
|
||
onClear,
|
||
samplesLoading = false,
|
||
actions,
|
||
}: OperationHistogramProps): JSX.Element {
|
||
const onSelectionChange = useCallback(
|
||
({ startIndex, endIndex }: { startIndex: number; endIndex: number }): void => {
|
||
const range = selectionToDurationRange(data.bucketsNs, startIndex, endIndex)
|
||
if (range) {
|
||
onSelect(range)
|
||
}
|
||
},
|
||
[data.bucketsNs, onSelect]
|
||
)
|
||
|
||
// Map the persisted selection back onto bucket indices: snap each edge onto the same
|
||
// 1-2-5 series the backend bucketed with, then find those buckets on the axis.
|
||
const highlightedRange = useMemo(() => {
|
||
if (!selection || data.bucketsNs.length === 0) {
|
||
return null
|
||
}
|
||
const { bucketsNs, labels } = data
|
||
const startIndexRaw = bucketsNs.indexOf(snapDurationToBucket(selection.minNs))
|
||
// maxNs is the exclusive upper edge — the highlight ends at the bar before it.
|
||
const endIndexRaw = bucketsNs.indexOf(snapDurationToBucket(selection.maxNs))
|
||
// An off-axis edge clamps toward its near end; a selection entirely off the axis
|
||
// (e.g. persisted before a date change reshaped the distribution) collapses to
|
||
// start >= end and renders no highlight.
|
||
const startIndex = startIndexRaw !== -1 ? startIndexRaw : selection.minNs <= bucketsNs[0] ? 0 : bucketsNs.length
|
||
const endIndex =
|
||
endIndexRaw !== -1 ? endIndexRaw : selection.maxNs > bucketsNs[bucketsNs.length - 1] ? bucketsNs.length : 0
|
||
if (startIndex >= endIndex) {
|
||
return null
|
||
}
|
||
return { xMin: labels[startIndex], xMax: labels[endIndex] ?? labels[labels.length - 1] }
|
||
}, [selection, data])
|
||
|
||
return (
|
||
<div className="flex flex-col gap-1">
|
||
<div className="flex items-center gap-2 min-h-6">
|
||
<span className="text-xs text-muted">Latency distribution</span>
|
||
{selection ? (
|
||
<>
|
||
<span className="text-xs font-mono">
|
||
{formatBucketLabel(selection.minNs)} – {formatBucketLabel(selection.maxNs)}
|
||
</span>
|
||
<Button
|
||
size="xsmall"
|
||
type="tertiary"
|
||
onClick={onClear}
|
||
disabledReason={samplesLoading ? 'Loading samples…' : undefined}
|
||
>
|
||
Clear
|
||
</Button>
|
||
</>
|
||
) : (
|
||
<span className="text-xs text-muted italic">Drag to select a duration range</span>
|
||
)}
|
||
{actions && <div className="ml-auto">{actions}</div>}
|
||
</div>
|
||
<div className="relative h-32">
|
||
{data.data.length > 0 ? (
|
||
<Sparkline
|
||
labels={data.labels}
|
||
data={data.data}
|
||
className="w-full h-full"
|
||
onSelectionChange={onSelectionChange}
|
||
withXScale={categoryDurationXScale}
|
||
renderLabel={(label) => label}
|
||
tooltipRowCutoff={100}
|
||
hideZerosInTooltip
|
||
sortTooltipByCount
|
||
highlightedRange={highlightedRange}
|
||
/>
|
||
) : !loading ? (
|
||
<div className="h-full text-muted flex items-center justify-center">No spans in this range</div>
|
||
) : null}
|
||
{loading && <SpinnerOverlay />}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|