hack structured feedback

weave-js/src/components/Icon/Icon.tsx

@@ -637,6 +637,12 @@
 export const IconLogoColab = (props: SVGIconProps) => (
   <ImportLogoColab {...updateIconProps(props)} />
 );
+export const IconMarker = (props: SVGIconProps) => (
+  <ImportMarker {...updateIconProps(props)} />
+);
+export const IconReloadRefresh = (props: SVGIconProps) => (
+  <ImportReloadRefresh {...updateIconProps(props)} />
+);
 export const IconMagicWandStar = (props: SVGIconProps) => (
   <ImportMagicWandStar {...updateIconProps(props)} />
 );
@@ -646,7 +652,7 @@
 export const IconMarkdown = (props: SVGIconProps) => (
   <ImportMarkdown {...updateIconProps(props)} />
 );
 export const IconMarker = (props: SVGIconProps) => (
   <ImportMarker {...updateIconProps(props)} />
 );
 export const IconMenu = (props: SVGIconProps) => (
@@ -784,7 +790,7 @@
 export const IconRegistries = (props: SVGIconProps) => (
   <ImportRegistries {...updateIconProps(props)} />
 );
 export const IconReloadRefresh = (props: SVGIconProps) => (
   <ImportReloadRefresh {...updateIconProps(props)} />
 );
 export const IconRemove = (props: SVGIconProps) => (
@@ -1083,6 +1089,7 @@
   'cube-container': IconCubeContainer,
   'dashboard-blackboard': IconDashboardBlackboard,
   'database-artifacts': IconDatabaseArtifacts,
+  'reload-refresh': IconReloadRefresh,
   date: IconDate,
   delete: IconDelete,
   diamond: IconDiamond,
@@ -1157,8 +1164,9 @@
   'logo-colab': IconLogoColab,
   'magic-wand-star': IconMagicWandStar,
   'magic-wand-stick': IconMagicWandStick,
+  marker: IconMarker,
   markdown: IconMarkdown,
   marker: IconMarker,
   menu: IconMenu,
   'microphone-audio': IconMicrophoneAudio,
   'miller-columns': IconMillerColumns,
@@ -1204,7 +1212,7 @@
   redo: IconRedo,
   regex: IconRegex,
   registries: IconRegistries,
   'reload-refresh': IconReloadRefresh,
   remove: IconRemove,
   'remove-alt': IconRemoveAlt,
   report: IconReport,

weave-js/src/components/Icon/types.ts

@@ -176,6 +176,7 @@
   RemoveAlt: 'remove-alt',
   Report: 'report',
   Retry: 'retry',
+  ReloadRefresh: 'reload-refresh',
   RobotServiceMember: 'robot-service-member',
   RocketLaunch: 'rocket-launch',
   RowHeightLarge: 'row-height-large',

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

@@ -124,6 +124,7 @@ export const SmallRef: FC<{
       };
     }
   }
+  // if a wandb artifact
   const objectVersion = useObjectVersion(objVersionKey);
   const opVersion = useOpVersion(opVersionKey);
   const versionIndex =

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

@@ -162,6 +162,58 @@ const browse3Paths = (projectRoot: string) => [
   `${projectRoot}`,
 ];
 
