feat: make selection table cells resizable

app/src/App.tsx

@@ -17,6 +17,8 @@ import { GlobalStyles } from "./GlobalStyles";
 import RelayEnvironment from "./RelayEnvironment";
 import { AppRoutes } from "./Routes";
 
+import "normalize.css";
+
 const RootQuery = graphql`
   query AppRootQuery {
     model {

app/src/components/LinkButton.tsx

@@ -0,0 +1,29 @@
+import React, { PropsWithChildren } from "react";
+import { css } from "@emotion/react";
+
+import { ArrowIosForwardOutline, Icon } from "@arizeai/components";
+
+const linkButtonCSS = css`
+  display: inline-flex;
+  align-items: center;
+  background: none;
+  color: var(--px-light-blue-color);
+
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+export function LinkButton(props: PropsWithChildren<{ onClick: () => void }>) {
+  const { children, onClick } = props;
+  return (
+    <button css={linkButtonCSS} onClick={onClick}>
+      {children} <Icon svg={<ArrowIosForwardOutline />} />
+    </button>
+  );
+}

app/src/components/index.tsx

@@ -1,4 +1,5 @@
 export * from "./Link";
+export * from "./LinkButton";
 export * from "./ExternalLink";
 export * from "./LoadingMask";
 export * from "./Loading";

app/src/components/table/styles.ts

@@ -10,6 +10,24 @@ export const tableCSS = (theme: Theme) => css`
       th {
         padding: ${theme.spacing.margin4}px ${theme.spacing.margin16}px;
         text-align: left;
+        .resizer {
+          display: inline-block;
+
+          width: 2px;
+          height: 100%;
+          position: absolute;
+          right: 0;
+          top: 0;
+          transform: translateX(50%);
+          z-index: 1;
+          touch-action: none;
+          &.isResizing {
+            background: var(--px-light-blue-color);
+          }
+        }
+        &:hover .resizer {
+          background: ${theme.colors.gray300};
+        }
       }
     }
   }

app/src/pages/embedding/PointSelectionTable.tsx

@@ -1,9 +1,13 @@
 import React, { useMemo } from "react";
-import { CellProps, Column, useTable } from "react-table";
+import {
+  CellProps,
+  Column,
+  useFlexLayout,
+  useResizeColumns,
+  useTable,
+} from "react-table";
 
-import { Button } from "@arizeai/components";
-
-import { ExternalLink } from "@phoenix/components";
+import { ExternalLink, LinkButton } from "@phoenix/components";
 import { tableCSS } from "@phoenix/components/table/styles";
 
 import { ModelEvent } from "./types";
@@ -56,37 +60,45 @@ export function PointSelectionTable({
       {
         Header: "Prediction Label",
         accessor: "predictionLabel",
+        resizable: false,
+        width: 50,
       },
       {
         Header: "Actual Label",
         accessor: "actualLabel",
+        resizable: false,
+        width: 50,
       },
       {
         Header: "",
         accessor: "id",
+        resizable: false,
+        width: 50,
         Cell: ({ value }: CellProps<ModelEvent>) => {
           return (
-            <Button
-              variant="default"
-              size="compact"
+            <LinkButton
               aria-label="view point details"
               onClick={() => {
                 onPointSelected(value);
               }}
             >
               view details
-            </Button>
+            </LinkButton>
           );
         },
       },
     ];
   }, [data, onPointSelected]);
 
   const { getTableProps, getTableBodyProps, headerGroups, prepareRow, rows } =
-    useTable<ModelEvent>({
-      columns,
-      data,
-    });
+    useTable<ModelEvent>(
+      {
+        columns,
+        data,
+      },
+      useFlexLayout,
+      useResizeColumns
+    );
 
   return (
     <table {...getTableProps()} css={tableCSS}>
@@ -96,6 +108,15 @@ export function PointSelectionTable({
             {headerGroup.headers.map((column, idx) => (
               <th {...column.getHeaderProps()} key={idx}>
                 {column.render("Header")}
+                {/* Use column.getResizerProps to hook up the events correctly */}
+                {column.canResize && (
+                  <div
+                    {...column.getResizerProps()}
+                    className={`resizer ${
+                      column.isResizing ? "isResizing" : ""
+                    }`}
+                  />
+                )}
               </th>
             ))}
           </tr>