feat: add Usage tab to detail drawer for model blocks

Signed-off-by: Nick Mitchell <[email protected]>

Author: starpit

pdl-live-react/src/helpers.ts

@@ -187,6 +187,19 @@ export function hasModelUsage(
   )
 }
 
+export function completionRate(
+  block: ModelBlockWithUsage & PdlBlockWithTiming,
+) {
+  return (
+    block.pdl__usage.completion_tokens /
+    ((block.pdl__timing.end_nanos - block.pdl__timing.start_nanos) / 1000000000)
+  )
+}
+
+export function ptcRatio(block: ModelBlockWithUsage) {
+  return block.pdl__usage.prompt_tokens / block.pdl__usage.completion_tokens
+}
+
 /** Does the given block have context/background information? */
 export function hasContextInformation(
   block: unknown | PdlBlock,

pdl-live-react/src/view/detail/DrawerContentBody.tsx

@@ -3,13 +3,15 @@ import { Tab, TabTitleText } from "@patternfly/react-core"
 
 const BlockNotFound = lazy(() => import("./BlockNotFound"))
 const DefContent = lazy(() => import("./DefContent"))
+const UsageTabContent = lazy(() => import("./UsageTabContent"))
 const SourceTabContent = lazy(() => import("./SourceTabContent"))
 const ContextTabContent = lazy(() => import("./ContextTabContent"))
 const SummaryTabContent = lazy(() => import("./SummaryTabContent"))
 const RawTraceTabContent = lazy(() => import("./RawTraceTabContent"))
 
 import {
   hasContextInformation,
+  hasModelUsage,
   hasResult,
   type NonScalarPdlBlock as Model,
 } from "../../helpers"
@@ -54,6 +56,18 @@ function blockBody(block: Model) {
     )
   }
 
+  if (hasModelUsage(block)) {
+    tabs.splice(
+      1,
+      0,
+      <Tab key={4} eventKey={4} title={<TabTitleText>Usage</TabTitleText>}>
+        <Suspense>
+          <UsageTabContent block={block} />
+        </Suspense>
+      </Tab>,
+    )
+  }
+
   return tabs
 }
 

pdl-live-react/src/view/detail/UsageTabContent.tsx

@@ -0,0 +1,55 @@
+import {
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  DescriptionListTerm,
+} from "@patternfly/react-core"
+
+import {
+  completionRate,
+  ptcRatio,
+  type ModelBlockWithUsage,
+  type PdlBlockWithTiming,
+} from "../../helpers"
+
+export default function UsageTabContent({
+  block,
+}: {
+  block: ModelBlockWithUsage & PdlBlockWithTiming
+}) {
+  return <DescriptionList>{descriptionItems(block)}</DescriptionList>
+}
+
+function descriptionItems(block: ModelBlockWithUsage & PdlBlockWithTiming) {
+  return (
+    <>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Completion Rate</DescriptionListTerm>
+        <DescriptionListDescription>
+          {completionRate(block).toFixed(0)} tokens/sec
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+
+      <DescriptionListGroup>
+        <DescriptionListTerm>Prompt/Completion Ratio</DescriptionListTerm>
+        <DescriptionListDescription>
+          {(ptcRatio(block) * 100).toFixed(2)}%
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+
+      <DescriptionListGroup>
+        <DescriptionListTerm>Prompt Tokens Consumed</DescriptionListTerm>
+        <DescriptionListDescription>
+          {block.pdl__usage.prompt_tokens}
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+
+      <DescriptionListGroup>
+        <DescriptionListTerm>Completion Tokens Consumed</DescriptionListTerm>
+        <DescriptionListDescription>
+          {block.pdl__usage.completion_tokens}
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+    </>
+  )
+}

pdl-live-react/src/view/masonry/MasonryTile.tsx

@@ -53,6 +53,8 @@ export default function MasonryTile({
   footer1Value,
   footer2Key,
   footer2Value,
+  footer3Key,
+  footer3Value,
   stability,
   actions: tileActions = [],
   block,
@@ -119,6 +121,7 @@ export default function MasonryTile({
   const hasFooter =
     (footer1Key && footer1Value) ||
     (footer2Key && footer2Value) ||
+    (footer3Key && footer3Value) ||
     (stability?.length ?? 0) > 0
   const footer = hasFooter && (
     <DescriptionList className="pdl-masonry-tile-footer-dl">
@@ -138,6 +141,14 @@ export default function MasonryTile({
           </DescriptionListDescription>
         </DescriptionListGroup>
       )}
+      {footer3Key && (
+        <DescriptionListGroup>
+          <DescriptionListTerm>{footer3Key}</DescriptionListTerm>
+          <DescriptionListDescription>
+            {footer3Value}
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+      )}
       {stability &&
         stability.map((m) => (
           <DescriptionListGroup

pdl-live-react/src/view/masonry/Tile.ts

@@ -15,6 +15,8 @@ type Tile = {
   footer1Value?: string | number | boolean
   footer2Key?: string
   footer2Value?: string | number | boolean
+  footer3Key?: string
+  footer3Value?: string | number | boolean
   stability?: import("./stability").StabilityMetric[]
 
   block?: import("../../helpers").NonScalarPdlBlock

pdl-live-react/src/view/masonry/model.ts

@@ -11,6 +11,8 @@ import {
   hasTimingInformation,
   capitalizeAndUnSnakeCase,
   extractStructuredModelResponse,
+  completionRate,
+  ptcRatio,
   type NonScalarPdlBlock,
 } from "../../helpers"
 
@@ -89,20 +91,16 @@ export default function computeModel(block: import("../../pdl_ast").PdlBlock) {
               : undefined,
             footer1Value: meta?.[0]?.[1] ? String(meta[0][1]) : undefined,
 
-            footer2Key:
-              hasModelUsage(block) && block.pdl__usage
-                ? "Tokens/sec"
-                : undefined,
-            footer2Value:
-              hasModelUsage(block) && block.pdl__usage
-                ? (
-                    (block.pdl__usage.completion_tokens +
-                      block.pdl__usage.prompt_tokens) /
-                    ((block.pdl__timing.end_nanos -
-                      block.pdl__timing.start_nanos) /
-                      1000000000)
-                  ).toFixed(0)
-                : undefined,
+            footer2Key: hasModelUsage(block) ? "Completion Rate" : undefined,
+            footer2Value: hasModelUsage(block)
+              ? completionRate(block).toFixed(0) + " tokens/sec"
+              : undefined,
+            footer3Key: hasModelUsage(block)
+              ? "Prompt/Completion Ratio"
+              : undefined,
+            footer3Value: hasModelUsage(block)
+              ? (100 * ptcRatio(block)).toFixed(2) + "%"
+              : undefined,
 
             stability,
             //footer2Key: stability.map((m) => `T=${m.temperature} Stability`),