Merge remote-tracking branch 'upstream/master' into tag-caption-image…

…s-cookbook
wandb · Oct 23, 2024 · d660530 · d660530
2 parents 6267fc8 + c1820c7
commit d660530
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 11 deletions.
diff --git a/docs/docs/guides/core-types/media.md b/docs/docs/guides/core-types/media.md
@@ -1,10 +1,10 @@
 # Logging media
 
-Weave supports logging and displaying multiple first class media types. Log images with `PIL.Image` and audio with `wave.Wave_read` either directly with the object API, or as the inputs or output of an op.
+Weave supports logging and displaying multiple first class media types. Log images with `PIL.Image.Image` and audio with `wave.Wave_read` either directly with the object API, or as the inputs or output of an op.
 
 ## Images
 
-Logging type: `PIL.Image`. Here is an example of logging an image with the OpenAI DALL-E API:
+Logging type: `PIL.Image.Image`. Here is an example of logging an image with the OpenAI DALL-E API:
 
 ```python
 import weave
@@ -29,7 +29,7 @@ def generate_image(prompt: str) -> Image:
     image_response = requests.get(image_url, stream=True)
     image = Image.open(image_response.raw)
 
-    # return an Image.Image object to be logged as an image
+    # return a PIL.Image.Image object to be logged as an image
     return image
 
 generate_image("a cat with a pumpkin hat")

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallSummary.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallSummary.tsx
@@ -1,5 +1,6 @@
 import _ from 'lodash';
-import React from 'react';
+import numeral from 'numeral';
+import React, {useMemo} from 'react';
 
 import {Timestamp} from '../../../../../Timestamp';
 import {UserLink} from '../../../../../UserLink';
@@ -34,6 +35,22 @@ export const CallSummary: React.FC<{
   );
   const costData = call.traceCall?.summary?.weave?.costs;
 
+  const inputBytes = useMemo(
+    () =>
+      call.traceCall?.inputs
+        ? JSON.stringify(call.traceCall?.inputs).length
+        : 0,
+    [call.traceCall?.inputs]
+  );
+  const outputBytes = useMemo(
+    () =>
+      call.traceCall?.output
+        ? JSON.stringify(call.traceCall?.output).length
+        : 0,
+    [call.traceCall?.output]
+  );
+  const totalBytesStored = inputBytes + outputBytes;
+
   return (
     <div className="overflow-auto px-16 pt-12">
       {costData && (
@@ -75,6 +92,7 @@ export const CallSummary: React.FC<{
                 Latency: span.summary.latency_s.toFixed(3) + 's',
               }
             : {}),
+          'Bytes stored': numeral(totalBytesStored).format('0.0b'),
           ...(Object.keys(attributes).length > 0
             ? {Attributes: attributes}
             : {}),

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
@@ -40,7 +40,7 @@ import {useHistory} from 'react-router-dom';
 
 import {useViewerInfo} from '../../../../../../common/hooks/useViewerInfo';
 import {A, TargetBlank} from '../../../../../../common/util/links';
-import {Tailwind} from '../../../../../Tailwind';
+import {TailwindContents} from '../../../../../Tailwind';
 import {flattenObjectPreservingWeaveTypes} from '../../../Browse2/browse2Util';
 import {useWeaveflowCurrentRouteContext} from '../../context';
 import {OnAddFilter} from '../../filters/CellFilterWrapper';
@@ -664,7 +664,7 @@ export const CallsTable: FC<{
         alignItems: 'center',
       }}
       filterListItems={
-        <Tailwind style={{display: 'contents'}}>
+        <TailwindContents>
           <RefreshButton onClick={() => calls.refetch()} />
           {!hideOpSelector && (
             <div className="flex-none">
@@ -847,7 +847,7 @@ export const CallsTable: FC<{
               </div>
             </>
           )}
-        </Tailwind>
+        </TailwindContents>
       }>
       <StyledDataGrid
         // Start Column Menu

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ObjectVersionPage.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ObjectVersionPage.tsx
@@ -1,5 +1,6 @@
 import Box from '@mui/material/Box';
 import {useObjectViewEvent} from '@wandb/weave/integrations/analytics/useViewEvents';
+import numeral from 'numeral';
 import React, {useMemo} from 'react';
 
 import {maybePluralizeWord} from '../../../../../core/util/string';
@@ -190,6 +191,11 @@ const ObjectVersionPageInner: React.FC<{
   const evalHasCalls = (consumingCalls.result?.length ?? 0) > 0;
   const evalHasCallsLoading = consumingCalls.loading;
 
+  const bytesStored = useMemo(
+    () => (data.result?.[0] ? JSON.stringify(data.result?.[0]).length : 0),
+    [data.result]
+  );
+
   if (isEvaluation && evalHasCallsLoading) {
     return <CenteredAnimatedLoader />;
   }
@@ -238,6 +244,15 @@ const ObjectVersionPageInner: React.FC<{
                   Subpath: refExtra,
                 }
               : {}),
+            'Bytes stored': (
+              <>
+                {data.loading ? (
+                  <LoadingDots />
+                ) : (
+                  numeral(bytesStored).format('0.0b')
+                )}
+              </>
+            ),
             // 'Type Version': (
             //   <TypeVersionLink
             //     entityName={entityName}

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/common/SimplePageLayout.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/common/SimplePageLayout.tsx
@@ -332,6 +332,7 @@ export const SimpleKeyValueTable: FC<{
                   display: 'flex',
                   flexDirection: 'column',
                   justifyContent: 'flex-start',
+                  width: 100,
                 }}>
                 {key}
               </td>

diff --git a/weave-js/src/components/RadixTooltip/index.tsx b/weave-js/src/components/RadixTooltip/index.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import React from 'react';
 import {twMerge} from 'tailwind-merge';
 
-import {Tailwind} from '../Tailwind';
+import {TailwindContents} from '../Tailwind';
 
 /**
  * {@link https://www.radix-ui.com/docs/primitives/components/tooltip#provider}
@@ -42,7 +42,7 @@ export const Trigger = ({
   ...props
 }: RadixTooltip.TooltipTriggerProps) => (
   <RadixTooltip.Trigger
-    className={twMerge(classNames('cursor-default', className))}
+    className={twMerge(classNames('cursor-inherit', className))}
     {...props}
   />
 );
@@ -57,7 +57,7 @@ export const Portal = RadixTooltip.Portal;
  */
 export const Content = React.forwardRef(
   ({className, children, ...props}: RadixTooltip.TooltipContentProps, ref) => (
-    <Tailwind style={{display: 'contents'}}>
+    <TailwindContents>
       <RadixTooltip.Content
         className={twMerge(
           'night-aware',
@@ -69,6 +69,6 @@ export const Content = React.forwardRef(
         {...props}>
         {children}
       </RadixTooltip.Content>
-    </Tailwind>
+    </TailwindContents>
   )
 );
diff --git a/weave-js/src/components/Tailwind.tsx b/weave-js/src/components/Tailwind.tsx
@@ -34,3 +34,26 @@ export const Tailwind: React.FC<TailwindProps> = ({
     </div>
   );
 };
+
+/**
+ * A tailwind wrapper with display: contents so that it doesn't affect document flow
+ */
+export const TailwindContents: React.FC<TailwindProps> = ({
+  children,
+  className,
+  style,
+}) => {
+  const styles = React.useMemo(
+    () => ({
+      ...style,
+      display: 'contents',
+    }),
+    [style]
+  );
+
+  return (
+    <Tailwind style={styles} className={className}>
+      {children}
+    </Tailwind>
+  );
+};