diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/FeedbackGrid.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/FeedbackGrid.tsx index 1cf5cbd1780..d4330e51575 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/FeedbackGrid.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/FeedbackGrid.tsx @@ -90,7 +90,6 @@ export const FeedbackGrid = ({ const currentViewerId = userInfo ? userInfo.id : null; return ( -
stsst
{paths.map(path => { return (
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/FeedbackGridInner.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/FeedbackGridInner.tsx index c1ca154a6a2..846745585f7 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/FeedbackGridInner.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/FeedbackGridInner.tsx @@ -26,7 +26,10 @@ export const FeedbackGridInner = ({ display: 'flex', renderCell: params => (
- +
), }, @@ -43,7 +46,7 @@ export const FeedbackGridInner = ({ return params.row.payload.emoji; } if (params.row.feedback_type === 'wandb.structuredFeedback.1') { - return params.row.payload.value; + return params.row.payload.name + ': ' + params.row.payload.value; } return ; }, diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/FeedbackTypeChip.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/FeedbackTypeChip.tsx index 051c80d22da..3507ee16bea 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/FeedbackTypeChip.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/FeedbackTypeChip.tsx @@ -1,14 +1,27 @@ import React from 'react'; import {Pill, TagColorName} from '../../../../Tag'; +import { useWeaveflowRouteContext } from '../context'; +import { parseRef, refUri } from '@wandb/weave/react'; +import { Link } from '../../Browse2/CommonLib'; +import { TargetBlank } from '@wandb/weave/common/util/links'; +import { useHistory } from 'react-router-dom'; + type FeedbackTypeChipProps = { feedbackType: string; + feedbackRef?: string; }; -export const FeedbackTypeChip = ({feedbackType}: FeedbackTypeChipProps) => { +export const FeedbackTypeChip = ({ + feedbackType, + feedbackRef, +}: FeedbackTypeChipProps) => { + const {baseRouter} = useWeaveflowRouteContext(); + const history = useHistory(); + let color: TagColorName = 'teal'; - let label = feedbackType; + let label = feedbackType; if (feedbackType === 'wandb.reaction.1') { color = 'purple'; label = 'Reaction'; @@ -18,6 +31,26 @@ export const FeedbackTypeChip = ({feedbackType}: FeedbackTypeChipProps) => { } else if (feedbackType === 'wandb.structuredFeedback.1') { color = 'moon'; label = 'Structured'; + const objRef = feedbackRef ? parseRef(feedbackRef) : undefined; + if (!objRef) { + return ; + } + + const onClick = () => history.replace( + baseRouter.objectVersionUIUrl( + objRef.entityName, + objRef.projectName, + (objRef.artifactName ?? '') + '-obj', + objRef.artifactVersion, + ) + ); + return ( + + + + ); } - return ; + return ( + + ); }; diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/StructuredFeedback/StructuredFeedback.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/StructuredFeedback/StructuredFeedback.tsx index db32cf0f902..cdb9403772f 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/StructuredFeedback/StructuredFeedback.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/StructuredFeedback/StructuredFeedback.tsx @@ -41,6 +41,7 @@ interface StructuredFeedbackProps { entity: string; project: string; readOnly?: boolean; + focused?: boolean; } // Utility function for creating feedback request @@ -84,6 +85,7 @@ const renderFeedbackComponent = ( onAddFeedback={onAddFeedback} defaultValue={foundValue as number | null} currentFeedbackId={currentFeedbackId} + focused={props.focused} /> ); case FEEDBACK_TYPES.TEXT: @@ -92,6 +94,7 @@ const renderFeedbackComponent = ( onAddFeedback={onAddFeedback} defaultValue={foundValue as string | null} currentFeedbackId={currentFeedbackId} + focused={props.focused} /> ); case FEEDBACK_TYPES.CATEGORICAL: @@ -101,8 +104,9 @@ const renderFeedbackComponent = ( onAddFeedback={onAddFeedback} defaultValue={foundValue as string | null} currentFeedbackId={currentFeedbackId} - multiSelect={props.sfData.multi_select} - addNewOption={props.sfData.add_new_option} + // multiSelect={props.sfData.multi_select} + // addNewOption={props.sfData.add_new_option} + focused={props.focused} /> ); case FEEDBACK_TYPES.BOOLEAN: @@ -111,6 +115,7 @@ const renderFeedbackComponent = ( onAddFeedback={onAddFeedback} defaultValue={foundValue as string | null} currentFeedbackId={currentFeedbackId} + focused={props.focused} /> ); default: @@ -259,12 +264,15 @@ export const NumericalFeedbackColumn = ({ max, onAddFeedback, defaultValue, + currentFeedbackId, + focused, }: { min: number; max: number; - onAddFeedback?: (value: number) => Promise; + onAddFeedback?: (value: number, currentFeedbackId: string | null) => Promise; defaultValue: number | null; currentFeedbackId?: string | null; + focused?: boolean; }) => { const [value, setValue] = useState( defaultValue ?? undefined @@ -277,9 +285,9 @@ export const NumericalFeedbackColumn = ({ const debouncedOnAddFeedback = useCallback( debounce((val: number) => { - onAddFeedback?.(val); + onAddFeedback?.(val, currentFeedbackId ?? null); }, DEBOUNCE_VAL), - [onAddFeedback] + [onAddFeedback, currentFeedbackId] ); const onValueChange = (v: string) => { @@ -300,6 +308,7 @@ export const NumericalFeedbackColumn = ({ min: {min}, max: {max}
Promise; defaultValue: string | null; currentFeedbackId?: string | null; + focused?: boolean; }) => { const [value, setValue] = useState(defaultValue ?? ''); @@ -342,7 +353,7 @@ export const TextFeedbackColumn = ({ return (
- +
); }; @@ -357,6 +368,7 @@ export const CategoricalFeedbackColumn = ({ onAddFeedback, defaultValue, currentFeedbackId, + focused, }: { options: string[]; onAddFeedback?: ( @@ -365,8 +377,7 @@ export const CategoricalFeedbackColumn = ({ ) => Promise; defaultValue: string | null; currentFeedbackId?: string | null; - multiSelect?: boolean; - addNewOption?: boolean; + focused?: boolean; }) => { const dropdownOptions = useMemo(() => { const opts = options.map((option: string) => ({ @@ -404,6 +415,8 @@ export const CategoricalFeedbackColumn = ({ getOptionLabel={option => option.label} onChange={onValueChange} value={value} + openOnFocus + autoFocus={focused} renderInput={params => ( Promise; defaultValue: string | null; currentFeedbackId: string | null; + focused?: boolean; }) => { const [value, setValue] = useState(null); @@ -480,7 +495,11 @@ export const BinaryFeedbackColumn = ({ return (
- +
); diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/StructuredFeedback/StructuredFeedbackSidebar.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/StructuredFeedback/StructuredFeedbackSidebar.tsx index b80fcd3ecfd..2a2779eeb87 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/StructuredFeedback/StructuredFeedbackSidebar.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/StructuredFeedback/StructuredFeedbackSidebar.tsx @@ -47,13 +47,14 @@ export default function StructuredFeedbackSidebar(props: { {isExpanded && (
- {types?.map((type: any) => ( + {types?.map((type: any, index: number) => (

{type.name}

{ - if (event.key === 'ArrowDown') { + console.log('EVENT', event); + if (event.key === 'ArrowDown' && event.shiftKey) { onNextCall(); - } else if (event.key === 'ArrowUp') { + } else if (event.key === 'ArrowUp' && event.shiftKey) { onPreviousCall(); } }, diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsTable.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsTable.tsx index e49047d2141..59e6d823395 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsTable.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsTable.tsx @@ -475,21 +475,6 @@ export const CallsTable: FC<{ [effectiveFilter.parentId, parentIdOptions] ); - // useEffect(() => { - // if (pinModel != null && setPinModel != null && structuredFeedbackOptions != null && structuredFeedbackOptions.types.length > 0) { - // // do structured feedback stuff - // const feedbackCols = structuredFeedbackOptions.types.map(feedbackCol => feedbackColName(feedbackCol)); - // // right pin feedback when we have a parent id - // const currentLeft = pinModel?.left ?? []; - // if (!currentLeft.find(col => feedbackCols.includes(col))) { - // setPinModel({ - // ...pinModel, - // left: [...currentLeft, ...feedbackCols], - // }); - // } - // } - // }, [selectedParentId, structuredFeedbackOptions, pinModel, setPinModel]); - // DataGrid Model Management const pinModelResolved = pinModel ?? DEFAULT_PIN_CALLS; diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/callsTableColumns.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/callsTableColumns.tsx index 29a2d310421..ac2b1a7530b 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/callsTableColumns.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/callsTableColumns.tsx @@ -266,35 +266,32 @@ function buildCallsTableColumns( ); }, }, - ...(simpleFeedback - ? [ - { - field: 'feedback', - headerName: 'Feedback', - width: 150, - sortable: false, - filterable: false, - renderCell: (rowParams: GridRenderCellParams) => { - const rowIndex = rowParams.api.getRowIndexRelativeToVisibleRows( - rowParams.id - ); - const callId = rowParams.row.id; - const weaveRef = makeRefCall(entity, project, callId); - - return ( - - ); - }, - }, - ] - : structuredFeedbackColumns), + { + field: 'feedback.emojis', + headerName: 'Reactions', + width: 150, + sortable: false, + filterable: false, + renderCell: (rowParams: GridRenderCellParams) => { + const rowIndex = rowParams.api.getRowIndexRelativeToVisibleRows( + rowParams.id + ); + const callId = rowParams.row.id; + const weaveRef = makeRefCall(entity, project, callId); + + return ( + + ); + }, + }, + ...structuredFeedbackColumns, ...(isSingleOp && !isSingleOpVersion ? [ { @@ -365,16 +362,16 @@ function buildCallsTableColumns( ); cols.push(...newCols); - if (structuredFeedbackColumns.length > 0) { - // add groupingModel for feedback - groupingModel.push({ - headerName: 'feedback', - groupId: 'feedback', - children: structuredFeedbackOptions?.types.map((feedbackType: any) => ({ - field: feedbackColName(feedbackType), - })), - }); - } + const structuredFeedbackFields = structuredFeedbackOptions?.types.map((feedbackType: any) => ({ + field: feedbackColName(feedbackType), + })) ?? []; + const feedbackChildren = [...structuredFeedbackFields, {field: 'feedback.emojis'}]; + + groupingModel.push({ + headerName: 'Feedback', + groupId: 'feedback', + children: feedbackChildren, + }); cols.push({ field: 'wb_user_id', diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ObjectVersionsPage.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ObjectVersionsPage.tsx index a99d2ca12d7..92bc347c222 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ObjectVersionsPage.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ObjectVersionsPage.tsx @@ -353,8 +353,6 @@ const ObjectVersionsTable: React.FC<{ } }, [rowIds, peekId]); - console.log('rowIds', rowIds); - return (