miteruzo/btrc-hub
1
0
フォーク 0
コード イシュー 63 プルリクエスト リリース Wiki アクティビティ

#434

ソースを参照
このコミットが含まれているのは:
みてるぞ
2026-10-27 01:02:53 +09:00
親 5493673996
コミット 53ea010f82
7個のファイルの変更、160行の追加、94行の削除
Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む
frontend/src/components/counts/CountsControls.tsx
+34 -24
ファイルの表示
@@ -40,11 +40,9 @@ const CountsControls = (
const id = useId ()
const motion = useClientMotion ()
const [draft, setDraft] = useState (() => new URLSearchParams (applied))
const order = applied.get ('order')
const nestedJSON = applied.get ('nested_json')
const rowNumbers = applied.get ('row_numbers')
const thumbnail = selectedCountColumns (resource, applied, definition).includes ('thumbnail')
const previousThumbnail = useRef (thumbnail)
const previousApplied = useRef ({ resource, params: new URLSearchParams (applied) })
const appliedState = applied.toString ()
const mode = draft.get ('mode') ?? 'summary'
const columns = selectedCountColumns (resource, draft, definition)
const details = mode === 'details'
@@ -53,30 +51,42 @@ const CountsControls = (
&& !countsNestedIsScalar (field.children, field.key, draft)
&& field.children.some (child => selectedCountChildren (draft)
.has (`${field.key}.${child.key}`)))
// Preserve absent columns until a real presentation change or an explicit edit.
useEffect (() => {
if (previousThumbnail.current === thumbnail) return
previousThumbnail.current = thumbnail
setDraft (previous => {
const next = new URLSearchParams (previous)
const columns = selectedCountColumns (resource, previous, definition)
.filter (column => column !== 'thumbnail')
next.set ('columns', (thumbnail ? ['thumbnail', ...columns] : columns).join (' '))
return next
})
}, [thumbnail, resource, definition])
useEffect (() => {
setDraft (previous => {
const next = new URLSearchParams (previous)
const display = { order, nested_json: nestedJSON, row_numbers: rowNumbers }
for (const [key, value] of Object.entries (display))
const nextApplied = new URLSearchParams (appliedState)
const previous = previousApplied.current
previousApplied.current = { resource, params: nextApplied }
setDraft (draft => {
if (previous.resource !== resource
|| previous.params.get ('definition') !== nextApplied.get ('definition'))
return nextApplied
const keys = new Set ([...previous.params.keys (), ...nextApplied.keys ()])
const changed = [...keys].filter (key =>
previous.params.get (key) !== nextApplied.get (key))
const before = selectedCountColumns (resource, previous.params, definition)
const after = selectedCountColumns (resource, nextApplied, definition)
const selectionChanged = before.filter (column => column !== 'thumbnail').join (' ')
!== after.filter (column => column !== 'thumbnail').join (' ')
const internal = ['execution_at', 'timezone', 'order', 'nested_json', 'row_numbers']
if (changed.some (key => key === 'columns' ? selectionChanged : !internal.includes (key)))
return nextApplied
// Internal URL enrichment and immediate display changes preserve pending edits.
const next = new URLSearchParams (draft)
for (const key of changed)
{
if (value == null) next.delete (key)
else next.set (key, value)
if (key === 'columns')
{
const columns = selectedCountColumns (resource, draft, definition)
.filter (column => column !== 'thumbnail')
next.set ('columns', (after.includes ('thumbnail')
? ['thumbnail', ...columns] : columns).join (' '))
continue
}
next.delete (key)
for (const value of nextApplied.getAll (key)) next.append (key, value)
}
return next
return next.toString () === draft.toString () ? draft : next
})
}, [order, nestedJSON, rowNumbers])
}, [appliedState, resource, definition])
const history = draft.get ('definition') === 'history'
const update = (key: string, value: string) => setDraft (previous => {
const next = new URLSearchParams (previous)
frontend/src/components/counts/CountsSummaryResults.tsx
+62 -17
ファイルの表示
@@ -45,6 +45,7 @@ const CountsSummaryTable = (
? 'singleTotal' : 'grandTotal') : 'subtotal').text
const leading = Math.max (rows.length, cols.length > 0 ? 1 : 0)
const levels = Math.max (1, cols.length)
const headingLevels = cols.length === 0 ? 1 : levels * 2
const names = (header: CountsPivotHeader, axes: CountsAxis[], offset: number) =>
header.values.map ((value, index) => display (value, axes[index], offset + index))
const columnKey = (header: CountsPivotHeader) => `${header.kind}:${JSON.stringify (header.values)}`
@@ -119,14 +120,13 @@ const CountsSummaryTable = (
if (span === 0) labels[column + (numbered ? 1 : 0)] = ''
}))
// This unmerged matrix is also the single source for TSV and HTML clipboard headings.
const headingRows = Array.from ({ length: levels }, (_, level) => [
const valueHeadingRows = Array.from ({ length: levels }, (_, level) => [
...(numbered ? [level === 0 ? message ('rowNumberHeading').text : ''] : []),
...Array.from ({ length: leading }, (_, index) =>
level === 0 && rows[index] != null
? countsAxisLabel (rows[index], definition, locale).text : ''),
...columnHeaders.map ((header, index) => {
if (cols.length === 0) return header.kind === 'data'
? message ('count').text : aggregateLabel (header)
if (cols.length === 0) return message ('count').text
if (level > header.values.length) return ''
if (level === header.values.length)
return header.kind === 'data' ? '' : aggregateLabel (header)
@@ -137,6 +137,48 @@ const CountsSummaryTable = (
return ''
return display (header.values[level], cols[level], rows.length + level)
})])
const axisHeadingRows = cols.map ((axis, level) => [
...(numbered ? [''] : []), ...Array.from ({ length: leading }, () => ''),
...columnHeaders.map ((header, index) => {
if (header.values.length < level) return ''
const previous = columnHeaders[index - 1]
const prefix = JSON.stringify (header.values.slice (0, level))
return (previous != null && previous.values.length >= level
&& JSON.stringify (previous.values.slice (0, level)) === prefix)
? '' : countsAxisLabel (axis, definition, locale).text
})])
const headingRows = cols.length === 0 ? valueHeadingRows
: axisHeadingRows.flatMap ((headings, level) => [headings, valueHeadingRows[level]])
if (cols.length > 0)
{
for (let index = 0; index < leading + (numbered ? 1 : 0); ++index)
{
headingRows[0][index] = valueHeadingRows[0][index]
headingRows[1][index] = ''
}
}
const axisHeaderCells = (level: number) => {
const output = []
for (let index = 0; index < columnHeaders.length; ++index)
{
const header = columnHeaders[index]
if (header.values.length < level) continue
const prefix = JSON.stringify (header.values.slice (0, level))
let span = 1
while (index + span < columnHeaders.length)
{
const sibling = columnHeaders[index + span]
if (sibling.values.length < level
|| JSON.stringify (sibling.values.slice (0, level)) !== prefix) break
++span
}
const name = countsAxisLabel (cols[level], definition, locale)
output.push (<th key={index} colSpan={span} scope="colgroup"
lang={name.language} className="px-2 py-1">{name.text}</th>)
index += span - 1
}
return output
}
const matrix = rowHeaders.map ((header, index) => [...rowLabels[index],
...columnHeaders.map (column => String (count (header, column)))])
const headerCells = (level: number) => {
@@ -147,8 +189,10 @@ const CountsSummaryTable = (
if (cols.length > 0 && level > header.values.length) continue
const aggregate = header.kind !== 'data' && level === header.values.length
const leaf = level === levels - 1 || aggregate
const text = aggregate ? aggregateLabel (header)
: (cols.length === 0 ? message ('count').text
const text =
cols.length === 0
? message ('count').text
: (aggregate ? aggregateLabel (header)
: display (header.values[level], cols[level], rows.length + level))
let span = 1
if (!leaf)
@@ -165,7 +209,8 @@ const CountsSummaryTable = (
const sortKey = leaf ? measureKey (header) : `a${rows.length + level}`
const field = leaf ? columnKey (header) : sortKey
output.push (<CountsSortHeader key={`${level}:${field}:${index}`} field={field}
colSpan={span} rowSpan={aggregate ? levels - level : 1} resizable={leaf}
colSpan={span} resizable={leaf}
rowSpan={(aggregate && cols.length > 0) ? (levels - level) * 2 - 1 : 1}
totalKind={header.kind !== 'data' ? header.kind : undefined}
dragId={level === 0 && header.values.length > 0
? dragIds[JSON.stringify (header.values.slice (0, 1))] : undefined}
@@ -184,16 +229,18 @@ const CountsSummaryTable = (
identity={`${countsRequestParams (params)}:${JSON.stringify (keys)}`}
className="text-left text-sm">
<thead className="sticky top-0 z-20">
{headingRows.map ((_, level) => <tr key={level}>
{level === 0 && <>
{numbered && <CountsRowNumber rowSpan={levels}/>}
{headingRows.map ((_, tier) => <tr key={tier}>
{tier === 0 && <>
{numbered && <CountsRowNumber rowSpan={headingLevels}/>}
{Array.from ({ length: leading }, (_, index) => rows[index] == null
? <th key={index} rowSpan={levels}/>
? <th key={index} rowSpan={headingLevels}/>
: <CountsSortHeader key={rows[index].field} field={`a${index}`}
rowSpan={levels} label={countsAxisLabel (rows[index], definition, locale)}
rowSpan={headingLevels}
label={countsAxisLabel (rows[index], definition, locale)}
sorts={sorts} change={change}/>)}
</>}
{headerCells (level)}
{(cols.length > 0 && tier % 2 === 0)
? axisHeaderCells (tier / 2) : headerCells (Math.floor (tier / 2))}
</tr>)}
</thead>
<tbody>{rowHeaders.map ((row, index) => <tr key={columnKey (row)}>
@@ -204,21 +251,19 @@ const CountsSummaryTable = (
role={axis >= 0 ? 'rowheader' : undefined} data-counts-copy={value}
data-counts-aggregate={row.kind !== 'data' ? '' : undefined}
data-counts-total={row.kind !== 'data' ? row.kind : undefined}
data-counts-row-total={row.kind !== 'data' ? row.kind : undefined}
className={cn ('overflow-hidden break-words border px-2 py-1 dark:border-slate-700',
numbered && offset === 0 && 'text-right tabular-nums')}>{value}</td>
})}
{columnHeaders.map (column => <td key={columnKey (column)}
data-counts-copy={String (count (row, column))}
data-counts-row-total={row.kind !== 'data' ? row.kind : undefined}
data-counts-total={(row.kind === 'grand_total' || column.kind === 'grand_total')
? 'grand_total' : ((row.kind === 'subtotal' || column.kind === 'subtotal')
? 'subtotal' : undefined)}
data-counts-aggregate={(row.kind !== 'data' || column.kind !== 'data')
? '' : undefined}
className={cn ('border px-2 py-1 dark:border-slate-700',
(row.kind !== 'data' || column.kind !== 'data')
&& 'bg-slate-200 text-slate-950 font-semibold',
(row.kind !== 'data' || column.kind !== 'data')
&& 'dark:bg-slate-700 dark:text-slate-50')}>
className="border px-2 py-1 dark:border-slate-700">
<PrefetchLink to={drill (row, column)}>{count (row, column)}</PrefetchLink>
</td>)}
</tr>)}</tbody>
frontend/src/components/counts/countsTable.css
+10 -19
ファイルの表示
@@ -18,17 +18,6 @@
@apply bg-slate-900 text-slate-100;
}
.counts-grid > tbody > tr > td[data-counts-aggregate]:not([data-counts-selected]) {
background-color: #e2e8f0;
color: #0f172a;
font-weight: 600;
}
.dark .counts-grid > tbody > tr > td[data-counts-aggregate]:not([data-counts-selected]) {
background-color: #334155;
color: #f8fafc;
}
.counts-grid > thead {
@apply bg-slate-200 text-slate-950;
}
@@ -55,25 +44,27 @@
@apply border-l-2 border-slate-300 dark:border-slate-600;
}
.counts-grid > tbody > tr > td[data-counts-total='subtotal']:not([data-counts-selected]),
.counts-grid > thead > tr > th[data-counts-total='subtotal'] {
/* Aggregate kind is semantic; only aggregate rows receive a background. */
.counts-grid > tbody > tr > td[data-counts-total],
.counts-grid > thead > tr > th[data-counts-total] {
@apply border-l border-l-slate-400 font-semibold dark:border-l-slate-500;
}
.counts-grid > tbody > tr > td[data-counts-row-total='subtotal']:not([data-counts-selected]) {
background-color: #e2e8f0;
color: #0f172a;
font-weight: 600;
}
.counts-grid > tbody > tr > td[data-counts-total='grand_total']:not([data-counts-selected]),
.counts-grid > thead > tr > th[data-counts-total='grand_total'] {
.counts-grid > tbody > tr > td[data-counts-row-total='grand_total']:not([data-counts-selected]) {
background-color: #cbd5e1;
color: #0f172a;
font-weight: 700;
}
.dark .counts-grid > tbody > tr > td[data-counts-total='subtotal']:not([data-counts-selected]),
.dark .counts-grid > thead > tr > th[data-counts-total='subtotal'] {
.dark .counts-grid > tbody > tr > td[data-counts-row-total='subtotal']:not([data-counts-selected]) {
background-color: #334155;
color: #f1f5f9;
}
.dark .counts-grid > tbody > tr > td[data-counts-total='grand_total']:not([data-counts-selected]),
.dark .counts-grid > thead > tr > th[data-counts-total='grand_total'] {
.dark .counts-grid > tbody > tr > td[data-counts-row-total='grand_total']:not([data-counts-selected]) {
background-color: #475569;
color: #fff;
}
frontend/src/components/layout/SidebarComponent.tsx
+11 -5
ファイルの表示
@@ -15,6 +15,7 @@ type Props = {
children: ReactNode
className?: string
maxWidth?: number
maxWidthRatio?: number
onWidthChange?: (width: number) => void
sidebarKey: string
side?: SidebarSide }
@@ -67,6 +68,7 @@ const SidebarComponent: FC<Props> = ({
children,
className,
maxWidth,
maxWidthRatio,
onWidthChange,
sidebarKey,
side = 'left',
@@ -80,6 +82,7 @@ const SidebarComponent: FC<Props> = ({
)
const rootRef = useRef<HTMLDivElement | null> (null)
const maxWidthRef = useRef (maxWidth)
const maxWidthRatioRef = useRef (maxWidthRatio)
const getContainerWidth = useCallback (() => {
const containerWidth = rootRef.current
?.closest ('[data-sidebar-container]')
@@ -93,12 +96,14 @@ const SidebarComponent: FC<Props> = ({
const viewportWidth =
typeof window === 'undefined' ? containerWidth : window.innerWidth
const viewportMaxWidth = Math.floor (viewportWidth * MAX_VIEWPORT_WIDTH_RATIO)
const maxAllowedWidth =
maxWidthRef.current == null
const ratioMaxWidth = maxWidthRatioRef.current == null
? Infinity : Math.floor (containerWidth * maxWidthRatioRef.current)
const configuredMaxWidth = maxWidthRef.current == null
? getSidebarMaxWidth (containerWidth)
: Math.max (
MIN_SIDEBAR_WIDTH,
: Math.max (MIN_SIDEBAR_WIDTH,
Math.min (viewportMaxWidth, maxWidthRef.current))
const maxAllowedWidth = Math.max (MIN_SIDEBAR_WIDTH,
Math.min (ratioMaxWidth, configuredMaxWidth))
return Math.min (maxAllowedWidth, Math.max (MIN_SIDEBAR_WIDTH, nextWidth))
}, [])
@@ -171,10 +176,11 @@ const SidebarComponent: FC<Props> = ({
useEffect (() => {
maxWidthRef.current = maxWidth
maxWidthRatioRef.current = maxWidthRatio
const containerWidth = getContainerWidth ()
const nextWidth = getClampedWidth (widthRef.current, containerWidth)
applyWidth (nextWidth)
}, [applyWidth, getClampedWidth, getContainerWidth, maxWidth])
}, [applyWidth, getClampedWidth, getContainerWidth, maxWidth, maxWidthRatio])
const updateWidth = useCallback ((clientX: number) => {
const state = resizeRef.current