diff --git a/src/assets/index.scss b/src/assets/index.scss index 88cd700..5e1c736 100644 --- a/src/assets/index.scss +++ b/src/assets/index.scss @@ -46,4 +46,15 @@ code { background-color: rgb(255, 255, 255); border: solid 1px #e9e9e9; } +} + +#upload-model-note { + a { + color: #3f51b5; + text-decoration: none; + + &:visited { + color: #3f51b5; + } + } } \ No newline at end of file diff --git a/src/components/MenuBar.js b/src/components/MenuBar.js index 9a69064..6c70f59 100644 --- a/src/components/MenuBar.js +++ b/src/components/MenuBar.js @@ -322,7 +322,7 @@ function MenuBar(props) { Note - + Download the example{' '} { + res.data.forEach((agentInfo) => { tempModelList[game.game].push(agentInfo.fields.name); - }) + }); } setModelList(tempModelList); setDefaultModelList(tempDefaultModelList); @@ -65,16 +66,16 @@ function LeaderBoard () { let { type, name } = qs.parse(window.location.search); // default value if (!type) { - type = "game"; + type = 'game'; } if (!name) { - name = "leduc-holdem"; + name = 'leduc-holdem'; } let requestUrl = `${apiUrl}/tournament/`; if (type === 'game') { - requestUrl += `query_agent_payoff?name=${name}&elements_every_page=${rowsPerPage}&page_index=${page}` + requestUrl += `query_agent_payoff?name=${name}&elements_every_page=${rowsPerPage}&page_index=${page}`; } else if (type === 'agent') { - requestUrl += `query_game?agent0=${name}&elements_every_page=${rowsPerPage}&page_index=${page}` + requestUrl += `query_game?agent0=${name}&elements_every_page=${rowsPerPage}&page_index=${page}`; } console.log(requestUrl); @@ -83,17 +84,23 @@ function LeaderBoard () { const res = await axios.get(requestUrl); console.log(res); if (type === 'game') { - setRows(res.data.data.map((resRow, index) => { - const rank = rowsPerPage * page + index + 1; - return createLeaderBoardData(resRow, rank); - })); + setRows( + res.data.data.map((resRow, index) => { + const rank = rowsPerPage * page + index + 1; + return createLeaderBoardData(resRow, rank); + }), + ); } else if (type === 'agent') { - setRows(res.data.data.map((resRow) => {return createData(resRow);})); + setRows( + res.data.data.map((resRow) => { + return createData(resRow); + }), + ); } - setRowsTotal(res.data.total_row) + setRowsTotal(res.data.total_row); } fetchData(); - }, [requestUrl, page, rowsPerPage, type]) + }, [requestUrl, page, rowsPerPage, type]); return (
@@ -102,18 +109,25 @@ function LeaderBoard () { modelList={modelList} reloadMenu={reloadMenu} setReloadMenu={setReloadMenu} - resetPagination={() => {setPage(0); setRowsPerPage(initRowsPerPage);}} + resetPagination={() => { + setPage(0); + setRowsPerPage(initRowsPerPage); + }} /> -
-
+
+
{setPage(q)}} + setPage={(q) => { + setPage(q); + }} rowsPerPage={rowsPerPage} - setRowsPerPage={(q) => {setRowsPerPage(q)}} + setRowsPerPage={(q) => { + setRowsPerPage(q); + }} rowsTotal={rowsTotal} type={type} reloadMenu={reloadMenu} @@ -122,7 +136,7 @@ function LeaderBoard () {
- ) + ); } function createData(resData) { @@ -133,7 +147,7 @@ function createData(resData) { agent1: resData.fields.agent1, win: resData.fields.win ? 'Win' : 'Lose', payoff: resData.fields.payoff, - replayUrl: `/replay/${resData.fields.name}?name=${resData.fields.name}&agent0=${resData.fields.agent0}&agent1=${resData.fields.agent1}&index=${resData.fields.index}` + replayUrl: `/replay/${resData.fields.name}?name=${resData.fields.name}&agent0=${resData.fields.agent0}&agent1=${resData.fields.agent1}&index=${resData.fields.index}`, }; } @@ -141,8 +155,8 @@ function createLeaderBoardData(resData, rank) { return { rank: rank, agent: resData.agent0, - payoff: resData.payoff - } + payoff: resData.payoff, + }; } const agentHeadCells = [ @@ -151,13 +165,13 @@ const agentHeadCells = [ { id: 'agent1', numeric: false, disablePadding: false, label: 'Opponent Agent' }, { id: 'win', numeric: false, disablePadding: false, label: 'Result' }, { id: 'payoff', numeric: false, disablePadding: false, label: 'Payoff' }, - { id: 'replay', numeric: false, disablePadding: false, label: 'Replay' } + { id: 'replay', numeric: false, disablePadding: false, label: 'Replay' }, ]; const leaderBoardHeadCells = [ { id: 'rank', numeric: false, disablePadding: false, label: 'Rank' }, { id: 'agent', numeric: false, disablePadding: false, label: 'Agent' }, - { id: 'payoff', numeric: false, disablePadding: false, label: 'Payoff' } + { id: 'payoff', numeric: false, disablePadding: false, label: 'Payoff' }, ]; const StyledTableCell = withStyles((theme) => ({ @@ -165,12 +179,12 @@ const StyledTableCell = withStyles((theme) => ({ backgroundColor: '#373538', color: theme.palette.common.white, fontWeight: 600, - fontSize: 15 - } + fontSize: 15, + }, }))(TableCell); function EnhancedTableHead(props) { - const {headCells} = props; + const { headCells } = props; return ( @@ -193,35 +207,40 @@ const useToolbarStyles = makeStyles((theme) => ({ paddingLeft: theme.spacing(2), paddingRight: theme.spacing(1), minHeight: 52, - justifyContent: 'space-between' + justifyContent: 'space-between', }, button: {}, highlight: theme.palette.type === 'light' ? { - color: theme.palette.secondary.main, - backgroundColor: lighten(theme.palette.secondary.light, 0.85), - } + color: theme.palette.secondary.main, + backgroundColor: lighten(theme.palette.secondary.light, 0.85), + } : { - color: theme.palette.text.primary, - backgroundColor: theme.palette.secondary.dark, - }, + color: theme.palette.text.primary, + backgroundColor: theme.palette.secondary.dark, + }, title: { flex: '1 1 100%', }, capitalize: { - textTransform: 'capitalize' - } + textTransform: 'capitalize', + }, + formControl: { + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), + minWidth: 120, + }, })); const EnhancedTableToolbar = (props) => { const { routeInfo, defaultModelList, reloadMenu, setReloadMenu } = props; - console.log('defaultModelList', defaultModelList) + console.log('defaultModelList', defaultModelList); const classes = useToolbarStyles(); let name = ''; if (routeInfo.type === 'game') { - const foundItem = gameList.find(game => { + const foundItem = gameList.find((game) => { return game.game === routeInfo.name; }); name = foundItem.dispName; @@ -232,89 +251,146 @@ const EnhancedTableToolbar = (props) => { const history = useHistory(); const launchTournamentSuccessMessage = () => { - return Successfully launched tournament, Click here to refresh page - } + return ( + + Successfully launched tournament, Click here to + refresh page + + ); + }; const FunctionalButton = () => { const [buttonLoading, setButtonLoading] = React.useState(false); - if (routeInfo.type === 'game'){ + const [dialogOpen, setDialogOpen] = React.useState(false); + const [evalNum, setEvalNum] = React.useState(200); + if (routeInfo.type === 'game') { const handleLaunchTournament = (gameName) => { - // todo: customize eval num setButtonLoading(true); - axios.get(`${apiUrl}/tournament/launch?num_eval_games=200&name=${gameName}`) - .then(res => { - setTimeout(() => {setButtonLoading(false)}, 250); + setDialogOpen(false); + axios + .get(`${apiUrl}/tournament/launch?num_eval_games=${evalNum}&name=${gameName}`) + .then((res) => { + setTimeout(() => { + setButtonLoading(false); + }, 250); Message({ message: launchTournamentSuccessMessage(), - type: "success", + type: 'success', showClose: true, - duration: 7000 + duration: 7000, }); }) - .catch(err => { + .catch((err) => { console.log(err); Message({ - message: "Failed to launch tournament", - type: "error", + message: 'Failed to launch tournament', + type: 'error', showClose: true, }); - setTimeout(() => {setButtonLoading(false)}, 250); - }) - } + setTimeout(() => { + setButtonLoading(false); + }, 250); + }); + }; + + const handleInputChange = (e) => { + setEvalNum(e.target.value); + }; + return (
- + + Set Number Of Evaluation Times + + handleInputChange(e)} + fullWidth + /> + + + + + +
- ) - } - else if (routeInfo.type ==='agent') { + ); + } else if (routeInfo.type === 'agent') { const delButtonDisabled = defaultModelList.includes(routeInfo.name); const handleDelModel = (agentName) => { setButtonLoading(true); - axios.get(`${apiUrl}/tournament/delete_agent?name=${agentName}`) - .then(res => { - setTimeout(() => {setButtonLoading(false)}, 250); + axios + .get(`${apiUrl}/tournament/delete_agent?name=${agentName}`) + .then((res) => { + setTimeout(() => { + setButtonLoading(false); + }, 250); Message({ - message: "Successfully deleted model", - type: "success", - showClose: true - }); - setReloadMenu(reloadMenu+1); - history.push(`/leaderboard?type=game&name=leduc-holdem`); - }) - .catch(err => { - Message({ - message: "Failed to delete model", - type: "error", + message: 'Successfully deleted model', + type: 'success', showClose: true, }); - setTimeout(() => {setButtonLoading(false)}, 250); + setReloadMenu(reloadMenu + 1); + history.push(`/leaderboard?type=game&name=leduc-holdem`); }) + .catch((err) => { + Message({ + message: 'Failed to delete model', + type: 'error', + showClose: true, + }); + setTimeout(() => { + setButtonLoading(false); + }, 250); + }); }; return (
-
- ) + ); } - } + }; return ( - + - - LeaderBoards - + LeaderBoards {routeInfo.type} @@ -328,8 +404,8 @@ const EnhancedTableToolbar = (props) => { }; EnhancedTableToolbar.propTypes = { - routeInfo: PropTypes.object.isRequired -} + routeInfo: PropTypes.object.isRequired, +}; const useStyles = makeStyles((theme) => ({ root: { @@ -361,23 +437,13 @@ const LeaderBoardTableContent = (props) => { const emptyRows = rowsPerPage - Math.min(rowsPerPage, rowsTotal - page * rowsPerPage); return ( - - +
+ {tableRows.map((row, index) => { const labelId = `enhanced-table-checkbox-${index}`; return ( - + {row.rank} @@ -394,8 +460,8 @@ const LeaderBoardTableContent = (props) => {
- ) -} + ); +}; const AgentTableContent = (props) => { const { tableRows, rowsPerPage, page, rowsTotal, headCells } = props; @@ -403,23 +469,13 @@ const AgentTableContent = (props) => { const emptyRows = rowsPerPage - Math.min(rowsPerPage, rowsTotal - page * rowsPerPage); return ( - - +
+ {tableRows.map((row, index) => { const labelId = `enhanced-table-checkbox-${index}`; return ( - + {row.id} @@ -427,7 +483,16 @@ const AgentTableContent = (props) => { {row.agent1} {row.win} {row.payoff} - + + + + + ); })} @@ -439,16 +504,22 @@ const AgentTableContent = (props) => {
- ) -} + ); +}; const EnhancedTable = (props) => { - - const { tableRows, routeInfo, - rowsPerPage, page, setPage, - setRowsPerPage, rowsTotal, - type, defaultModelList, - reloadMenu, setReloadMenu + const { + tableRows, + routeInfo, + rowsPerPage, + page, + setPage, + setRowsPerPage, + rowsTotal, + type, + defaultModelList, + reloadMenu, + setReloadMenu, } = props; const classes = useStyles(); @@ -463,15 +534,36 @@ const EnhancedTable = (props) => { let tableContent = ''; if (type === 'game') { - tableContent = ; + tableContent = ( + + ); } else if (type === 'agent') { - tableContent = ; + tableContent = ( + + ); } return (
- + {tableContent} {
); -} +}; EnhancedTable.propTypes = { routeInfo: PropTypes.object.isRequired, - tableRows: PropTypes.array.isRequired -} + tableRows: PropTypes.array.isRequired, +}; export default LeaderBoard;