Small fixes to the existing UI by farhinhusain0 · Pull Request #35 · asteroncall/aster

farhinhusain0 · 2026-03-16T04:41:54Z

Reviewed current timeline UI and fixed small changes like padding, shadows, icons, etc

greptile-apps · 2026-03-16T04:44:40Z

Greptile Summary

This PR polishes the Investigation details UI across the dashboard. Key changes include: restyling chart tooltips to a lighter theme, improving X-axis tick alignment in all three error frequency charts (Sentry, Datadog, Grafana), refining accordion border handling, adding a custom scrollbar to the code block component, adding a relative time badge to the investigation header, and renaming the verdict section to "Hypothesis".

Chart improvements: All three error frequency components now use custom tick renderers for better label alignment (start/middle/end anchoring), and the shared tooltip was restyled from a dark solid background to a light bordered card.
Accordion fix: Last-item border removal now uses Tailwind group variants instead of a complex CSS attribute selector.
Header enhancement: Added a relative timestamp badge with tooltip showing the exact time, plus a source label and divider.
Verdict rename: Section header changed from "ASTER'S VERDICT" to "HYPOTHESIS" with icon and border color adjustments.
Code block: Wrapped in a scrollable container with a hover-reveal custom scrollbar, improved diff line padding.
Bug: The "View in GitHub" link in CorrelatedCodeChange was moved outside the per-file loop and now always references the first file's commit SHA and repo, which will produce incorrect links when files span multiple commits or repositories.

Confidence Score: 3/5

Mostly safe UI polish, but the GitHub link regression in CorrelatedCodeChange should be addressed before merging.
The majority of changes are low-risk style/layout tweaks. However, the CorrelatedCodeChange component now hardcodes the first file's repo and SHA for the GitHub link, which is a functional regression when files come from different commits or repos. There's also a minor trailing-space string issue in the header.
Pay close attention to CorrelatedCodeChange.tsx — the GitHub link logic changed in a way that may produce incorrect URLs for multi-commit/multi-repo scenarios.

Important Files Changed

Filename	Overview
services/dashboard/src/components/application/charts/charts-base.tsx	Tooltip restyled from dark solid background to light bordered card with updated text classes. Straightforward style change.
services/dashboard/src/components/common/Accordion.tsx	Improved border handling for last accordion item using Tailwind group variants, replacing the previous attribute selector approach.
services/dashboard/src/components/common/CodeBlock.tsx	Wrapped SyntaxHighlighter in a scrollable div with custom scrollbar class. Added padding/margin for line highlights. Minor diff color fix.
services/dashboard/src/index.css	Added custom-scrollbar CSS class with hover-reveal behavior. Uses deprecated `overflow: overlay` property.
services/dashboard/src/pages/Investigation/components/CorrelatedCodeChange.tsx	Moved GitHub link outside per-file accordion loop. Now hardcodes first file's repo/SHA, which may be incorrect when files span multiple commits or repos.
services/dashboard/src/pages/Investigation/components/DatadogErrorFrequency.tsx	Refactored XAxis to use custom tick renderer for better text alignment. Adjusted chart margins and padding.
services/dashboard/src/pages/Investigation/components/GrafanaErrorFrequency.tsx	Same chart tick rendering improvements as DatadogErrorFrequency. Consistent padding and margin adjustments.
services/dashboard/src/pages/Investigation/components/IntegrationDetailsEvidenceChain.tsx	Added shadow to evidence cards, uppercased source/name labels, adjusted padding and icon sizes.
services/dashboard/src/pages/Investigation/components/InvestigationDetailsHeader.tsx	Added relative time badge with tooltip, source label, divider. Contains trailing space in JSM string.
services/dashboard/src/pages/Investigation/components/InvestigationDetailsVerdict.tsx	Renamed header from "ASTER'S VERDICT" to "HYPOTHESIS", swapped icons, updated border color for recommended fix section.
services/dashboard/src/pages/Investigation/components/SentryErrorFrequency.tsx	Same chart tick rendering improvements as Datadog/Grafana frequency components. Consistent adjustments.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[InvestigationDetailsHeader] -->|uses| B[Tooltip + Badge for relative time]
    A -->|uses| C[Divider]
    D[IntegrationDetailsEvidenceChain] -->|renders| E[EvidenceChainItemCard]
    E -->|contains| F[Accordion with shadow-xs]
    E -->|renders| G{Check Source}
    G -->|Sentry| H[SentryErrorFrequency]
    G -->|Datadog| I[DatadogErrorFrequency]
    G -->|Grafana| J[GrafanaErrorFrequency]
    G -->|GitHub| K[CorrelatedCodeChange]
    H & I & J -->|custom tick renderer| L[XAxis with aligned labels]
    H & I & J -->|tooltip| M[ChartTooltipContent - light theme]
    K -->|nested| N[Accordion per file]
    K -->|single link| O["View in GitHub ⚠️ uses matchedDiffFiles[0] only"]
    N -->|contains| P[CodeBlock with custom-scrollbar]

