Merge branch 'master' into andrew/server-validation

docs/docs/tutorial-tracing_2.md

@@ -5,7 +5,6 @@ In the [Track LLM inputs & outputs](/quickstart) tutorial, the basics of trackin
 In this tutorial you will learn how to:
 - **Track data** as it flows though your application
 - **Track metadata** at call time
-- **Export data** that was logged to Weave
 
 ## Tracking nested function calls
 

weave-js/src/common/components/elements/LegacyWBIcon.tsx

@@ -26,6 +26,10 @@ export interface LegacyWBIconProps {
   style?: any;
 
   'data-test'?: any;
+
+  role?: string;
+  ariaHidden?: string;
+  ariaLabel?: string;
 }
 
 const LegacyWBIconComp = React.forwardRef<HTMLElement, LegacyWBIconProps>(
@@ -42,6 +46,10 @@ const LegacyWBIconComp = React.forwardRef<HTMLElement, LegacyWBIconProps>(
       onMouseLeave,
       style,
       'data-test': dataTest,
+      role,
+      title,
+      ariaHidden,
+      ariaLabel,
     },
     ref
   ) => {
@@ -59,6 +67,10 @@ const LegacyWBIconComp = React.forwardRef<HTMLElement, LegacyWBIconProps>(
       onMouseLeave,
       style,
       'data-test': dataTest,
+      role,
+      title,
+      'aria-hidden': ariaHidden,
+      'aria-label': ariaLabel,
     };
     if (ref == null) {
       return <Icon {...passProps} className={className} />;

weave-js/src/components/PagePanelComponents/Home/Browse2/CellValue.tsx

@@ -6,6 +6,8 @@ import {parseRef} from '../../../../react';
 import {ValueViewNumber} from '../Browse3/pages/CallPage/ValueViewNumber';
 import {ValueViewPrimitive} from '../Browse3/pages/CallPage/ValueViewPrimitive';
 import {isRef} from '../Browse3/pages/common/util';
+import {isCustomWeaveTypePayload} from '../Browse3/typeViews/customWeaveType.types';
+import {CustomWeaveTypeDispatcher} from '../Browse3/typeViews/CustomWeaveTypeDispatcher';
 import {CellValueBoolean} from './CellValueBoolean';
 import {CellValueImage} from './CellValueImage';
 import {CellValueString} from './CellValueString';
@@ -64,5 +66,8 @@ export const CellValue = ({value, isExpanded = false}: CellValueProps) => {
       </Box>
     );
   }
+  if (isCustomWeaveTypePayload(value)) {
+    return <CustomWeaveTypeDispatcher data={value} />;
+  }
   return <CellValueString value={JSON.stringify(value)} />;
 };

weave-js/src/components/PagePanelComponents/Home/Browse2/browse2Util.ts

