feat: measure anomaly quick explanation #8077

AdityaHegde · 2025-10-03T10:59:39Z

Adds a quick way to get info about a particular timestamp.
Design: https://www.figma.com/design/JtG3sbaopjO0xQlyeCjmho/RILL-WIP?node-id=406-60840&t=MjQi7JW86b7DIXcN-0

Adds some very basic WIP context framework. This is subject to change based on the backend refactor PR.

Closes APP-439

Checklist:

Covered by tests
Ran it and it works as intended
Reviewed the diff before requesting a review
Checked for unhandled edge cases
Linked the issues it closes
Checked if the docs need to be updated. If so, create a separate Linear DOCS issue
Intend to cherry-pick into the release branch
I'm proud of this work!

ericpgreen2

UXQA:

It doesn't seem as if the "E" click handler has been registered. When I press "E" nothing happens.
After injecting the prompt, we should focus the chat input element. Then it'll be easier for the user to simply press enter to submit the message.
Let's say I focus one data point and see the "Explain" CTA. If I further interact with the chart, like highlighting a time range or panning to a new time range, then the focused data point should be cleared.
The context pill for the below time range shows "Invalid interval"
I've discovered that the "Explain" text is clickable. There should be a hover effect to explicitly signal to the user that it's clickable.
Because the context provided to the AI is provided per-message, we should have UI that shows that a message was sent with context. We can look at Cursor for inspiration.
Along the lines of 6, I think we should put the context pills within the chat input, not outside of it.
We should be able to clear context pills individually, not just as a group.
The context pills have a hover effect, but nothing happens when I click on them.

ericpgreen2 · 2025-10-13T23:45:29Z

web-common/src/features/chat/core/messages/Messages.svelte

+  // Parse messages and fill in context
+  $: currentConversation.context.parseMessages(messages);


This UI component should simply be focused on rendering. If the Context class needs to operate on messages, then the class should fetch the messages from the TanStack Query cache directly. (Alternatively, there's a world where the Context class could get the messages from the Conversation class, but, since we're leaning into TanStack Query cache as the source-of-truth, I don't think we're really set-up for this approach.)

The problem is we need a svelte derived store with unsubscribe. So we would have that called somewhere in a component.

Lets keep it simple for now, we can revisit once we have better contexts.

ericpgreen2 · 2025-10-13T23:46:52Z

web-common/src/features/chat/core/messages/TextMessage.svelte

  import Markdown from "../../../../components/markdown/Markdown.svelte";
  import type { V1Message } from "../../../../runtime-client";

  export let message: V1Message;
  export let content: string;

+  $: cleanedContent = ConversationContext.cleanContext(content);


Rather than adding data processing logic to this UI component, can we put this processing in the Conversation class logic in conversation.ts?

Note that this is displaying a V1Message and has nothing to do with the Conversation class directly. So this makes sense to clean it here itself. In future, context might not be part of the prompt, so easy to clean up as well.

ericpgreen2 · 2025-10-13T23:48:29Z

web-common/src/features/chat/core/prompts/anomaly-explanation.ts

Nit: rather than "presets", can we call this directory "prompts" or similar?

ericpgreen2 · 2025-10-14T00:10:51Z

web-common/src/features/dashboards/time-series/MeasureChart.svelte

+    if (
+      hoveredTime &&
+      measure.name &&
+      TIME_GRAIN[timeGrain] &&
+      !hasSubrangeSelected
+    ) {


This is a complex conditional. What about an explanatory variable?

ericpgreen2 · 2025-10-14T00:11:51Z

web-common/src/features/dashboards/time-series/MeasureChart.svelte

  }

