diff --git a/pdl-live-react/src/view/detail/DrawerContent.css b/pdl-live-react/src/view/detail/DrawerContent.css index 88b440ac7..4861e33d1 100644 --- a/pdl-live-react/src/view/detail/DrawerContent.css +++ b/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; } diff --git a/pdl-live-react/src/view/detail/DrawerContent.tsx b/pdl-live-react/src/view/detail/DrawerContent.tsx index c8ca26ae0..772ee8714 100644 --- a/pdl-live-react/src/view/detail/DrawerContent.tsx +++ b/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(0) - const handleTabClick = useCallback["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( + tabs?.[0].props.eventKey, + ) + const handleTabClick = useCallback["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} diff --git a/pdl-live-react/src/view/detail/DrawerContentBody.tsx b/pdl-live-react/src/view/detail/DrawerContentBody.tsx index 886ab7084..1eed6c8d6 100644 --- a/pdl-live-react/src/view/detail/DrawerContentBody.tsx +++ b/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 = [ - Summary}> - - - - , - Source}> - - - - , - Trace}> - - - - , - ] - - if (hasContextInformation(block)) { - tabs.splice( - 1, - 0, - Messages}> - - - - , - ) - } - - if (hasModelUsage(block)) { - tabs.splice( - 1, - 0, - Usage}> - - - - , - ) - } - - 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 ( - }> - - - ) + if (!block) { + return [ + Error}> + }> + + + , + ] } switch (objectType) { case "def": { - const value = hasResult(model) ? model.pdl__result : undefined - return ( + const value = hasResult(block) ? block.pdl__result : undefined + return [ Value}> {!value ? "Value not found" : } - - ) + , + ] + } + + default: { + // some blocks have nothing interesting to show other than their result + const hasSummary = !(block.kind === "data" || block.kind === "code") + + return [ + ...(!hasSummary + ? [] + : [ + Summary} + > + + + + , + ]), + + ...(!hasContextInformation(block) + ? [] + : [ + Messages} + > + + + + , + ]), + + ...(!hasResult(block) + ? [] + : [ + Result} + > + + + + , + ]), + + ...(!hasModelUsage(block) + ? [] + : [ + Usage} + > + + + + , + ]), + Source}> + + + + , + Trace}> + + + + , + ] } - default: - return blockBody(model) } } diff --git a/pdl-live-react/src/view/detail/ResultTabContent.tsx b/pdl-live-react/src/view/detail/ResultTabContent.tsx new file mode 100644 index 000000000..70ef04b25 --- /dev/null +++ b/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 ( + + ) +} diff --git a/pdl-live-react/src/view/detail/kind/Model.tsx b/pdl-live-react/src/view/detail/kind/Model.tsx index dd1fb5854..f76048ab6 100644 --- a/pdl-live-react/src/view/detail/kind/Model.tsx +++ b/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) => ( } {typeof input === "string" && } - {metaForDisplay} )