feat(annotations): migrate span eval labels to us AnnotationLabel (#4068

)

* feat(annotations): update evaluation labels in traces table to use AnnotationLabel

* remove changes to retrieval evals

* remove evaluation label

* update annotation label for unclickable version

* move label to annotations directory

* remove trace from annotations on traces

* add trace back to annotation interface

* feedback

* fix prop name

app/src/components/annotation/AnnotationLabel.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import { css } from "@emotion/react";
+
+import { Flex, Icon, Icons, Text } from "@arizeai/components";
+
+import { assertUnreachable } from "@phoenix/typeUtils";
+import { formatFloat } from "@phoenix/utils/numberFormatUtils";
+
+import { AnnotationColorSwatch } from "./AnnotationColorSwatch";
+import { Annotation } from "./types";
+
+type AnnotationDisplayPreference = "label" | "score";
+
+const baseAnnotationLabelCSS = css`
+  border-radius: var(--ac-global-dimension-size-50);
+  border: 1px solid var(--ac-global-color-grey-400);
+  padding: var(--ac-global-dimension-size-50)
+    var(--ac-global-dimension-size-100);
+  transition: background-color 0.2s;
+  &:hover {
+    background-color: var(--ac-global-color-grey-300);
+  }
+  .ac-icon-wrap {
+    font-size: 12px;
+  }
+`;
+
+const textCSS = css`
+  display: flex;
+  align-items: center;
+  .ac-text {
+    display: inline-block;
+    max-width: 9rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+const getAnnotationDisplayValue = (
+  annotation: Annotation,
+  displayPreference: AnnotationDisplayPreference
+) => {
+  switch (displayPreference) {
+    case "label":
+      return (
+        annotation.label ||
+        (typeof annotation.score == "number" &&
+          formatFloat(annotation.score)) ||
+        "n/a"
+      );
+    case "score":
+      return (
+        (typeof annotation.score == "number" &&
+          formatFloat(annotation.score)) ||
+        annotation.label ||
+        "n/a"
+      );
+    default:
+      assertUnreachable(displayPreference);
+  }
+};
+
+export function AnnotationLabel({
+  annotation,
+  onClick,
+  annotationDisplayPreference = "score",
+}: {
+  annotation: Annotation;
+  onClick?: () => void;
+  /**
+   * The preferred value to display in the annotation label.
+   * If the provided value is not available, it will fallback to an available value.
+   * @default "score"
+   */
+  annotationDisplayPreference?: AnnotationDisplayPreference;
+}) {
+  const clickable = typeof onClick == "function";
+  const labelValue = getAnnotationDisplayValue(
+    annotation,
+    annotationDisplayPreference
+  );
+
+  return (
+    <div
+      role={clickable ? "button" : undefined}
+      css={css(baseAnnotationLabelCSS, clickable && `cursor: pointer;`)}
+      aria-label={
+        clickable
+          ? "Click to view the annotation trace"
+          : `Annotation: ${annotation.name}`
+      }
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onClick && onClick();
+      }}
+    >
+      <Flex direction="row" gap="size-100" alignItems="center">
+        <AnnotationColorSwatch annotationName={annotation.name} />
+        <div css={textCSS}>
+          <Text weight="heavy" textSize="small" color="inherit">
+            {annotation.name}
+          </Text>
+        </div>
+        <div
+          css={css(
+            textCSS,
+            css`
+              margin-left: var(--ac-global-dimension-100);
+            `
+          )}
+        >
+          <Text textSize="small">{labelValue}</Text>
+        </div>
+        {clickable ? <Icon svg={<Icons.ArrowIosForwardOutline />} /> : null}
+      </Flex>
+    </div>
+  );
+}

app/src/components/annotation/AnnotationTooltip.tsx

@@ -0,0 +1,71 @@
+import React, { ReactNode } from "react";
+
+import {
+  Flex,
+  HelpTooltip,
+  Text,
+  TooltipTrigger,
+  TriggerWrap,
+  View,
+} from "@arizeai/components";
+
+import { floatFormatter } from "@phoenix/utils/numberFormatUtils";
+
+import { Annotation } from "./types";
+
+/**
+ * Wraps a component with a tooltip that displays information about an annotation.
+ */
+export function AnnotationTooltip({
+  annotation,
+  children,
+  extra,
+}: {
+  annotation: Annotation;
+  children: ReactNode;
+  extra?: ReactNode;
+}) {
+  return (
+    <TooltipTrigger delay={500} offset={3}>
+      <TriggerWrap>{children}</TriggerWrap>
+      <HelpTooltip>
+        <Text weight="heavy" color="inherit" textSize="large" elementType="h3">
+          {annotation.name}
+        </Text>
+        <View paddingTop="size-50" minWidth="150px">
+          <Flex direction="row" justifyContent="space-between">
+            <Text weight="heavy" color="inherit">
+              score
+            </Text>
+            <Text color="inherit">{floatFormatter(annotation.score)}</Text>
+          </Flex>
+          <Flex direction="row" justifyContent="space-between">
+            <Text weight="heavy" color="inherit">
+              label
+            </Text>
+            <Text color="inherit">{annotation.label || "--"}</Text>
+          </Flex>
+          <Flex direction="row" justifyContent="space-between">
+            <Text weight="heavy" color="inherit">
+              kind
+            </Text>
+            <Text color="inherit">{annotation.annotatorKind}</Text>
+          </Flex>
+        </View>
+        {annotation.explanation ? (
+          <View paddingTop="size-50">
+            <Flex direction="column">
+              <Text weight="heavy" color="inherit">
+                explanation
+              </Text>
+              <View maxHeight="300px" overflow="auto">
+                <Text color="inherit">{annotation.explanation}</Text>
+              </View>
+            </Flex>
+          </View>
+        ) : null}
+        {extra}
+      </HelpTooltip>
+    </TooltipTrigger>
+  );
+}

app/src/components/annotation/index.ts

@@ -0,0 +1,4 @@
+export * from "./AnnotationColorSwatch";
+export * from "./AnnotationLabel";
+export * from "./AnnotationTooltip";
+export * from "./types";

app/src/components/annotation/types.ts

@@ -0,0 +1,7 @@
+export interface Annotation {
+  name: string;
+  label?: string | null;
+  score?: number | null;
+  explanation?: string | null;
+  annotatorKind: string;
+}

app/src/components/experiment/index.tsx

@@ -1,2 +1 @@
-export * from "./AnnotationLabel";
-export * from "./AnnotationColorSwatch";
+export * from "./SequenceNumberLabel";