Rollup divider is shown at the wrong column edge.

[dsmmcken]

Description
Table is grouped by MyChar and MyString, however the border of the rollup is after mychar instead of myString
Wrong:

Grouping in the reverse order works correctly. Not sure the cause:

Steps to reproduce

from deephaven import empty_table, time_table

simple_ticking = time_table("00:00:01").update([
        "MyString=new String(`a`+i)",
        "MyInt=new Integer(i)",
        "MyLong=new Long(i)",
        "MyDouble=new Double(i+i/10)",
        "MyFloat=new Float(i+i/10)",
        "MyBoolean=new Boolean(i%2==0)",
        "MyChar= new Character((char) ((i%26)+97))",
        "MyShort=new Short(Integer.toString(i%32767))",
        "MyByte= new java.lang.Byte(Integer.toString(i%127))"])                       

1. Create a table using the above code
2. From the table sidebar select rollup rows and group by "mychar" then "mystring"

Expected results
Border is after the last rolled up row.

Actual results
Border is shown in the incorrect location.

** NOTE **
Waiting for deephaven/deephaven-core#3477 should simplify the work needed on this issue.

Versions
Engine Version: 0.21.0
Web UI Version: 0.26.0
Java Version: 11.0.16
Barrage Version: 0.5.0

[bmingles]

The cause of this seems to be how we determine the last grouped column. We find the last column and then find the first occurrence of a column with that name.

// In IrisGridRenderer.drawGroupedColumnLine
const lastGroupedColumn = groupedColumns[groupedColumns.length - 1];
const modelIndex = columns.findIndex(
  c => c.name === lastGroupedColumn.name
);

While it looks like the columns at the end of the list are in the right order, the ones in the beginning are not. For example, MyChar comes after MyString when determining the last added group, but it comes before the actual column on the name match.