Port ContextualHelp to phoenix components with new tooltip

Author: cephalization

app/.eslintrc.js

@@ -278,6 +278,11 @@ module.exports = {
         module: "@arizeai/components",
         use: "import { Select } from '@phoenix/components'",
       },
+      {
+        name: "ContextualHelp",
+        module: "@arizeai/components",
+        use: "import { ContextualHelp } from '@phoenix/components'",
+      },
     ],
     "no-duplicate-imports": "error",
   },

app/src/components/form/DimensionPicker.tsx

@@ -1,10 +1,9 @@
 import { startTransition, useEffect, useState } from "react";
 import { fetchQuery, graphql } from "react-relay";
 
-import { Content, ContextualHelp } from "@arizeai/components";
-
 import {
   Button,
+  ContextualHelp,
   Flex,
   Heading,
   Label,
@@ -71,14 +70,12 @@ const contextualHelp = (
     <Heading weight="heavy" level={4}>
       Model Dimension
     </Heading>
-    <Content>
-      <Text>
-        A dimension is a feature, tag, prediction, or actual value that is
-        associated with a model inference. Features represent inputs, tags
-        represent metadata, predictions represent outputs, and actuals represent
-        ground truth.
-      </Text>
-    </Content>
+    <Text>
+      A dimension is a feature, tag, prediction, or actual value that is
+      associated with a model inference. Features represent inputs, tags
+      represent metadata, predictions represent outputs, and actuals represent
+      ground truth.
+    </Text>
   </ContextualHelp>
 );
 

app/src/components/index.tsx

@@ -30,6 +30,7 @@ export * from "./Empty";
 export * from "./exception";
 export * from "./KeyboardToken";
 export * from "./color/ColorSwatch";
+export * from "./tooltip/ContextualHelp";
 
 // design system based components
 export * from "./alert";

app/src/components/tooltip/ContextualHelp.tsx

@@ -0,0 +1,58 @@
+import { PropsWithChildren } from "react";
+import { TooltipTrigger } from "react-aria-components";
+import { css } from "@emotion/react";
+
+import {
+  Button,
+  Icon,
+  Icons,
+  Tooltip,
+  TooltipProps,
+} from "@phoenix/components";
+
+const getIconByVariant = (variant: ContextualHelpProps["variant"]) => {
+  switch (variant) {
+    case "info":
+      return <Icons.InfoOutline />;
+    case "help":
+    default:
+      return <Icons.QuestionOutline />;
+  }
+};
+
+export type ContextualHelpProps = PropsWithChildren<
+  {
+    variant?: "help" | "info";
+  } & Partial<Omit<TooltipProps, "children">>
+>;
+
+export const ContextualHelp = ({
+  children,
+  variant = "help",
+  ...tooltipProps
+}: ContextualHelpProps) => {
+  return (
+    <TooltipTrigger delay={0}>
+      <Button
+        // Special case styling to maintain compatability with arizeai/components contextual help
+        css={css`
+          & {
+            all: unset;
+            height: 14px !important;
+            width: 14px !important;
+            padding: var(--ac-global-dimension-size-50) !important;
+            border-radius: var(--ac-global-rounding-small);
+            svg {
+              height: 14px;
+              width: 14px;
+            }
+          }
+        `}
+        variant="quiet"
+        size="S"
+        leadingVisual={<Icon svg={getIconByVariant(variant)} />}
+      />
+      <Tooltip {...tooltipProps}>{children}</Tooltip>
+    </TooltipTrigger>
+  );
+};

app/src/pages/dimension/DimensionDriftStats.tsx

@@ -1,8 +1,12 @@
 import { graphql, useFragment } from "react-relay";
 
-import { Content, ContextualHelp } from "@arizeai/components";
-
-import { ExternalLink, Flex, Heading, Text } from "@phoenix/components";
+import {
+  ContextualHelp,
+  ExternalLink,
+  Flex,
+  Heading,
+  Text,
+} from "@phoenix/components";
 import { floatFormatter } from "@phoenix/utils/numberFormatUtils";
 
 import { DimensionDriftStats_dimension$key } from "./__generated__/DimensionDriftStats_dimension.graphql";
@@ -12,14 +16,12 @@ const contextualHelp = (
     <Heading weight="heavy" level={4}>
       Population Stability Index
     </Heading>
-    <Content>
-      <Text>
-        PSI is a symmetric metric that measures the relative entropy, or
-        difference in information represented by two distributions. It can be
-        thought of as measuring the distance between two data distributions
-        showing how different the two distributions are from each other.
-      </Text>
-    </Content>
+    <Text>
+      PSI is a symmetric metric that measures the relative entropy, or
+      difference in information represented by two distributions. It can be
+      thought of as measuring the distance between two data distributions
+      showing how different the two distributions are from each other.
+    </Text>
     <footer>
       <ExternalLink href="https://arize.com/blog-course/population-stability-index-psi/#:~:text=Population%20Stability%20Index%20(PSI)%20Overview,distributions%20are%20from%20each%20other.">
         Learn more

app/src/pages/embedding/MetricTimeSeries.tsx

@@ -16,9 +16,13 @@ import {
 import { CategoricalChartFunc } from "recharts/types/chart/types";
 import { css } from "@emotion/react";
 
-import { Content, ContextualHelp } from "@arizeai/components";
-
-import { Heading, Icon, Icons, Text } from "@phoenix/components";
+import {
+  ContextualHelp,
+  Heading,
+  Icon,
+  Icons,
+  Text,
+} from "@phoenix/components";
 import {
   ChartTooltip,
   ChartTooltipDivider,
@@ -360,7 +364,7 @@ export function MetricTimeSeries({
         {metricDescription != null ? (
           <ContextualHelp>
             <Heading level={4}>{metricShortName}</Heading>
-            <Content>{metricDescription}</Content>
+            <Text>{metricDescription}</Text>
           </ContextualHelp>
         ) : null}
       </Heading>

app/src/pages/project/SessionsTable.tsx

@@ -21,9 +21,15 @@ import {
 } from "@tanstack/react-table";
 import { css } from "@emotion/react";
 
-import { Content, ContextualHelp } from "@arizeai/components";
-
-import { Flex, Heading, Icon, Icons, View } from "@phoenix/components";
+import {
+  ContextualHelp,
+  Flex,
+  Heading,
+  Icon,
+  Icons,
+  Text,
+  View,
+} from "@phoenix/components";
 import { MeanScore } from "@phoenix/components/annotation/MeanScore";
 import { SessionAnnotationSummaryGroupTokens } from "@phoenix/components/annotation/SessionAnnotationSummaryGroup";
 import { selectableTableCSS } from "@phoenix/components/table/styles";
@@ -271,16 +277,16 @@ export function SessionsTable(props: SessionsTableProps) {
   const annotationColumns: ColumnDef<TableRow>[] = [
     {
       header: () => (
-        <Flex direction="row" gap="size-50">
+        <Flex direction="row" gap="size-50" alignItems="center">
           <span>annotations</span>
           <ContextualHelp>
             <Heading level={3} weight="heavy">
               Annotations
             </Heading>
-            <Content>
+            <Text>
               Evaluations and human annotations logged via the API or set via
               the UI.
-            </Content>
+            </Text>
           </ContextualHelp>
         </Flex>
       ),

app/src/pages/project/SpansTable.tsx

@@ -19,14 +19,13 @@ import {
 } from "@tanstack/react-table";
 import { css } from "@emotion/react";
 
-import { Content, ContextualHelp } from "@arizeai/components";
-
 import {
   Flex,
   Heading,
   Icon,
   Icons,
   Link,
+  Text,
   ToggleButton,
   ToggleButtonGroup,
   View,
@@ -38,6 +37,7 @@ import { IndeterminateCheckboxCell } from "@phoenix/components/table/Indetermina
 import { selectableTableCSS } from "@phoenix/components/table/styles";
 import { TextCell } from "@phoenix/components/table/TextCell";
 import { TimestampCell } from "@phoenix/components/table/TimestampCell";
+import { ContextualHelp } from "@phoenix/components/tooltip/ContextualHelp";
 import { TraceTokenCosts } from "@phoenix/components/trace";
 import { LatencyText } from "@phoenix/components/trace/LatencyText";
 import { SpanCumulativeTokenCount } from "@phoenix/components/trace/SpanCumulativeTokenCount";
@@ -335,10 +335,10 @@ export function SpansTable(props: SpansTableProps) {
             <Heading level={3} weight="heavy">
               Annotations
             </Heading>
-            <Content>
+            <Text>
               Evaluations and human annotations logged via the API or set via
               the UI.
-            </Content>
+            </Text>
           </ContextualHelp>
         </Flex>
       ),

app/src/pages/project/TracesTable.tsx

@@ -25,16 +25,23 @@ import {
 } from "@tanstack/react-table";
 import { css } from "@emotion/react";
 
-import { Content, ContextualHelp } from "@arizeai/components";
-
-import { Flex, Heading, Icon, Icons, Link, View } from "@phoenix/components";
+import {
+  Flex,
+  Heading,
+  Icon,
+  Icons,
+  Link,
+  Text,
+  View,
+} from "@phoenix/components";
 import { AnnotationSummaryGroupTokens } from "@phoenix/components/annotation/AnnotationSummaryGroup";
 import { MeanScore } from "@phoenix/components/annotation/MeanScore";
 import { TextCell } from "@phoenix/components/table";
 import { IndeterminateCheckboxCell } from "@phoenix/components/table/IndeterminateCheckboxCell";
 import { selectableTableCSS } from "@phoenix/components/table/styles";
 import { TableExpandButton } from "@phoenix/components/table/TableExpandButton";
 import { TimestampCell } from "@phoenix/components/table/TimestampCell";
+import { ContextualHelp } from "@phoenix/components/tooltip/ContextualHelp";
 import { LatencyText } from "@phoenix/components/trace/LatencyText";
 import { SpanKindToken } from "@phoenix/components/trace/SpanKindToken";
 import { SpanStatusCodeIcon } from "@phoenix/components/trace/SpanStatusCodeIcon";
@@ -415,16 +422,16 @@ export function TracesTable(props: TracesTableProps) {
     () => [
       {
         header: () => (
-          <Flex direction="row" gap="size-50">
+          <Flex direction="row" gap="size-50" alignItems="center">
             <span>Annotations</span>
             <ContextualHelp>
               <Heading level={3} weight="heavy">
                 Annotations
               </Heading>
-              <Content>
+              <Text>
                 Evaluations and human annotations logged via the API or set via
                 the UI.
-              </Content>
+              </Text>
             </ContextualHelp>
           </Flex>
         ),

app/src/pages/trace/SpanDetails.tsx

@@ -16,7 +16,7 @@ import CodeMirror, {
 } from "@uiw/react-codemirror";
 import { css } from "@emotion/react";
 
-import { Content, ContextualHelp, TabbedCard } from "@arizeai/components";
+import { TabbedCard } from "@arizeai/components";
 import {
   DocumentAttributePostfixes,
   EmbeddingAttributePostfixes,
@@ -33,6 +33,7 @@ import {
   Button,
   Card,
   CardProps,
+  ContextualHelp,
   CopyToClipboardButton,
   Counter,
   DialogTrigger,
@@ -2000,26 +2001,19 @@ function SpanEventsList({ events }: { events: Span["events"] }) {
 }
 
 const attributesContextualHelp = (
-  <Flex alignItems="center" justifyContent="center">
-    <View marginStart="size-100">
-      <ContextualHelp>
-        <Heading weight="heavy" level={4}>
-          Span Attributes
-        </Heading>
-        <Content>
-          <Text>
-            Attributes are key-value pairs that represent metadata associated
-            with a span. For detailed descriptions of specific attributes,
-            consult the semantic conventions section of the OpenInference
-            tracing specification.
-          </Text>
-        </Content>
-        <footer>
-          <ExternalLink href="https://github.com/Arize-ai/openinference/blob/main/spec/semantic_conventions.md">
-            Semantic Conventions
-          </ExternalLink>
-        </footer>
-      </ContextualHelp>
-    </View>
-  </Flex>
+  <ContextualHelp>
+    <Heading weight="heavy" level={4}>
+      Span Attributes
+    </Heading>
+    <Text>
+      Attributes are key-value pairs that represent metadata associated with a
+      span. For detailed descriptions of specific attributes, consult the
+      semantic conventions section of the OpenInference tracing specification.
+    </Text>
+    <footer>
+      <ExternalLink href="https://github.com/Arize-ai/openinference/blob/main/spec/semantic_conventions.md">
+        Semantic Conventions
+      </ExternalLink>
+    </footer>
+  </ContextualHelp>
 );