oui

oui copied to clipboard

As per the discussion here: https://github.com/opensearch-project/OpenSearch-Dashboards/issues/4279#issuecomment-1589825431

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.

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:

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

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

Sure, I assigned you :)

@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.

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

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

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!

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?

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?

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

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

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

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