feat: add Result tab to detail drawer

pdl-live-react/src/view/detail/DrawerContent.css

@@ -23,7 +23,8 @@
     flex: 1;
     overflow: auto;
 
-    .pf-v6-c-description-list {
+    & > .pdl-markdown,
+    & > .pf-v6-c-description-list {
       padding: 1em 2em 0 2em;
     }
 

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

@@ -40,12 +40,6 @@ function description(block: Block) {
 }
 
 export default function DrawerContent({ value }: Props) {
-  const [activeTab, setActiveTab] = useState<string | number>(0)
-  const handleTabClick = useCallback<Required<TabsProps>["onSelect"]>(
-    (_event, tabKey) => setActiveTab(tabKey),
-    [setActiveTab],
-  )
-
   const [searchParams] = useSearchParams()
   const id = searchParams.get("id")
   const def = searchParams.get("def")
@@ -74,9 +68,25 @@ export default function DrawerContent({ value }: Props) {
     () => (!id || !data ? null : findNode(data, id)),
     [id, data],
   )
+
+  const tabs = useMemo(
+    () =>
+      !objectType
+        ? undefined
+        : drawerContentBody({ id, value, def, objectType, model: block }),
+    [id, value, def, objectType, block],
+  )
   useEffect(() => {
-    setActiveTab(0)
-  }, [id, objectType, value])
+    setActiveTab(tabs?.[0].props.eventKey)
+  }, [tabs])
+
+  const [activeTab, setActiveTab] = useState<string | number>(
+    tabs?.[0].props.eventKey,
+  )
+  const handleTabClick = useCallback<Required<TabsProps>["onSelect"]>(
+    (_event, tabKey) => setActiveTab(tabKey),
+    [setActiveTab],
+  )
 
   const actions = useMemo(
     () => ({
@@ -109,7 +119,7 @@ export default function DrawerContent({ value }: Props) {
           mountOnEnter
           unmountOnExit
         >
-          {drawerContentBody({ id, value, def, objectType, model: block })}
+          {tabs}
         </Tabs>
       </CardBody>
     </Card>

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

@@ -4,6 +4,7 @@ import { Tab, TabTitleText } from "@patternfly/react-core"
 const BlockNotFound = lazy(() => import("./BlockNotFound"))
 const DefContent = lazy(() => import("./DefContent"))
 const UsageTabContent = lazy(() => import("./UsageTabContent"))
+const ResultTabContent = lazy(() => import("./ResultTabContent"))
 const SourceTabContent = lazy(() => import("./SourceTabContent"))
 const ContextTabContent = lazy(() => import("./ContextTabContent"))
 const SummaryTabContent = lazy(() => import("./SummaryTabContent"))
@@ -16,52 +17,6 @@ import {
   type NonScalarPdlBlock as Model,
 } from "../../helpers"
 
-function blockBody(block: Model) {
-  const tabs = [
-    <Tab key={0} eventKey={0} title={<TabTitleText>Summary</TabTitleText>}>
-      <Suspense>
-        <SummaryTabContent block={block} />
-      </Suspense>
-    </Tab>,
-    <Tab key={1} eventKey={1} title={<TabTitleText>Source</TabTitleText>}>
-      <Suspense>
-        <SourceTabContent block={block} />
-      </Suspense>
-    </Tab>,
-    <Tab key={2} eventKey={2} title={<TabTitleText>Trace</TabTitleText>}>
-      <Suspense>
-        <RawTraceTabContent block={block} />
-      </Suspense>
-    </Tab>,
-  ]
-
-  if (hasContextInformation(block)) {
-    tabs.splice(
-      1,
-      0,
-      <Tab key={3} eventKey={3} title={<TabTitleText>Messages</TabTitleText>}>
-        <Suspense>
-          <ContextTabContent block={block} />
-        </Suspense>
-      </Tab>,
-    )
-  }
-
-  if (hasModelUsage(block)) {
-    tabs.splice(
-      1,
-      0,
-      <Tab key={4} eventKey={4} title={<TabTitleText>Usage</TabTitleText>}>
-        <Suspense>
-          <UsageTabContent block={block} />
-        </Suspense>
-      </Tab>,
-    )
-  }
-
-  return tabs
-}
-
 type Props = {
   id: string | null
   value: string
@@ -74,26 +29,99 @@ export default function DrawerContentBody({
   id,
   value,
   objectType,
-  model,
+  model: block,
 }: Props) {
-  if (!model) {
-    return (
-      <Suspense fallback={<div />}>
-        <BlockNotFound pdl__id={id} value={value} />
-      </Suspense>
-    )
+  if (!block) {
+    return [
+      <Tab eventKey={0} title={<TabTitleText>Error</TabTitleText>}>
+        <Suspense fallback={<div />}>
+          <BlockNotFound pdl__id={id} value={value} />
+        </Suspense>
+      </Tab>,
+    ]
   }
 
   switch (objectType) {
     case "def": {
-      const value = hasResult(model) ? model.pdl__result : undefined
-      return (
+      const value = hasResult(block) ? block.pdl__result : undefined
+      return [
         <Tab eventKey={0} title={<TabTitleText>Value</TabTitleText>}>
           {!value ? "Value not found" : <DefContent value={value} />}
-        </Tab>
-      )
+        </Tab>,
+      ]
+    }
+
+    default: {
+      // some blocks have nothing interesting to show other than their result
+      const hasSummary = !(block.kind === "data" || block.kind === "code")
+
+      return [
+        ...(!hasSummary
+          ? []
+          : [
+              <Tab
+                key={0}
+                eventKey={0}
+                title={<TabTitleText>Summary</TabTitleText>}
+              >
+                <Suspense>
+                  <SummaryTabContent block={block} />
+                </Suspense>
+              </Tab>,
+            ]),
+
+        ...(!hasContextInformation(block)
+          ? []
+          : [
+              <Tab
+                key={3}
+                eventKey={3}
+                title={<TabTitleText>Messages</TabTitleText>}
+              >
+                <Suspense>
+                  <ContextTabContent block={block} />
+                </Suspense>
+              </Tab>,
+            ]),
+
+        ...(!hasResult(block)
+          ? []
+          : [
+              <Tab
+                key="result"
+                eventKey="result"
+                title={<TabTitleText>Result</TabTitleText>}
+              >
+                <Suspense>
+                  <ResultTabContent block={block} />
+                </Suspense>
+              </Tab>,
+            ]),
+
+        ...(!hasModelUsage(block)
+          ? []
+          : [
+              <Tab
+                key={4}
+                eventKey={4}
+                title={<TabTitleText>Usage</TabTitleText>}
+              >
+                <Suspense>
+                  <UsageTabContent block={block} />
+                </Suspense>
+              </Tab>,
+            ]),
+        <Tab key={1} eventKey={1} title={<TabTitleText>Source</TabTitleText>}>
+          <Suspense>
+            <SourceTabContent block={block} />
+          </Suspense>
+        </Tab>,
+        <Tab key={2} eventKey={2} title={<TabTitleText>Trace</TabTitleText>}>
+          <Suspense>
+            <RawTraceTabContent block={block} />
+          </Suspense>
+        </Tab>,
+      ]
     }
-    default:
-      return blockBody(model)
   }
 }

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

@@ -0,0 +1,23 @@
+import Result from "../Result"
+
+import { hasParser, type PdlBlockWithResult } from "../../helpers"
+
+export default function UsageTabContent({
+  block,
+}: {
+  block: PdlBlockWithResult
+}) {
+  return (
+    <Result
+      result={block.pdl__result}
+      lang={
+        hasParser(block)
+          ? block.parser === "jsonl"
+            ? "json"
+            : block.parser
+          : undefined
+      }
+      term=""
+    />
+  )
+}

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

@@ -10,7 +10,7 @@ import {
 
 export default function ModelItems({ block }: { block: ModelBlock }) {
   const { platform, model, input } = block
-  const { resultForDisplay, lang, meta } = extractStructuredModelResponse(block)
+  const { meta } = extractStructuredModelResponse(block)
 
   const metaForDisplay = meta?.map(([k, v], idx) => (
     <Result
@@ -28,7 +28,6 @@ export default function ModelItems({ block }: { block: ModelBlock }) {
       )}
       {typeof model === "string" && <Group term="Model" description={model} />}
       {typeof input === "string" && <Group term="Input" description={input} />}
-      <Result result={resultForDisplay} lang={lang} />
       {metaForDisplay}
     </>
   )