All files / src/pages/flowsheet-page/pinch-analysis PinchAnalysis.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8x
8x
8x
 
8x
 
 
 
8x
1x
 
 
8x
 
 
 
 
 
 
8x
 
 
 
 
 
 
 
 
 
 
 
 
import { useSearchParam } from "@/hooks/searchParams";
import UtilityInputTable from "./UtilityInput";
import TargetsPage from "./TargetsPage";
import PinchTabs from "./PinchTabs";
import { useCallback, useState } from "react";
import { ResizablePanel } from "../flowsheet/Resizables";
import SegmentTable from "./SegmentTable";
import { PinchLeftSideBar } from "../flowsheet/LeftSideBar/PinchLeftSideBar";
 
 
function EmptyTab({ name }: { name: string }) {
  return <div className="">{name}</div>;
}
 
export default function PinchAnalysis() {
    const [tab] = useSearchParam("pinchTab", "streams");
    const [editing, setEditing] = useState(false)
    const [excludedSegments, setExcludedSegments] = useState<number[]>([]);
 
  const handleEdit = useCallback(() => {
    setEditing(true);
  }, []);
 
  const handleNotEdit = useCallback(() => {
    setEditing(false);
  }, []);
 
    const tabs = {
        "streams": <SegmentTable setExcludedSegments={setExcludedSegments} />,
        "utilities": <UtilityInputTable handleEdit={handleEdit} />,
        "targets": <TargetsPage />,
        "hen": <EmptyTab name="Hen Design" />,
    }
 
  return (
    <>
      <PinchLeftSideBar></PinchLeftSideBar>
      <ResizablePanel.MiddlePanel>
        <div className="h-full p-4 flex flex-col gap-4 overflow-hidden">
          <PinchTabs handleNotEdit={handleNotEdit} editing={editing} excludedSegments={excludedSegments} setExcludedSegments={setExcludedSegments} />
          {tabs[tab!]}
        </div>
      </ResizablePanel.MiddlePanel>
    </>
  );
}