@@ -1,9 +1,31 @@
-export const flattenObject = (
+/**
+ * Flatten an object, but preserve any object that has a `_type` field.
+ * This is critical for handling "Weave Types" - payloads that should be
+ * treated as holistic objects, rather than flattened.
+ */
+export const flattenObjectPreservingWeaveTypes = (obj: {
+  [key: string]: any;
+}) => {
+  return flattenObject(obj, '', {}, (key, value) => {
+    return (
+      typeof value !== 'object' ||
+      value == null ||
+      value._type !== 'CustomWeaveType'
+    );
+  });
+};
+
+const flattenObject = (
   obj: {[key: string]: any},
   parentKey: string = '',
-  result: {[key: string]: any} = {}
+  result: {[key: string]: any} = {},
+  shouldFlatten: (key: string, value: any) => boolean = () => true
 ) => {
-  if (typeof obj !== 'object' || obj === null) {
+  if (
+    typeof obj !== 'object' ||
+    obj === null ||
+    !shouldFlatten(parentKey, obj)
+  ) {
     return obj;
   }
   const keys = Object.keys(obj);
@@ -14,31 +36,14 @@ export const flattenObject = (
     const newKey = parentKey ? `${parentKey}.${key}` : key;
     if (Array.isArray(obj[key])) {
       result[newKey] = obj[key];
-    } else if (typeof obj[key] === 'object') {
-      flattenObject(obj[key], newKey, result);
+    } else if (
+      typeof obj[key] === 'object' &&
+      shouldFlatten(newKey, obj[key])
+    ) {
+      flattenObject(obj[key], newKey, result, shouldFlatten);
     } else {
       result[newKey] = obj[key];
     }
   });
   return result;
 };
-export const unflattenObject = (obj: {[key: string]: any}) => {
-  const result: {[key: string]: any} = {};
-  for (const key in obj) {
-    if (!obj.hasOwnProperty(key)) {
-      continue;
-    }
-    const keys = key.split('.');
-    let current = result;
-    for (let i = 0; i < keys.length; i++) {
-      const k = keys[i];
-      if (i === keys.length - 1) {
-        current[k] = obj[key];
-      } else {
-        current[k] = current[k] || {};
-      }
-      current = current[k];
-    }
-  }
-  return result;
-};

weave-js/src/components/PagePanelComponents/Home/Browse3/NotFoundPanel.tsx

@@ -0,0 +1,20 @@
+import {ErrorPanel} from '@wandb/weave/components/ErrorPanel';
+import React, {FC, useContext} from 'react';
+
+import {Button} from '../../../Button';
+import {useClosePeek, WeaveflowPeekContext} from './context';
+
+export const NotFoundPanel: FC<{title: string}> = ({title}) => {
+  const close = useClosePeek();
+  const {isPeeking} = useContext(WeaveflowPeekContext);
+  return (
+    <div style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
+      <div style={{alignSelf: 'flex-end', margin: 10}}>
+        {isPeeking && <Button icon="close" variant="ghost" onClick={close} />}
+      </div>
+      <div style={{flex: 1}}>
+        <ErrorPanel title={title} subtitle="" subtitle2="" />
+      </div>
+    </div>
+  );
+};

weave-js/src/components/PagePanelComponents/Home/Browse3/filters/CellFilterWrapper.tsx

@@ -11,6 +11,7 @@ type CellFilterWrapperProps = {
   field: string;
   operation: string | null;
   value: any;
+  style?: React.CSSProperties;
 };
 
 export const CellFilterWrapper = ({
@@ -19,6 +20,7 @@ export const CellFilterWrapper = ({
   field,
   operation,
   value,
+  style,
 }: CellFilterWrapperProps) => {
   const onClickCapture = onAddFilter
     ? (e: React.MouseEvent) => {
@@ -31,5 +33,9 @@ export const CellFilterWrapper = ({
       }
     : undefined;
 
-  return <div onClickCapture={onClickCapture}>{children}</div>;
+  return (
+    <div style={style ?? {}} onClickCapture={onClickCapture}>
+      {children}
+    </div>
+  );
 };

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallDetails.tsx

@@ -8,6 +8,7 @@ import styled from 'styled-components';
 import {MOON_800} from '../../../../../../common/css/color.styles';
 import {Button} from '../../../../../Button';
 import {useWeaveflowRouteContext, WeaveflowPeekContext} from '../../context';
+import {CustomWeaveTypeProjectContext} from '../../typeViews/CustomWeaveTypeDispatcher';
 import {CallsTable} from '../CallsPage/CallsTable';
 import {KeyValueTable} from '../common/KeyValueTable';
 import {CallLink, opNiceName} from '../common/Links';
@@ -117,7 +118,10 @@ export const CallDetails: FC<{
             flex: '0 0 auto',
             p: 2,
           }}>
-          <ObjectViewerSection title="Inputs" data={inputs} />
+          <CustomWeaveTypeProjectContext.Provider
+            value={{entity: call.entity, project: call.project}}>
+            <ObjectViewerSection title="Inputs" data={inputs} />
+          </CustomWeaveTypeProjectContext.Provider>
         </Box>
         <Box
           sx={{
@@ -132,7 +136,10 @@ export const CallDetails: FC<{
               <ExceptionDetails exceptionInfo={excInfo} />
             </>
           ) : (
-            <ObjectViewerSection title="Outputs" data={output} />
+            <CustomWeaveTypeProjectContext.Provider
+              value={{entity: call.entity, project: call.project}}>
+              <ObjectViewerSection title="Output" data={output} />
+            </CustomWeaveTypeProjectContext.Provider>
           )}
         </Box>
         {multipleChildCallOpRefs.map(opVersionRef => {
@@ -251,13 +258,15 @@ const getDisplayInputsAndOutput = (call: CallSchema) => {
   const span = call.rawSpan;
   const inputKeys =
     span.inputs._keys ??
-    Object.keys(span.inputs).filter(k => !k.startsWith('_'));
+    Object.keys(span.inputs).filter(k => !k.startsWith('_') || k === '_type');
   const inputs = _.fromPairs(inputKeys.map(k => [k, span.inputs[k]]));
 
   const callOutput = span.output ?? {};
   const outputKeys =
     callOutput._keys ??
-    Object.keys(callOutput).filter(k => k === '_result' || !k.startsWith('_'));
+    Object.keys(callOutput).filter(
+      k => k === '_result' || !k.startsWith('_') || k === '_type'
+    );
   const output = _.fromPairs(outputKeys.map(k => [k, callOutput[k]]));
   return {inputs, output};
 };

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx

@@ -1,5 +1,4 @@
 import Box from '@mui/material/Box';
-import {ErrorPanel} from '@wandb/weave/components/ErrorPanel';
 import {Loading} from '@wandb/weave/components/Loading';
 import {useViewTraceEvent} from '@wandb/weave/integrations/analytics/useViewEvents';
 import React, {FC, useCallback} from 'react';
@@ -9,12 +8,9 @@ import {makeRefCall} from '../../../../../../util/refs';
 import {Button} from '../../../../../Button';
 import {Tailwind} from '../../../../../Tailwind';
 import {Browse2OpDefCode} from '../../../Browse2/Browse2OpDefCode';
-import {
-  TRACETREE_PARAM,
-  useClosePeek,
-  useWeaveflowCurrentRouteContext,
-} from '../../context';
+import {TRACETREE_PARAM, useWeaveflowCurrentRouteContext} from '../../context';
 import {FeedbackGrid} from '../../feedback/FeedbackGrid';
+import {NotFoundPanel} from '../../NotFoundPanel';
 import {isEvaluateOp} from '../common/heuristics';
 import {CenteredAnimatedLoader} from '../common/Loader';
 import {SimplePageLayoutWithHeader} from '../common/SimplePageLayout';
@@ -26,15 +22,13 @@ import {CallDetails} from './CallDetails';
 import {CallOverview} from './CallOverview';
 import {CallSummary} from './CallSummary';
 import {CallTraceView, useCallFlattenedTraceTree} from './CallTraceView';
-
 export const CallPage: FC<{
   entity: string;
   project: string;
   callId: string;
   path?: string;
 }> = props => {
   const {useCall} = useWFHooks();
-  const close = useClosePeek();
 
   const call = useCall({
     entity: props.entity,
@@ -45,16 +39,7 @@ export const CallPage: FC<{
   if (call.loading) {
     return <CenteredAnimatedLoader />;
   } else if (call.result === null) {
-    return (
-      <div style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
-        <div style={{alignSelf: 'flex-end', margin: 10}}>
-          <Button icon="close" variant="ghost" onClick={close} />
-        </div>
-        <div style={{flex: 1}}>
-          <ErrorPanel title="Call not found" subtitle="" subtitle2="" />
-        </div>
-      </div>
-    );
+    return <NotFoundPanel title="Call not found" />;
   }
   return <CallPageInnerVertical {...props} call={call.result} />;
 };

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallSummary.tsx

@@ -32,7 +32,7 @@ export const CallSummary: React.FC<{
   );
 
   return (
-    <div style={{padding: 8}}>
+    <div style={{padding: 8, overflow: 'auto'}}>
       <SimpleKeyValueTable
         data={{
           Operation:

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/DataTableView.tsx

@@ -13,14 +13,19 @@ import _ from 'lodash';
 import React, {FC, useCallback, useContext, useEffect, useMemo} from 'react';
 import {useHistory} from 'react-router-dom';
 
-import {isWeaveObjectRef, parseRef} from '../../../../../../react';
-import {flattenObject} from '../../../Browse2/browse2Util';
+import {
+  isWeaveObjectRef,
+  parseRef,
+  WeaveObjectRef,
+} from '../../../../../../react';
+import {flattenObjectPreservingWeaveTypes} from '../../../Browse2/browse2Util';
 import {CellValue} from '../../../Browse2/CellValue';
 import {
   useWeaveflowCurrentRouteContext,
   WeaveflowPeekContext,
 } from '../../context';
 import {StyledDataGrid} from '../../StyledDataGrid';
+import {CustomWeaveTypeProjectContext} from '../../typeViews/CustomWeaveTypeDispatcher';
 import {TABLE_ID_EDGE_NAME} from '../wfReactInterface/constants';
 import {useWFHooks} from '../wfReactInterface/context';
 import {TableQuery} from '../wfReactInterface/wfDataModelHooksInterface';
@@ -53,6 +58,11 @@ export const WeaveCHTable: FC<{
     limit: MAX_ROWS + 1,
   });
 
+  const parsedRef = useMemo(
+    () => parseRef(props.tableRefUri) as WeaveObjectRef,
+    [props.tableRefUri]
+  );
+
   // Determines if the table itself is truncated
   const isTruncated = useMemo(() => {
     return (fetchQuery.result ?? []).length > MAX_ROWS;
@@ -96,16 +106,19 @@ export const WeaveCHTable: FC<{
   );
 
   return (
-    <DataTableView
-      data={sourceRows ?? []}
-      loading={fetchQuery.loading}
-      isTruncated={isTruncated}
-      // Display key is "val" as the resulting rows have metadata/ref
-      // information outside of the actual data
-      displayKey="val"
-      onLinkClick={onClickEnabled ? onClick : undefined}
-      fullHeight={props.fullHeight}
-    />
+    <CustomWeaveTypeProjectContext.Provider
+      value={{entity: parsedRef.entityName, project: parsedRef.projectName}}>
+      <DataTableView
+        data={sourceRows ?? []}
+        loading={fetchQuery.loading}
+        isTruncated={isTruncated}
+        // Display key is "val" as the resulting rows have metadata/ref
+        // information outside of the actual data
+        displayKey="val"
+        onLinkClick={onClickEnabled ? onClick : undefined}
+        fullHeight={props.fullHeight}
+      />
+    </CustomWeaveTypeProjectContext.Provider>
   );
 };
 
@@ -133,7 +146,7 @@ export const DataTableView: FC<{
       if (val == null) {
         return {};
       } else if (typeof val === 'object' && !Array.isArray(val)) {
-        return flattenObject(val);
+        return flattenObjectPreservingWeaveTypes(val);
       }
       return {'': val};
     });