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 | 1x 1x 3x 3x 3x 3x 1x 1x 7x 2x 1x 4x 5x 7x 76x 2x 2x 2x 1x 2x 2x | 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 { useSearchParam } from "@/hooks/searchParams";
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={(update) => {}}
onOptimisticUpdate={(update) => {}}
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>
);
};
const processGraphTabContent = {
Settings: {
ariaLabel: "Graph settings",
Content: <Settings />,
},
Structures: {
ariaLabel: "Graph views",
Content: <View />,
},
};
// Process Graph Component
export function ProcessGraphLeftTabContent() {
const [currTab, setTab] = useState("Structures");
const tabs = ["Structures", "Settings"];
return (
<ScrollArea className="w-full flex flex-col flex-1 mx-2">
<Tabs
defaultValue="Structures"
onValueChange={(value) => setTab(value)}
className="w-full h-full"
>
<div className="flex flex-col pt-2">
<TabsList className="flex flex-row bg-muted text-secondary-foreground rounded-t-lg shadow-sm p-1">
{tabs.map((tab, index) => (
<TabsTrigger key={index} value={tab}>
{tab}
</TabsTrigger>
))}
</TabsList>
{tabs.map((tab, index) => (
<TabsContent
key={index}
value={tab}
aria-label={processGraphTabContent[tab].ariaLabel}
>
{processGraphTabContent[tab].Content}
</TabsContent>
))}
</div>
</Tabs>
</ScrollArea>
);
}
|