fix[FE]: fix the update view button not visible on changes to Not Updating in Logs and Traces List View.

[Aarif5435]

Fix: Update View Button Not Visible and Columns Not Updating in Logs and Traces List View

Description

This PR resolves two issues related to the "Update View" functionality in the Logs and Traces list view:

1. Update View Button Not Visible: After adding or removing columns, the "Update View" button was not appearing. This issue occurred because the comparison logic for detecting changes to the query was flawed—it only compared the old extraData (i.e., columns) and failed to account for the newly added or removed columns.
2. Columns Not Updating After Clicking Update View: Even after clicking the "Update View" button, the updated columns were not reflected. Upon refreshing the screen, the old columns were still visible because the updateView API was being called with outdated extraData (i.e., columns), overwriting the new changes with old data.

Changes Made

• Fixed the issue with the "Update View" button by properly comparing the old extraData (columns) with the updated columns to accurately detect changes.
• Updated the updateView API call to include the new extraData (columns) so that changes persist correctly after clicking the "Update View" button.

Issue

The "Update View" button does not appear after making changes to the columns in the Logs and Traces list view. Additionally, even after clicking the button, the updated columns do not persist and revert to the old state upon refreshing the screen.

Testing

• Verified that the "Update View" button now appears immediately after columns are added or removed.
• Confirmed that after clicking the "Update View" button, the updated columns persist even after refreshing the screen.
• Tested for regressions to ensure existing functionality remains intact.

Screenshot

update-view-btn.mp4

Notes

This fix ensures a smoother user experience when managing columns in the Logs and Traces list view, allowing users to reliably update and save their preferred view configurations.

---

Important

Fixes 'Update View' button visibility and column update issues in Logs and Traces list view by correcting comparison logic and ensuring API calls use updated data.

• Behavior:
  • Fixes visibility of "Update View" button in ExplorerOptions.tsx by correcting comparison logic in isQueryUpdatedInView() in utils.ts.
  • Ensures columns update correctly after "Update View" by using updated extraData in updateViewAsync in ExplorerOptions.tsx.
• Functions:
  • Updates isQueryUpdatedInView() in utils.ts to compare options.selectColumns with extraData.selectColumns.
  • Modifies onUpdateQueryHandler() in ExplorerOptions.tsx to use updatedExtraData.
• Types:
  • Adds options to IsQueryUpdatedInViewProps in types.ts and QueryBuilderContextType in queryBuilder.ts.

^{This description was created by for eb4e88d. It will automatically update as commits are pushed.}

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to eb4e88d in 42 seconds

More details

• Looked at 190 lines of code in 5 files
• Skipped 0 files when reviewing.
• Skipped posting 7 drafted comments based on config settings.

1. frontend/src/container/ExplorerOptions/ExplorerOptions.tsx:256

• Draft comment:
  The function getUpdatedExtraData is defined twice in this file. Consider defining it once and reusing it to avoid redundancy.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  The comment claims a duplicate function definition, but the full file content shows only one definition of getUpdatedExtraData. This suggests the comment is incorrect. The comment should be removed as it does not reflect the actual state of the code.
  I might have missed a subtle duplication or a similar function with a different name that serves the same purpose. However, the evidence strongly suggests there is no duplication.
  The full file content shows only one instance of getUpdatedExtraData, supporting the decision to remove the comment.
  The comment about the duplicate function definition is incorrect and should be removed.

2. frontend/src/components/ExplorerCard/utils.ts:100

• Draft comment:
  Remove trailing whitespace on this line for cleaner code.
• Reason this comment was not posted:
  Confidence changes required: 10%
  The isQueryUpdatedInView function has trailing whitespace on line 100, which is unnecessary and should be removed for cleaner code.

3. frontend/src/components/ExplorerCard/utils.ts:106

• Draft comment:
  Remove trailing whitespace on this line for cleaner code.
• Reason this comment was not posted:
  Confidence changes required: 10%
  The isQueryUpdatedInView function is used in multiple files, and the logic seems consistent with the PR description. However, the trailing whitespace should be removed for cleaner code.

4. frontend/src/container/ExplorerOptions/ExplorerOptions.tsx:246

• Draft comment:
  Avoid using inline styles. Move styles to an external stylesheet or styled components. This applies to other inline styles in this file as well.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  The comment is about inline styles, but the diff does not introduce any new inline styles. The comment is not about a change made in the diff, so it should be removed.
  I might be missing some context about whether the inline styles were modified in a way not visible in the diff, but based on the information provided, it seems they were not.
  The diff should show any changes to inline styles if they were made. Since it doesn't, the comment is likely not relevant to the changes.
  The comment is not about a change made in the diff, so it should be deleted.

5. frontend/src/container/ExplorerOptions/ExplorerOptions.tsx:231

• Draft comment:
  Use design tokens or predefined color constants instead of hardcoding color values. This applies to other instances of hardcoded colors in this file as well.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  The comment seems to be addressing the use of hardcoded colors, but the specific line in question uses a predefined color constant, which aligns with best practices. The comment might be more relevant to other parts of the code, but it is not applicable to the specific change in the diff.
  I might be missing other instances of hardcoded colors in the file that the comment could be referring to. However, the comment should be specific to the changes in the diff, and the line in question does not have hardcoded colors.
  The comment should be specific to the changes in the diff, and since the line in question uses a predefined color constant, the comment is not applicable here.
  The comment is not relevant to the specific change in the diff, as the line uses a predefined color constant. Therefore, the comment should be deleted.

6. frontend/src/container/ExplorerOptions/ExplorerOptions.tsx:232

• Draft comment:
  Use design tokens or predefined color constants instead of hardcoding color values. This applies to other instances of hardcoded colors in this file as well.
• Reason this comment was not posted:
  Marked as duplicate.

7. frontend/src/container/ExplorerOptions/ExplorerOptions.tsx:247

• Draft comment:
  Use design tokens or predefined color constants instead of hardcoding color values. This applies to other instances of hardcoded colors in this file as well.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_7wCV7aMVXiXOWvu1

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.