feat: update masonry ui to display structured model response meta

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

Author: starpit

pdl-live-react/src/helpers.ts

@@ -1,5 +1,4 @@
-import { type ReactElement } from "react"
-
+import { stringify } from "yaml"
 import type { LitellmModelBlock, PdlBlock, TextBlock } from "./pdl_ast"
 
 /** Re-export for convenience */
@@ -36,7 +35,7 @@ export function hasResult(block: unknown): block is PdlBlockWithResult {
 }
 
 export function isPdlBlock(
-  o: unknown | ReactElement | PdlBlock,
+  o: unknown | import("react").ReactElement | PdlBlock,
 ): o is PdlBlock {
   const obj = o as PdlBlock
   return (
@@ -180,3 +179,55 @@ type MessageBearing = Omit<import("./pdl_ast").ReadBlock, "message"> & {
 export function hasMessage(block: PdlBlock): block is MessageBearing {
   return typeof (block as MessageBearing).message === "string"
 }
+
+function tryJson(s: unknown) {
+  if (typeof s === "string") {
+    try {
+      return JSON.parse(s)
+    } catch (_err) {
+      // intentional fall-through
+    }
+  }
+  return s
+}
+
+export function extractStructuredModelResponse({
+  result,
+  parser,
+}: LitellmModelBlock) {
+  const json = tryJson(result)
+  const resultForDisplay: string = Array.isArray(json)
+    ? json.map(({ sentence }) => String(sentence)).join("\n")
+    : typeof result === "object"
+      ? stringify(result)
+      : String(result)
+
+  const lang: import("./view/code/Code").SupportedLanguage | undefined =
+    Array.isArray(json)
+      ? undefined
+      : parser === "jsonl" || parser === "json"
+        ? "json"
+        : parser === "yaml"
+          ? "yaml"
+          : "plaintext"
+
+  // Ugh, some of this logic may be specific to Granite LLM
+  const meta = !Array.isArray(json)
+    ? undefined
+    : json.flatMap(({ meta }) =>
+        Object.entries(meta).map(([k, v]) => {
+          if (
+            k === "citation" &&
+            v &&
+            typeof v === "object" &&
+            "snippet" in v
+          ) {
+            return [k, v.snippet]
+          } else {
+            return [k, v]
+          }
+        }),
+      )
+
+  return { resultForDisplay, lang, meta }
+}

pdl-live-react/src/view/detail/kind/Model.tsx

@@ -2,65 +2,27 @@ import { stringify } from "yaml"
 
 import Group from "../Group"
 import Result from "../../Result"
-import { capitalizeAndUnSnakeCase } from "../../../helpers"
-
-function tryJson(s: unknown) {
-  if (typeof s === "string") {
-    try {
-      return JSON.parse(s)
-    } catch (_err) {
-      // intentional fall-through
-    }
-  }
-  return s
-}
+import {
+  capitalizeAndUnSnakeCase,
+  extractStructuredModelResponse,
+} from "../../../helpers"
 
 export default function ModelItems({
-  block: { platform, model, input, result, parser },
+  block,
 }: {
   block: import("../../../pdl_ast").LitellmModelBlock
 }) {
-  // All of this JSON stuff is to handle structured responses from the
-  // model
-  const json = tryJson(result)
-  const resultForDisplay = Array.isArray(json)
-    ? json.map(({ sentence }) => sentence).join("\n")
-    : result
-
-  const lang = Array.isArray(json)
-    ? undefined
-    : parser === "jsonl" || parser === "json"
-      ? "json"
-      : parser === "yaml"
-        ? "yaml"
-        : "plaintext"
+  const { platform, model, input } = block
+  const { resultForDisplay, lang, meta } = extractStructuredModelResponse(block)
 
-  // Ugh, some of this logic may be specific to Granite LLM
-  const meta = Array.isArray(json)
-    ? json.flatMap(({ meta }, idx) =>
-        Object.entries(meta)
-          .map(([k, v]) => {
-            if (
-              k === "citation" &&
-              v &&
-              typeof v === "object" &&
-              "snippet" in v
-            ) {
-              return [k, v.snippet]
-            } else {
-              return [k, v]
-            }
-          })
-          .map(([k, v]) => (
-            <Result
-              key={k + "." + idx}
-              term={capitalizeAndUnSnakeCase(String(k))}
-              result={typeof v === "object" ? stringify(v) : v}
-              lang={typeof v === "object" ? "yaml" : undefined}
-            />
-          )),
-      )
-    : undefined
+  const metaForDisplay = meta?.map(([k, v], idx) => (
+    <Result
+      key={k + "." + idx}
+      term={capitalizeAndUnSnakeCase(String(k))}
+      result={typeof v === "object" ? stringify(v) : v}
+      lang={typeof v === "object" ? "yaml" : undefined}
+    />
+  ))
 
   return (
     <>
@@ -70,7 +32,7 @@ export default function ModelItems({
       {typeof model === "string" && <Group term="Model" description={model} />}
       {typeof input === "string" && <Group term="Input" description={input} />}
       <Result result={resultForDisplay} lang={lang} />
-      {meta}
+      {metaForDisplay}
     </>
   )
 }

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

@@ -3,6 +3,10 @@ import { useMemo } from "react"
 import {
   CardHeader,
   CardTitle,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
   Flex,
   Panel,
   PanelMain,
@@ -32,9 +36,10 @@ export default function MasonryTile({
   message,
   content,
   lang,
-  crumb,
   kind,
   idx,
+  footer1Key,
+  footer1Value,
 }: Props) {
   const actions = useMemo(
     () =>
@@ -72,25 +77,33 @@ export default function MasonryTile({
           className="pdl-masonry-tile-header"
         >
           <div className="pdl-masonry-index">{idx}</div>
-          {crumb && (
-            <BreadcrumbBarForBlockId
-              id={id}
-              def={def}
-              value={content}
-              isCompact
-              maxCrumbs={sml === "xl" ? 4 : sml === "l" ? 3 : 2}
-            />
-          )}
+          <BreadcrumbBarForBlockId
+            id={id}
+            def={def}
+            value={content}
+            isCompact
+            maxCrumbs={sml === "xl" ? 4 : sml === "l" ? 3 : 2}
+          />
         </Flex>
       </CardTitle>
     </CardHeader>
   )
 
+  const footer = footer1Key && footer1Value && (
+    <DescriptionList isCompact isHorizontal isFluid>
+      <DescriptionListGroup>
+        <DescriptionListTerm>{footer1Key}</DescriptionListTerm>
+        <DescriptionListDescription>{footer1Value}</DescriptionListDescription>
+      </DescriptionListGroup>
+    </DescriptionList>
+  )
+
   return (
     <MasonryTileWrapper
       sml={sml}
       kind={/^[^.]+$/.test(id) ? "output-of-program" : kind}
       header={header}
+      footer={footer}
     >
       <Panel isScrollable={sml !== "xl"} className="pdl-masonry-tile-panel">
         <PanelMain maxHeight={maxHeight}>

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

@@ -1,15 +1,17 @@
-import { Card, CardBody } from "@patternfly/react-core"
+import { Card, CardBody, CardFooter, Divider } from "@patternfly/react-core"
 
 type Props = import("react").PropsWithChildren<{
   kind?: string
   variant?: "plain" | "default"
   sml: import("./Toolbar").SML
   header?: import("react").ReactNode
+  footer?: import("react").ReactNode
 }>
 
 export default function MasonryTileWrapper({
   sml,
   header,
+  footer,
   kind,
   variant = "default",
   children,
@@ -25,6 +27,12 @@ export default function MasonryTileWrapper({
     >
       {header}
       <CardBody className="pdl-masonry-tile-body">{children}</CardBody>
+      {footer && (
+        <>
+          <Divider />
+          <CardFooter>{footer}</CardFooter>
+        </>
+      )}
     </Card>
   )
 }

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

@@ -1,15 +1,18 @@
 type Tile = {
   id: string
   def?: string | null
+  kind?: string
   message?: string
+
   start_nanos?: number
   end_nanos?: number
   timezone?: string
-  content: string
+
   lang?: import("../code/Code").SupportedLanguage
-  crumb?: boolean
-  kind?: string
-  boundedHeight?: boolean
+  content: string
+
+  footer1Key?: string
+  footer1Value?: string | number | boolean
 }
 
 export default Tile

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

@@ -2,11 +2,14 @@ import { stringify } from "yaml"
 import { computeModel as computeBaseModel } from "../timeline/model"
 
 import {
+  isLLMBlock,
   hasMessage,
   hasParser,
   hasResult,
   hasScalarResult,
   hasTimingInformation,
+  capitalizeAndUnSnakeCase,
+  extractStructuredModelResponse,
   type NonScalarPdlBlock,
 } from "../../helpers"
 
@@ -43,28 +46,39 @@ export default function computeModel(block: import("../../pdl_ast").PdlBlock) {
     .concat(result(block))
     .flatMap(({ id, block, children }) => {
       if (children.length === 0 && hasTimingInformation(block)) {
+        const { resultForDisplay, meta, lang } = isLLMBlock(block)
+          ? extractStructuredModelResponse(block)
+          : {
+              resultForDisplay:
+                typeof block.result === "object"
+                  ? stringify(block.result)
+                  : String(block.result),
+              meta: undefined,
+              lang:
+                typeof block.result === "object"
+                  ? "yaml"
+                  : hasParser(block)
+                    ? block.parser === "jsonl"
+                      ? "json"
+                      : block.parser
+                    : undefined,
+            }
+
         return withDefs(block, [
           {
             id,
             def: block.def,
             kind: block.kind,
+            lang,
             message: hasMessage(block) ? block.message : undefined,
-            content:
-              typeof block.result === "object"
-                ? stringify(block.result)
-                : String(block.result),
+            footer1Key: meta?.[0]?.[0]
+              ? capitalizeAndUnSnakeCase(String(meta[0][0]))
+              : undefined,
+            footer1Value: meta?.[0]?.[1] ? String(meta[0][1]) : undefined,
+            content: resultForDisplay,
             start_nanos: block.pdl__timing.start_nanos,
             end_nanos: block.pdl__timing.end_nanos,
             timezone: block.pdl__timing.timezone,
-            lang:
-              typeof block.result === "object"
-                ? "yaml"
-                : hasParser(block)
-                  ? block.parser === "jsonl"
-                    ? "json"
-                    : block.parser
-                  : undefined,
-            crumb: true,
           },
         ])
       }
@@ -95,7 +109,6 @@ function withDefs(block: NonScalarPdlBlock, tiles: Tile[]) {
           !v
             ? []
             : {
-                crumb: true,
                 id: (block.id ?? "").replace(/\.?empty/g, ""),
                 kind: "",
                 def,