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

Data Grid - Column Headers - Add tooltip on hover #809

Open
KrooshalUX opened this issue Jun 13, 2023 · 13 comments · May be fixed by #1133
Open

Data Grid - Column Headers - Add tooltip on hover #809

KrooshalUX opened this issue Jun 13, 2023 · 13 comments · May be fixed by #1133
Assignees
Labels
good first issue Good for newcomers

Comments

@KrooshalUX
Copy link
Contributor

As per the discussion here: opensearch-project/OpenSearch-Dashboards#4279 (comment)

With the implementation of Data Grid as the component that powers the Table Visualization, the use case for Data Grid and the common size for Data Grid has been updated. Data Grid provides click-actions within cells to reveal truncated values, but there is no similar mitigation for when a row is too narrow to display the column header.
Screen Shot 2023-06-13 at 11 42 31 AM

Therefore, another way to display column headers needs to be implemented. Tooltip does feel like the right approach on hover to reveal the column header. OuiBasicTable provides browser tooltips on hover of the column header while utilizing the entire column header string and the icon for the sort click action. It would be good to bring this pattern closer together across both.

Examples from OuiBasicTable:
Screen Shot 2023-06-13 at 11 39 33 AM
Screen Shot 2023-06-13 at 11 40 33 AM

@joshuarrrr joshuarrrr added the good first issue Good for newcomers label Jun 13, 2023
@joshuarrrr
Copy link
Member

Cool, so we'll use OuiBasicTable as a guide for updating the header behavior in OuiDataGrid

@keskami
Copy link
Contributor

keskami commented Oct 4, 2023

I'm interested in taking this as my first issue. Thank you

@BSFishy
Copy link
Contributor

BSFishy commented Oct 4, 2023

Sure, I assigned you :)

@joshuarrrr
Copy link
Member

@keskami I have a feeling you may have other questions as you start to investigate how to update this. Feel free to ask them here.

@keskami
Copy link
Contributor

keskami commented Oct 17, 2023

Hi I am a little confused on where to start on this issue. I looked at the OuiBasicTable component in the oui code and couldn't find any examples of tooltip. Shouldn't OuiBasicTable be a guide for me to update the behavior in OuiDataGrid? Thank you

@keskami
Copy link
Contributor

keskami commented Oct 17, 2023

Nevermind I'm on the right track! Currently working on the data_grid_header_row.tsx file.

@keskami
Copy link
Contributor

keskami commented Oct 24, 2023

I'm struggling to try to figure out how to call in the current width of the row being adjusted so I can compare that to the text size and display the tool tip if the text size is bigger than the row header width. Any help would be appreciated!

@keskami
Copy link
Contributor

keskami commented Oct 25, 2023

Ive tried to add a ref into the OuiDataGridColumnResizer component rendered in data_grid_header_cell.tsx in order to access the components marginRight style that is added when you extend the column to make it bigger or smaller but I can't access the styling no matter what I try. Is there another approach I should look at?

@keskami
Copy link
Contributor

keskami commented Oct 25, 2023

I also tried looking at making a new instance in the useEffect hook in data_grid_header_cell.tsx and then using that instance in order to call a get function I created in the OuiDataGridColumnResizer class component to get the width of the column after the column is shifted and this didn't work either. Maybe I'm creating an instance of the OuiDataGridColumnResizer class wrong?

@keskami
Copy link
Contributor

keskami commented Oct 25, 2023

this is how I did it. "const newInstance = new OuiDataGridColumnResizer({columnId: id, columnWidth: width, setColumnWidth: setColumnWidth})"

@keskami
Copy link
Contributor

keskami commented Oct 25, 2023

Any advice would help a lot! I'm very stuck on this issue.

@BSFishy
Copy link
Contributor

BSFishy commented Oct 26, 2023

I think the idea is to have the tooltip show up no matter the width. Just whenever you hover over the cell, the tooltip will show

@keskami
Copy link
Contributor

keskami commented Oct 26, 2023

You're right, that makes things a lot easier. Thank you

keskami added a commit to keskami/oui that referenced this issue Oct 31, 2023
keskami added a commit to keskami/oui that referenced this issue Oct 31, 2023
keskami added a commit to keskami/oui that referenced this issue Oct 31, 2023
@keskami keskami linked a pull request Oct 31, 2023 that will close this issue
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment