import React from "react"; import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import { Card, CardContent, Grow } from "@material-ui/core"; import { useState } from "state/State"; import { StepperState, StateType, Models, DatasetCategory, } from "state/StateTypes"; import NNFFToolbox from "components/toolbox/NNFFToolbox"; import KNNToolbox from "components/toolbox/KNNToolbox"; import DataPreview from "components/toolbox/DataPreview"; import LinRegToolbox from "components/toolbox/LinRegToolbox"; import { datasetMetadata } from "static/datasets/metadata"; const useStyles = makeStyles((theme) => ({ root: { width: 296, }, dataRoot: { width: "96%", }, headerText: { paddingLeft: theme.spacing(0), paddingTop: theme.spacing(7), paddingBottom: theme.spacing(1), fontWeight: "600", }, dataHeaderText: { paddingLeft: theme.spacing(0), paddingTop: theme.spacing(1), paddingBottom: theme.spacing(1), fontWeight: "600", }, card: { marginTop: "4px", height: "100%", border: "none", }, cardContent: { padding: 2, }, })); const getToolboxContent = (state: StateType) => { if (state.stepper_state === StepperState.VISUALIZE) { switch (state.model) { case Models.LINEAR_REGRESSION: return <LinRegToolbox />; case Models.NEURAL_NETWORK_FF: return <NNFFToolbox />; case Models.KNN: return <KNNToolbox />; default: return null; } } if (state.stepper_state === StepperState.DATASET) { return <DataPreview />; } return null; }; export default function ToolboxContainer({ getIsShown }) { const classes = useStyles(); const { state } = useState(); return ( <Grow in={getIsShown()}> <div className={ state.stepper_state === StepperState.VISUALIZE ? classes.root : classes.dataRoot } > <Typography className={ state.stepper_state === StepperState.VISUALIZE ? classes.headerText : classes.dataHeaderText } variant="h5" > {state.stepper_state === StepperState.VISUALIZE ? "Toolbox" : state.stepper_state === StepperState.DATASET && state.sample_dataset != null ? "Dataset Preview - " + datasetMetadata[state.sample_dataset].title : null} </Typography> <Card className={classes.card} variant="outlined"> <CardContent className={classes.cardContent}> {getToolboxContent(state)} </CardContent> </Card> </div> </Grow> ); }