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 | 1787x 1787x 1787x 1787x 1x 1787x 1787x 1787x | import FlowsheetSurface from "@/pages/flowsheet-page/flowsheet/Canvas/FlowsheetSurface";
import { useResizable } from "react-resizable-layout";
import { useLocalStorage, useWindowSize } from "usehooks-ts";
import { useSearchParam } from "../../hooks/searchParams";
import ScenarioResult from "./dynamics/ScenarioResult";
import FlowsheetObjectsContent from "./flowsheet/LeftSideBar/FlowsheetObjectsContent";
import { ContentTypes } from "./flowsheet/LeftSideBar/LeftSideBarTabDefinitions";
import { ScenarioList } from "./flowsheet/LeftSideBar/Scenarios/ScenarioList";
import TasksPanel from "./flowsheet/LeftSideBar/TasksPanel";
import UnitOpContent from "./flowsheet/LeftSideBar/UnitOpContent";
import ResizableHandle from "./flowsheet/ResizableHandle";
import { ResizablePanel } from "./flowsheet/Resizables";
import RightSideBarData from "./flowsheet/PropertiesSidebar/ObjectDetailsPanel";
import PinchAnalysis from "./pinch-analysis/PinchAnalysis";
import { ProcessGraphLeftTabContent } from "./process-graph/LeftTabContent";
export default function FlowsheetPage() {
const [tab, setTab] = useSearchParam("content", ContentTypes.unitOps);
const { width = 0 } = useWindowSize();
const [size, setSize] = useLocalStorage("panelsize", 370);
const resizable = useResizable({
axis: "x",
initial: size,
min: 270,
max: 1200,
onResizeEnd: ({ position }) => setSize(position),
});
const LeftSideBar =
tab == ContentTypes.pinch ? (
<PinchAnalysis />
) : tab == ContentTypes.solverLogs ? (
<TasksPanel />
) : tab == ContentTypes.unitOps ? (
<UnitOpContent />
) : tab == ContentTypes.scenarios ? (
<ScenarioList />
) : tab == ContentTypes.objectDetails ? (
<RightSideBarData />
) : tab == ContentTypes.pGraph ? (
<ProcessGraphLeftTabContent />
) : tab == ContentTypes.objectList ? (
<FlowsheetObjectsContent />
) : tab == ContentTypes.flowsheet ? null : (
console.warn(
"Unexpected tab/ ContentType:",
tab,
"Please add it to FlowsheetPage.tsx or CONTENT_MAP",
)
);
// Calculate middle panel width
const middleWidth = !LeftSideBar
? width - 55 // 55 for the left sidebar tabs
: width - resizable.position - 5 - 55; // 5 for the handle bar size, 55 for the left sidebar tabs
return (
<>
{LeftSideBar && (
<>
<ResizablePanel width={resizable.position}>
{LeftSideBar}
</ResizablePanel>
<ResizableHandle
isDragging={resizable.isDragging}
{...resizable.separatorProps}
id="left-sidebar-handle"
></ResizableHandle>
</>
)}
<div className="h-full flex flex-col relative">
<FlowsheetSurface width={middleWidth} />
<ScenarioResult />
</div>
</>
);
}
|