Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 | 62x 62x 5876x 5876x 5876x 5876x 5x 5x 5x 5x 5x 5x 7134x 7134x 7134x 7134x 7134x 7134x 7134x 7134x 7134x 7134x 5873x | import { useReactFlow } from "@xyflow/react";
import { MoreHorizontal } from "lucide-react";
import { useSearchParams } from "react-router-dom";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/ahuora-design-system/ui/dropdown-menu";
import { Separator } from "@/ahuora-design-system/ui/separator";
import type { Breadcrumbs } from "@/api/apiStore.gen";
import { useBreadcrumbs } from "@/hooks/flowsheetObjects";
import { ContentTypes } from "../LeftSideBar/LeftSideBarTabDefinitions";
const MAX_VISIBLE_BREADCRUMBS = 8; // Total visible breadcrumbs
const CONTEXT_AROUND_SELECTED = 3; // Number of items to show before and after the selected breadcrumb
const BreadcrumbButton = ({
crumb,
index,
}: {
crumb: Breadcrumbs;
index: number;
}) => {
const [searchParams, setSearchParams] = useSearchParams();
const label = crumb.name;
const isSelected = crumb.groupId === +searchParams.get("parentGroup")!;
const reactFlow = useReactFlow();
const handleBreadcrumbClick = (crumb: Breadcrumbs) => {
const newSearchParams = new URLSearchParams(searchParams);
newSearchParams.set("object", crumb.simulationObjectId.toString());
newSearchParams.set("parentGroup", crumb.groupId.toString());
newSearchParams.set("content", ContentTypes.objectDetails);
setSearchParams(newSearchParams);
// reactFlow.fitView();
};
return (
<div
className={`flex items-center gap-1 px-2 py-1 cursor-pointer rounded-md ${
isSelected ? "bg-secondary" : "hover:bg-secondary"
}`}
onClick={() => handleBreadcrumbClick(crumb)}
>
<div
className={`h-1.5 w-1.5 rotate-45 ${index === 0 ? "bg-sky-500" : "bg-emerald-500"}`}
/>
<span
className="text-xs font-normal text-card-foreground truncate max-w-[100px]"
title={label}
>
{label?.length > 10 ? `${label?.slice(0, 10)}...` : label}
</span>
</div>
);
};
const BreadCrumbs = () => {
const breadcrumbs = useBreadcrumbs();
const [searchParams] = useSearchParams();
const currentGroupId = +(searchParams.get("parentGroup") || 0);
const showDropdown = breadcrumbs.length > MAX_VISIBLE_BREADCRUMBS;
const currentIndex = breadcrumbs.indexOf(currentGroupId);
let visibleBreadcrumbs: Breadcrumbs[] = [];
if (!showDropdown) {
visibleBreadcrumbs = breadcrumbs;
} else {
// Always include the first and last breadcrumbs
const firstBreadcrumb = breadcrumbs[0];
const lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1];
// Calculate range around the selected breadcrumb
const startIndex = Math.max(1, currentIndex - CONTEXT_AROUND_SELECTED); // Start after the first breadcrumb
const endIndex = Math.min(
breadcrumbs.length - 1,
currentIndex + CONTEXT_AROUND_SELECTED + 1,
); // End before the last breadcrumb
const visibleRange = breadcrumbs.slice(startIndex, endIndex);
// Ensure breadcrumbs fit within the max limit, including first and last
visibleBreadcrumbs = [firstBreadcrumb, ...visibleRange, lastBreadcrumb];
// If too many breadcrumbs, adjust by trimming the middle
if (visibleBreadcrumbs.length > MAX_VISIBLE_BREADCRUMBS) {
const excess = visibleBreadcrumbs.length - MAX_VISIBLE_BREADCRUMBS;
const middleIndex = Math.floor(visibleRange.length / 2);
visibleBreadcrumbs = [
firstBreadcrumb,
...visibleRange.slice(0, middleIndex - Math.ceil(excess / 2)),
...visibleRange.slice(middleIndex + Math.floor(excess / 2)),
lastBreadcrumb,
];
}
}
// Ensure no duplicates
visibleBreadcrumbs = Array.from(new Set(visibleBreadcrumbs));
const hiddenBreadcrumbs = !showDropdown
? []
: visibleBreadcrumbs.filter((crumb) => !visibleBreadcrumbs.includes(crumb));
return (
<nav
aria-label="Breadcrumb"
className="grid grid-cols-1 gap-2 p-2 rounded-md bg-card shadow border select-none"
>
<div className="flex flex-wrap items-center gap-2">
{visibleBreadcrumbs.map((crumb, index) => (
<div key={index} className="flex items-center">
<BreadcrumbButton crumb={crumb} index={index} />
{index < visibleBreadcrumbs.length - 1 && (
<>
{hiddenBreadcrumbs.length > 0 &&
index ===
visibleBreadcrumbs.length - CONTEXT_AROUND_SELECTED - 1 ? (
<DropdownMenu>
<DropdownMenuTrigger className="px-1 hover:bg-muted rounded">
<MoreHorizontal className="h-4 w-4 text-muted-foreground" />
</DropdownMenuTrigger>
<DropdownMenuContent
align="start"
className="bg-card border"
>
{hiddenBreadcrumbs.map((hiddenCrumb, hiddenIndex) => (
<DropdownMenuItem key={hiddenCrumb}>
<BreadcrumbButton crumb={hiddenCrumb} index={-1} />
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
) : (
<Separator orientation="vertical" className="bg-muted" />
)}
</>
)}
</div>
))}
</div>
</nav>
);
};
export default BreadCrumbs;
|