Prompt To Fix All With AI

This is a comment left during a code review.
Path: services/dashboard/src/pages/Investigation/components/CorrelatedCodeChange.tsx
Line: 66-78

Comment:
**GitHub link only references the first file's commit**

By moving the "View in GitHub" button outside the per-file accordion and hardcoding `matchedDiffFiles[0]`, this link will always point to the first file's `repoName` and `sha`. Since `matchedDiffFiles` is flattened from a `Record<string, ICodeChangeDiff>` (keyed by repo name) with multiple commits, files can originate from different repositories or different commit SHAs. In that case, the link will be incorrect for every file except the first one.

Previously each file had its own correctly-scoped link. If the intent is a single button for cleaner UI, consider either linking to the repo/org level or keeping per-file links inside the accordion.

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: services/dashboard/src/pages/Investigation/components/InvestigationDetailsHeader.tsx
Line: 30

Comment:
**Trailing space in the JSM source string**

`"JSM "` has a trailing space that will render as visible whitespace in the UI (e.g., in the source badge text). This appears to be unintentional.

```suggestion
  const source = pdDetails ? "PagerDuty" : "JSM";
```

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: services/dashboard/src/index.css
Line: 41

Comment:
**`overflow: overlay` is deprecated**

`overflow: overlay` has been deprecated and is now treated as `auto` in modern browsers. Since the wrapper div in `CodeBlock.tsx` already applies `overflow-x-auto` via Tailwind, this line is effectively a no-op in current browsers and may cause unexpected behavior in older ones. Consider removing it to avoid confusion.

```suggestion
  overflow-x: auto;
```

How can I resolve this? If you propose a fix, please make it concise.

_{Last reviewed commit: 89a6219}

greptile-apps · 2026-03-16T04:44:44Z

services/dashboard/src/pages/Investigation/components/CorrelatedCodeChange.tsx