+// Create a context for managing call IDs
+export const CallIdContext = React.createContext<{
+  setCallIds?: (callIds: string[]) => void;
+  getNextCallId?: (currentId: string) => string | null;
+  getPreviousCallId?: (currentId: string) => string | null;
+  nextPageNeeded: boolean;
+}>({
+  setCallIds: () => {},
+  getNextCallId: () => null,
+  getPreviousCallId: () => null,
+  nextPageNeeded: false,
+});
+
+const CallIdProvider: FC<{children: React.ReactNode}> = ({children}) => {
+  const [callIds, setCallIds] = useState<string[]>([]);
+  const [nextPageNeeded, setNextPageNeeded] = useState(false);
+
+  const getNextCallId = useCallback(
+    (currentId: string) => {
+      const currentIndex = callIds.indexOf(currentId);
+      if (
+        currentIndex === callIds.length - 1 &&
+        callIds.length === DEFAULT_PAGE_SIZE
+      ) {
+        setNextPageNeeded(true);
+      } else if (currentIndex !== -1) {
+        return callIds[currentIndex + 1];
+      } else if (nextPageNeeded) {
+        setNextPageNeeded(false);
+        return callIds[0];
+      }
+      return null;
+    },
+    [callIds, nextPageNeeded]
+  );
+
+  const getPreviousCallId = useCallback(
+    (currentId: string) => {
+      const currentIndex = callIds.indexOf(currentId);
+      return callIds[currentIndex - 1];
+    },
+    [callIds]
+  );
+
+  return (
+    <CallIdContext.Provider
+      value={{setCallIds, getNextCallId, getPreviousCallId, nextPageNeeded}}>
+      {children}
+    </CallIdContext.Provider>
+  );
+};
+
 export const Browse3: FC<{
   hideHeader?: boolean;
   headerOffset?: number;
@@ -338,90 +390,92 @@ const MainPeekingLayout: FC = () => {
     <WFDataModelAutoProvider
       entityName={params.entity!}
       projectName={params.project!}>
-      <Box
-        sx={{
-          flex: '1 1 auto',
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          overflow: 'hidden',
-          flexDirection: 'row',
-          alignContent: 'stretch',
-        }}>
+      <CallIdProvider>
         <Box
           sx={{
-            flex: '1 1 40%',
-            overflow: 'hidden',
+            flex: '1 1 auto',
+            width: '100%',
+            height: '100%',
             display: 'flex',
-            marginRight: !isDrawerOpen ? 0 : `${drawerWidthPx}px`,
+            overflow: 'hidden',
+            flexDirection: 'row',
+            alignContent: 'stretch',
           }}>
-          <Browse3ProjectRoot projectRoot={baseRouterProjectRoot} />
-        </Box>
-
-        <Drawer
-          variant="persistent"
-          anchor="right"
-          open={isDrawerOpen}
-          onClose={closePeek}
-          PaperProps={{
-            ref: drawerRef,
-            style: {
+          <Box
+            sx={{
+              flex: '1 1 40%',
               overflow: 'hidden',
-              display: isDrawerOpen ? 'flex' : 'none',
-              zIndex: 1,
-              width: isDrawerOpen ? `${drawerWidthPx}px` : 0,
-              height: '100%',
-              borderLeft: '1px solid #e0e0e0',
-              position: 'absolute',
-              pointerEvents: isDragging ? 'none' : 'auto',
-            },
-          }}
-          ModalProps={{
-            keepMounted: true,
-          }}>
-          <div
-            id="dragger"
-            onMouseDown={handleDragStart}
-            style={{
-              position: 'absolute',
-              top: 0,
-              bottom: 0,
-              left: 0,
-              width: '5px',
-              cursor: 'col-resize',
-              zIndex: 2,
+              display: 'flex',
+              marginRight: !isDrawerOpen ? 0 : `${drawerWidthPx}px`,
+            }}>
+            <Browse3ProjectRoot projectRoot={baseRouterProjectRoot} />
+          </Box>
+
+          <Drawer
+            variant="persistent"
+            anchor="right"
+            open={isDrawerOpen}
+            onClose={closePeek}
+            PaperProps={{
+              ref: drawerRef,
+              style: {
+                overflow: 'hidden',
+                display: isDrawerOpen ? 'flex' : 'none',
+                zIndex: 1,
+                width: isDrawerOpen ? `${drawerWidthPx}px` : 0,
+                height: '100%',
+                borderLeft: '1px solid #e0e0e0',
+                position: 'absolute',
+                pointerEvents: isDragging ? 'none' : 'auto',
+              },
             }}
-          />
-          {peekLocation && (
-            <WeaveflowPeekContext.Provider value={{isPeeking: true}}>
-              <SimplePageLayoutContext.Provider
-                value={{
-                  headerSuffix: (
-                    <Box sx={{flex: '0 0 auto'}}>
-                      <FullPageButton
-                        query={query}
-                        generalBase={generalBase}
-                        targetBase={targetBase}
-                      />
-                      <Button
-                        tooltip="Close drawer"
-                        icon="close"
-                        variant="ghost"
-                        className="ml-4"
-                        onClick={closePeek}
-                      />
-                    </Box>
-                  ),
-                }}>
-                <Browse3ProjectRoot
-                  customLocation={peekLocation}
-                  projectRoot={generalProjectRoot}
-                />
-              </SimplePageLayoutContext.Provider>
-            </WeaveflowPeekContext.Provider>
-          )}
-        </Drawer>
-      </Box>
+            ModalProps={{
+              keepMounted: true,
+            }}>
+            <div
+              id="dragger"
+              onMouseDown={handleDragStart}
+              style={{
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                left: 0,
+                width: '5px',
+                cursor: 'col-resize',
+                zIndex: 2,
+              }}
+            />
+            {peekLocation && (
+              <WeaveflowPeekContext.Provider value={{isPeeking: true}}>
+                <SimplePageLayoutContext.Provider
+                  value={{
+                    headerSuffix: (
+                      <Box sx={{flex: '0 0 auto'}}>
+                        <FullPageButton
+                          query={query}
+                          generalBase={generalBase}
+                          targetBase={targetBase}
+                        />
+                        <Button
+                          tooltip="Close drawer"
+                          icon="close"
+                          variant="ghost"
+                          className="ml-4"
+                          onClick={closePeek}
+                        />
+                      </Box>
+                    ),
+                  }}>
+                  <Browse3ProjectRoot
+                    customLocation={peekLocation}
+                    projectRoot={generalProjectRoot}
+                  />
+                </SimplePageLayoutContext.Provider>
+              </WeaveflowPeekContext.Provider>
+            )}
+          </Drawer>
+        </Box>
+      </CallIdProvider>
     </WFDataModelAutoProvider>
   );
 };

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

@@ -324,7 +324,8 @@ export const browse3ContextGen = (
       traceId: string,
       callId: string,
       path?: string | null,
-      tracetree?: boolean
+      tracetree?: boolean,
+      feedbackExpand?: boolean
     ) => {
       let url = `${projectRoot(entityName, projectName)}/calls/${callId}`;
       const params = new URLSearchParams();
@@ -334,6 +335,9 @@ export const browse3ContextGen = (
       if (tracetree !== undefined) {
         params.set(TRACETREE_PARAM, tracetree ? '1' : '0');
       }
+      if (feedbackExpand !== undefined) {
+        params.set(FEEDBACK_EXPAND_PARAM, feedbackExpand ? '1' : '0');
+      }
       if (params.toString()) {
         url += '?' + params.toString();
       }
@@ -470,7 +474,8 @@ type RouteType = {
     traceId: string,
     callId: string,
     path?: string | null,
-    tracetree?: boolean
+    tracetree?: boolean,
+    feedbackExpand?: boolean
   ) => string;
   tracesUIUrl: (entityName: string, projectName: string) => string;
   callsUIUrl: (
@@ -528,6 +533,7 @@ const useSetSearchParam = () => {
 
 export const PEEK_PARAM = 'peekPath';
 export const TRACETREE_PARAM = 'tracetree';
+export const FEEDBACK_EXPAND_PARAM = 'feedbackExpand';
 export const PATH_PARAM = 'path';
 
 export const baseContext = browse3ContextGen(

weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/FeedbackGridInner.tsx

@@ -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>
       ),
     },
@@ -42,6 +45,9 @@ export const FeedbackGridInner = ({
         if (params.row.feedback_type === 'wandb.reaction.1') {
           return params.row.payload.emoji;
         }
+        if (params.row.feedback_type === 'wandb.structuredFeedback.1') {
+          return params.row.payload.name + ': ' + params.row.payload.value;
+        }
         return <CellValueString value={JSON.stringify(params.row.payload)} />;
       },
     },

weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/FeedbackTypeChip.tsx

@@ -1,20 +1,56 @@
 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';
   } else if (feedbackType === 'wandb.note.1') {
     color = 'gold';
     label = 'Note';
+  } 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} />
+  );
 };