Skip to content

Commit b10ed4a

Browse files
sgoudelissgoudelis
committed
Refactor bookmark label rendering: remove hasAliveStatus logic and associated LED indicators, adjust type indicator positioning and colors, and simplify label overlay rendering.
1 parent e108047 commit b10ed4a

File tree

1 file changed

+25
-65
lines changed

1 file changed

+25
-65
lines changed

‎frontend/src/components/waterfall/bookmarks-overlay.jsx‎

Lines changed: 25 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -486,11 +486,7 @@ const BookmarkCanvas = ({
486486
ctx.textAlign = 'center';
487487

488488
// Add semi-transparent background
489-
const hasAliveStatus = false;
490-
const ledRadius = 2.5;
491-
const ledGap = 5;
492-
const ledReserve = hasAliveStatus ? (ledRadius * 2 + ledGap) : 0;
493-
const leftReserve = ledReserve;
489+
const leftReserve = 0;
494490
const displayLabel = bookmark.label;
495491
const textMetrics = ctx.measureText(displayLabel);
496492
const textWidth = textMetrics.width;
@@ -516,13 +512,6 @@ const BookmarkCanvas = ({
516512
ctx.fill();
517513
ctx.globalAlpha = 1.0;
518514

519-
// Add subtle border
520-
ctx.strokeStyle = theme.palette.divider;
521-
ctx.globalAlpha = 0.2;
522-
ctx.lineWidth = 1;
523-
ctx.stroke();
524-
ctx.globalAlpha = 1.0;
525-
526515
// Draw the text
527516
ctx.shadowBlur = 2;
528517
ctx.shadowColor = theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)';
@@ -532,17 +521,6 @@ const BookmarkCanvas = ({
532521
ctx.fillText(displayLabel, textX, labelY + textHeight - padding);
533522
ctx.globalAlpha = 1.0;
534523

535-
if (hasAliveStatus) {
536-
const ledX = boxLeft + padding + ledRadius;
537-
const ledY = labelY + textHeight / 2;
538-
ctx.beginPath();
539-
ctx.arc(ledX, ledY, ledRadius, 0, 2 * Math.PI);
540-
ctx.fillStyle = bookmark.metadata.alive ? theme.palette.success.main : theme.palette.error.main;
541-
ctx.globalAlpha = 0.9;
542-
ctx.fill();
543-
ctx.globalAlpha = 1.0;
544-
}
545-
546524
// Draw dotted line from bottom of canvas to south edge of label
547525
ctx.beginPath();
548526
ctx.strokeStyle = sourceStyle.accent;
@@ -638,14 +616,11 @@ const BookmarkCanvas = ({
638616
ctx.textAlign = 'center';
639617

640618
// Add semi-transparent background
641-
const hasAliveStatus = typeof bookmark.metadata?.alive === 'boolean';
642-
const ledRadius = 2.5;
643-
const ledGap = 5;
644-
const ledReserve = hasAliveStatus ? (ledRadius * 2 + ledGap) : 0;
645619
const typeIndicatorWidth = 6;
646-
const typeIndicatorGap = 6;
647-
const typeIndicatorReserve = typeIndicatorWidth + typeIndicatorGap;
648-
const leftReserve = ledReserve + typeIndicatorReserve;
620+
const typeIndicatorGap = 3;
621+
const typeIndicatorInset = 2;
622+
const typeIndicatorReserve = typeIndicatorInset + typeIndicatorWidth + typeIndicatorGap;
623+
const leftReserve = typeIndicatorReserve;
649624
const displayLabel = bookmark.label;
650625
const textMetrics = ctx.measureText(displayLabel);
651626
const textWidth = textMetrics.width;
@@ -670,16 +645,21 @@ const BookmarkCanvas = ({
670645
ctx.fill();
671646

672647
// Add subtle border
673-
ctx.strokeStyle = theme.palette.divider;
674-
ctx.globalAlpha = isInactive ? 0.2 : 0.3;
648+
ctx.strokeStyle = getLabelAccentColor(bookmark);
649+
ctx.globalAlpha = isInactive ? 0.28 : 0.42;
675650
ctx.lineWidth = 1;
676651
ctx.stroke();
677652
ctx.globalAlpha = 1.0;
678653

679654
// Type color indicator inside label (left stripe)
680655
ctx.fillStyle = getLabelAccentColor(bookmark);
681656
ctx.globalAlpha = isInactive ? 0.5 : 0.9;
682-
ctx.fillRect(boxLeft + padding, boxTop + 2, typeIndicatorWidth, boxHeight - 4);
657+
ctx.fillRect(
658+
boxLeft + typeIndicatorInset,
659+
boxTop + typeIndicatorInset,
660+
typeIndicatorWidth,
661+
boxHeight - (typeIndicatorInset * 2)
662+
);
683663
ctx.globalAlpha = 1.0;
684664

685665
// Draw the text
@@ -691,17 +671,6 @@ const BookmarkCanvas = ({
691671
ctx.fillText(displayLabel, textX, labelY + textHeight - padding);
692672
ctx.globalAlpha = 1.0;
693673

694-
if (hasAliveStatus) {
695-
const ledX = boxLeft + padding + typeIndicatorReserve + ledRadius;
696-
const ledY = labelY + textHeight / 2;
697-
ctx.beginPath();
698-
ctx.arc(ledX, ledY, ledRadius, 0, 2 * Math.PI);
699-
ctx.fillStyle = bookmark.metadata.alive ? theme.palette.success.main : theme.palette.error.main;
700-
ctx.globalAlpha = 0.9;
701-
ctx.fill();
702-
ctx.globalAlpha = 1.0;
703-
}
704-
705674
// Draw dotted line from bottom of canvas to south edge of label
706675
ctx.beginPath();
707676
ctx.strokeStyle = sourceStyle.accent;
@@ -732,14 +701,11 @@ const BookmarkCanvas = ({
732701
labelBottomY = dopplerLabelY + textHeight + padding * 2;
733702

734703
// Add semi-transparent background
735-
const hasAliveStatus = typeof bookmark.metadata?.alive === 'boolean';
736-
const ledRadius = 2.5;
737-
const ledGap = 5;
738-
const ledReserve = hasAliveStatus ? (ledRadius * 2 + ledGap) : 0;
739704
const typeIndicatorWidth = 6;
740-
const typeIndicatorGap = 6;
741-
const typeIndicatorReserve = typeIndicatorWidth + typeIndicatorGap;
742-
const leftReserve = ledReserve + typeIndicatorReserve;
705+
const typeIndicatorGap = 3;
706+
const typeIndicatorInset = 2;
707+
const typeIndicatorReserve = typeIndicatorInset + typeIndicatorWidth + typeIndicatorGap;
708+
const leftReserve = typeIndicatorReserve;
743709
const displayLabel = bookmark.label;
744710
const textMetrics = ctx.measureText(displayLabel);
745711
const textWidth = textMetrics.width;
@@ -764,16 +730,21 @@ const BookmarkCanvas = ({
764730
ctx.fill();
765731

766732
// Add subtle border
767-
ctx.strokeStyle = theme.palette.divider;
768-
ctx.globalAlpha = 0.3;
733+
ctx.strokeStyle = getLabelAccentColor(bookmark);
734+
ctx.globalAlpha = 0.38;
769735
ctx.lineWidth = 1;
770736
ctx.stroke();
771737
ctx.globalAlpha = 1.0;
772738

773739
// Type color indicator inside label (left stripe)
774740
ctx.fillStyle = getLabelAccentColor(bookmark);
775741
ctx.globalAlpha = 0.9;
776-
ctx.fillRect(boxLeft + padding, boxTop + 2, typeIndicatorWidth, boxHeight - 4);
742+
ctx.fillRect(
743+
boxLeft + typeIndicatorInset,
744+
boxTop + typeIndicatorInset,
745+
typeIndicatorWidth,
746+
boxHeight - (typeIndicatorInset * 2)
747+
);
777748
ctx.globalAlpha = 1.0;
778749

779750
// Draw the text
@@ -784,17 +755,6 @@ const BookmarkCanvas = ({
784755
const textX = x + (leftReserve / 2);
785756
ctx.fillText(displayLabel, textX, dopplerLabelY + textHeight - padding);
786757

787-
if (hasAliveStatus) {
788-
const ledX = boxLeft + padding + typeIndicatorReserve + ledRadius;
789-
const ledY = dopplerLabelY + textHeight / 2;
790-
ctx.beginPath();
791-
ctx.arc(ledX, ledY, ledRadius, 0, 2 * Math.PI);
792-
ctx.fillStyle = bookmark.metadata.alive ? theme.palette.success.main : theme.palette.error.main;
793-
ctx.globalAlpha = 0.9;
794-
ctx.fill();
795-
ctx.globalAlpha = 1.0;
796-
}
797-
798758
// Draw dotted line from bottom of canvas to south edge of doppler label
799759
ctx.beginPath();
800760
ctx.strokeStyle = sourceStyle.accent;

0 commit comments

Comments
 (0)
⚡