+      {matchedDiffFiles.length > 0 && (
+        <div className="flex justify-end mt-4">
+          <Button
+            color="link-gray"
+            size="sm"
+            iconTrailing={<LinkExternal01 size={16} />}
+            href={`https://github.com/${matchedDiffFiles[0].repoName}/commit/${matchedDiffFiles[0].sha}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            View in GitHub
+          </Button>
+        </div>


GitHub link only references the first file's commit

By moving the "View in GitHub" button outside the per-file accordion and hardcoding matchedDiffFiles[0], this link will always point to the first file's repoName and sha. Since matchedDiffFiles is flattened from a Record<string, ICodeChangeDiff> (keyed by repo name) with multiple commits, files can originate from different repositories or different commit SHAs. In that case, the link will be incorrect for every file except the first one.

Previously each file had its own correctly-scoped link. If the intent is a single button for cleaner UI, consider either linking to the repo/org level or keeping per-file links inside the accordion.

Prompt To Fix With AI

This is a comment left during a code review. Path: services/dashboard/src/pages/Investigation/components/CorrelatedCodeChange.tsx Line: 66-78 Comment: **GitHub link only references the first file's commit** By moving the "View in GitHub" button outside the per-file accordion and hardcoding `matchedDiffFiles[0]`, this link will always point to the first file's `repoName` and `sha`. Since `matchedDiffFiles` is flattened from a `Record<string, ICodeChangeDiff>` (keyed by repo name) with multiple commits, files can originate from different repositories or different commit SHAs. In that case, the link will be incorrect for every file except the first one. Previously each file had its own correctly-scoped link. If the intent is a single button for cleaner UI, consider either linking to the repo/org level or keeping per-file links inside the accordion. How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2026-03-16T04:44:45Z

services/dashboard/src/pages/Investigation/components/InvestigationDetailsHeader.tsx

  const statusText = getStatusText(jsmDetails, pdDetails);
  const priority = getPriorityText(jsmDetails, pdDetails);
+
  const source = pdDetails ? "PagerDuty" : "JSM ";


Trailing space in the JSM source string

"JSM " has a trailing space that will render as visible whitespace in the UI (e.g., in the source badge text). This appears to be unintentional.

Suggested change

const source = pdDetails ? "PagerDuty" : "JSM ";

const source = pdDetails ? "PagerDuty" : "JSM";

Prompt To Fix With AI

This is a comment left during a code review. Path: services/dashboard/src/pages/Investigation/components/InvestigationDetailsHeader.tsx Line: 30 Comment: **Trailing space in the JSM source string** `"JSM "` has a trailing space that will render as visible whitespace in the UI (e.g., in the source badge text). This appears to be unintentional. ```suggestion const source = pdDetails ? "PagerDuty" : "JSM"; ``` How can I resolve this? If you propose a fix, please make it concise.

@farhinhusain0 This is critical. Remove the space

greptile-apps · 2026-03-16T04:44:46Z

services/dashboard/src/index.css

+  scrollbar-color: transparent transparent;
+  transition: scrollbar-color 0.3s ease;
+  /* Use overlay scrollbar if supported to prevent layout shift */
+  overflow: overlay;


overflow: overlay is deprecated

overflow: overlay has been deprecated and is now treated as auto in modern browsers. Since the wrapper div in CodeBlock.tsx already applies overflow-x-auto via Tailwind, this line is effectively a no-op in current browsers and may cause unexpected behavior in older ones. Consider removing it to avoid confusion.

Suggested change

overflow: overlay;

overflow-x: auto;

Prompt To Fix With AI

This is a comment left during a code review. Path: services/dashboard/src/index.css Line: 41 Comment: **`overflow: overlay` is deprecated** `overflow: overlay` has been deprecated and is now treated as `auto` in modern browsers. Since the wrapper div in `CodeBlock.tsx` already applies `overflow-x-auto` via Tailwind, this line is effectively a no-op in current browsers and may cause unexpected behavior in older ones. Consider removing it to avoid confusion. ```suggestion overflow-x: auto; ``` How can I resolve this? If you propose a fix, please make it concise.

@farhinhusain0 can you look into this?

moshfiqrony

@farhinhusain0 I have couple of feedback. Let me know if any of them is not making sense.

moshfiqrony · 2026-03-16T05:23:43Z

services/dashboard/src/pages/Investigation/components/CorrelatedCodeChange.tsx

+      {matchedDiffFiles.length > 0 && (
+        <div className="flex justify-end mt-4">
+          <Button
+            color="link-gray"
+            size="sm"
+            iconTrailing={<LinkExternal01 size={16} />}
+            href={`https://github.com/${matchedDiffFiles[0].repoName}/commit/${matchedDiffFiles[0].sha}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            View in GitHub
+          </Button>
+        </div>


@farhinhusain0 In the GitHub changes we can have multiple file changes as the culprit. So adding only one button doesn't make sense. That's why we are rendering a button for each file so that by clicking on the button they can see on which commit they did the change.

But that breaks the pattern of the card. In the design file, for the GitHub cards, I had added a commit tag over the code block. Would that work instead ? I sort of want to keep the View in button at the bottom across all the cards if possible. Let me know.

moshfiqrony · 2026-03-16T05:25:30Z

services/dashboard/src/pages/Investigation/components/DatadogErrorFrequency.tsx

+              tick={({ x, y, payload }) => {
+                const isFirst = payload.value === chartTicks[0];
+                const isLast = payload.value === chartTicks[chartTicks.length - 1];
+                return (
+                  <text
+                    x={x}
+                    y={y + 8}
+                    dominantBaseline="hanging"
+                    textAnchor={isFirst ? "start" : isLast ? "end" : "middle"}
+                    fill="currentColor"


@farhinhusain0 As we are converting the chartTicks to a fn. I think then we can convert the ticks to a function as well.

Updated using Antigravity, not really sure whether it fixed what you wanted though. So please double check.

moshfiqrony · 2026-03-16T05:25:59Z

services/dashboard/src/pages/Investigation/components/DatadogErrorFrequency.tsx

              interval="preserveStartEnd"
              dataKey="value"
              tickFormatter={(value) => Number(value).toLocaleString()}
+              width={32}


Does adding width works responsively when window size changes @farhinhusain0 ?

Updated using Claude, not really sure whether it fixed what you wanted though. So please double check.

moshfiqrony · 2026-03-16T06:32:29Z

services/dashboard/src/pages/Investigation/components/GrafanaErrorFrequency.tsx

-                (item) => item.timestamp,
-              )}
+              ticks={chartTicks}
+              tick={({ x, y, payload }) => {


@farhinhusain0 Same here. As we moved chartTicks we should move the tick to a function as well

Updated using Antigravity, not really sure whether it fixed what you wanted though. So please double check.

moshfiqrony · 2026-03-16T06:33:25Z

services/dashboard/src/pages/Investigation/components/SentryErrorFrequency.tsx

-                (item) => item.timestamp,
-              )}
+              ticks={chartTicks}
+              tick={({ x, y, payload }) => {


@farhinhusain0 Same feedback of moving tick to a function as well

Updated using Antigravity, not really sure whether it fixed what you wanted though. So please double check.

Small fixes to the existing UI

89a6219

farhinhusain0 requested a review from moshfiqrony March 16, 2026 04:42

greptile-apps bot reviewed Mar 16, 2026

View reviewed changes

moshfiqrony requested changes Mar 16, 2026

View reviewed changes

farhinhusain0 added 3 commits March 16, 2026 20:52

Space removed

ac4a352

Updated fixed width issue

8205496

X-Axis Tick Refactoring

cf628ab

farhinhusain0 requested a review from moshfiqrony March 17, 2026 06:04

	const source = pdDetails ? "PagerDuty" : "JSM ";
	const source = pdDetails ? "PagerDuty" : "JSM";

Conversation

farhinhusain0 commented Mar 16, 2026

Uh oh!

greptile-apps bot commented Mar 16, 2026

Greptile Summary

Confidence Score: 3/5

Important Files Changed

Flowchart

Uh oh!

greptile-apps bot Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

moshfiqrony left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants