Skip to content

Commit

Permalink
Merge branch 'master' into DOCS-1120
Browse files Browse the repository at this point in the history
  • Loading branch information
@J2-D2-3PO
J2-D2-3PO authored Dec 12, 2024
2 parents fa823d0 + 3acb3d3 commit 61c4fb8
Show file tree
Hide file tree
Showing 6 changed files with 135 additions and 226 deletions.
138 changes: 1 addition & 137 deletions weave-js/src/components/PagePanelComponents/Home/Browse3.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,5 @@
import {ApolloProvider} from '@apollo/client';
import {Home} from '@mui/icons-material';
import {
AppBar,
Box,
Breadcrumbs,
Drawer,
IconButton,
Link as MaterialLink,
Toolbar,
Typography,
} from '@mui/material';
import {Box, Drawer} from '@mui/material';
import {
GridColumnVisibilityModel,
GridFilterModel,
Expand All @@ -21,9 +11,7 @@ import {LicenseInfo} from '@mui/x-license';
import {makeGorillaApolloClient} from '@wandb/weave/apollo';
import {EVALUATE_OP_NAME_POST_PYDANTIC} from '@wandb/weave/components/PagePanelComponents/Home/Browse3/pages/common/heuristics';
import {opVersionKeyToRefUri} from '@wandb/weave/components/PagePanelComponents/Home/Browse3/pages/wfReactInterface/utilities';
import _ from 'lodash';
import React, {
ComponentProps,
FC,
useCallback,
useEffect,
Expand All @@ -33,7 +21,6 @@ import React, {
} from 'react';
import useMousetrap from 'react-hook-mousetrap';
import {
Link as RouterLink,
Redirect,
Route,
Switch,
Expand Down Expand Up @@ -199,7 +186,6 @@ export const Browse3: FC<{
`/${URL_BROWSE3}`,
]}>
<Browse3Mounted
hideHeader={props.hideHeader}
headerOffset={props.headerOffset}
navigateAwayFromProject={props.navigateAwayFromProject}
/>
Expand All @@ -211,7 +197,6 @@ export const Browse3: FC<{
};

const Browse3Mounted: FC<{
hideHeader?: boolean;
headerOffset?: number;
navigateAwayFromProject?: () => void;
}> = props => {
Expand All @@ -225,37 +210,6 @@ const Browse3Mounted: FC<{
overflow: 'auto',
flexDirection: 'column',
}}>
{!props.hideHeader && (
<AppBar
sx={{
zIndex: theme => theme.zIndex.drawer + 1,
height: '60px',
flex: '0 0 auto',
position: 'static',
}}>
<Toolbar
sx={{
backgroundColor: '#1976d2',
minHeight: '30px',
}}>
<IconButton
component={RouterLink}
to={`/`}
sx={{
color: theme =>
theme.palette.getContrastText(theme.palette.primary.main),
'&:hover': {
color: theme =>
theme.palette.getContrastText(theme.palette.primary.dark),
},
marginRight: theme => theme.spacing(2),
}}>
<Home />
</IconButton>
<Browse3Breadcrumbs />
</Toolbar>
</AppBar>
)}
<Switch>
<Route path={baseRouter.projectUrl(':entity', ':project')} exact>
<ProjectRedirect />
Expand Down Expand Up @@ -1050,20 +1004,6 @@ const ComparePageBinding = () => {
return <ComparePage entity={params.entity} project={params.project} />;
};

const AppBarLink = (props: ComponentProps<typeof RouterLink>) => (
<MaterialLink
sx={{
color: theme => theme.palette.getContrastText(theme.palette.primary.main),
'&:hover': {
color: theme =>
theme.palette.getContrastText(theme.palette.primary.dark),
},
}}
{...props}
component={RouterLink}
/>
);

const PlaygroundPageBinding = () => {
const params = useParamsDecoded<Browse3TabItemParams>();
return (
Expand All @@ -1074,79 +1014,3 @@ const PlaygroundPageBinding = () => {
/>
);
};

const Browse3Breadcrumbs: FC = props => {
const params = useParamsDecoded<Browse3Params>();
const query = useURLSearchParamsDict();
const filePathParts = query.path?.split('/') ?? [];
const refFields = query.extra?.split('/') ?? [];

return (
<Breadcrumbs>
{params.entity && (
<AppBarLink to={`/${URL_BROWSE3}/${params.entity}`}>
{params.entity}
</AppBarLink>
)}
{params.project && (
<AppBarLink to={`/${URL_BROWSE3}/${params.entity}/${params.project}`}>
{params.project}
</AppBarLink>
)}
{params.tab && (
<AppBarLink
to={`/${URL_BROWSE3}/${params.entity}/${params.project}/${params.tab}`}>
{params.tab}
</AppBarLink>
)}
{params.itemName && (
<AppBarLink
to={`/${URL_BROWSE3}/${params.entity}/${params.project}/${params.tab}/${params.itemName}`}>
{params.itemName}
</AppBarLink>
)}
{params.version && (
<AppBarLink
to={`/${URL_BROWSE3}/${params.entity}/${params.project}/${params.tab}/${params.itemName}/versions/${params.version}`}>
{params.version}
</AppBarLink>
)}
{filePathParts.map((part, idx) => (
<AppBarLink
key={idx}
to={`/${URL_BROWSE3}/${params.entity}/${params.project}/${
params.tab
}/${params.itemName}/versions/${
params.version
}?path=${encodeURIComponent(
filePathParts.slice(0, idx + 1).join('/')
)}`}>
{part}
</AppBarLink>
))}
{_.range(0, refFields.length, 2).map(idx => (
<React.Fragment key={idx}>
<Typography
sx={{
color: theme =>
theme.palette.getContrastText(theme.palette.primary.main),
}}>
{refFields[idx]}
</Typography>
<AppBarLink
to={`/${URL_BROWSE3}/${params.entity}/${params.project}/${
params.tab
}/${params.itemName}/versions/${
params.version
}?path=${encodeURIComponent(
filePathParts.join('/')
)}&extra=${encodeURIComponent(
refFields.slice(0, idx + 2).join('/')
)}`}>
{refFields[idx + 1]}
</AppBarLink>
</React.Fragment>
))}
</Breadcrumbs>
);
};
54 changes: 25 additions & 29 deletions ...mponents/PagePanelComponents/Home/Browse3/feedback/StructuredFeedback/HumanAnnotation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,17 +53,11 @@ export const HumanAnnotationCell: React.FC<HumanAnnotationProps> = props => {
const feedbackSpecRef = props.hfSpec.ref;

useEffect(() => {
if (!props.readOnly) {
// We don't need to listen for feedback changes if the cell is editable
// it is being controlled by local state
return;
}
return getTsClient().registerOnFeedbackListener(
props.callRef,
query.refetch
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.callRef]);
}, [props.callRef, query.refetch, getTsClient]);

useEffect(() => {
if (foundFeedbackCallRef && props.callRef !== foundFeedbackCallRef) {
Expand Down Expand Up @@ -183,13 +177,22 @@ const FeedbackComponentSelector: React.FC<{
}) => {
const wrappedOnAddFeedback = useCallback(
async (value: any) => {
if (value == null || value === foundValue || value === '') {
// Remove from unsaved changes if value is invalid
setUnsavedFeedbackChanges(curr => {
const rest = {...curr};
delete rest[feedbackSpecRef];
return rest;
});
return true;
}
setUnsavedFeedbackChanges(curr => ({
...curr,
[feedbackSpecRef]: () => onAddFeedback(value),
}));
return true;
},
[onAddFeedback, setUnsavedFeedbackChanges, feedbackSpecRef]
[onAddFeedback, setUnsavedFeedbackChanges, feedbackSpecRef, foundValue]
);

switch (type) {
Expand Down Expand Up @@ -346,21 +349,10 @@ export const NumericalFeedbackColumn = ({
focused?: boolean;
isInteger?: boolean;
}) => {
const debouncedFn = useMemo(
() =>
_.debounce((val: number | null) => onAddFeedback?.(val), DEBOUNCE_VAL),
[onAddFeedback]
);
useEffect(() => {
return () => {
debouncedFn.cancel();
};
}, [debouncedFn]);

return (
<NumericalTextField
value={defaultValue}
onChange={debouncedFn}
onChange={value => onAddFeedback?.(value)}
min={min}
max={max}
isInteger={isInteger}
Expand Down Expand Up @@ -415,7 +407,7 @@ export const TextFeedbackColumn = ({
placeholder=""
/>
{maxLength && (
<div className="mb-1 text-xs text-moon-500">
<div className="mb-1 mt-4 text-xs text-moon-500">
{`Maximum characters: ${maxLength}`}
</div>
)}
Expand Down Expand Up @@ -446,7 +438,7 @@ export const EnumFeedbackColumn = ({
}));
return opts;
}, [options]);
const [value, setValue] = useState<Option | undefined>(undefined);
const [value, setValue] = useState<Option | null>(null);

useEffect(() => {
const found = dropdownOptions.find(option => option.value === defaultValue);
Expand All @@ -457,17 +449,19 @@ export const EnumFeedbackColumn = ({

const onValueChange = useCallback(
(newValue: Option | null) => {
if (newValue == null || newValue.value === value?.value) {
return;
}
setValue(newValue);
onAddFeedback?.(newValue.value);
onAddFeedback?.(newValue?.value ?? '');
},
[value?.value, onAddFeedback]
[onAddFeedback]
);

return (
<Select options={dropdownOptions} value={value} onChange={onValueChange} />
<Select
autoFocus={focused}
options={dropdownOptions}
value={value}
onChange={onValueChange}
/>
);
};

Expand Down Expand Up @@ -573,6 +567,7 @@ export const NumericalTextField: React.FC<NumericalTextFieldProps> = ({
// If val is null but v isn't empty, there's a format error
if (val === null) {
setError(true);
onChange(null);
return;
}

Expand All @@ -582,6 +577,7 @@ export const NumericalTextField: React.FC<NumericalTextFieldProps> = ({
(max != null && parsedVal > max)
) {
setError(true);
onChange(null);
return;
}

Expand All @@ -603,7 +599,7 @@ export const NumericalTextField: React.FC<NumericalTextFieldProps> = ({
errorState={error}
/>
{(min != null || max != null) && (
<div className="mb-1 text-xs text-moon-500">
<div className="mb-1 mt-4 text-xs text-moon-500">
{isInteger ? 'Integer required. ' : ''}
{min != null && `Min: ${min}`}
{min != null && max != null && ', '}
Expand Down
9 changes: 6 additions & 3 deletions ...rc/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/AnnotationScorerForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Box} from '@material-ui/core';
import React, {FC, useCallback, useState} from 'react';
import React, {FC, useCallback, useEffect, useState} from 'react';
import {z} from 'zod';

import {createBaseObjectInstance} from '../wfReactInterface/baseObjectClassQuery';
Expand Down Expand Up @@ -28,7 +28,7 @@ const AnnotationScorerFormSchema = z.object({
}),
z.object({
type: z.literal('String'),
'Max length': z.number().optional(),
'Maximum length': z.number().optional(),
}),
z.object({
type: z.literal('Select'),
Expand All @@ -45,6 +45,9 @@ export const AnnotationScorerForm: FC<
ScorerFormProps<z.infer<typeof AnnotationScorerFormSchema>>
> = ({data, onDataChange}) => {
const [config, setConfig] = useState(data ?? DEFAULT_STATE);
useEffect(() => {
setConfig(data ?? DEFAULT_STATE);
}, [data]);
const [isValid, setIsValid] = useState(false);

const handleConfigChange = useCallback(
Expand Down Expand Up @@ -113,7 +116,7 @@ function convertTypeExtrasToJsonSchema(
const typeSchema = obj.Type;
const typeExtras: Record<string, any> = {};
if (typeSchema.type === 'String') {
typeExtras.maxLength = typeSchema['Max length'];
typeExtras.maxLength = typeSchema['Maximum length'];
} else if (typeSchema.type === 'Integer' || typeSchema.type === 'Number') {
typeExtras.minimum = typeSchema.Minimum;
typeExtras.maximum = typeSchema.Maximum;
Expand Down
2 changes: 1 addition & 1 deletion ...e-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/FormComponents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {Select} from '@wandb/weave/components/Form/Select';
import {TextField} from '@wandb/weave/components/Form/TextField';
import React from 'react';

export const GAP_BETWEEN_ITEMS_PX = 10;
export const GAP_BETWEEN_ITEMS_PX = 16;
export const GAP_BETWEEN_LABEL_AND_FIELD_PX = 10;

type AutocompleteWithLabelType<Option = any> = (
Expand Down
Loading

0 comments on commit 61c4fb8

Please sign in to comment.