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 | 81x 81x 81x 81x 81x 81x 81x 81x 81x 4x 77x 42x 161x 39x 77x 233x 77x 117x 77x 236x 77x 55x 21x 33x 143x 98x 24x 77x 101x 21x 77x 21x 77x 110x 209x 352x | import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import React, { useState } from "react";
import { Button } from "@/ahuora-design-system/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogTitle,
DialogTrigger,
} from "@/ahuora-design-system/ui/dialog";
import {
MlModelRead,
useCoreMlcolumnmappingListQuery,
} from "@/api/apiStore.gen";
import { useSearchParam } from "@/hooks/searchParams";
import { cn } from "@/lib/utils";
import ColumnMappings from "./ColumnMappings";
import ProgressBar from "./ProgressBar";
import SuccesslyTrained from "./SuccesslyTrained";
import Train from "./Train";
import TrainingFailed from "./TrainingFailed";
import UploadCSV, { type CsvHeaderPreviewState } from "./UploadCSV";
export default function MachineLearningData({
open,
onOpenChange,
hideTrigger = false,
model,
}: {
open?: boolean;
onOpenChange?: (open: boolean) => void;
hideTrigger?: boolean;
model: MlModelRead;
}) {
const [objectId] = useSearchParam("object");
const [csvHeaderPreview, setCsvHeaderPreview] =
useState<CsvHeaderPreviewState | null>(null);
const simulationObject = +(objectId || 0);
const { data: columnMappings } = useCoreMlcolumnmappingListQuery();
const progress = model?.progress ?? 0;
const modelId = model?.id ?? 0;
const step = model?.progress ?? 0;
Iif (!model || !columnMappings) return null;
const contentByProgress: Record<number, React.ReactNode> = {
0: (
<UploadCSV
model={model}
simulationObject={simulationObject}
onCsvHeaderPreviewChange={setCsvHeaderPreview}
/>
),
1: (
<>
<ColumnMappings
modelId={modelId}
simulationObject={simulationObject}
csvFileName={model?.csv_file_name}
csvHeaderPreview={csvHeaderPreview}
/>
</>
),
2: <Train />,
3: <SuccesslyTrained model={model} />,
4: <TrainingFailed />,
};
const dialogContent = contentByProgress[step];
return (
<div className="flex w-full">
<Dialog key={modelId} open={open} onOpenChange={onOpenChange}>
<div className="w-full flex justify-center p-4">
{!hideTrigger && (
<DialogTrigger asChild>
<Button>{step !== 0 ? "View" : "Set-up"}</Button>
</DialogTrigger>
)}
</div>
<DialogContent
preventDefault
className={cn(
"flex w-[calc(100vw-2rem)] max-w-[880px] flex-col",
progress === 3 ? "h-[78vh] max-h-[860px]" : "h-[65%]",
)}
onInteractOutside={(event) => event.preventDefault()}
>
<VisuallyHidden>
<DialogTitle />
</VisuallyHidden>
<VisuallyHidden>
<DialogDescription />
</VisuallyHidden>
<ProgressBar progress={progress} />
{dialogContent}
</DialogContent>
</Dialog>
</div>
);
}
|