feat(ui): delete objects from the ui

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

@@ -13,6 +13,7 @@ import {Icon, IconName, IconNames} from '../../../Icon';
 import {useWeaveflowRouteContext} from '../Browse3/context';
 import {Link} from '../Browse3/pages/common/Links';
 import {useWFHooks} from '../Browse3/pages/wfReactInterface/context';
+import {isObjDeleteError} from '../Browse3/pages/wfReactInterface/utilities';
 import {
   ObjectVersionKey,
   OpVersionKey,
@@ -125,6 +126,11 @@ export const SmallRef: FC<{
   }
   const objectVersion = useObjectVersion(objVersionKey);
   const opVersion = useOpVersion(opVersionKey);
+
+  const isDeleted =
+    isObjDeleteError(objectVersion?.error) ||
+    isObjDeleteError(opVersion?.error);
+
   const versionIndex =
     objectVersion.result?.versionIndex ?? opVersion.result?.versionIndex;
 
@@ -177,13 +183,14 @@ export const SmallRef: FC<{
             overflow: 'hidden',
             whiteSpace: 'nowrap',
             textOverflow: 'ellipsis',
+            textDecoration: isDeleted ? 'line-through' : 'none',
           }}>
           {label}
         </Box>
       )}
     </Box>
   );
-  if (refTypeQuery.loading) {
+  if (refTypeQuery.loading || isDeleted) {
     return Item;
   }
   if (!isArtifactRef && !isWeaveObjRef) {

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

@@ -13,6 +13,7 @@ import {
   ScrollableTabContent,
   SimplePageLayoutWithHeader,
 } from '../pages/common/SimplePageLayout';
+import {DeleteObjectButtonWithModal} from '../pages/ObjectVersionPage';
 import {TabUseDataset} from '../pages/TabUseDataset';
 import {useWFHooks} from '../pages/wfReactInterface/context';
 import {objectVersionKeyToRefUri} from '../pages/wfReactInterface/utilities';
@@ -21,7 +22,8 @@ import {CustomWeaveTypeProjectContext} from '../typeViews/CustomWeaveTypeDispatc
 
 export const DatasetVersionPage: React.FC<{
   objectVersion: ObjectVersionSchema;
-}> = ({objectVersion}) => {
+  showDeleteButton?: boolean;
+}> = ({objectVersion, showDeleteButton}) => {
   const {useRootObjectVersions, useRefsData} = useWFHooks();
   const entityName = objectVersion.entity;
   const projectName = objectVersion.project;
@@ -73,7 +75,7 @@ export const DatasetVersionPage: React.FC<{
       }
       headerContent={
         <Tailwind>
-          <div className="grid w-full auto-cols-max grid-flow-col gap-[16px] text-[14px]">
+          <div className="grid w-full grid-flow-col grid-cols-[auto_auto_1fr] gap-[16px] text-[14px]">
             <div className="block">
               <p className="text-moon-500">Name</p>
               <ObjectVersionsLink
@@ -106,6 +108,11 @@ export const DatasetVersionPage: React.FC<{
               <p className="text-moon-500">Version</p>
               <p>{objectVersionIndex}</p>
             </div>
+            {showDeleteButton && (
+              <div className="ml-auto mr-0">
+                <DeleteObjectButtonWithModal objVersionSchema={objectVersion} />
+              </div>
+            )}
           </div>
         </Tailwind>
       }

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

@@ -7,6 +7,7 @@ import {
   GridRowId,
 } from '@mui/x-data-grid-pro';
 import {Button} from '@wandb/weave/components/Button';
+import {parseRef} from '@wandb/weave/react';
 import _ from 'lodash';
 import React, {
   Dispatch,
@@ -21,6 +22,7 @@ import React, {
 import {parseRefMaybe} from '../../../../../../react';
 import {LoadingDots} from '../../../../../LoadingDots';
 import {Browse2OpDefCode} from '../../../Browse2/Browse2OpDefCode';
+import {objectRefDisplayName} from '../../../Browse2/SmallRef';
 import {isWeaveRef} from '../../filters/common';
 import {StyledDataGrid} from '../../StyledDataGrid';
 import {
@@ -161,10 +163,15 @@ export const ObjectViewer = ({
 
     const refValues: RefValues = {};
     for (const [r, v] of _.zip(refs, resolvedRefData)) {
-      if (!r || !v) {
+      if (!r) {
         // Shouldn't be possible
         continue;
       }
+      if (!v) {
+        // Value for ref not found, must be deleted
+        refValues[r] = deletedRefValuePlaceholder(r);
+        continue;
+      }
       let val = r;
       if (v == null) {
         console.error('Error resolving ref', r);
@@ -725,3 +732,18 @@ const useTruncatedData = (data: Data) => {
 
   return {truncatedData, truncatedStore, setTruncatedData, setTruncatedStore};
 };
+
+// Placeholder value for deleted refs
+const DELETED_REF_KEY = '_weave_deleted_ref';
+const deletedRefValuePlaceholder = (
+  ref: string
+): {[DELETED_REF_KEY]: string} => {
+  const parsedRef = parseRef(ref);
+  const refString = objectRefDisplayName(parsedRef).label;
+  return {[DELETED_REF_KEY]: refString};
+};
+export const maybeGetDeletedRefValuePlaceholderFromRow = (
+  row: any
+): string | undefined => {
+  return row.value?.[DELETED_REF_KEY];
+};

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

@@ -6,6 +6,7 @@ import React, {FC, MouseEvent} from 'react';
 import {Button} from '../../../../../Button';
 import {Tooltip} from '../../../../../Tooltip';
 import {CursorBox} from './CursorBox';
+import {maybeGetDeletedRefValuePlaceholderFromRow} from './ObjectViewer';
 
 const INSET_SPACING = 40;
 
@@ -32,7 +33,9 @@ export const ObjectViewerGroupingCell: FC<
     event.stopPropagation();
   };
 
+  const deletedRef = maybeGetDeletedRefValuePlaceholderFromRow(row);
   const tooltipContent = row.path.toString();
+  const textContent = deletedRef ?? props.value;
   const box = (
     <CursorBox
       $isClickable={isGroup || isExpandableRef}
@@ -109,8 +112,9 @@ export const ObjectViewerGroupingCell: FC<
               textOverflow: 'ellipsis',
               whiteSpace: 'nowrap',
               flex: '1 1 auto',
+              textDecoration: deletedRef ? 'line-through' : 'none',
             }}>
-            {props.value}
+            {textContent}
           </Box>
         }
       />

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/ecpTypes.ts

@@ -25,7 +25,7 @@ export type EvaluationComparisonSummary = {
 
   // Models are the Weave Objects used to define the model logic and properties.
   models: {
-    [modelRef: string]: ModelObj;
+    [modelRef: string]: ModelObj | null;
   };
 
   // ScoreMetrics define the metrics that are associated on each individual prediction

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/EvaluationDefinition.tsx

@@ -1,4 +1,4 @@
-import {Box} from '@material-ui/core';
+import {Box} from '@mui/material';
 import React, {useMemo} from 'react';
 
 import {
@@ -9,9 +9,10 @@ import {
 import {hexToRGB} from '../../../../../../../../common/css/utils';
 import {parseRef, WeaveObjectRef} from '../../../../../../../../react';
 import {Icon, IconNames} from '../../../../../../../Icon';
-import {SmallRef} from '../../../../../Browse2/SmallRef';
+import {objectRefDisplayName, SmallRef} from '../../../../../Browse2/SmallRef';
 import {CallLink, ObjectVersionLink} from '../../../common/Links';
 import {useWFHooks} from '../../../wfReactInterface/context';
+import {isObjDeleteError} from '../../../wfReactInterface/utilities';
 import {ObjectVersionKey} from '../../../wfReactInterface/wfDataModelHooksInterface';
 import {EvaluationComparisonState} from '../../ecpState';
 
@@ -43,11 +44,10 @@ export const EvaluationModelLink: React.FC<{
 }> = props => {
   const {useObjectVersion} = useWFHooks();
   const evaluationCall = props.state.summary.evaluationCalls[props.callId];
-  const modelObj = props.state.summary.models[evaluationCall.modelRef];
-  const objRef = useMemo(
-    () => parseRef(modelObj.ref) as WeaveObjectRef,
-    [modelObj.ref]
-  );
+  const objRef = useMemo(() => {
+    return parseRef(evaluationCall.modelRef) as WeaveObjectRef;
+  }, [evaluationCall.modelRef]);
+
   const objVersionKey = useMemo(() => {
     return {
       scheme: 'weave',
@@ -69,10 +69,31 @@ export const EvaluationModelLink: React.FC<{
   ]);
   const objectVersion = useObjectVersion(objVersionKey);
 
+  if (isObjDeleteError(objectVersion.error)) {
+    return (
+      <Box
+        sx={{
+          height: '22px',
+          flex: 1,
+          minWidth: 0,
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          fontWeight: 500,
+          textDecoration: 'line-through',
+        }}>
+        <Box display="flex" alignItems="center">
+          <ModelIcon />
+          {objectRefDisplayName(objRef).label}
+        </Box>
+      </Box>
+    );
+  }
+
   return (
     <ObjectVersionLink
-      entityName={modelObj.entity}
-      projectName={modelObj.project}
+      entityName={objRef.entityName}
+      projectName={objRef.projectName}
       objectName={objRef.artifactName}
       version={objRef.artifactVersion}
       versionIndex={objectVersion.result?.versionIndex ?? 0}

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ScorecardSection/ScorecardSection.tsx

@@ -90,11 +90,11 @@ export const ScorecardSection: React.FC<{
     const propsRes: {[prop: string]: {[ref: string]: any}} = {};
     modelRefs.forEach(ref => {
       const model = props.state.summary.models[ref];
-      Object.keys(model.properties).forEach(prop => {
+      Object.keys(model?.properties ?? {}).forEach(prop => {
         if (!propsRes[prop]) {
           propsRes[prop] = {};
         }
-        propsRes[prop][ref] = model.properties[prop];
+        propsRes[prop][ref] = model?.properties?.[prop];
       });
     });
 
@@ -104,7 +104,7 @@ export const ScorecardSection: React.FC<{
       if (!propsRes.predict) {
         propsRes.predict = {};
       }
-      propsRes.predict[ref] = model.predictOpRef;
+      propsRes.predict[ref] = model?.predictOpRef;
     });
 
     return propsRes;

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

@@ -1,18 +1,21 @@
 import Box from '@mui/material/Box';
+import {Button} from '@wandb/weave/components/Button';
 import {useObjectViewEvent} from '@wandb/weave/integrations/analytics/useViewEvents';
-import React, {useMemo} from 'react';
+import React, {useMemo, useState} from 'react';
 
 import {maybePluralizeWord} from '../../../../../core/util/string';
 import {Icon, IconName} from '../../../../Icon';
 import {LoadingDots} from '../../../../LoadingDots';
 import {Tailwind} from '../../../../Tailwind';
 import {Tooltip} from '../../../../Tooltip';
+import {useClosePeek} from '../context';
 import {DatasetVersionPage} from '../datasets/DatasetVersionPage';
 import {NotFoundPanel} from '../NotFoundPanel';
 import {CustomWeaveTypeProjectContext} from '../typeViews/CustomWeaveTypeDispatcher';
 import {WeaveCHTableSourceRefContext} from './CallPage/DataTableView';
 import {ObjectViewerSection} from './CallPage/ObjectViewerSection';
 import {WFHighLevelCallFilter} from './CallsPage/callsTableFilter';
+import {DeleteModal, useShowDeleteButton} from './common/DeleteModal';
 import {
   CallLink,
   CallsLink,
@@ -34,6 +37,7 @@ import {TabUsePrompt} from './TabUsePrompt';
 import {KNOWN_BASE_OBJECT_CLASSES} from './wfReactInterface/constants';
 import {useWFHooks} from './wfReactInterface/context';
 import {
+  isObjDeleteError,
   objectVersionKeyToRefUri,
   refUriToOpVersionKey,
 } from './wfReactInterface/utilities';
@@ -94,7 +98,10 @@ export const ObjectVersionPage: React.FC<{
     path: props.filePath,
     refExtra: props.refExtra,
   });
-  if (objectVersion.loading) {
+  if (isObjDeleteError(objectVersion.error)) {
+    const deletedAtMessage = objectVersion.error?.message ?? 'Object deleted';
+    return <NotFoundPanel title={deletedAtMessage} />;
+  } else if (objectVersion.loading) {
     return <CenteredAnimatedLoader />;
   } else if (objectVersion.result == null) {
     return <NotFoundPanel title="Object not found" />;
@@ -176,6 +183,8 @@ const ObjectVersionPageInner: React.FC<{
     return data.result?.[0] ?? {};
   }, [data.loading, data.result]);
 
+  const showDeleteButton = useShowDeleteButton();
+
   const viewerDataAsObject = useMemo(() => {
     const dataIsPrimitive =
       typeof viewerData !== 'object' ||
@@ -199,7 +208,12 @@ const ObjectVersionPageInner: React.FC<{
   }
 
   if (isDataset) {
-    return <DatasetVersionPage objectVersion={objectVersion} />;
+    return (
+      <DatasetVersionPage
+        objectVersion={objectVersion}
+        showDeleteButton={showDeleteButton}
+      />
+    );
   }
 
   return (
@@ -216,7 +230,7 @@ const ObjectVersionPageInner: React.FC<{
       }
       headerContent={
         <Tailwind>
-          <div className="grid w-full auto-cols-max grid-flow-col gap-[16px] text-[14px]">
+          <div className="grid w-full grid-flow-col grid-cols-[auto_auto_1fr] gap-[16px] text-[14px]">
             <div className="block">
               <p className="text-moon-500">Name</p>
               <div className="flex items-center">
@@ -257,6 +271,11 @@ const ObjectVersionPageInner: React.FC<{
                 <p>{refExtra}</p>
               </div>
             )}
+            {showDeleteButton && (
+              <div className="ml-auto">
+                <DeleteObjectButtonWithModal objVersionSchema={objectVersion} />
+              </div>
+            )}
           </div>
         </Tailwind>
       }
@@ -623,3 +642,41 @@ const OpVersionCallsLink: React.FC<{
     </>
   );
 };
+
+export const DeleteObjectButtonWithModal: React.FC<{
+  objVersionSchema: ObjectVersionSchema;
+  overrideDisplayStr?: string;
+}> = ({objVersionSchema, overrideDisplayStr}) => {
+  const {useObjectDeleteFunc} = useWFHooks();
+  const closePeek = useClosePeek();
+  const {objectVersionsDelete} = useObjectDeleteFunc();
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+
+  const deleteStr =
+    overrideDisplayStr ??
+    `${objVersionSchema.objectId}:v${objVersionSchema.versionIndex}`;
+
+  return (
+    <>
+      <Button
+        icon="delete"
+        variant="ghost"
+        onClick={() => setDeleteModalOpen(true)}
+      />
+      <DeleteModal
+        open={deleteModalOpen}
+        onClose={() => setDeleteModalOpen(false)}
+        deleteTitleStr={deleteStr}
+        onDelete={() =>
+          objectVersionsDelete(
+            objVersionSchema.entity,
+            objVersionSchema.project,
+            objVersionSchema.objectId,
+            [objVersionSchema.versionHash]
+          )
+        }
+        onSuccess={closePeek}
+      />
+    </>
+  );
+};