From 81d680cf1cb6e285af87d7e301bdc69dc28931b5 Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Mon, 3 Apr 2023 10:49:06 -0600
Subject: [PATCH] feat: make selection table cells resizable

---
 app/src/App.tsx                               |  2 +
 app/src/components/LinkButton.tsx             | 29 ++++++++++++
 app/src/components/index.tsx                  |  1 +
 app/src/components/table/styles.ts            | 18 ++++++++
 .../pages/embedding/PointSelectionTable.tsx   | 45 ++++++++++++++-----
 5 files changed, 83 insertions(+), 12 deletions(-)
 create mode 100644 app/src/components/LinkButton.tsx

diff --git a/app/src/App.tsx b/app/src/App.tsx
index 3f0d61acec..9eb2460f93 100644
--- a/app/src/App.tsx
+++ b/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 {
diff --git a/app/src/components/LinkButton.tsx b/app/src/components/LinkButton.tsx
new file mode 100644
index 0000000000..653e83c9ef
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/src/components/index.tsx b/app/src/components/index.tsx
index c8690d4fc7..4a17980d06 100644
--- a/app/src/components/index.tsx
+++ b/app/src/components/index.tsx
@@ -1,4 +1,5 @@
 export * from "./Link";
+export * from "./LinkButton";
 export * from "./ExternalLink";
 export * from "./LoadingMask";
 export * from "./Loading";
diff --git a/app/src/components/table/styles.ts b/app/src/components/table/styles.ts
index 3fd97f6115..b49827f134 100644
--- a/app/src/components/table/styles.ts
+++ b/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};
+        }
       }
     }
   }
diff --git a/app/src/pages/embedding/PointSelectionTable.tsx b/app/src/pages/embedding/PointSelectionTable.tsx
index 79a2e76b52..1ce4d1bddc 100644
--- a/app/src/pages/embedding/PointSelectionTable.tsx
+++ b/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,26 +60,30 @@ 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>
           );
         },
       },
@@ -83,10 +91,14 @@ export function PointSelectionTable({
   }, [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>