Skip to content

Commit 7f3ed48

Browse files
ludovicianulludovicianul
committed
chore: Finalize bucket reports
1 parent 775c976 commit 7f3ed48

5 files changed

Lines changed: 160 additions & 34 deletions

File tree

‎src/main/java/dev/dochia/cli/core/report/BucketsCalculator.java‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ private static Map<String, Object> createResultMapForReason(
9797
Map<String, Object> resultMap = new HashMap<>();
9898
resultMap.put("resultReason", resultReason);
9999
resultMap.put("buckets", bucketList);
100+
resultMap.put("status", testCasesForReason.getFirst().getResult());
100101
return resultMap;
101102
}
102103

@@ -245,7 +246,7 @@ private static List<List<TestCaseSummary>> bucketBySimilarity(
245246
* Attempts to add a test case to an existing bucket based on similarity.
246247
*
247248
* @param current Current test case to add
248-
* @param buckets Existing buckets
249+
* @param buckets Existing buckets
249250
* @param comparisonTracker Tracker for previous comparisons
250251
* @param similarityChecker Predicate to determine error similarity
251252
* @return True if added to a bucket, false otherwise
@@ -288,7 +289,7 @@ private static boolean tryAddToExistingCluster(
288289
*
289290
* @param current Current test case
290291
* @param comparisonTracker Existing comparison tracker
291-
* @param bucketSize Number of buckets
292+
* @param bucketSize Number of buckets
292293
* @return Comparison tracking array
293294
*/
294295
private static Boolean[] getOrCreateComparisons(

‎src/main/resources/scripts.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -285,10 +285,10 @@ function toggleCluster(element) {
285285
}
286286

287287
// Toggle the arrow icon
288-
const toggle = element.querySelector('.cluster-item-toggle');
289-
if (toggle) {
290-
toggle.textContent = element.classList.contains('collapsed') ? '▶' : '▼';
291-
}
288+
// const toggle = element.querySelector('.cluster-item-toggle');
289+
// if (toggle) {
290+
// toggle.textContent = element.classList.contains('collapsed') ? '▶' : '▼';
291+
// }
292292
}
293293

294294
function toggleErrorCluster(element) {
@@ -302,10 +302,10 @@ function toggleErrorCluster(element) {
302302
}
303303

304304
// Toggle the arrow icon
305-
const toggle = element.querySelector('.cluster-toggle');
306-
if (toggle) {
307-
toggle.textContent = element.classList.contains('collapsed') ? '▶' : '▼';
308-
}
305+
// const toggle = element.querySelector('.cluster-toggle');
306+
// if (toggle) {
307+
// toggle.textContent = element.classList.contains('collapsed') ? '▶' : '▼';
308+
// }
309309
}
310310

311311
// Optional: Add function to expand or collapse all clusters

‎src/main/resources/styles-buckets.css‎

Lines changed: 141 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -93,22 +93,92 @@
9393
border-radius: 1rem;
9494
}
9595

96+
/* Material Icons Base */
97+
.material-icons-round {
98+
font-family: 'Material Icons Round';
99+
font-weight: normal;
100+
font-style: normal;
101+
font-size: 1.5rem;
102+
line-height: 1;
103+
letter-spacing: normal;
104+
text-transform: none;
105+
display: inline-flex;
106+
white-space: nowrap;
107+
word-wrap: normal;
108+
direction: ltr;
109+
-webkit-font-feature-settings: 'liga';
110+
-webkit-font-smoothing: antialiased;
111+
vertical-align: middle;
112+
}
113+
114+
/* Group Toggle */
96115
.cluster-toggle {
97-
color: #6c757d;
98-
font-size: 1.1rem;
99-
transition: all 0.3s ease;
100-
width: 24px;
101-
height: 24px;
102-
display: flex;
116+
color: var(--text-muted);
117+
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
118+
width: 32px;
119+
height: 32px;
120+
display: inline-flex;
103121
align-items: center;
104122
justify-content: center;
123+
flex-shrink: 0;
124+
margin-left: 0.5rem;
125+
cursor: pointer;
105126
border-radius: 50%;
127+
}
128+
129+
.dark-theme .cluster-toggle {
130+
color: var(--text-dark-muted);
131+
}
132+
133+
.cluster-toggle:hover {
134+
color: var(--accent-color);
135+
background-color: rgba(74, 42, 236, 0.1);
136+
}
137+
138+
.dark-theme .cluster-toggle:hover {
139+
color: #818cf8;
140+
background-color: rgba(129, 140, 248, 0.1);
141+
}
142+
143+
/* Collapse/Expand Animations */
144+
.cluster-header.collapsed .cluster-toggle {
145+
transform: rotate(-90deg);
146+
}
147+
148+
/* Bucket Toggle */
149+
.cluster-item-toggle {
150+
color: var(--text-muted);
151+
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease, background-color 0.2s ease;
152+
width: 28px;
153+
height: 28px;
154+
display: inline-flex;
155+
align-items: center;
156+
justify-content: center;
106157
flex-shrink: 0;
107-
margin-left: 1rem;
158+
margin-left: 0.5rem;
159+
cursor: pointer;
160+
border-radius: 4px;
161+
}
162+
163+
.dark-theme .cluster-item-toggle {
164+
color: var(--text-dark-muted);
165+
}
166+
167+
.cluster-item-toggle:hover {
168+
color: var(--accent-color);
169+
background-color: rgba(74, 42, 236, 0.1);
170+
}
171+
172+
.dark-theme .cluster-item-toggle:hover {
173+
color: #818cf8;
174+
background-color: rgba(129, 140, 248, 0.1);
175+
}
176+
177+
.cluster-item-header.collapsed .cluster-item-toggle {
178+
transform: rotate(-90deg);
108179
}
109180

110181
.cluster-toggle::before {
111-
content: '▼';
112182
display: inline-block;
113183
transition: transform 0.3s ease;
114184
}
@@ -192,26 +262,68 @@
192262
gap: 0.5rem;
193263
}
194264

