Skip to content

Commit 99f5025

Browse files
starpitstarpit
committed
feat: add Result tab to detail drawer
Signed-off-by: Nick Mitchell <[email protected]>
1 parent 149d1c7 commit 99f5025

File tree

5 files changed

+132
-71
lines changed

5 files changed

+132
-71
lines changed

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
flex: 1;
2424
overflow: auto;
2525

26-
.pf-v6-c-description-list {
26+
& > .pdl-markdown,
27+
& > .pf-v6-c-description-list {
2728
padding: 1em 2em 0 2em;
2829
}
2930

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

+19-9
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,6 @@ function description(block: Block) {
4040
}
4141

4242
export default function DrawerContent({ value }: Props) {
43-
const [activeTab, setActiveTab] = useState<string | number>(0)
44-
const handleTabClick = useCallback<Required<TabsProps>["onSelect"]>(
45-
(_event, tabKey) => setActiveTab(tabKey),
46-
[setActiveTab],
47-
)
48-
4943
const [searchParams] = useSearchParams()
5044
const id = searchParams.get("id")
5145
const def = searchParams.get("def")
@@ -74,9 +68,25 @@ export default function DrawerContent({ value }: Props) {
7468
() => (!id || !data ? null : findNode(data, id)),
7569
[id, data],
7670
)
71+
72+
const tabs = useMemo(
73+
() =>
74+
!objectType
75+
? undefined
76+
: drawerContentBody({ id, value, def, objectType, model: block }),
77+
[id, value, def, objectType, block],
78+
)
7779
useEffect(() => {
78-
setActiveTab(0)
79-
}, [id, objectType, value])
80+
setActiveTab(tabs?.[0].props.eventKey)
81+
}, [tabs])
82+
83+
const [activeTab, setActiveTab] = useState<string | number>(
84+
tabs?.[0].props.eventKey,
85+
)
86+
const handleTabClick = useCallback<Required<TabsProps>["onSelect"]>(
87+
(_event, tabKey) => setActiveTab(tabKey),
88+
[setActiveTab],
89+
)
8090

