Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit d54d278

Browse files
starpitstarpit
committed
feat: in react ui Context tab, use breadcrumb ui to link to def site
Signed-off-by: Nick Mitchell <[email protected]>
1 parent f4d8931 commit d54d278

File tree

5 files changed

+93
-76
lines changed

5 files changed

+93
-76
lines changed

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

Lines changed: 7 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,17 @@
1-
import {
2-
capitalizeAndUnSnakeCase,
3-
hasResult,
4-
type NonScalarPdlBlock as Block,
5-
} from "../../helpers"
1+
import { hasResult, type NonScalarPdlBlock as Block } from "../../helpers"
62

7-
import Def from "../transcript/Def"
8-
import BreadcrumbBar from "./BreadcrumbBar"
9-
import BreadcrumbBarItem from "./BreadcrumbBarItem"
3+
import BreadcrumbBarForBlockId from "./BreadcrumbBarForBlockId"
104

115
type Props = {
126
block: Pick<Block, "id" | "def">
137
}
148

15-
function asIter(part: string) {
16-
if (!part) return ""
17-
const int = parseInt(part)
18-
return isNaN(int) ? capitalizeAndUnSnakeCase(part) : `Step ${int + 1}`
19-
}
20-
219
export default function BreadcrumbBarForBlock({ block }: Props) {
22-
const id = block.id ?? ""
2310
return (
24-
<BreadcrumbBar>
25-
<>
26-
{id
27-
.replace(/text\.\d+\./g, "")
28-
.split(/\./)
29-
.slice(-5)
30-
.map((part, idx, A) => (
31-
<BreadcrumbBarItem
32-
key={part + idx}
33-
detail={part}
34-
className={
35-
idx === A.length - 1 ? "pdl-breadcrumb-bar-item--kind" : ""
36-
}
37-
>
38-
{asIter(part)}
39-
</BreadcrumbBarItem>
40-
))}
41-
42-
{block.def && (
43-
<Def
44-
block={block}
45-
def={block.def}
46-
value={hasResult(block) ? block.result : undefined}
47-
/>
48-
)}
49-
</>
50-
</BreadcrumbBar>
11+
<BreadcrumbBarForBlockId
12+
id={block.id ?? ""}
13+
def={block.def}
14+
value={hasResult(block) ? block.result : undefined}
15+
/>
5116
)
5217
}

‎pdl-live-react/src/view/breadcrumbs/BreadcrumbBarForBlockId.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { useCallback } from "react"
2+
import { useLocation, useNavigate } from "react-router"
3+
4+
import Def from "../transcript/Def"
5+
import BreadcrumbBar from "./BreadcrumbBar"
6+
import BreadcrumbBarItem from "./BreadcrumbBarItem"
7+
8+
import { capitalizeAndUnSnakeCase } from "../../helpers"
9+
10+
type Props = {
11+
id: string
12+
def?: string | null | undefined
13+
value?: import("../../pdl_ast").PdlBlock
14+
}
15+
16+
function asIter(part: string) {
17+
if (!part) return ""
18+
const int = parseInt(part)
19+
return isNaN(int) ? capitalizeAndUnSnakeCase(part) : `Step ${int + 1}`
20+
}
21+
22+
export default function BreadcrumbBarForBlockId({ id, def, value }: Props) {
23+
const { hash } = useLocation()
24+
const navigate = useNavigate()
25+
const onClick = useCallback(
26+
() => navigate(`?detail&type=def&id=${id}${hash}`),
27+
[id, hash],
28+
)
29+
30+
return (
31+
<BreadcrumbBar>
32+
<>
33+
{id
34+
.replace(/text\.\d+\./g, "")
35+
.split(/\./)
36+
.slice(-5)
37+
.map((part, idx, A) => (
38+
<BreadcrumbBarItem
39+
key={part + idx}
40+
detail={part}
41+
onClick={onClick}
42+
className={
43+
idx === A.length - 1 ? "pdl-breadcrumb-bar-item--kind" : ""
44+
}
45+
>
46+
{asIter(part)}
47+
</BreadcrumbBarItem>
48+
))}
49+
50+
{def && <Def id={id} def={def} value={value} />}
51+
</>
52+
</BreadcrumbBar>
53+
)
54+
}

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