265+
/* Icons */
195266
.cluster-icon {
196-
font-size: 1.1em;
267+
font-size: 1.25rem;
268+
color: var(--accent-color);
269+
margin-right: 0.5rem;
270+
display: inline-flex;
271+
align-items: center;
272+
transition: color 0.2s ease;
273+
}
274+
275+
.dark-theme .cluster-icon {
276+
color: #818cf8;
277+
}
278+
279+
.path-icon {
280+
font-size: 1.1rem;
281+
color: var(--text-muted);
282+
margin-right: 0.5rem;
283+
display: inline-flex;
284+
align-items: center;
285+
transition: color 0.2s ease;
286+
}
287+
288+
.dark-theme .path-icon {
289+
color: var(--text-dark-muted);
197290
}
198291

199292
.cluster-item-toggle {
200-
color: #6c757d;
201-
font-size: 1rem;
202-
transition: all 0.3s ease;
293+
color: var(--text-muted);
294+
font-size: 1.25rem;
295+
transition: transform 0.3s ease, color 0.2s ease;
203296
width: 24px;
204297
height: 24px;
205-
display: flex;
298+
display: inline-flex;
206299
align-items: center;
207300
justify-content: center;
208-
border-radius: 50%;
209301
flex-shrink: 0;
210-
margin-left: 1rem;
302+
margin-left: 0.5rem;
303+
cursor: pointer;
304+
}
305+
306+
.dark-theme .cluster-item-toggle {
307+
color: var(--text-dark-muted);
308+
}
309+
310+
.cluster-item-toggle:hover {
311+
color: var(--accent-color);
312+
}
313+
314+
.dark-theme .cluster-item-toggle:hover {
315+
color: #818cf8;
316+
}
317+
318+
.cluster-item-header.collapsed .cluster-item-toggle {
319+
transform: rotate(0deg);
320+
}
321+
322+
.cluster-header.collapsed .cluster-toggle {
323+
transform: rotate(-90deg);
211324
}
212325

213326
.cluster-item-toggle::before {
214-
content: '▼';
215327
display: inline-block;
216328
transition: transform 0.3s ease;
217329
font-size: 0.8em;
@@ -597,3 +709,16 @@
597709
animation: fadeIn 0.3s ease-out forwards;
598710
}
599711

712+
.cluster-title.error {
713+
color: var(--error);
714+
}
715+
716+
717+
.cluster-title.warning {
718+
color: var(--warning);
719+
}
720+
721+
722+
.cluster-title.success {
723+
color: var(--success);
724+
}

‎src/main/resources/styles.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1691,7 +1691,7 @@ body.dark-theme .report-footer {
16911691
/* Dashboard-style layout */
16921692
.test-dashboard {
16931693
display: grid;
1694-
grid-template-columns: 380px 1fr;
1694+
grid-template-columns: 390px 1fr;
16951695
gap: 2rem;
16961696
max-width: 1400px;
16971697
margin: 0 auto;
@@ -1870,7 +1870,6 @@ body.dark-theme .sidebar-label {
18701870
color: var(--text-primary);
18711871
font-weight: 600;
18721872
text-align: right;
1873-
word-break: break-word;
18741873
font-size: 0.8125rem;
18751874
line-height: 1.3;
18761875
}

‎src/main/resources/summary-buckets.mustache‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Dochia - Execution Report</title>
77
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
89
<script src="chart.js"></script>
910
<link rel="stylesheet" href="styles.css">
1011
<link rel="stylesheet" href="styles-buckets.css">
@@ -109,21 +110,21 @@
109110
<div class="cluster-card">
110111
<div class="cluster-header" onclick="toggleErrorCluster(this)">
111112
<div class="cluster-header-content">
112-
<h3 class="cluster-title">{{resultReason}}</h3>
113+
<h3 class="cluster-title {{status}}">{{resultReason}}</h3>
113114
<div class="cluster-count">{{buckets.size}} buckets</div>
114115
</div>
115-
<div class="cluster-toggle"></div>
116+
<span class="material-icons-round cluster-toggle">expand_more</span>
116117
</div>
117118
<div class="cluster-content">
118119
<div class="clusters-container">
119120
{{#buckets}}
120121
<div class="cluster-item" style="border-left: 5px solid {{borderColor}};">
121122
<div class="cluster-item-header" onclick="toggleCluster(this)">
122123
<h4 class="cluster-item-title">
123-
<span class="cluster-icon">📁</span>
124-
Bucket {{bucketId}}
124+
<span class="material-icons-round cluster-icon">folder</span>
125+
<span class="bucket-title">Bucket {{bucketId}}</span>
125126
</h4>
126-
<div class="cluster-item-toggle"></div>
127+
<span class="material-icons-round cluster-item-toggle">expand_more</span>
127128
</div>
128129
<div class="cluster-item-content">
129130
<div class="cluster-detail">
@@ -133,7 +134,7 @@
133134
{{#paths}}
134135
<div class="path-group">
135136
<div class="path-header">
136-
<span class="path-icon">📍</span>
137+
<span class="material-icons-round path-icon">insert_link</span>
137138
<code class="path-value">{{path}}</code>
138139
</div>
139140
<div class="test-cases">

0 commit comments

Comments
 (0)