8191
const actions = useMemo(
8292
() => ({
@@ -109,7 +119,7 @@ export default function DrawerContent({ value }: Props) {
109119
mountOnEnter
110120
unmountOnExit
111121
>
112-
{drawerContentBody({ id, value, def, objectType, model: block })}
122+
{tabs}
113123
</Tabs>
114124
</CardBody>
115125
</Card>

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

+87-59
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Tab, TabTitleText } from "@patternfly/react-core"
44
const BlockNotFound = lazy(() => import("./BlockNotFound"))
55
const DefContent = lazy(() => import("./DefContent"))
66
const UsageTabContent = lazy(() => import("./UsageTabContent"))
7+
const ResultTabContent = lazy(() => import("./ResultTabContent"))
78
const SourceTabContent = lazy(() => import("./SourceTabContent"))
89
const ContextTabContent = lazy(() => import("./ContextTabContent"))
910
const SummaryTabContent = lazy(() => import("./SummaryTabContent"))
@@ -16,52 +17,6 @@ import {
1617
type NonScalarPdlBlock as Model,
1718
} from "../../helpers"
1819

19-
function blockBody(block: Model) {
20-
const tabs = [
21-
<Tab key={0} eventKey={0} title={<TabTitleText>Summary</TabTitleText>}>
22-
<Suspense>
23-
<SummaryTabContent block={block} />
24-
</Suspense>
25-
</Tab>,
26-
<Tab key={1} eventKey={1} title={<TabTitleText>Source</TabTitleText>}>
27-
<Suspense>
28-
<SourceTabContent block={block} />
29-
</Suspense>
30-
</Tab>,
31-
<Tab key={2} eventKey={2} title={<TabTitleText>Trace</TabTitleText>}>
32-
<Suspense>
33-
<RawTraceTabContent block={block} />
34-
</Suspense>
35-
</Tab>,
36-
]
37-
38-
if (hasContextInformation(block)) {
39-
tabs.splice(
40-
1,
41-
0,
42-
<Tab key={3} eventKey={3} title={<TabTitleText>Messages</TabTitleText>}>
43-
<Suspense>
44-
<ContextTabContent block={block} />
45-
</Suspense>
46-
</Tab>,
47-
)
48-
}
49-
50-
if (hasModelUsage(block)) {
51-
tabs.splice(
52-
1,
53-
0,
54-
<Tab key={4} eventKey={4} title={<TabTitleText>Usage</TabTitleText>}>
55-
<Suspense>
56-
<UsageTabContent block={block} />
57-
</Suspense>
58-
</Tab>,
59-
)
60-
}
61-
62-
return tabs
63-
}
64-
6520
type Props = {
6621
id: string | null
6722
value: string
@@ -74,26 +29,99 @@ export default function DrawerContentBody({
7429
id,
7530
value,
7631
objectType,
77-
model,
32+
model: block,
7833
}: Props) {
79-
if (!model) {
80-
return (
81-
<Suspense fallback={<div />}>
82-
<BlockNotFound pdl__id={id} value={value} />
83-
</Suspense>
84-
)
34+
if (!block) {
35+
return [
36+
<Tab eventKey={0} title={<TabTitleText>Error</TabTitleText>}>
37+
<Suspense fallback={<div />}>
38+
<BlockNotFound pdl__id={id} value={value} />
39+
</Suspense>
40+
</Tab>,
41+
]
8542
}
8643

8744
switch (objectType) {
8845
case "def": {
89-
const value = hasResult(model) ? model.pdl__result : undefined
90-
return (
46+
const value = hasResult(block) ? block.pdl__result : undefined
47+
return [
9148
<Tab eventKey={0} title={<TabTitleText>Value</TabTitleText>}>
9249
{!value ? "Value not found" : <DefContent value={value} />}
93-
</Tab>
94-
)
50+
</Tab>,
51+
]
52+
}
53+
54+
default: {
55+
// some blocks have nothing interesting to show other than their result
56+
const hasSummary = !(block.kind === "data" || block.kind === "code")
57+
58+
return [
59+
...(!hasSummary
60+
? []
61+
: [
62+
<Tab
63+
key={0}
64+
eventKey={0}
65+
title={<TabTitleText>Summary</TabTitleText>}
66+
>
67+
<Suspense>
68+
<SummaryTabContent block={block} />
69+
</Suspense>
70+
</Tab>,
71+
]),
72+
73+
...(!hasContextInformation(block)
74+
? []
75+
: [
76+
<Tab
77+
key={3}
78+
eventKey={3}
79+
title={<TabTitleText>Messages</TabTitleText>}
80+
>
81+
<Suspense>
82+
<ContextTabContent block={block} />
83+
</Suspense>
84+
</Tab>,
85+
]),
86+
87+
...(!hasResult(block)
88+
? []
89+
: [
90+
<Tab
91+
key="result"
92+
eventKey="result"
93+
title={<TabTitleText>Result</TabTitleText>}
94+
>
95+
<Suspense>
96+
<ResultTabContent block={block} />
97+
</Suspense>
98+
</Tab>,
99+
]),
100+
101+
...(!hasModelUsage(block)
102+
? []
103+
: [
104+
<Tab
105+
key={4}
106+
eventKey={4}
107+
title={<TabTitleText>Usage</TabTitleText>}
108+
>
109+
<Suspense>
110+
<UsageTabContent block={block} />
111+
</Suspense>
112+
</Tab>,
113+
]),
114+
<Tab key={1} eventKey={1} title={<TabTitleText>Source</TabTitleText>}>
115+
<Suspense>
116+
<SourceTabContent block={block} />
117+
</Suspense>
118+
</Tab>,
119+
<Tab key={2} eventKey={2} title={<TabTitleText>Trace</TabTitleText>}>
120+
<Suspense>
121+
<RawTraceTabContent block={block} />
122+
</Suspense>
123+
</Tab>,
124+
]
95125
}
96-
default:
97-
return blockBody(model)
98126
}
99127
}

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

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Result from "../Result"
2+
3+
import { hasParser, type PdlBlockWithResult } from "../../helpers"
4+
5+
export default function UsageTabContent({
6+
block,
7+
}: {
8+
block: PdlBlockWithResult
9+
}) {
10+
return (
11+
<Result
12+
result={block.pdl__result}
13+
lang={
14+
hasParser(block)
15+
? block.parser === "jsonl"
16+
? "json"
17+
: block.parser
18+
: undefined
19+
}
20+
term=""
21+
/>
22+
)
23+
}

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010

1111
export default function ModelItems({ block }: { block: ModelBlock }) {
1212
const { platform, model, input } = block
13-
const { resultForDisplay, lang, meta } = extractStructuredModelResponse(block)
13+
const { meta } = extractStructuredModelResponse(block)
1414

1515
const metaForDisplay = meta?.map(([k, v], idx) => (
1616
<Result
@@ -28,7 +28,6 @@ export default function ModelItems({ block }: { block: ModelBlock }) {
2828
)}
2929
{typeof model === "string" && <Group term="Model" description={model} />}
3030
{typeof input === "string" && <Group term="Input" description={input} />}
31-
<Result result={resultForDisplay} lang={lang} />
3231
{metaForDisplay}
3332
</>
3433
)

0 commit comments

Comments
 (0)