Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix row id mapping in object detail modal displaying #40874

Merged
merged 7 commits into from
Apr 3, 2024

Conversation

uladzimirdev
Copy link
Contributor

@uladzimirdev uladzimirdev commented Apr 1, 2024

Closes #39477
Closes #34070

Description

we have a not straightforward logic on detecting what the data should be shown after clicking on a table row to show object detail modal. This PR reuses logic of mapping row id to the entity id

How to verify

  • create a new question from orders table
  • join people table
  • click on visualize
  • click on the most left cell of any displayed row
  • click on first row should work
  • click on any row should display a modal with the correct id (same id as the row you clicked has)

Demo

Before

Screen.Recording.2024-04-02.at.20.32.08.mov

After

Screen.Recording.2024-04-02.at.20.31.16.mov

Checklist

Copy link

github-actions bot commented Apr 1, 2024

Codenotify: Notifying subscribers in CODENOTIFY files for diff 2cf9432...25cc3e8.

Notify File(s)
@alxnddr frontend/src/metabase/visualizations/components/TableInteractive/TableInteractive.jsx

Copy link

replay-io bot commented Apr 1, 2024

Status Complete ↗︎
Commit 25cc3e8
Results
⚠️ 7 Flaky
2392 Passed

@uladzimirdev uladzimirdev changed the title Map row id on object detail id Fix row id mapping during object detail view Apr 2, 2024
@uladzimirdev uladzimirdev changed the title Fix row id mapping during object detail view Fix row id mapping during object detail modal displaying Apr 2, 2024
@uladzimirdev uladzimirdev changed the title Fix row id mapping during object detail modal displaying Fix row id mapping in object detail modal displaying Apr 2, 2024
@uladzimirdev uladzimirdev added the backport Automatically create PR on current release branch on merge label Apr 2, 2024
@uladzimirdev uladzimirdev requested review from paoliniluis and a team April 2, 2024 17:34
Copy link
Contributor

@kamilmielnik kamilmielnik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It'd be great if we could fix #34070 as well.

Comment on lines 489 to 502
let objectId;

if (this.state.IDColumn) {
objectId = this.props.data.rows[rowIndex][this.state.IDColumnIndex];
} else {
const map = this.props.PKRowIndexMap;

objectId =
Object.keys(map).find(key => map[key] === rowIndex) ?? rowIndex;
}

return () => {
this.props.onZoomRow(objectId);
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know if there's a problem, but I'd feel safer if all this.props and this.state references happened inside the returned callback (to avoid referencing stale props when callback is executed).

Suggested change
let objectId;
if (this.state.IDColumn) {
objectId = this.props.data.rows[rowIndex][this.state.IDColumnIndex];
} else {
const map = this.props.PKRowIndexMap;
objectId =
Object.keys(map).find(key => map[key] === rowIndex) ?? rowIndex;
}
return () => {
this.props.onZoomRow(objectId);
};
return () => {
let objectId;
if (this.state.IDColumn) {
objectId = this.props.data.rows[rowIndex][this.state.IDColumnIndex];
} else {
const map = this.props.PKRowIndexMap;
objectId =
Object.keys(map).find(key => map[key] === rowIndex) ?? rowIndex;
}
this.props.onZoomRow(objectId);
};

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

well, this function is re-calculated every time you hover over a row

hoverDetailEl.onclick = this.pkClick(rowIndex)

or press "Enter" - this.pkClick(hoveredRowIndex)(event);

I'd not worry about stale props

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changed it in fa0289f

@@ -77,6 +80,7 @@ function pickRowsToMeasure(rows, columnIndex, count = 10) {

const mapStateToProps = state => ({
queryBuilderMode: getQueryBuilderMode(state),
PKRowIndexMap: getPKRowIndexMap(state),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a very similar bug: #34070
Unfortunately this PR does not seem fix it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seems it's a different problem, which requires more investigation

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fa0289f should fix it

@kamilmielnik kamilmielnik requested a review from a team April 3, 2024 07:35
@kamilmielnik kamilmielnik requested a review from a team April 3, 2024 08:16
// and we'll not know which object to show
export const getRowIndexToPKMap = createSelector(
[getFirstQueryResult, getPKColumnIndex],
(result, PKColumnIndex) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: lowercase pkColumnIndex?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually it's an abbreviation and it's used in other places, so I'd not change it (I came up to the same naming in the component in the initial version of the PR)

Copy link
Contributor

@kamilmielnik kamilmielnik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works well 👍


FYI there is one more similar issue (#29390), still reproducible.

@uladzimirdev uladzimirdev enabled auto-merge (squash) April 3, 2024 11:33
@uladzimirdev uladzimirdev merged commit 54ed754 into master Apr 3, 2024
112 checks passed
@uladzimirdev uladzimirdev deleted the 39477-object-detail-view-multpile-pk branch April 3, 2024 12:32
github-actions bot pushed a commit that referenced this pull request Apr 3, 2024
* Map row id on object detail id

* Add a fallback

* Add e2e test

* Add a limit

* Provide a fix for #34070

* Simplify test
metabase-bot bot added a commit that referenced this pull request Apr 3, 2024
* Map row id on object detail id

* Add a fallback

* Add e2e test

* Add a limit

* Provide a fix for #34070

* Simplify test

Co-authored-by: Uladzimir Havenchyk <125459446+uladzimirdev@users.noreply.github.com>
rafpaf pushed a commit that referenced this pull request Apr 3, 2024
* Map row id on object detail id

* Add a fallback

* Add e2e test

* Add a limit

* Provide a fix for #34070

* Simplify test
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport Automatically create PR on current release branch on merge .Team/QueryingComponents visual Run Percy visual testing
Projects
None yet
3 participants