Lines changed: 22 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,42 @@
1-
import { Link, useLocation } from "react-router"
21
import {
3-
Button,
42
DescriptionList,
53
DescriptionListTerm,
64
DescriptionListGroup,
75
DescriptionListDescription,
86
Divider,
9-
Stack,
107
} from "@patternfly/react-core"
118

129
import Result from "../transcript/Result"
10+
import BreadcrumbBarForBlockId from "../breadcrumbs/BreadcrumbBarForBlockId"
1311

1412
type Props = {
1513
block: import("../../helpers").PdlBlockWithContext
1614
}
1715

18-
export default function SummaryTabContent({ block }: Props) {
19-
const { hash } = useLocation()
20-
16+
export default function ContextTabContent({ block }: Props) {
2117
return (
2218
<DescriptionList>
23-
{block.context.map((c, idx, A) => (
24-
<>
25-
<DescriptionListGroup key={idx}>
26-
<DescriptionListTerm>
27-
{c.role[0].toUpperCase() + c.role.slice(1)}
28-
</DescriptionListTerm>
29-
<DescriptionListDescription>
30-
<Stack>
31-
<Result result={c.content} term="" />
32-
{c.defsite && (
33-
<Button variant="link" isInline>
34-
<Link
35-
to={`?detail&type=block&id=${encodeURIComponent(c.defsite)}${hash}`}
36-
>
37-
Where is this value defined?
38-
</Link>
39-
</Button>
40-
)}
41-
</Stack>
42-
</DescriptionListDescription>
43-
</DescriptionListGroup>
19+
{block.context.flatMap((c, idx, A) => [
20+
<DescriptionListGroup key={idx + ".value"}>
21+
<DescriptionListTerm>
22+
{c.role[0].toUpperCase() + c.role.slice(1)}
23+
</DescriptionListTerm>
24+
<DescriptionListDescription>
25+
<Result result={c.content} term="" />
26+
</DescriptionListDescription>
27+
</DescriptionListGroup>,
28+
29+
<DescriptionListGroup key={idx + ".defsite"}>
30+
<DescriptionListTerm>
31+
Where was this value defined?
32+
</DescriptionListTerm>
33+
<DescriptionListDescription>
34+
{c.defsite && <BreadcrumbBarForBlockId id={c.defsite} />}
35+
</DescriptionListDescription>
36+
</DescriptionListGroup>,
4437

45-
{idx < A.length - 1 && <Divider />}
46-
</>
47-
))}
38+
idx < A.length - 1 && <Divider key={idx + ".divider"} />,
39+
])}
4840
</DescriptionList>
4941
)
5042
}

‎pdl-live-react/src/view/transcript/Def.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,20 @@ import { useLocation, useNavigate } from "react-router"
44
import BreadcrumbBarItem from "../breadcrumbs/BreadcrumbBarItem"
55

66
type Props = {
7-
block: import("../../helpers").NonScalarPdlBlock
7+
/** Block id */
8+
id: string
9+
810
def: string
911
value?: import("../../pdl_ast").PdlBlock
1012
supportsDrilldown?: boolean
1113
}
1214

1315
/** One variable definition */
1416
export default function Def(props: Props) {
15-
const { block, def, value, supportsDrilldown = true } = props
17+
const { id, def, value, supportsDrilldown = true } = props
1618

1719
const navigate = useNavigate()
1820
const { hash } = useLocation()
19-
const { id } = block
2021
const drilldown = useCallback(
2122
(evt: import("react").MouseEvent) => {
2223
evt.stopPropagation()

‎pdl-live-react/src/view/transcript/TranscriptItemDef.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,12 @@ export default function TranscriptItemDef({ block, def: key, value }: Props) {
3737
const breadcrumbs = useMemo(
3838
() => (
3939
<BreadcrumbBar>
40-
<Def block={block} def={key} value={value} supportsDrilldown={false} />
40+
<Def
41+
id={block.id ?? ""}
42+
def={key}
43+
value={value}
44+
supportsDrilldown={false}
45+
/>
4146
</BreadcrumbBar>
4247
),
4348
[block, key, value],

0 commit comments

Comments
 (0)