feat: Display viz in Artifact panel by tatianainama · Pull Request #16499 · lightdash/lightdash

tatianainama · 2025-08-19T16:10:09Z

Description:

Using previous work to display visualizations into the Artifact panel

Screen Recording 2025-08-20 at 17.08.54.mov (uploaded via Graphite)

This useEffect hook disables the react-hooks/exhaustive-deps ESLint rule, which violates Frontend rules anti-patterns. According to the Frontend rules, when this disable comment is needed, there is likely a better approach to structuring the data. Instead of using an effect to clear contextArtifact when route parameters change, consider deriving the artifact state based on the current route parameters rather than relying on an effect with disabled dependency warnings.

Spotted by Diamond (based on custom rule: packages/frontend rules)

Is this helpful? React 👍 or 👎 to let us know.

notgiorgi · 2025-08-21T10:38:19Z

...ages/frontend/src/ee/features/aiCopilot/components/ChatElements/AgentChatAssistantBubble.tsx

+        useEffect(() => {
+            // We want to auto-open artifact for messages that just completed streaming and have viz
+            // in the future, we want to track the viz calls to start showing artifact while streaming
+            if (
+                justCompleted &&
+                isVisualizationAvailable &&
+                !isQueryError &&
+                !isQueryLoading &&
+                queryResults
+            ) {
+                setArtifact(renderArtifact(), message.uuid);
+                clearMessageJustCompleted(message.threadUuid);
+            }
+        }, [
+            justCompleted,
+            isVisualizationAvailable,
+            isQueryError,
+            isQueryLoading,
+            queryResults,
+            renderArtifact,
+            setArtifact,
+            clearMessageJustCompleted,
+            message.threadUuid,
+            message.uuid,
+        ]);


I think Graphite also mentioned it in the comment but, I'd like to see if there's a better way to do this instead of useEffect+setState pattern. Or maybe this is temporary before we hook-up with artifacts api?

notgiorgi · 2025-08-21T11:23:31Z

packages/frontend/src/ee/features/aiCopilot/components/AiAgentPageLayout/AiAgentPageLayout.tsx


