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 | 49x 61x 62x | import { FileText } from "lucide-react";
import { CSVUploaderButton } from "@/pages/flowsheet-page/multi-steady-state/CSVUploader";
import MssDataViewer from "@/pages/flowsheet-page/multi-steady-state/MssViewer";
import { DataColumnRead, ScenarioRead } from "../../../../../api/apiStore.gen";
import { DownloadTagMappingsButton } from "../../../multi-steady-state/DownloadTagMappings";
import { PreviewData } from "./PreviewData";
// Example component function
const MssDataPanel = ({
handleFileUpload,
hasFile,
clearFile,
scenario,
dataColumns = [],
}: {
scenario: ScenarioRead;
handleFileUpload: (file: File) => void;
hasFile: boolean;
clearFile: () => void;
dataColumns: DataColumnRead[];
}) => (
<div
className=" p-2 my-2 rounded-lg bg-muted"
aria-label="scn-multiple-container"
>
<div className="flex flex-row items-center border border-input rounded-md p-1 w-full gap-0">
<CSVUploaderButton
onUpload={handleFileUpload}
buttonText="Choose File"
icon={<FileText className="w-4 h-4" />}
/>
<PreviewData
hasFile={hasFile}
onRemove={clearFile}
fileName={scenario.Uploaded_fileName ? "View Data" : "No file chosen"}
optimization={scenario}
/>
<div className="flex-grow flex justify-end">
<DownloadTagMappingsButton />
</div>
</div>
{hasFile && (
<div className="border mt-2">
{dataColumns.map((dataColumn) => (
<div
key={dataColumn.id}
className="rounded-lg bg-muted shadow-sm p-2 my-1"
>
<MssDataViewer dataColumn={dataColumn} />
</div>
))}
</div>
)}
</div>
);
export default MssDataPanel;
|