All files / src/pages/flowsheet-page/pinch-analysis PinchGraphDashboard.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Spinner } from "@/ahuora-design-system/ui/spinner";
import { PinchGraphSetRead } from "@/api/apiStore.gen";
import { useCurrentPinchOutputs } from "@/hooks/PinchHooks";
import PinchGraph from "./PinchGraph";
 
export default function PinchGraphDashboard() {
  const { outputs, isLoading, isError } = useCurrentPinchOutputs();
  const graphHeight = 300;
 
  if (isLoading) {
    return (
      <div className="flex justify-center items-center h-screen">
        <Spinner />
      </div>
    );
  }
 
  if (isError || !outputs?.length) {
    return <div>Error loading options data.</div>;
  }
 
  const graphSets: PinchGraphSetRead[] = outputs[0].graph_sets ?? [];
 
  return (
    <div className="mt-2 mb-20 mr-4 h-full">
      <div className={"grid grid-flow-row grid-cols-3 gap-8"}>
        {graphSets.map((graphSet) =>
          (graphSet.graphs ?? []).map((graph) => (
            <PinchGraph
              key={graph.id}
              graph={graph}
              name={graphSet.name}
              height={graphHeight}
            />
          )),
        )}
      </div>
    </div>
  );
}