-  function onMouseClick() {
+  function onMouseClick(e) {


This function is quite hard to follow now. Mind trying to find a way to clean it up?

FWIW, here's what Claude Code flagged:

Hmmm we need a greater scrub refactor to move interactions to a single class. We can use a state machine then. Added comments for now.

ericpgreen2 · 2025-10-14T00:14:48Z

web-common/src/features/chat/core/input/ChatInput.svelte

+    setTimeout(() => {
+      autoResize();
+    }, 5);


Why this timeout?

Added a comment explaining it.

ericpgreen2 · 2025-10-14T00:22:15Z

web-common/src/features/chat/core/context/context.ts

+import type { V1Message } from "@rilldata/web-common/runtime-client";
+import { get, type Writable, writable } from "svelte/store";
+
+const contextRegex = /\s*<context>([\s\S]*?)<\/context>/m;


I see your PR comment. I agree– let's build on the backend PR's approach to context.

AdityaHegde · 2025-10-14T12:16:36Z

Thanks @ericpgreen2 . Have addressed all except 8. Removing certain context without others can get complex. Lets do that in the comprehensive context PR.

Di7design

UXQA:

The highlighted point or time range on the measures line chart should stay selected after asking AI — don’t auto-clear it. Right now from the screenshot below I don't know which point I'm asking for explanation after the question sent to AI.

Make “Explain” Button Look Clickable, I use link button from the ShadCN component, so it should has a hover effect like the screenshot below.

When drag a time range on the chart, it should be an Explain(E) button display under the selected time range, right now I have to drag a time range, and click on it again to see the Explain(E) button. Follow the interaction guide:

Issue for future fix:
When a point or especially a time range is selected, the visual isn't emphasized enough, reducing clarity about what’s being analyzed or referenced in the AI query. Might need a better visual highlight in the future.

Di7design

Listed UXQA issues addressed.

ericpgreen2 · 2025-10-16T21:21:35Z

web-common/src/features/dashboards/time-series/measure-selection/MeasureSelection.svelte

+          y={plotBottom + 10 + bodyBuffer}
+          on:click={onExplain}
+        >
+          Explain(E)


Nit: add a space– "Explain (E)"

ericpgreen2 · 2025-10-16T21:21:59Z

web-common/src/features/dashboards/time-series/measure-selection/MeasureSelection.svelte

+    y={plotBottom + 10 + bodyBuffer}
+    on:click={onExplain}
+  >
+    Explain(E)


Oh, here too

AdityaHegde · 2025-10-28T05:54:13Z

Closing in favour of #8172

AdityaHegde added 3 commits October 3, 2025 16:26

feat: measure anomaly quick explanation

bca2453

Control tool calls

5375a7f

Add better context display

375deff

AdityaHegde force-pushed the feat/measure-anomaly-explanation branch from b1d5a3d to 375deff Compare October 6, 2025 05:16

AdityaHegde added 4 commits October 7, 2025 16:04

Merge branch 'main' into feat/measure-anomaly-explanation

2e8cefd

Add dimension filters

46fc6e5

Improved explain interaction

f4620dc

Improve start chat propagation

804dc1d

AdityaHegde force-pushed the feat/measure-anomaly-explanation branch from d04c949 to 804dc1d Compare October 9, 2025 07:51

AdityaHegde requested a review from ericpgreen2 October 9, 2025 07:52

AdityaHegde marked this pull request as ready for review October 9, 2025 07:52

ericpgreen2 requested changes Oct 14, 2025

View reviewed changes

AdityaHegde added 2 commits October 14, 2025 17:44

UXQA

0ace236

Merge branch 'main' into feat/measure-anomaly-explanation

3ba0d06

AdityaHegde requested a review from ericpgreen2 October 14, 2025 12:15

Merge issues

a138c7f

ericpgreen2 requested a review from Di7design October 14, 2025 18:03

Di7design requested changes Oct 14, 2025

View reviewed changes

UXQA part 2

1259f14

AdityaHegde force-pushed the feat/measure-anomaly-explanation branch from d5b8c77 to 1259f14 Compare October 15, 2025 12:44

Merge branch 'main' into feat/measure-anomaly-explanation

c1ab8b7

Di7design approved these changes Oct 15, 2025

View reviewed changes

Demo feedback

0401b1e

ericpgreen2 reviewed Oct 16, 2025

View reviewed changes

AdityaHegde closed this Oct 28, 2025

AdityaHegde deleted the feat/measure-anomaly-explanation branch October 28, 2025 05:54

		// Parse messages and fill in context
		$: currentConversation.context.parseMessages(messages);

feat: measure anomaly quick explanation #8077

feat: measure anomaly quick explanation #8077

Uh oh!

Conversation

AdityaHegde commented Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ericpgreen2 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AdityaHegde Oct 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

ericpgreen2 Oct 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AdityaHegde commented Oct 14, 2025

Uh oh!

Di7design left a comment

Choose a reason for hiding this comment

Uh oh!

Di7design 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!

AdityaHegde commented Oct 28, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

AdityaHegde commented Oct 3, 2025 •

edited

Loading

AdityaHegde Oct 14, 2025 •

edited

Loading

ericpgreen2 Oct 14, 2025 •

edited

Loading