git.iko.soy/parseable-macos
on master help sign in
Make log table columns resizable and auto-fit to content (#4)
9fee70biko
ParseableViewer/Views/LogTableView.swift+136−36
compare with master
unifiedsplit
@@ -1,17 +1,39 @@
1import SwiftUI
1import SwiftUI
2
2
3−/// Shared column width logic used by both header and row views.
3+/// Computes the display width needed for a text string using the given font.
4+private func measureTextWidth(_ text: String, font: NSFont) -> CGFloat {
5+ let attributes: [NSAttributedString.Key: Any] = [.font: font]
6+ return ceil((text as NSString).size(withAttributes: attributes).width)
7+}
8+
9+/// Font used for header text measurement.
10+private let headerMeasureFont = NSFont.systemFont(ofSize: 10, weight: .semibold)
11+/// Font used for cell text measurement.
12+private let cellMeasureFont = NSFont.monospacedSystemFont(ofSize: 10, weight: .regular)
13+
14+/// Computes the ideal width for a single column by sampling record content.
4−func columnWidth(for column: String) -> CGFloat {
15+func idealColumnWidth(for column: String, records: [LogRecord]) -> CGFloat {
5− switch column {
16+ let padding: CGFloat = 28 // horizontal padding (6*2) + sort indicator + buffer
6− case "p_timestamp", "timestamp", "@timestamp", "time":
17+ let minWidth: CGFloat = 50
7− return 200
18+ let maxWidth: CGFloat = 600
8− case "level", "severity", "log_level":
19+ let sampleCount = min(records.count, 200)
9− return 80
20+
10− case "message", "msg", "body", "log":
21+ var widest = measureTextWidth(column, font: headerMeasureFont)
11− return 400
22+ for i in 0..<sampleCount {
12− default:
23+ let text = records[i][column]?.displayString ?? ""
13− return 160
24+ widest = max(widest, measureTextWidth(text, font: cellMeasureFont))
14 }
25 }
26+
27+ return min(max(widest + padding, minWidth), maxWidth)
28+}
29+
30+/// Computes ideal widths for all columns by sampling record content.
31+func computeColumnWidths(columns: [String], records: [LogRecord]) -> [String: CGFloat] {
32+ var widths: [String: CGFloat] = [:]
33+ for column in columns {
34+ widths[column] = idealColumnWidth(for: column, records: records)
35+ }
36+ return widths
15}
37}
16
38
17/// Shared log-level color mapping.
39/// Shared log-level color mapping.
@@ -25,6 +47,8 @@ func levelColor(for value: String) -> Color {
25 }
47 }
26}
48}
27
49
50+// MARK: - LogTableView
51+
28struct LogTableView: View {
52struct LogTableView: View {
29 let records: [LogRecord]
53 let records: [LogRecord]
30 let columns: [String]
54 let columns: [String]
@@ -34,6 +58,7 @@ struct LogTableView: View {
34 @State private var selectedIndex: Int?
58 @State private var selectedIndex: Int?
35 @State private var cachedSorted: [LogRecord] = []
59 @State private var cachedSorted: [LogRecord] = []
36 @State private var sortTask: Task<Void, Never>?
60 @State private var sortTask: Task<Void, Never>?
61+ @State private var columnWidths: [String: CGFloat] = [:]
37
62
38 var body: some View {
63 var body: some View {
39 if records.isEmpty {
64 if records.isEmpty {
@@ -54,6 +79,7 @@ struct LogTableView: View {
54 LogRowView(
79 LogRowView(
55 record: cachedSorted[index],
80 record: cachedSorted[index],
56 columns: columns,
81 columns: columns,
82+ columnWidths: columnWidths,
57 isSelected: selectedIndex == index,
83 isSelected: selectedIndex == index,
58 isAlternate: index % 2 == 1
84 isAlternate: index % 2 == 1
59 )
85 )
@@ -66,7 +92,9 @@ struct LogTableView: View {
66 LogHeaderView(
92 LogHeaderView(
67 columns: columns,
93 columns: columns,
68 sortColumn: $sortColumn,
94 sortColumn: $sortColumn,
69− sortAscending: $sortAscending
95+ sortAscending: $sortAscending,
96+ columnWidths: $columnWidths,
97+ records: records
70 )
98 )
71 }
99 }
72 }
100 }
@@ -78,10 +106,16 @@ struct LogTableView: View {
78 .frame(minWidth: 300, idealWidth: 350)
106 .frame(minWidth: 300, idealWidth: 350)
79 }
107 }
80 }
108 }
81− .onChange(of: records) { _, _ in debouncedRebuildSort() }
109+ .onChange(of: records) { _, _ in
110+ columnWidths = computeColumnWidths(columns: columns, records: records)
111+ debouncedRebuildSort()
112+ }
82 .onChange(of: sortColumn) { _, _ in debouncedRebuildSort() }
113 .onChange(of: sortColumn) { _, _ in debouncedRebuildSort() }
83 .onChange(of: sortAscending) { _, _ in debouncedRebuildSort() }
114 .onChange(of: sortAscending) { _, _ in debouncedRebuildSort() }
115+ .onAppear {
116+ columnWidths = computeColumnWidths(columns: columns, records: records)
84− .onAppear { rebuildSort() }
117+ rebuildSort()
118+ }
85 }
119 }
86 }
120 }
87
121
@@ -113,39 +147,102 @@ struct LogTableView: View {
113 }
147 }
114}
148}
115
149
150+// MARK: - ColumnResizeHandle
151+
152+struct ColumnResizeHandle: View {
153+ @Binding var columnWidth: CGFloat
154+ @State private var isHovering = false
155+ @State private var initialWidth: CGFloat?
156+
157+ var body: some View {
158+ Color.clear
159+ .frame(width: 6)
160+ .overlay(
161+ Rectangle()
162+ .fill(Color.secondary.opacity(isHovering ? 0.5 : 0.2))
163+ .frame(width: 1)
164+ )
165+ .contentShape(Rectangle())
166+ .onHover { hovering in
167+ isHovering = hovering
168+ if hovering {
169+ NSCursor.resizeLeftRight.push()
170+ } else {
171+ NSCursor.pop()
172+ }
173+ }
174+ .gesture(
175+ DragGesture(minimumDistance: 1)
176+ .onChanged { gesture in
177+ if initialWidth == nil {
178+ initialWidth = columnWidth
179+ }
180+ let newWidth = (initialWidth ?? columnWidth) + gesture.translation.width
181+ columnWidth = min(max(newWidth, 40), 1000)
182+ }
183+ .onEnded { _ in
184+ initialWidth = nil
185+ }
186+ )
187+ }
188+}
189+
190+// MARK: - LogHeaderView
191+
116struct LogHeaderView: View {
192struct LogHeaderView: View {
117 let columns: [String]
193 let columns: [String]
118 @Binding var sortColumn: String?
194 @Binding var sortColumn: String?
119 @Binding var sortAscending: Bool
195 @Binding var sortAscending: Bool
196+ @Binding var columnWidths: [String: CGFloat]
197+ let records: [LogRecord]
120
198
121 var body: some View {
199 var body: some View {
122 HStack(spacing: 0) {
200 HStack(spacing: 0) {
123 ForEach(columns, id: \.self) { column in
201 ForEach(columns, id: \.self) { column in
124− Button {
125− if sortColumn == column {
126− sortAscending.toggle()
127− } else {
128− sortColumn = column
129− sortAscending = true
130− }
131− } label: {
132− HStack(spacing: 2) {
202+ HStack(spacing: 0) {
133− Text(column)
203+ Button {
134− .font(.caption.weight(.semibold))
135− .lineLimit(1)
136 if sortColumn == column {
204 if sortColumn == column {
137− Image(systemName: sortAscending ? "chevron.up" : "chevron.down")
205+ sortAscending.toggle()
138− .font(.caption2)
206+ } else {
207+ sortColumn = column
208+ sortAscending = true
139 }
209 }
210+ } label: {
211+ HStack(spacing: 2) {
212+ Text(column)
213+ .font(.caption.weight(.semibold))
214+ .lineLimit(1)
215+ if sortColumn == column {
216+ Image(systemName: sortAscending ? "chevron.up" : "chevron.down")
217+ .font(.caption2)
218+ }
219+ }
220+ }
221+ .buttonStyle(.plain)
222+ .padding(.horizontal, 6)
223+ .padding(.vertical, 4)
224+ .accessibilityLabel(sortColumn == column
225+ ? "Sort by \(column), \(sortAscending ? "ascending" : "descending")"
226+ : "Sort by \(column)")
227+
228+ Spacer(minLength: 0)
229+
230+ ColumnResizeHandle(
231+ columnWidth: Binding(
232+ get: { columnWidths[column] ?? 120 },
233+ set: { columnWidths[column] = $0 }
234+ )
235+ )
236+ }
237+ .frame(width: columnWidths[column] ?? 120, alignment: .leading)
238+ .contextMenu {
239+ Button("Auto-fit Column") {
240+ columnWidths[column] = idealColumnWidth(for: column, records: records)
241+ }
242+ Button("Auto-fit All Columns") {
243+ columnWidths = computeColumnWidths(columns: columns, records: records)
140 }
244 }
141 }
245 }
142− .buttonStyle(.plain)
143− .frame(width: columnWidth(for: column), alignment: .leading)
144− .padding(.horizontal, 6)
145− .padding(.vertical, 4)
146− .accessibilityLabel(sortColumn == column
147− ? "Sort by \(column), \(sortAscending ? "ascending" : "descending")"
148− : "Sort by \(column)")
149 }
246 }
150 }
247 }
151 .background(Color(nsColor: .controlBackgroundColor))
248 .background(Color(nsColor: .controlBackgroundColor))
@@ -153,9 +250,12 @@ struct LogHeaderView: View {
153 }
250 }
154}
251}
155
252
253+// MARK: - LogRowView
254+
156struct LogRowView: View {
255struct LogRowView: View {
157 let record: LogRecord
256 let record: LogRecord
158 let columns: [String]
257 let columns: [String]
258+ let columnWidths: [String: CGFloat]
159 let isSelected: Bool
259 let isSelected: Bool
160 let isAlternate: Bool
260 let isAlternate: Bool
161
261
@@ -166,7 +266,7 @@ struct LogRowView: View {
166 Text(value?.displayString ?? "")
266 Text(value?.displayString ?? "")
167 .font(.system(.caption, design: .monospaced))
267 .font(.system(.caption, design: .monospaced))
168 .lineLimit(1)
268 .lineLimit(1)
169− .frame(width: columnWidth(for: column), alignment: .leading)
269+ .frame(width: columnWidths[column] ?? 120, alignment: .leading)
170 .padding(.horizontal, 6)
270 .padding(.horizontal, 6)
171 .padding(.vertical, 3)
271 .padding(.vertical, 3)
172 .foregroundStyle(colorForValue(column: column, value: value))
272 .foregroundStyle(colorForValue(column: column, value: value))
ParseableViewerTests/LogTableHelperTests.swift+41−19
@@ -3,32 +3,54 @@ import SwiftUI
3@testable import ParseableViewer
3@testable import ParseableViewer
4
4
5final class LogTableHelperTests: XCTestCase {
5final class LogTableHelperTests: XCTestCase {
6− // MARK: - columnWidth
6+ // MARK: - idealColumnWidth
7
7
8− func testColumnWidthTimestampFields() {
8+ func testIdealColumnWidthRespectsMinimum() {
9− XCTAssertEqual(columnWidth(for: "p_timestamp"), 200)
9+ // A very short column name with no records should still meet the minimum width (50).
10− XCTAssertEqual(columnWidth(for: "timestamp"), 200)
10+ let width = idealColumnWidth(for: "x", records: [])
11− XCTAssertEqual(columnWidth(for: "@timestamp"), 200)
11+ XCTAssertGreaterThanOrEqual(width, 50)
12− XCTAssertEqual(columnWidth(for: "time"), 200)
13 }
12 }
14
13
15− func testColumnWidthLevelFields() {
14+ func testIdealColumnWidthRespectsMaximum() {
16− XCTAssertEqual(columnWidth(for: "level"), 80)
15+ // A record with extremely long content should be capped at 600.
17− XCTAssertEqual(columnWidth(for: "severity"), 80)
16+ let longString = String(repeating: "A", count: 2000)
18− XCTAssertEqual(columnWidth(for: "log_level"), 80)
17+ let records: [LogRecord] = [["wide": .string(longString)]]
18+ let width = idealColumnWidth(for: "wide", records: records)
19+ XCTAssertLessThanOrEqual(width, 600)
19 }
20 }
20
21
21− func testColumnWidthMessageFields() {
22+ func testIdealColumnWidthGrowsWithContent() {
22− XCTAssertEqual(columnWidth(for: "message"), 400)
23+ let shortRecords: [LogRecord] = [["col": .string("hi")]]
23− XCTAssertEqual(columnWidth(for: "msg"), 400)
24+ let longRecords: [LogRecord] = [["col": .string("a much longer cell value here")]]
24− XCTAssertEqual(columnWidth(for: "body"), 400)
25+ let shortWidth = idealColumnWidth(for: "col", records: shortRecords)
25− XCTAssertEqual(columnWidth(for: "log"), 400)
26+ let longWidth = idealColumnWidth(for: "col", records: longRecords)
27+ XCTAssertLessThan(shortWidth, longWidth)
26 }
28 }
27
29
28− func testColumnWidthDefault() {
30+ func testIdealColumnWidthConsidersHeaderName() {
29− XCTAssertEqual(columnWidth(for: "custom_field"), 160)
31+ // A long column name should produce a wider column even with no records.
30− XCTAssertEqual(columnWidth(for: "unknown"), 160)
32+ let shortHeader = idealColumnWidth(for: "id", records: [])
33+ let longHeader = idealColumnWidth(for: "a_very_long_column_name_here", records: [])
34+ XCTAssertLessThan(shortHeader, longHeader)
35+ }
36+
37+ // MARK: - computeColumnWidths
38+
39+ func testComputeColumnWidthsReturnsAllColumns() {
40+ let columns = ["a", "b", "c"]
41+ let records: [LogRecord] = [["a": .string("x"), "b": .int(1), "c": .null]]
42+ let widths = computeColumnWidths(columns: columns, records: records)
31− XCTAssertEqual(columnWidth(for: ""), 160)
43+ XCTAssertEqual(Set(widths.keys), Set(columns))
44+ }
45+
46+ func testComputeColumnWidthsEmptyRecords() {
47+ let columns = ["col1", "col2"]
48+ let widths = computeColumnWidths(columns: columns, records: [])
49+ // Should still return widths based on header names
50+ XCTAssertEqual(widths.count, 2)
51+ for (_, width) in widths {
52+ XCTAssertGreaterThanOrEqual(width, 50)
53+ }
32 }
54 }
33
55
34 // MARK: - levelColor
56 // MARK: - levelColor