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 | 1x 1x 3x 3x 3x 3x 1x 1x 7x 2x 1x 4x 5x 7x 3x 3x 3x 3x 3x 1x 3x 4x 1x 4x 1x 3x 2x 4x 5x | import { useState } from "react";
import DebouncedInput from "@/ahuora-design-system/ui/debounced-input";
import { Label } from "@/ahuora-design-system/ui/label";
import { SelectableItem } from "@/ahuora-design-system/ui/selectable-item";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/ahuora-design-system/ui/tabs";
import { useFlowsheetProcessPaths } from "@/hooks/flowsheetObjects";
import { useFlowsheetRevisionPreview } from "@/hooks/flowsheetRevisionPreview";
import { useSearchParam } from "@/hooks/searchParams";
import { UnavailableRevisionOutput } from "@/pages/flowsheet-page/flowsheet/revisions/UnavailableRevisionOutput";
import { ScrollArea } from "../../../ahuora-design-system/ui/scroll-area";
/***
* Where all setting functionality is processed
* @returns Settings Display
*/
const Settings = () => {
// TODO: Turn this into an accordion when more setting options are needed.
// ATM we are only doing SSG but in the future there will be more
// e.g., problem settings, display settings.
return (
<div className="mx-4 py-3">
<Label htmlFor="pgraph-number-of-solutions">
Number of solutions displayed
</Label>
<DebouncedInput
value={10}
onUpdate={() => {}}
onOptimisticUpdate={() => {}}
id="pgraph-number-of-solutions"
/>
</div>
);
};
/**
*Where all solution views are processed
* @returns View Display
*/
const View = () => {
const processPaths = useFlowsheetProcessPaths();
const [, setSolutionParam] = useSearchParam("solution");
const renderElement = () => {
if (processPaths?.length === 0) {
return (
<div className="mx-4">
<p>No solutions found</p>
</div>
);
}
return processPaths?.map((path, index) => {
return (
<SelectableItem
key={index}
name={`Solution ${index + 1}`}
isSelected={false}
onClick={() => setSolutionParam(index)}
/>
);
});
};
return (
<div>
<SelectableItem
key={"all-solutions"}
name="All Solutions"
isSelected={false}
onClick={() => setSolutionParam(-1)}
/>
{renderElement()}
</div>
);
};
// Process Graph Component
export function ProcessGraphLeftTabContent() {
const [, setTab] = useState("Structures");
const { isPreview } = useFlowsheetRevisionPreview();
const tabs = ["Structures", "Settings"];
const processGraphTabContent = {
Settings: {
ariaLabel: "Graph settings",
Content: <Settings />,
},
Structures: {
ariaLabel: "Graph views",
Content: isPreview ? (
<UnavailableRevisionOutput message="P-Graph pathways are not retained in versions." />
) : (
<View />
),
},
};
return (
<ScrollArea className="flex min-w-0 flex-1 flex-col">
<Tabs
defaultValue="Structures"
onValueChange={(value) => setTab(value)}
className="w-full h-full"
>
<div className="flex min-w-0 flex-col px-2 pt-2">
<TabsList className="flex w-full flex-row bg-muted text-secondary-foreground rounded-t-lg shadow-sm p-1">
{tabs.map((tab, index) => (
<TabsTrigger key={index} value={tab} className="min-w-0 flex-1">
{tab}
</TabsTrigger>
))}
</TabsList>
{tabs.map((tab, index) => (
<TabsContent
key={index}
value={tab}
aria-label={processGraphTabContent[tab].ariaLabel}
>
{processGraphTabContent[tab].Content}
</TabsContent>
))}
</div>
</Tabs>
</ScrollArea>
);
}
|