From 12d70f7e661a3413dd98ad31611976ba9afd518a Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Fri, 22 Jul 2022 08:24:05 -0500
Subject: [PATCH] Refactor experiments column conditional logic * updating
 naming, making logic more clear * reduce complexity with `headerGroup` data

---
 .../components/table/MergeHeaderGroups.tsx     |  9 ++++-----
 .../experiments/components/table/TableHead.tsx |  7 ++++---
 .../components/table/TableHeader.tsx           | 18 +++++++++---------
 webview/src/experiments/util/isFirstInArr.ts   |  1 -
 4 files changed, 17 insertions(+), 18 deletions(-)
 delete mode 100644 webview/src/experiments/util/isFirstInArr.ts

diff --git a/webview/src/experiments/components/table/MergeHeaderGroups.tsx b/webview/src/experiments/components/table/MergeHeaderGroups.tsx
index 5b27292875..c471c94a6a 100644
--- a/webview/src/experiments/components/table/MergeHeaderGroups.tsx
+++ b/webview/src/experiments/components/table/MergeHeaderGroups.tsx
@@ -10,7 +10,6 @@ import {
   OnDragStart,
   OnDrop
 } from '../../../shared/components/dragDrop/DragDropWorkbench'
-import { isFirstInArr } from '../../util/isFirstInArr'
 
 export const MergedHeaderGroups: React.FC<{
   headerGroup: HeaderGroup<Experiment>
@@ -21,7 +20,7 @@ export const MergedHeaderGroups: React.FC<{
   onDragUpdate: OnDragOver
   onDragStart: OnDragStart
   onDragEnd: OnDrop
-  isFirst: boolean
+  firstExpColumnCellId: string
   setExpColumnNeedsShadow: (needsShadow: boolean) => void
   root: HTMLElement | null
 }> = ({
@@ -34,7 +33,7 @@ export const MergedHeaderGroups: React.FC<{
   onDragEnd,
   onDragStart,
   root,
-  isFirst,
+  firstExpColumnCellId,
   setExpColumnNeedsShadow
 }) => {
   return (
@@ -43,9 +42,9 @@ export const MergedHeaderGroups: React.FC<{
         className: cx(styles.tr, styles.headRow)
       })}
     >
-      {headerGroup.headers.map((column: HeaderGroup<Experiment>, ind) => (
+      {headerGroup.headers.map((column: HeaderGroup<Experiment>) => (
         <TableHeader
-          isFirst={isFirst && isFirstInArr(ind)}
+          firstExpColumnCellId={firstExpColumnCellId}
           setExpColumnNeedsShadow={setExpColumnNeedsShadow}
           key={column.id}
           orderedColumns={orderedColumns}
diff --git a/webview/src/experiments/components/table/TableHead.tsx b/webview/src/experiments/components/table/TableHead.tsx
index 93081fc39c..bdd293e3f7 100644
--- a/webview/src/experiments/components/table/TableHead.tsx
+++ b/webview/src/experiments/components/table/TableHead.tsx
@@ -17,7 +17,6 @@ import {
   OnDragStart
 } from '../../../shared/components/dragDrop/DragDropWorkbench'
 import { getSelectedForPlotsCount } from '../../util/rows'
-import { isFirstInArr } from '../../util/isFirstInArr'
 
 interface TableHeadProps {
   instance: TableInstance<Experiment>
@@ -102,6 +101,8 @@ export const TableHead = ({
 
   const selectedForPlotsCount = getSelectedForPlotsCount(rows)
 
+  const firstExpColumnCellId = headerGroups[0].headers[0].id
+
   return (
     <div
       className={cx(styles.thead, needsShadow && styles.headWithShadow)}
@@ -113,7 +114,7 @@ export const TableHead = ({
         filters={filters}
         filteredCounts={filteredCounts}
       />
-      {headerGroups.map((headerGroup, ind) => (
+      {headerGroups.map(headerGroup => (
         // eslint-disable-next-line react/jsx-key
         <MergedHeaderGroups
           {...headerGroup.getHeaderGroupProps()}
@@ -126,7 +127,7 @@ export const TableHead = ({
           onDragUpdate={onDragUpdate}
           onDragEnd={onDragEnd}
           root={root}
-          isFirst={isFirstInArr(ind)}
+          firstExpColumnCellId={firstExpColumnCellId}
           setExpColumnNeedsShadow={setExpColumnNeedsShadow}
         />
       ))}
diff --git a/webview/src/experiments/components/table/TableHeader.tsx b/webview/src/experiments/components/table/TableHeader.tsx
index 8b730cba0b..7aa8503446 100644
--- a/webview/src/experiments/components/table/TableHeader.tsx
+++ b/webview/src/experiments/components/table/TableHeader.tsx
@@ -130,7 +130,7 @@ const getIconMenuItems = (
   }
 ]
 
-const FirstTableHeaderCellWrapper: React.FC<{
+const WithExpColumnNeedsShadowUpdates: React.FC<{
   children: React.ReactNode
   setExpColumnNeedsShadow: (needsShadow: boolean) => void
   root: HTMLElement | null
@@ -212,7 +212,7 @@ const TableHeaderCell: React.FC<{
   onDragOver: OnDragOver
   onDragStart: OnDragStart
   onDrop: OnDrop
-  isFirst: boolean
+  firstExpColumnCellId: string
   setExpColumnNeedsShadow: (needsShadow: boolean) => void
   root: HTMLElement | null
 }> = ({
@@ -228,7 +228,7 @@ const TableHeaderCell: React.FC<{
   onDragStart,
   onDrop,
   root,
-  isFirst,
+  firstExpColumnCellId,
   setExpColumnNeedsShadow
 }) => {
   const [menuSuppressed, setMenuSuppressed] = React.useState<boolean>(false)
@@ -276,13 +276,13 @@ const TableHeaderCell: React.FC<{
         role="columnheader"
         tabIndex={0}
       >
-        {isFirst ? (
-          <FirstTableHeaderCellWrapper
+        {firstExpColumnCellId === column.id ? (
+          <WithExpColumnNeedsShadowUpdates
             setExpColumnNeedsShadow={setExpColumnNeedsShadow}
             root={root}
           >
             {cellContents}
-          </FirstTableHeaderCellWrapper>
+          </WithExpColumnNeedsShadowUpdates>
         ) : (
           cellContents
         )}
@@ -300,7 +300,7 @@ interface TableHeaderProps {
   onDragOver: OnDragOver
   onDragStart: OnDragStart
   onDrop: OnDrop
-  isFirst: boolean
+  firstExpColumnCellId: string
   setExpColumnNeedsShadow: (needsShadow: boolean) => void
   root: HTMLElement | null
 }
@@ -315,7 +315,7 @@ export const TableHeader: React.FC<TableHeaderProps> = ({
   onDragStart,
   onDrop,
   root,
-  isFirst,
+  firstExpColumnCellId,
   setExpColumnNeedsShadow
 }) => {
   const baseColumn = column.placeholderOf || column
@@ -367,7 +367,7 @@ export const TableHeader: React.FC<TableHeaderProps> = ({
       onDrop={onDrop}
       menuDisabled={!isSortable && column.group !== ColumnType.PARAMS}
       root={root}
-      isFirst={isFirst}
+      firstExpColumnCellId={firstExpColumnCellId}
       setExpColumnNeedsShadow={setExpColumnNeedsShadow}
       menuContent={
         <div>
diff --git a/webview/src/experiments/util/isFirstInArr.ts b/webview/src/experiments/util/isFirstInArr.ts
deleted file mode 100644
index 55fa088887..0000000000
--- a/webview/src/experiments/util/isFirstInArr.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const isFirstInArr = (ind: number): boolean => ind === 0