-    const setArtifact = (artifact: ReactNode) => {
-        setContextArtifact(artifact);
+    const setArtifact = (artifact: ReactNode, id: string) => {


does setArtifact need to accept artifact: ReactNode as a param? just the id should be enough to decide wether or not artifact is set and then the component would derive rest

~~oh, great point! I didn't think of that, let me see what can I improve~~

Update: Yeah so the issue here is the current component tree:

┌─AiAgentPageLayout ────────────────────────────────────────────┐ │ (provides context of layout) │ │ │ │ ┌─PanelGroup ────────────────────────────────────────────────┐ │ │ │ │ │ │ │ ┌─Sidebar────┐ ┌─Chat──────────────────┐ ┌ Artifact──────┐ │ │ │ │ │ │ │ ┌─AgentChatDisplay ─┐ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┌UserBubble─────┐ │ │ │ render() │ │ │ │ │ │ │ │ │ │ │ │ │ │ ▲ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └───────────────┘ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┌AssistantBubble┐ │ │ │ │ │ │ │ │ │ │ │ │ │ │ viz───────┼─┼─┼─┼──┘ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └───────────────┘ │ │ │ │ │ │ │ │ │ │ │ └───────────────────┘ │ │ │ │ │ │ │ └────────────┘ └───────────────────────┘ └───────────────┘ │ │ │ └────────────────────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────┘

the AssistantBubble has access to all the rendering context (vizConfig, queryResults, message data) but the AiAgentPageLayout needs to render the content in the Artifact panel.

A solution could be introducing React portals, let the assistant bubble render directly into the great-grandparent AiAgentPageLayout.

But we will eventually move to passing only the artifact id, and introduce a new artifact component that can fetch that artifact (and versions, etc) and be isolated form the assistant bubble. I think we could leave this as it is for now and tackle the refactor once we come back to this work? What do you think?

tatianainama

slack conversations are not working correctly because of provider missing. Will fix!

graphite-app · 2025-08-21T14:59:46Z

packages/frontend/src/ee/features/aiCopilot/providers/AiLayoutProvider.tsx

 }

 export const AiAgentPageLayoutContext =
    createContext<AiAgentPageLayoutContextType | null>(null);

 export const useAiAgentPageLayout = () => {
    const context = useContext(AiAgentPageLayoutContext);


The useAiAgentPageLayout hook should check if the context exists before returning it to prevent null reference errors. Restore the null check to ensure type safety when accessing context properties like 'isSidebarCollapsed'.

Spotted by Diamond (based on CI logs)

Is this helpful? React 👍 or 👎 to let us know.

tatianainama · 2025-08-22T08:58:29Z

Merge activity

Aug 22, 8:58 AM UTC: A user started a stack merge that includes this pull request via Graphite.
Aug 22, 8:58 AM UTC: @tatianainama merged this pull request with Graphite.

# [0.1944.0](0.1943.1...0.1944.0) (2025-08-22) ### Features * Display viz in Artifact panel ([#16499](#16499)) ([b79c53d](b79c53d))

lightdash-bot · 2025-08-22T09:04:15Z

🎉 This PR is included in version 0.1944.0 🎉

The release is available on:

0.1944.0
GitHub release

Your semantic-release bot 📦🚀

### Description: Using previous work to display visualizations into the Artifact panel [Screen Recording 2025-08-20 at 17.08.54.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/user-attachments/thumbnails/f6ee543d-6e56-4b34-9609-78fe4fc36614.mov" />](https://app.graphite.dev/user-attachments/video/f6ee543d-6e56-4b34-9609-78fe4fc36614.mov) ### Next - Improve animations and interactions

# [0.1944.0](lightdash/lightdash@0.1943.1...0.1944.0) (2025-08-22) ### Features * Display viz in Artifact panel ([lightdash#16499](lightdash#16499)) ([b79c53d](lightdash@b79c53d))

This was referenced Aug 19, 2025

feat: Update AI Agent Page layout #16470

Merged

feat: Introduce artifact panel #16493

Merged

lightdash-bot requested a deployment to pr-16499 August 19, 2025 16:10 Pending

tatianainama force-pushed the 08-19-feat_display_viz_in_artifact_panel branch from 7e918de to 62b8f0f Compare August 20, 2025 14:05

lightdash-bot requested a deployment to pr-16499 August 20, 2025 14:05 Pending

tatianainama force-pushed the 08-19-feat_display_viz_in_artifact_panel branch from 62b8f0f to 903dba1 Compare August 20, 2025 14:21

lightdash-bot requested a deployment to pr-16499 August 20, 2025 14:22 Pending

tatianainama force-pushed the 08-19-feat_display_viz_in_artifact_panel branch from 903dba1 to 199bb6a Compare August 20, 2025 14:51

lightdash-bot requested a deployment to pr-16499 August 20, 2025 14:52 Pending

tatianainama marked this pull request as ready for review August 20, 2025 15:08

graphite-app bot assigned tatianainama Aug 20, 2025

tatianainama mentioned this pull request Aug 20, 2025

feat: Improve Artifacts UI styles #16516

Merged

tatianainama force-pushed the 08-19-feat_introduce_artifact_panel branch 2 times, most recently from 5bf7fb3 to ddd669e Compare August 20, 2025 15:25

tatianainama force-pushed the 08-19-feat_display_viz_in_artifact_panel branch from 199bb6a to 5b795da Compare August 20, 2025 15:25

lightdash-bot requested a deployment to pr-16499 August 20, 2025 15:25 Pending

tatianainama force-pushed the 08-19-feat_display_viz_in_artifact_panel branch from 5b795da to 9cdca7a Compare August 20, 2025 15:26

lightdash-bot requested a deployment to pr-16499 August 20, 2025 15:27 Pending

tatianainama commented Aug 20, 2025

View reviewed changes

...ages/frontend/src/ee/features/aiCopilot/components/ChatElements/AgentChatAssistantBubble.tsx Outdated Show resolved Hide resolved

graphite-app bot reviewed Aug 20, 2025

View reviewed changes

...ages/frontend/src/ee/features/aiCopilot/components/ChatElements/AgentChatAssistantBubble.tsx Outdated Show resolved Hide resolved

tatianainama commented Aug 20, 2025

View reviewed changes

tatianainama force-pushed the 08-19-feat_introduce_artifact_panel branch from ddd669e to 5ecd1a0 Compare August 20, 2025 15:49

tatianainama force-pushed the 08-19-feat_display_viz_in_artifact_panel branch from 9cdca7a to 627591e Compare August 20, 2025 15:49

lightdash-bot requested a deployment to pr-16499 August 20, 2025 15:50 Pending

tatianainama requested a review from notgiorgi August 20, 2025 16:05

tatianainama changed the base branch from 08-19-feat_introduce_artifact_panel to graphite-base/16499 August 20, 2025 16:38

tatianainama force-pushed the graphite-base/16499 branch from 5ecd1a0 to 37d1fd2 Compare August 21, 2025 07:53

tatianainama force-pushed the 08-19-feat_display_viz_in_artifact_panel branch from 627591e to afab005 Compare August 21, 2025 07:53

graphite-app bot reviewed Aug 21, 2025

View reviewed changes

notgiorgi reviewed Aug 21, 2025

View reviewed changes

tatianainama commented Aug 21, 2025

View reviewed changes

tatianainama marked this pull request as draft August 21, 2025 13:52

notgiorgi force-pushed the 08-19-feat_display_viz_in_artifact_panel branch from 0bd01af to f5eec3b Compare August 21, 2025 14:45

notgiorgi marked this pull request as ready for review August 21, 2025 14:45

This was referenced Aug 21, 2025

feat: API endpoint for artifact query visualizations #16540

Merged

feat: Integrate agent artifacts API with the UI #16541

Merged

chore: remove redundant state from AI agent thread streaming #16542

Merged

lightdash-bot requested a deployment to pr-16499 August 21, 2025 14:46 Pending

notgiorgi approved these changes Aug 21, 2025

View reviewed changes

tatianainama force-pushed the 08-19-feat_display_viz_in_artifact_panel branch from f5eec3b to e71a88b Compare August 21, 2025 14:56

lightdash-bot requested a deployment to pr-16499 August 21, 2025 14:56 Pending

graphite-app bot reviewed Aug 21, 2025

View reviewed changes

notgiorgi force-pushed the 08-19-feat_display_viz_in_artifact_panel branch from e71a88b to 16d211b Compare August 21, 2025 15:55

notgiorgi mentioned this pull request Aug 21, 2025

fix: restore View SQL feature in AI artifacts #16546

Merged

lightdash-bot requested a deployment to pr-16499 August 21, 2025 16:06 Pending

feat: Display viz in Artifact panel

d7a1f48

tatianainama force-pushed the 08-19-feat_display_viz_in_artifact_panel branch from 16d211b to d7a1f48 Compare August 21, 2025 20:19

lightdash-bot requested a deployment to pr-16499 August 21, 2025 20:19 Pending

tatianainama mentioned this pull request Aug 22, 2025

feat: Remove conversations preview for admin view #16553

Merged

tatianainama merged commit b79c53d into main Aug 22, 2025
21 of 23 checks passed

tatianainama deleted the 08-19-feat_display_viz_in_artifact_panel branch August 22, 2025 08:58

lightdash-bot pushed a commit that referenced this pull request Aug 22, 2025

chore(release): 0.1944.0

0c73e87

# [0.1944.0](0.1943.1...0.1944.0) (2025-08-22) ### Features * Display viz in Artifact panel ([#16499](#16499)) ([b79c53d](b79c53d))

lightdash-bot added the released label Aug 22, 2025

-                                  </Paper>
+                                  <AiArtifactButton
+                                      onClick={() =>
+                                          setArtifact(renderArtifact(), message.uuid)

+                  useEffect(() => {
+                      if (contextArtifact) {
+                          clearArtifact();
+                      }
+                  }, [agentUuid, threadUuid, projectUuid]); // eslint-disable-line react-hooks/exhaustive-deps

Conversation

tatianainama commented Aug 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description:

Next

Uh oh!

tatianainama commented Aug 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Aug 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tatianainama Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

notgiorgi Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

graphite-app bot Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

notgiorgi Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

notgiorgi Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

tatianainama Aug 21, 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!

tatianainama left a comment

Choose a reason for hiding this comment

Uh oh!

graphite-app bot Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

tatianainama commented Aug 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

lightdash-bot commented Aug 22, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

tatianainama commented Aug 19, 2025 •

edited

Loading

tatianainama commented Aug 19, 2025 •

edited

Loading

github-actions bot commented Aug 19, 2025 •

edited

Loading

tatianainama Aug 21, 2025 •

edited

Loading

tatianainama commented Aug 22, 2025 •

edited

Loading