fix(weave): align tables column header cell text based on panel type

wandb · Sep 25, 2024 · 4b98cf5 · 4b98cf5
1 parent a4ee3ae
commit 4b98cf5
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 26 deletions.
diff --git a/weave-js/src/components/Panel2/PanelTable.styles.ts b/weave-js/src/components/Panel2/PanelTable.styles.ts
@@ -32,7 +32,6 @@ export const ColumnName = styled.div`
     color: ${globals.primary};
   }
   overflow: hidden;
-  text-align: left;
 `;
 ColumnName.displayName = 'S.ColumnName';
 

diff --git a/weave-js/src/components/Panel2/PanelTable/ColumnHeader.tsx b/weave-js/src/components/Panel2/PanelTable/ColumnHeader.tsx
@@ -17,9 +17,9 @@ import {
   voidNode,
 } from '@wandb/weave/core';
 import {TableState} from '@wandb/weave/index';
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {useCallback, useMemo, useState, useContext} from 'react';
 import {Popup} from 'semantic-ui-react';
-
+import {WeaveFormatContext} from '../WeaveFormatContext';
 import {useWeaveContext} from '../../../context';
 import {focusEditor, WeaveExpression} from '../../../panel/WeaveExpression';
 import {SUGGESTION_OPTION_CLASS} from '../../../panel/WeaveExpression/styles';
@@ -152,6 +152,7 @@ export const ColumnHeader: React.FC<{
 }) => {
   const weave = useWeaveContext();
   const {stack} = usePanelContext();
+  const {columnFormat} = useContext(WeaveFormatContext);
 
   const [columnSettingsOpen, setColumnSettingsOpen] = useState(false);
 
@@ -495,7 +496,9 @@ export const ColumnHeader: React.FC<{
   }, [cellFrame, weave, propsSelectFunction, inputArrayNode]);
 
   return (
-    <S.ColumnHeader data-test="column-header">
+    <S.ColumnHeader
+      data-test="column-header"
+      style={{textAlign: columnFormat?.textAlign ?? 'center'}}>
       {simpleTable ? (
         workingColumnName !== '' ? (
           <S.ColumnNameText>{workingColumnName}</S.ColumnNameText>

diff --git a/weave-js/src/components/Panel2/PanelTable/PanelTable.tsx b/weave-js/src/components/Panel2/PanelTable/PanelTable.tsx
@@ -542,28 +542,33 @@ const PanelTableInner: React.FC<
 
   const headerRendererForColumn = useCallback(
     (colId: string, {headerIndex}: any) => {
+      const columnDef = columnDefinitions[colId];
+      const colType = columnDef.selectFn.type;
+
       return (
-        <ColumnHeader
-          isGroupCol={columnDefinitions[colId].isGrouped}
-          tableState={tableState}
-          inputArrayNode={input}
-          rowsNode={rowsNode}
-          columnName={tableState.columnNames[colId]}
-          selectFunction={tableState.columnSelectFunctions[colId]}
-          colId={colId}
-          panelId={tableState.columns[colId].panelId}
-          config={tableState.columns[colId].panelConfig}
-          panelContext={props.context}
-          updatePanelContext={updateContext}
-          updateTableState={updateTableState}
-          isPinned={config.pinnedColumns?.includes(colId)}
-          setColumnPinState={(pinned: boolean) => {
-            setColumnPinState(colId, pinned);
-          }}
-          simpleTable={props.config.simpleTable}
-          countColumnId={countColumnId}
-          setCountColumnId={setCountColumnId}
-        />
+        <WeaveFormatContext.Provider value={getColumnCellFormats(colType)}>
+          <ColumnHeader
+            isGroupCol={columnDefinitions[colId].isGrouped}
+            tableState={tableState}
+            inputArrayNode={input}
+            rowsNode={rowsNode}
+            columnName={tableState.columnNames[colId]}
+            selectFunction={tableState.columnSelectFunctions[colId]}
+            colId={colId}
+            panelId={tableState.columns[colId].panelId}
+            config={tableState.columns[colId].panelConfig}
+            panelContext={props.context}
+            updatePanelContext={updateContext}
+            updateTableState={updateTableState}
+            isPinned={config.pinnedColumns?.includes(colId)}
+            setColumnPinState={(pinned: boolean) => {
+              setColumnPinState(colId, pinned);
+            }}
+            simpleTable={props.config.simpleTable}
+            countColumnId={countColumnId}
+            setCountColumnId={setCountColumnId}
+          />
+        </WeaveFormatContext.Provider>
       );
     },
     [

diff --git a/weave-js/src/components/Panel2/PanelTable/util.ts b/weave-js/src/components/Panel2/PanelTable/util.ts
@@ -29,7 +29,7 @@ import {WeaveFormatContextType} from '../WeaveFormatContext';
 import * as Table from './tableState';
 import {useTableStateWithRefinedExpressions} from './tableStateReact';
 
-// Formatting for PanelNumbers and PanelStrings inside Tables
+// Formatting for PanelNumber and PanelString headers and values inside Tables
 export const getColumnCellFormats = (colType: Type): WeaveFormatContextType => {
   const t = nullableTaggableStrip(colType);
   const numberFormat =
@@ -42,9 +42,14 @@ export const getColumnCellFormats = (colType: Type): WeaveFormatContextType => {
         }
       : {};
   const stringFormat = {spacing: t === 'string'};
+  const columnFormat = {
+    textAlign: t === 'number' ? 'right' as const : 'center' as const,
+  };
+
   return {
     numberFormat,
     stringFormat,
+    columnFormat,
   };
 };
 

diff --git a/weave-js/src/components/Panel2/WeaveFormatContext.tsx b/weave-js/src/components/Panel2/WeaveFormatContext.tsx
@@ -11,9 +11,14 @@ type PanelStringFormat = {
   spacing?: boolean;
 };
 
+type PanelColumnFormat = {
+  textAlign?: React.CSSProperties['textAlign'];
+};
+
 export type WeaveFormatContextType = {
   numberFormat: PanelNumberFormat;
   stringFormat: PanelStringFormat;
+  columnFormat: PanelColumnFormat;
 };
 
 export const WeaveFormatContext = React.createContext<WeaveFormatContextType>({
@@ -26,4 +31,7 @@ export const WeaveFormatContext = React.createContext<WeaveFormatContextType>({
   stringFormat: {
     spacing: false,
   },
+  columnFormat: {
+    textAlign: 'center',
+  },
 });