chore(ui): Create scorer drawer style + small annotation drawer style…

… tweaks (#3186)
wandb · Dec 12, 2024 · 96d1d0d · 96d1d0d
1 parent 444c04d
commit 96d1d0d
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 62 deletions.
diff --git a/...mponents/PagePanelComponents/Home/Browse3/feedback/StructuredFeedback/HumanAnnotation.tsx b/...mponents/PagePanelComponents/Home/Browse3/feedback/StructuredFeedback/HumanAnnotation.tsx
@@ -415,7 +415,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>
       )}
@@ -603,7 +603,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 && ', '}

diff --git a/...rc/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/AnnotationScorerForm.tsx b/...rc/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/AnnotationScorerForm.tsx
@@ -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';
@@ -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'),
@@ -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(
@@ -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;

diff --git a/...e-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/FormComponents.tsx b/...e-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/FormComponents.tsx
@@ -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> = (

diff --git a/...-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/NewScorerDrawer.tsx b/...-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/NewScorerDrawer.tsx
@@ -138,11 +138,16 @@ export const NewScorerDrawer: FC<NewScorerDrawerProps> = ({
     );
   }, [showRunnableUI]);
 
+  const handleClose = () => {
+    setFormData(null);
+    onClose();
+  };
+
   return (
     <SaveableDrawer
       open={open}
       title="Create scorer"
-      onClose={onClose}
+      onClose={handleClose}
       onSave={onSave}
       saveDisabled={!isFormValid}>
       <AutocompleteWithLabel
@@ -208,12 +213,22 @@ export const SaveableDrawer: FC<SaveableDrawerProps> = ({
           sx={{
             flex: '0 0 auto',
             borderBottom: '1px solid #e0e0e0',
-            p: '10px',
+            px: '24px',
+            py: '20px',
             display: 'flex',
             fontWeight: 600,
+            fontSize: '24px',
+            lineHeight: '40px',
           }}>
           <Box sx={{flexGrow: 1}}>{title}</Box>
-          <Button size="small" variant="quiet" icon="close" onClick={onClose} />
+          <Box>
+            <Button
+              size="large"
+              variant="quiet"
+              icon="close"
+              onClick={onClose}
+            />
+          </Box>
         </Box>
 
         <Box
@@ -230,11 +245,13 @@ export const SaveableDrawer: FC<SaveableDrawerProps> = ({
             display: 'flex',
             flex: '0 0 auto',
             borderTop: '1px solid #e0e0e0',
-            p: '10px',
+            px: '24px',
+            py: '20px',
           }}>
           <Button
             onClick={onSave}
             color="primary"
+            size="large"
             disabled={saveDisabled}
             className="w-full">
             Create scorer

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/ZodSchemaForm.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/ZodSchemaForm.tsx
@@ -163,8 +163,13 @@ const NestedForm: React.FC<{
   hideLabel,
   autoFocus,
 }) => {
-  const currentPath = [...path, keyName];
-  const currentValue = getNestedValue(config, currentPath);
+  const currentPath = useMemo(() => [...path, keyName], [path, keyName]);
+  const [currentValue, setCurrentValue] = useState(
+    getNestedValue(config, currentPath)
+  );
+  useEffect(() => {
+    setCurrentValue(getNestedValue(config, currentPath));
+  }, [config, currentPath]);
 
   const unwrappedSchema = unwrapSchema(fieldSchema);
 
@@ -289,9 +294,11 @@ const NestedForm: React.FC<{
   } else if (isZodType(fieldSchema, s => s instanceof z.ZodBoolean)) {
     fieldType = 'checkbox';
   }
+  const isOptional = fieldSchema instanceof z.ZodOptional;
 
   return (
     <TextFieldWithLabel
+      isOptional={isOptional}
       label={!hideLabel ? keyName : undefined}
       type={fieldType}
       value={currentValue ?? ''}
@@ -345,58 +352,72 @@ const ArrayField: React.FC<{
           <DescriptionTooltip description={fieldDescription} />
         )}
       </Box>
-      {arrayValue.map((item, index) => (
-        <Box
-          key={index}
-          display="flex"
-          flexDirection="column"
-          alignItems="flex-start"
-          style={{
-            width: '100%',
-            gap: 4,
-            alignItems: 'center',
-            height: '35px',
-            marginBottom: '4px',
-          }}>
-          <Box flexGrow={1} width="100%" display="flex" alignItems="center">
-            <Box flexGrow={1}>
-              <NestedForm
-                keyName={`${index}`}
-                fieldSchema={elementSchema}
-                config={{[`${index}`]: item}}
-                setConfig={newItemConfig => {
-                  const newArray = [...arrayValue];
-                  newArray[index] = newItemConfig[`${index}`];
-                  updateConfig(targetPath, newArray, config, setConfig);
-                }}
-                path={[]}
-                hideLabel
-                autoFocus={index === arrayValue.length - 1}
-              />
-            </Box>
-            <Box mb={2} ml={1}>
-              <Button
-                size="small"
-                variant="ghost"
-                icon="delete"
-                tooltip="Remove this entry"
-                disabled={arrayValue.length <= minItems}
-                onClick={() =>
-                  removeArrayItem(targetPath, index, config, setConfig)
-                }
-              />
+      <Box border="1px solid #e0e0e0" borderRadius="4px" p={2}>
+        {arrayValue.map((item, index) => (
+          <Box
+            key={index}
+            display="flex"
+            flexDirection="column"
+            alignItems="flex-start"
+            style={{
+              width: '100%',
+              gap: 4,
+              alignItems: 'center',
+              height: '35px',
+              marginBottom: '16px',
+              marginTop: '8px',
+              marginLeft: '8px',
+            }}>
+            <Box flexGrow={1} width="100%" display="flex" alignItems="center">
+              <Box flexGrow={1}>
+                <NestedForm
+                  keyName={`${index}`}
+                  fieldSchema={elementSchema}
+                  config={{[`${index}`]: item}}
+                  setConfig={newItemConfig => {
+                    const newArray = [...arrayValue];
+                    newArray[index] = newItemConfig[`${index}`];
+                    updateConfig(targetPath, newArray, config, setConfig);
+                  }}
+                  path={[]}
+                  hideLabel
+                  autoFocus={index === arrayValue.length - 1}
+                />
+              </Box>
+              <Box mb={4} ml={4} mr={4}>
+                <Button
+                  size="small"
+                  variant="ghost"
+                  icon="delete"
+                  tooltip="Remove this entry"
+                  disabled={arrayValue.length <= minItems}
+                  onClick={() =>
+                    removeArrayItem(targetPath, index, config, setConfig)
+                  }
+                />
+              </Box>
             </Box>
           </Box>
+        ))}
+        <Box mt={2} style={{width: '100%'}}>
+          <Button
+            variant="secondary"
+            icon="add-new"
+            className="w-full"
+            style={{
+              padding: '4px',
+              width: '100%',
+              marginLeft: '8px',
+              marginRight: '8px',
+              marginBottom: '8px',
+            }}
+            onClick={() =>
+              addArrayItem(targetPath, elementSchema, config, setConfig)
+            }>
+            Add item
+          </Button>
         </Box>
-      ))}
-      <Button
-        variant="secondary"
-        style={{padding: '4px', width: '100%'}}
-        onClick={() =>
-          addArrayItem(targetPath, elementSchema, config, setConfig)
-        }>
-        Add item
-      </Button>
+      </Box>
     </FormControl>
   );
 };
@@ -758,14 +779,22 @@ const LiteralField: React.FC<{
   setConfig,
 }) => {
   const literalValue = unwrappedSchema.value;
+  const isOptional = fieldSchema instanceof z.ZodOptional;
 
   useEffect(() => {
     if (value !== literalValue) {
       updateConfig(targetPath, literalValue, config, setConfig);
     }
   }, [value, literalValue, targetPath, config, setConfig]);
 
-  return <TextFieldWithLabel label={keyName} disabled value={literalValue} />;
+  return (
+    <TextFieldWithLabel
+      isOptional={isOptional}
+      label={keyName}
+      disabled
+      value={literalValue}
+    />
+  );
 };
 
 const BooleanField: React.FC<{