fix: improvements for rendering of Array and Function blocks

This also fixes a few other small rendering issues.

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

pdl-live-react/src/view/breadcrumbs/BreadcrumbBar.css

@@ -28,6 +28,11 @@
       --pdl-block-color-1: #fce3e3;
       --pdl-block-color-2: var(--pf-t--global--color--nonstatus--red--default);
     }
+    &[data-detail="lastOf"],
+    &[data-detail="text"],
+    &[data-detail="array"] {
+      --pdl-bb-color: var(--pf-t--global--icon--color--disabled);
+    }
 
     --pdl-bb-color: var(--pdl-block-color-1);
     &.pdl-breadcrumb-bar-item--def {

pdl-live-react/src/view/breadcrumbs/BreadcrumbBarForBlock.tsx

@@ -24,6 +24,7 @@ export default function BreadcrumbBarForBlock({ id, block }: Props) {
           .map((part, idx, A) => (
             <BreadcrumbBarItem
               key={part + idx}
+              detail={part}
               className={
                 idx === A.length - 1 ? "pdl-breadcrumb-bar-item--kind" : ""
               }

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

@@ -1,23 +1,5 @@
 import type Model from "../timeline/model"
 
-export default function BlockNotFound({
-  id,
-  model,
-}: {
-  id: string
-  model: Model
-}) {
-  return (
-    <>
-      <div>
-        Block not found{" "}
-        <strong>
-          <pre>{id}</pre>
-        </strong>
-      </div>
-      <div className="pdl-wrap">
-        <code>{model.map((_) => _.id).join(", ")}</code>
-      </div>
-    </>
-  )
+export default function BlockNotFound(_props: { id: string; model: Model }) {
+  return <div>Block not found</div>
 }

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

@@ -8,6 +8,7 @@ import CodeItems from "./kind/Code"
 import DataItems from "./kind/Data"
 import ReadItems from "./kind/Read"
 import ModelItems from "./kind/Model"
+import FunctionItems from "./kind/Function"
 
 import type Model from "../timeline/model"
 
@@ -21,7 +22,8 @@ function descriptionItems(block: import("../../helpers").NonScalarPdlBlock) {
     .with({ kind: "call" }, (block) => <CallItems block={block} />)
     .with({ kind: "code" }, (block) => <CodeItems block={block} />)
     .with({ kind: "data" }, (block) => <DataItems block={block} />)
-    .with({ kind: "model" }, (block) => <ModelItems block={block} />)
     .with({ kind: "read" }, (block) => <ReadItems block={block} />)
+    .with({ kind: "model" }, (block) => <ModelItems block={block} />)
+    .with({ kind: "function" }, (block) => <FunctionItems block={block} />)
     .otherwise(() => <>This is a {block.kind} block</>)
 }

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

@@ -0,0 +1,18 @@
+import { stringify } from "yaml"
+
+import Group from "../Group"
+import CodeGroup from "../../transcript/CodeGroup"
+
+export default function FunctionItems({
+  block: { def, function: func, return: retrn },
+}: {
+  block: import("../../../pdl_ast").FunctionBlock
+}) {
+  return (
+    <>
+      {def && <Group description={def} term="Name" />}
+      <CodeGroup code={stringify(func)} term="Parameters" />
+      <CodeGroup code={stringify(retrn)} term="Body" />
+    </>
+  )
+}

pdl-live-react/src/view/transcript/Array.tsx

@@ -9,14 +9,7 @@ type Props = {
 }
 
 export default function Array({ array, ctx }: Props) {
-  return (
-    <>
-      <pre>{"["}</pre>
-      {array.flatMap((block, idx) => [
-        <Block key={idx} data={block} ctx={withIter(ctx, idx)} />,
-        idx < array.length - 1 && <pre>,</pre>,
-      ])}
-      <pre>{"]"}</pre>
-    </>
-  )
+  return array.map((block, idx) => [
+    <Block key={idx} data={block} ctx={withIter(ctx, idx)} />,
+  ])
 }

pdl-live-react/src/view/transcript/Block.tsx

@@ -5,13 +5,11 @@ import { type DescriptionListProps } from "@patternfly/react-core"
 
 import ArrayUI from "./Array"
 import Defs from "./Defs"
-import Function from "./Function"
 import LastOf from "./LastOf"
 import ObjectUI from "./Object"
 import Output from "./Output"
 import Query from "./Query"
 import ResultOrCode from "./ResultOrCode"
-import Text from "./Text"
 import TranscriptItem from "./TranscriptItem"
 
 import LoopTrace from "./LoopTrace"
@@ -99,27 +97,25 @@ export default function Block({ data, ctx }: Props): ReactNode {
         <ResultOrCode block={data} />
       ),
     }))
-    .with({ kind: "function" }, (data) => ({
+    .with({ kind: "function" }, () => ({
       C: ["pdl_function"],
-      B: <Function f={data} ctx={withParent(ctx, data.kind)} />,
+      B: <></>,
     }))
     .with({ kind: "call" }, () => ({
       C: ["pdl_call"],
       B: <></>,
     }))
-    .with({ kind: "text" }, (data) => ({
+    .with({ kind: "text" }, () => ({
       C: ["pdl_text"],
-      B: data.text && (
-        <Text blocks={data.text} ctx={withParent(ctx, data.kind)} />
-      ),
+      B: <></>,
     }))
     .with({ kind: "lastOf" }, (data) => ({
       C: ["pdl_lastOf"],
       S: <LastOf blocks={data.lastOf} ctx={withParent(ctx, data.kind)} />,
     }))
     .with({ kind: "array" }, (data) => ({
       C: ["pdl_array"],
-      B: <ArrayUI array={data.array} ctx={withParent(ctx, data.kind)} />,
+      S: <ArrayUI array={data.array} ctx={withParent(ctx, data.kind)} />,
     }))
     .with({ kind: "object" }, (data) => ({
       C: ["pdl_object"],

pdl-live-react/src/view/transcript/QAV.css

@@ -1,6 +1,6 @@
 .pdl-qav {
   display: flex;
-  align-items: center;
+  align-items: baseline;
 }
 
 .pdl-qav-label {