Skip to content

Commit

Permalink
clean
Browse files Browse the repository at this point in the history
  • Loading branch information
gtarpenning committed Oct 25, 2024
1 parent 14f96d2 commit 52e3131
Show file tree
Hide file tree
Showing 9 changed files with 111 additions and 75 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,6 @@ export const FeedbackGrid = ({
const currentViewerId = userInfo ? userInfo.id : null;
return (
<Tailwind>
<div className="flex flex-col gap-4">stsst</div>
{paths.map(path => {
return (
<div key={path}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,10 @@ export const FeedbackGridInner = ({
display: 'flex',
renderCell: params => (
<div className="overflow-hidden">
<FeedbackTypeChip feedbackType={params.row.feedback_type} />
<FeedbackTypeChip
feedbackType={params.row.feedback_type}
feedbackRef={params.row.payload?.ref}
/>
</div>
),
},
Expand All @@ -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 <CellValueString value={JSON.stringify(params.row.payload)} />;
},
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 <Pill color={color} label={label} />;
}

const onClick = () => history.replace(
baseRouter.objectVersionUIUrl(
objRef.entityName,
objRef.projectName,
(objRef.artifactName ?? '') + '-obj',
objRef.artifactVersion,
)
);
return (
<TargetBlank onClick={onClick}>
<Pill color={color} label={label} />
</TargetBlank>
);
}
return <Pill color={color} label={label} />;
return (
<Pill color={color} label={label} />
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ interface StructuredFeedbackProps {
entity: string;
project: string;
readOnly?: boolean;
focused?: boolean;
}

// Utility function for creating feedback request
Expand Down Expand Up @@ -84,6 +85,7 @@ const renderFeedbackComponent = (
onAddFeedback={onAddFeedback}
defaultValue={foundValue as number | null}
currentFeedbackId={currentFeedbackId}
focused={props.focused}
/>
);
case FEEDBACK_TYPES.TEXT:
Expand All @@ -92,6 +94,7 @@ const renderFeedbackComponent = (
onAddFeedback={onAddFeedback}
defaultValue={foundValue as string | null}
currentFeedbackId={currentFeedbackId}
focused={props.focused}
/>
);
case FEEDBACK_TYPES.CATEGORICAL:
Expand All @@ -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:
Expand All @@ -111,6 +115,7 @@ const renderFeedbackComponent = (
onAddFeedback={onAddFeedback}
defaultValue={foundValue as string | null}
currentFeedbackId={currentFeedbackId}
focused={props.focused}
/>
);
default:
Expand Down Expand Up @@ -259,12 +264,15 @@ export const NumericalFeedbackColumn = ({
max,
onAddFeedback,
defaultValue,
currentFeedbackId,
focused,
}: {
min: number;
max: number;
onAddFeedback?: (value: number) => Promise<boolean>;
onAddFeedback?: (value: number, currentFeedbackId: string | null) => Promise<boolean>;
defaultValue: number | null;
currentFeedbackId?: string | null;
focused?: boolean;
}) => {
const [value, setValue] = useState<number | undefined>(
defaultValue ?? undefined
Expand All @@ -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) => {
Expand All @@ -300,6 +308,7 @@ export const NumericalFeedbackColumn = ({
min: {min}, max: {max}
</div>
<TextField
autoFocus={focused}
type="number"
value={value?.toString() ?? ''}
onChange={onValueChange}
Expand All @@ -314,13 +323,15 @@ export const TextFeedbackColumn = ({
onAddFeedback,
defaultValue,
currentFeedbackId,
focused,
}: {
onAddFeedback?: (
value: string,
currentFeedbackId: string | null
) => Promise<boolean>;
defaultValue: string | null;
currentFeedbackId?: string | null;
focused?: boolean;
}) => {
const [value, setValue] = useState<string>(defaultValue ?? '');

Expand All @@ -342,7 +353,7 @@ export const TextFeedbackColumn = ({

return (
<div className="w-full">
<TextField value={value} onChange={onValueChange} placeholder="..." />
<TextField autoFocus={focused} value={value} onChange={onValueChange} placeholder="..." />
</div>
);
};
Expand All @@ -357,6 +368,7 @@ export const CategoricalFeedbackColumn = ({
onAddFeedback,
defaultValue,
currentFeedbackId,
focused,
}: {
options: string[];
onAddFeedback?: (
Expand All @@ -365,8 +377,7 @@ export const CategoricalFeedbackColumn = ({
) => Promise<boolean>;
defaultValue: string | null;
currentFeedbackId?: string | null;
multiSelect?: boolean;
addNewOption?: boolean;
focused?: boolean;
}) => {
const dropdownOptions = useMemo(() => {
const opts = options.map((option: string) => ({
Expand Down Expand Up @@ -404,6 +415,8 @@ export const CategoricalFeedbackColumn = ({
getOptionLabel={option => option.label}
onChange={onValueChange}
value={value}
openOnFocus
autoFocus={focused}
renderInput={params => (
<MuiTextField
{...params}
Expand Down Expand Up @@ -450,13 +463,15 @@ export const BinaryFeedbackColumn = ({
onAddFeedback,
defaultValue,
currentFeedbackId,
focused,
}: {
onAddFeedback?: (
value: string,
currentFeedbackId: string | null
) => Promise<boolean>;
defaultValue: string | null;
currentFeedbackId: string | null;
focused?: boolean;
}) => {
const [value, setValue] = useState<boolean | null>(null);

Expand All @@ -480,7 +495,11 @@ export const BinaryFeedbackColumn = ({
return (
<Tailwind>
<div className="flex w-full justify-center">
<Checkbox checked={value ?? false} onChange={onValueChange} />
<Checkbox
autoFocus={focused}
checked={value ?? false}
onChange={onValueChange}
/>
</div>
</Tailwind>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,14 @@ export default function StructuredFeedbackSidebar(props: {
</button>
{isExpanded && (
<div>
{types?.map((type: any) => (
{types?.map((type: any, index: number) => (
<div key={type.name}>
<h3 className="text-gray-700 bg-gray-50 px-6 py-4 text-sm font-semibold">
{type.name}
</h3>
<div className="pb-8 pl-6 pr-8 pt-2">
<StructuredFeedbackCell
focused={index === 0}
sfData={type}
callRef={callRef}
entity={props.entity}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ const CallPageInnerVertical: FC<{
call.traceId,
call.callId,
path,
showTraceTree,
false,
!showFeedbackExpand
)
);
Expand Down Expand Up @@ -276,9 +276,10 @@ const CallPageInnerVertical: FC<{
]);
const handleKeyDown = useCallback(
(event: KeyboardEvent) => {
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();
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<Reactions
weaveRef={weaveRef}
forceVisible={rowIndex === 0}
twWrapperStyles={{
width: '100%',
height: '100%',
}}
/>
);
},
},
]
: 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 (
<Reactions
weaveRef={weaveRef}
forceVisible={rowIndex === 0}
twWrapperStyles={{
width: '100%',
height: '100%',
}}
/>
);
},
},
...structuredFeedbackColumns,
...(isSingleOp && !isSingleOpVersion
? [
{
Expand Down Expand Up @@ -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',
Expand Down
Loading

0 comments on commit 52e3131

Please sign in to comment.