Table: correct message when no results, HowTo: make user and challengeName dynamic and refactor
This commit is contained in:
parent
bd176e2329
commit
ed6aa86f85
@ -1,8 +1,11 @@
|
||||
import {API} from '../utils/globals';
|
||||
import KeyCloakService from '../services/KeyCloakService';
|
||||
|
||||
const getUser = (setDataState, setLoadingState) => {
|
||||
fetch(`${API}/user-info`)
|
||||
.then(response => response.text())
|
||||
fetch(`${API}/user-info`, {
|
||||
headers: {'Authorization': `Bearer ${KeyCloakService.getToken()}`}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
setDataState(data);
|
||||
|
||||
@ -1,377 +0,0 @@
|
||||
import React from 'react';
|
||||
import {FlexColumn, FlexRow, Grid, Svg} from '../../utils/containers';
|
||||
import {Body, H2, H3, Medium} from '../../utils/fonts';
|
||||
import CircleNumber from '../generic/CircleNumber';
|
||||
import CodeShell from '../generic/CodeShell';
|
||||
import cubeIcon from '../../assets/cube_ico.svg';
|
||||
import theme from '../../utils/theme';
|
||||
import {IS_MOBILE} from '../../utils/globals';
|
||||
import Media from 'react-media';
|
||||
|
||||
const HowTo = () => {
|
||||
return (
|
||||
<FlexColumn margin={IS_MOBILE() ? null : '64px 0 0 0'} padding={IS_MOBILE() ? '12px 20px' : null}
|
||||
gap={IS_MOBILE() ? '24px' : '48px'} alignmentX={IS_MOBILE() ? 'flex-start' : 'center'}
|
||||
maxWidth={IS_MOBILE() ? '668px' : 'none'}>
|
||||
<FlexColumn as='article' maxWidth='680px' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
|
||||
<H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
|
||||
Get challenge repo
|
||||
</H2>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='1'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
You need to create empty repo with name:
|
||||
<Medium as='span'>
|
||||
yourID/challengeName
|
||||
</Medium>
|
||||
</Body>
|
||||
</Grid>
|
||||
<CodeShell codeBlockIndex={1}
|
||||
commands={['git clone git@git.wmi.amu.edu.pl:YOURID/challenging-america-geo-prediction.git']}/>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='2'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
Pull gonito challenge repo
|
||||
</Body>
|
||||
</Grid>
|
||||
<CodeShell codeBlockIndex={2} commands={['cd challenging-america-geo-prediction',
|
||||
'git pull git://gonito.net/challenging-america-geo-prediction.git']}/>
|
||||
<Body as='p'>
|
||||
Make sure Gonito.net has access to your repo (e.g. by making it public).
|
||||
</Body>
|
||||
</FlexColumn>
|
||||
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} maxWidth='680px' alignmentX='flex-start'>
|
||||
<H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
|
||||
Work on your solution
|
||||
</H2>
|
||||
<Body as='p'>
|
||||
You need to generate your solution for the test set as <Medium as='span'>test-A/out.tsv</Medium>. It
|
||||
is also
|
||||
recommended to
|
||||
generate the output for the dev set <Medium as='span'>(dev-0/out.tsv)</Medium>.
|
||||
</Body>
|
||||
<Body as='p'>
|
||||
You can evaluate results for the dev set locally by <Medium as='span'>geval</Medium>.
|
||||
</Body>
|
||||
<FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'>
|
||||
<H3 as='h3'>
|
||||
Install geval
|
||||
</H3>
|
||||
<CodeShell codeBlockIndex={3}
|
||||
commands={['wget https://gonito.net/get/bin/geval', 'chmod u+x geval', './geval --help']}/>
|
||||
</FlexColumn>
|
||||
</FlexColumn>
|
||||
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} maxWidth='680px' alignmentX='flex-start'>
|
||||
<H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
|
||||
Push your solution
|
||||
</H2>
|
||||
<Body>
|
||||
Commit and push <Medium>out.tsv</Medium> files to your repo. It is also recommended to push your
|
||||
source codes along
|
||||
with <Medium>out.tsv</Medium> files.
|
||||
</Body>
|
||||
<CodeShell codeBlockIndex={3}
|
||||
commands={['cd challenging-america-geo-prediction',
|
||||
'git checkout -b my-brilliant-branch # switch to some other branch',
|
||||
'git add foo.py build.sh # add your source codes',
|
||||
/* eslint-disable */
|
||||
`git add gonito.yaml # it's a good practice to add metadata file, see below`]}/>
|
||||
<CodeShell codeBlockIndex={4}
|
||||
commands={['git add dev-0/out.tsv test-A/out.tsv # add your output files',
|
||||
/* eslint-disable */
|
||||
`git commit -m 'my brilliant solution'`,
|
||||
'git push origin my-brilliant-branch']}/>
|
||||
</FlexColumn>
|
||||
<FlexColumn as='article'>
|
||||
<FlexColumn alignmentX='flex-start' maxWidth='680px' gap={IS_MOBILE() ? '16px' : '24px'}>
|
||||
<H2 as='h2' margin='0 0 8px 0'>
|
||||
Submit solution to Gonito
|
||||
</H2>
|
||||
<FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'>
|
||||
<H3 as='h3'>
|
||||
Manual submission
|
||||
</H3>
|
||||
<Body>
|
||||
In case other methods fail, you can submit your solution manually — go to the <Medium>submit
|
||||
form</Medium>.
|
||||
</Body>
|
||||
</FlexColumn>
|
||||
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start' width='100%'>
|
||||
<H3 as='h3'>
|
||||
Integration with external repos
|
||||
</H3>
|
||||
<Body>
|
||||
If you use an external repo (e.g. at your own of Gitolite or at GitLab/GitHub), you can
|
||||
configure a webhook.
|
||||
</Body>
|
||||
</FlexColumn>
|
||||
</FlexColumn>
|
||||
<Media query='(max-width: 1224px)'>
|
||||
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'
|
||||
maxWidth='680px' width='100%'>
|
||||
<H3 as='h3' margin='24px 0 0 0'>
|
||||
Submission metadata
|
||||
</H3>
|
||||
<Body>
|
||||
Gonito can take the metadata (description, tags, parameters) of a submission from a
|
||||
number
|
||||
of
|
||||
sources (in order of precedence):
|
||||
</Body>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='1'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
The YAML files specified in the param-files field of the gonito.yaml file
|
||||
</Body>
|
||||
</Grid>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
only applicable for parameters
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
<Medium as='span'>gonito.yaml</Medium> will be always skipped even if matches a mask
|
||||
given in the
|
||||
param-files field,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
parameters blacklisted in the unwanted-params field of the gonito.yaml file will be
|
||||
discarded,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='2'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
<Medium as='span'>Gonito.yaml</Medium> file committed to the repository,
|
||||
</Body>
|
||||
</Grid>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
description given in the description field,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
tags given in tags field,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
parameters given in params field,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='3'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
Names of output files (only for parameters)
|
||||
</Body>
|
||||
</Grid>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
e.g. if the output file
|
||||
is <Medium as='span'>out-epochs=10</Medium>, <Medium
|
||||
as='span'>learning-rate=0.01</Medium>, then parameters
|
||||
<Medium as='span'>epochs=10</Medium> and <Medium
|
||||
as='span'>learning-rare=0.01</Medium> will be extracted;
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='4'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
Submission form (when submitting manually)
|
||||
</Body>
|
||||
</Grid>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='5'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
Git commit message
|
||||
</Body>
|
||||
</Grid>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
description taken from the first paragraph
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
tags taken from a line starting with <Medium as='span'>tags:</Medium>
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<CodeShell codeBlockIndex={5} disablePrompt
|
||||
commands={['description: This my brilliant solution',
|
||||
'tags:', '\t- neutral-network', '\t- left-to-right',
|
||||
'params:', '\tepochs: 10', '\tlearning-rate: 0.01',
|
||||
'unwanted-params:', '\t- model-file', '\t- vocab-file',
|
||||
'param-files:', '\t- “*.yaml”*', '\t- config/*.yaml*/',
|
||||
'links:', '\t- title: "Some external link"',
|
||||
'\t\s\surl: "https://example.org/xyz"', '\t- title: "Yet another link"',
|
||||
'\t\s\shttps://example.com/foo-bar-baz-123"',
|
||||
'\t- url: "https://example.net/bare-link-without-text']}/>
|
||||
</FlexColumn>
|
||||
</Media>
|
||||
<Media query='(min-width: 1225px)'>
|
||||
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} width='100%'>
|
||||
<FlexColumn alignmentX='flex-start' maxWidth='680px' gap='32px' margin='24px 0'>
|
||||
<H3 as='h3'>
|
||||
Submission metadata
|
||||
</H3>
|
||||
<Body>
|
||||
Gonito can take the metadata (description, tags, parameters) of a submission from a
|
||||
number
|
||||
of
|
||||
sources (in order of precedence):
|
||||
</Body>
|
||||
</FlexColumn>
|
||||
<FlexRow gap='24px'>
|
||||
<FlexColumn alignmentX='flex-start' maxWidth='422px' gap='20px'>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr'
|
||||
gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='1'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
The YAML files specified in the param-files field of the gonito.yaml file
|
||||
</Body>
|
||||
</Grid>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
only applicable for parameters
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
<Medium as='span'>gonito.yaml</Medium> will be always skipped even if matches a
|
||||
mask given
|
||||
in
|
||||
the
|
||||
param-files field,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
parameters blacklisted in the unwanted-params field of the gonito.yaml file will
|
||||
be
|
||||
discarded,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr'
|
||||
gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='2'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
<Medium as='span'>Gonito.yaml</Medium> file committed to the repository,
|
||||
</Body>
|
||||
</Grid>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
description given in the description field,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
tags given in tags field,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
parameters given in params field,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr'
|
||||
gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='3'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
Names of output files (only for parameters)
|
||||
</Body>
|
||||
</Grid>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
e.g. if the output file
|
||||
is <Medium as='span'>out-epochs=10</Medium>, <Medium
|
||||
as='span'>learning-rate=0.01</Medium>, then
|
||||
parameters
|
||||
<Medium as='span'>epochs=10</Medium> and <Medium
|
||||
as='span'>learning-rare=0.01</Medium> will be
|
||||
extracted;
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr'
|
||||
gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='4'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
Submission form (when submitting manually)
|
||||
</Body>
|
||||
</Grid>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr'
|
||||
gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='5'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
Git commit message
|
||||
</Body>
|
||||
</Grid>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
description taken from the first paragraph
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
tags taken from a line starting with <Medium as='span'>tags:</Medium>
|
||||
</Body>
|
||||
</FlexRow>
|
||||
</FlexColumn>
|
||||
<CodeShell codeBlockIndex={5} disablePrompt maxWidth='446px'
|
||||
commands={['description: This my brilliant solution',
|
||||
'tags:', '\t- neutral-network', '\t- left-to-right',
|
||||
'params:', '\tepochs: 10', '\tlearning-rate: 0.01',
|
||||
'unwanted-params:', '\t- model-file', '\t- vocab-file',
|
||||
'param-files:', '\t- “*.yaml”*', '\t- config/*.yaml*/',
|
||||
'links:', '\t- title: "Some external link"',
|
||||
'\t\s\surl: "https://example.org/xyz"', '\t- title: "Yet another link"',
|
||||
'\t\s\shttps://example.com/foo-bar-baz-123"',
|
||||
'\t- url: "https://example.net/bare-link-without-text']}/>
|
||||
</FlexRow>
|
||||
</FlexColumn>
|
||||
</Media>
|
||||
</FlexColumn>
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
|
||||
export default HowTo;
|
||||
35
src/components/specific_challenge/HowTo/HowTo.js
Normal file
35
src/components/specific_challenge/HowTo/HowTo.js
Normal file
@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
import {FlexColumn} from '../../../utils/containers';
|
||||
import {IS_MOBILE} from '../../../utils/globals';
|
||||
import Media from 'react-media';
|
||||
import GetChallengeRepo from './sections/GetChallengeRepo';
|
||||
import WorkOnYourSolution from './sections/WorkOnYourSolution';
|
||||
import PushYourSolution from './sections/PushYourSolution';
|
||||
import SubmissionMetadataSmallDesktop from './sections/SubmissionMetadataSmallDesktop';
|
||||
import SubmissionMetadataLargeDesktop from './sections/SubmissionMetadataLargeDesktop';
|
||||
import SubmitSolutionToGonito from './sections/SubmitSolutionToGonito';
|
||||
|
||||
const HowTo = (props) => {
|
||||
return (
|
||||
<FlexColumn margin={IS_MOBILE() ? null : '64px 0 0 0'} padding={IS_MOBILE() ? '12px 20px' : null}
|
||||
gap={IS_MOBILE() ? '24px' : '48px'} alignmentX={IS_MOBILE() ? 'flex-start' : 'center'}
|
||||
maxWidth={IS_MOBILE() ? '668px' : 'none'}>
|
||||
<FlexColumn maxWidth='680px' alignmentX='flex-start' gap='48px'>
|
||||
<GetChallengeRepo user={props.user} challengeName={props.challengeName}/>
|
||||
<WorkOnYourSolution/>
|
||||
<PushYourSolution challengeName={props.challengeName}/>
|
||||
</FlexColumn>
|
||||
<FlexColumn as='article'>
|
||||
<SubmitSolutionToGonito/>
|
||||
<Media query='(max-width: 1224px)'>
|
||||
<SubmissionMetadataSmallDesktop/>
|
||||
</Media>
|
||||
<Media query='(min-width: 1225px)'>
|
||||
<SubmissionMetadataLargeDesktop/>
|
||||
</Media>
|
||||
</FlexColumn>
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
|
||||
export default HowTo;
|
||||
1
src/components/specific_challenge/HowTo/index.js
Normal file
1
src/components/specific_challenge/HowTo/index.js
Normal file
@ -0,0 +1 @@
|
||||
export {default} from './HowTo';
|
||||
@ -0,0 +1,40 @@
|
||||
import React from 'react';
|
||||
import {IS_MOBILE} from '../../../../utils/globals';
|
||||
import {Body, H2, Medium} from '../../../../utils/fonts';
|
||||
import {FlexColumn, Grid} from '../../../../utils/containers';
|
||||
import CircleNumber from '../../../generic/CircleNumber';
|
||||
import CodeShell from '../../../generic/CodeShell';
|
||||
|
||||
const GetChallengeRepo = (props) => {
|
||||
return (
|
||||
<FlexColumn as='article' width='100%' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
|
||||
<H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
|
||||
Get challenge repo
|
||||
</H2>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='1'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
You need to create empty repo with name:
|
||||
<Medium as='span'>
|
||||
yourID/challengeName
|
||||
</Medium>
|
||||
</Body>
|
||||
</Grid>
|
||||
<CodeShell codeBlockIndex={1}
|
||||
commands={[`git clone git@git.wmi.amu.edu.pl:${props.user}/${props.challengeName}.git`]}/>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='2'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
Pull gonito challenge repo
|
||||
</Body>
|
||||
</Grid>
|
||||
<CodeShell codeBlockIndex={2} commands={[`cd ${props.challengeName}`,
|
||||
`git pull git://gonito.net/${props.challengeName}.git`]}/>
|
||||
<Body as='p'>
|
||||
Make sure Gonito.net has access to your repo (e.g. by making it public).
|
||||
</Body>
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
|
||||
export default GetChallengeRepo;
|
||||
@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
import {IS_MOBILE} from '../../../../utils/globals';
|
||||
import {Body, H2, Medium} from '../../../../utils/fonts';
|
||||
import CodeShell from '../../../generic/CodeShell';
|
||||
import {FlexColumn} from '../../../../utils/containers';
|
||||
|
||||
const PushYourSolution = (props) => {
|
||||
return (
|
||||
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} width='100%' alignmentX='flex-start'>
|
||||
<H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
|
||||
Push your solution
|
||||
</H2>
|
||||
<Body>
|
||||
Commit and push <Medium>out.tsv</Medium> files to your repo. It is also recommended to push your
|
||||
source codes along
|
||||
with <Medium>out.tsv</Medium> files.
|
||||
</Body>
|
||||
<CodeShell codeBlockIndex={3}
|
||||
commands={[`cd ${props.challengeName}`,
|
||||
'git checkout -b my-brilliant-branch # switch to some other branch',
|
||||
'git add foo.py build.sh # add your source codes',
|
||||
/* eslint-disable */
|
||||
`git add gonito.yaml # it's a good practice to add metadata file, see below`]}/>
|
||||
<CodeShell codeBlockIndex={4}
|
||||
commands={['git add dev-0/out.tsv test-A/out.tsv # add your output files',
|
||||
/* eslint-disable */
|
||||
`git commit -m 'my brilliant solution'`,
|
||||
'git push origin my-brilliant-branch']}/>
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
|
||||
export default PushYourSolution;
|
||||
@ -0,0 +1,152 @@
|
||||
import React from 'react';
|
||||
import {FlexColumn, FlexRow, Grid, Svg} from '../../../../utils/containers';
|
||||
import {IS_MOBILE} from '../../../../utils/globals';
|
||||
import {Body, H3, Medium} from '../../../../utils/fonts';
|
||||
import CircleNumber from '../../../generic/CircleNumber';
|
||||
import cubeIcon from '../../../../assets/cube_ico.svg';
|
||||
import theme from '../../../../utils/theme';
|
||||
import CodeShell from '../../../generic/CodeShell';
|
||||
|
||||
const SubmissionMetadataLargeDesktop = () => {
|
||||
return (
|
||||
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} width='100%'>
|
||||
<FlexColumn alignmentX='flex-start' maxWidth='680px' gap='32px' margin='24px 0'>
|
||||
<H3 as='h2'>
|
||||
Submission metadata
|
||||
</H3>
|
||||
<Body as='p'>
|
||||
Gonito can take the metadata (description, tags, parameters) of a submission from a
|
||||
number
|
||||
of
|
||||
sources (in order of precedence):
|
||||
</Body>
|
||||
</FlexColumn>
|
||||
<FlexRow gap='24px'>
|
||||
<FlexColumn alignmentX='flex-start' maxWidth='422px' gap='20px'>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr'
|
||||
gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='1'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
The YAML files specified in the param-files field of the gonito.yaml file
|
||||
</Body>
|
||||
</Grid>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
only applicable for parameters
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
<Medium as='span'>gonito.yaml</Medium> will be always skipped even if matches a
|
||||
mask given
|
||||
in
|
||||
the
|
||||
param-files field,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
parameters blacklisted in the unwanted-params field of the gonito.yaml file will
|
||||
be
|
||||
discarded,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr'
|
||||
gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='2'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
<Medium as='span'>Gonito.yaml</Medium> file committed to the repository,
|
||||
</Body>
|
||||
</Grid>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
description given in the description field,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
tags given in tags field,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
parameters given in params field,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr'
|
||||
gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='3'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
Names of output files (only for parameters)
|
||||
</Body>
|
||||
</Grid>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
e.g. if the output file
|
||||
is <Medium as='span'>out-epochs=10</Medium>, <Medium
|
||||
as='span'>learning-rate=0.01</Medium>, then
|
||||
parameters
|
||||
<Medium as='span'>epochs=10</Medium> and <Medium
|
||||
as='span'>learning-rare=0.01</Medium> will be
|
||||
extracted;
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr'
|
||||
gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='4'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
Submission form (when submitting manually)
|
||||
</Body>
|
||||
</Grid>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr'
|
||||
gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='5'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
Git commit message
|
||||
</Body>
|
||||
</Grid>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
description taken from the first paragraph
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
tags taken from a line starting with <Medium as='span'>tags:</Medium>
|
||||
</Body>
|
||||
</FlexRow>
|
||||
</FlexColumn>
|
||||
<CodeShell codeBlockIndex={5} disablePrompt maxWidth='446px'
|
||||
commands={['description: This my brilliant solution',
|
||||
'tags:', '\t- neutral-network', '\t- left-to-right',
|
||||
'params:', '\tepochs: 10', '\tlearning-rate: 0.01',
|
||||
'unwanted-params:', '\t- model-file', '\t- vocab-file',
|
||||
'param-files:', '\t- “*.yaml”*', '\t- config/*.yaml*/',
|
||||
'links:', '\t- title: "Some external link"',
|
||||
'\t\\s\\surl: "https://example.org/xyz"', '\t- title: "Yet another link"',
|
||||
'\t\\s\\shttps://example.com/foo-bar-baz-123"',
|
||||
'\t- url: "https://example.net/bare-link-without-text']}/>
|
||||
</FlexRow>
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubmissionMetadataLargeDesktop;
|
||||
@ -0,0 +1,137 @@
|
||||
import React from 'react';
|
||||
import {FlexColumn, FlexRow, Grid, Svg} from '../../../../utils/containers';
|
||||
import {IS_MOBILE} from '../../../../utils/globals';
|
||||
import {Body, H3, Medium} from '../../../../utils/fonts';
|
||||
import CircleNumber from '../../../generic/CircleNumber';
|
||||
import cubeIcon from '../../../../assets/cube_ico.svg';
|
||||
import theme from '../../../../utils/theme';
|
||||
import CodeShell from '../../../generic/CodeShell';
|
||||
|
||||
const SubmissionMetadataSmallDesktop = () => {
|
||||
return (
|
||||
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'
|
||||
maxWidth='680px' width='100%'>
|
||||
<H3 as='h2' margin='24px 0 0 0'>
|
||||
Submission metadata
|
||||
</H3>
|
||||
<Body as='p'>
|
||||
Gonito can take the metadata (description, tags, parameters) of a submission from a
|
||||
number
|
||||
of
|
||||
sources (in order of precedence):
|
||||
</Body>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='1'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
The YAML files specified in the param-files field of the gonito.yaml file
|
||||
</Body>
|
||||
</Grid>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
only applicable for parameters
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
<Medium as='span'>gonito.yaml</Medium> will be always skipped even if matches a mask
|
||||
given in the
|
||||
param-files field,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
parameters blacklisted in the unwanted-params field of the gonito.yaml file will be
|
||||
discarded,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='2'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
<Medium as='span'>Gonito.yaml</Medium> file committed to the repository,
|
||||
</Body>
|
||||
</Grid>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
description given in the description field,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
tags given in tags field,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
parameters given in params field,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='3'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
Names of output files (only for parameters)
|
||||
</Body>
|
||||
</Grid>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
e.g. if the output file
|
||||
is <Medium as='span'>out-epochs=10</Medium>, <Medium
|
||||
as='span'>learning-rate=0.01</Medium>, then parameters
|
||||
<Medium as='span'>epochs=10</Medium> and <Medium
|
||||
as='span'>learning-rare=0.01</Medium> will be extracted;
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='4'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
Submission form (when submitting manually)
|
||||
</Body>
|
||||
</Grid>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='5'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
Git commit message
|
||||
</Body>
|
||||
</Grid>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
description taken from the first paragraph
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
tags taken from a line starting with <Medium as='span'>tags:</Medium>
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<CodeShell codeBlockIndex={5} disablePrompt
|
||||
commands={['description: This my brilliant solution',
|
||||
'tags:', '\t- neutral-network', '\t- left-to-right',
|
||||
'params:', '\tepochs: 10', '\tlearning-rate: 0.01',
|
||||
'unwanted-params:', '\t- model-file', '\t- vocab-file',
|
||||
'param-files:', '\t- “*.yaml”*', '\t- config/*.yaml*/',
|
||||
'links:', '\\t- title: "Some external link"',
|
||||
'\\t\\s\\surl: "https://example.org/xyz"', '\t- title: "Yet another link"',
|
||||
'\\t\\s\\shttps://example.com/foo-bar-baz-123"',
|
||||
'\\t- url: "https://example.net/bare-link-without-text']}/>
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubmissionMetadataSmallDesktop;
|
||||
@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
import {IS_MOBILE} from '../../../../utils/globals';
|
||||
import {Body, H2, H3, Medium} from '../../../../utils/fonts';
|
||||
import {FlexColumn} from '../../../../utils/containers';
|
||||
|
||||
const SubmitSolutionToGonito = () => {
|
||||
return (
|
||||
<FlexColumn alignmentX='flex-start' maxWidth='680px' gap={IS_MOBILE() ? '16px' : '24px'}>
|
||||
<H2 as='h2' margin='0 0 8px 0'>
|
||||
Submit solution to Gonito
|
||||
</H2>
|
||||
<FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'>
|
||||
<H3 as='h3'>
|
||||
Manual submission
|
||||
</H3>
|
||||
<Body>
|
||||
In case other methods fail, you can submit your solution manually — go to the <Medium>submit
|
||||
form</Medium>.
|
||||
</Body>
|
||||
</FlexColumn>
|
||||
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start' width='100%'>
|
||||
<H3 as='h3'>
|
||||
Integration with external repos
|
||||
</H3>
|
||||
<Body>
|
||||
If you use an external repo (e.g. at your own of Gitolite or at GitLab/GitHub), you can
|
||||
configure a webhook.
|
||||
</Body>
|
||||
</FlexColumn>
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubmitSolutionToGonito;
|
||||
@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
import {IS_MOBILE} from '../../../../utils/globals';
|
||||
import {Body, H2, H3, Medium} from '../../../../utils/fonts';
|
||||
import {FlexColumn} from '../../../../utils/containers';
|
||||
import CodeShell from '../../../generic/CodeShell';
|
||||
|
||||
const WorkOnYourSolution = () => {
|
||||
return (
|
||||
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} width='100%' alignmentX='flex-start'>
|
||||
<H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
|
||||
Work on your solution
|
||||
</H2>
|
||||
<Body as='p'>
|
||||
You need to generate your solution for the test set as <Medium as='span'>test-A/out.tsv</Medium>. It
|
||||
is also
|
||||
recommended to
|
||||
generate the output for the dev set <Medium as='span'>(dev-0/out.tsv)</Medium>.
|
||||
</Body>
|
||||
<Body as='p'>
|
||||
You can evaluate results for the dev set locally by <Medium as='span'>geval</Medium>.
|
||||
</Body>
|
||||
<FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'>
|
||||
<H3 as='h3'>
|
||||
Install geval
|
||||
</H3>
|
||||
<CodeShell codeBlockIndex={3}
|
||||
commands={['wget https://gonito.net/get/bin/geval', 'chmod u+x geval', './geval --help']}/>
|
||||
</FlexColumn>
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkOnYourSolution;
|
||||
@ -11,7 +11,6 @@ import {CALC_PAGES, EVALUATIONS_FORMAT, RENDER_WHEN} from '../../../utils/global
|
||||
import Search from '../../generic/Search';
|
||||
import Pager from '../../generic/Pager';
|
||||
import Loading from '../../generic/Loading';
|
||||
import getUser from '../../../api/getUser';
|
||||
|
||||
const Leaderboard = (props) => {
|
||||
const [entriesFromApi, setEntriesFromApi] = React.useState([]);
|
||||
@ -22,7 +21,6 @@ const Leaderboard = (props) => {
|
||||
const [entriesSorted, setEntriesSorted] = React.useState(false);
|
||||
const [whenSorted, setWhenSorted] = React.useState(false);
|
||||
const [scoreSorted, setScoreSorted] = React.useState(false);
|
||||
const [user, setUser] = React.useState('');
|
||||
|
||||
React.useEffect(() => {
|
||||
challengeDataRequest(props.challengeName);
|
||||
@ -30,7 +28,6 @@ const Leaderboard = (props) => {
|
||||
|
||||
const challengeDataRequest = (challengeName) => {
|
||||
getChallengeLeaderboard(setEntriesFromApi, challengeName);
|
||||
getUser(setUser);
|
||||
getChallengeLeaderboard(setEntries, challengeName, setLoading);
|
||||
};
|
||||
|
||||
@ -159,7 +156,7 @@ const Leaderboard = (props) => {
|
||||
<Search searchQueryHandler={searchQueryHandler}/>
|
||||
<Table challengeName={props.challengeName} headerElements={getLeaderboardHeader()}
|
||||
gridTemplateColumns={entries[0] ? '1fr 3fr ' + '2fr '.repeat(entries[0].evaluations.length) + '1fr 2fr' : ''}
|
||||
user={user}
|
||||
user={props.user}
|
||||
staticColumnElements={
|
||||
[
|
||||
{name: 'id', format: null, order: 1, align: 'left'},
|
||||
|
||||
@ -142,7 +142,7 @@ const Table = (props) => {
|
||||
} else {
|
||||
return (
|
||||
<Medium margin='72px 0'>
|
||||
Query not found
|
||||
No results ;c
|
||||
</Medium>
|
||||
);
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@ import theme from '../utils/theme';
|
||||
import MobileChallengeMenu from '../components/specific_challenge/MobileChallengeMenu';
|
||||
import Leaderboard from '../components/specific_challenge/Leaderboard/Leaderboard';
|
||||
import Readme from '../components/specific_challenge/Readme';
|
||||
import HowTo from '../components/specific_challenge/HowTo';
|
||||
import HowTo from '../components/specific_challenge/HowTo/HowTo';
|
||||
import MyEntries from '../components/specific_challenge/MyEntries/MyEntries';
|
||||
import Submit from '../components/specific_challenge/Submit';
|
||||
import Media from 'react-media';
|
||||
@ -15,26 +15,29 @@ import {RENDER_ICO} from '../utils/globals';
|
||||
import textIco from '../assets/text_ico.svg';
|
||||
import getChallengeInfo from '../api/getChallengeInfo';
|
||||
import Loading from '../components/generic/Loading';
|
||||
import getUser from '../api/getUser';
|
||||
|
||||
const Challenge = (props) => {
|
||||
const challengeName = useParams().challengeId;
|
||||
const [challenge, setChallenge] = React.useState([]);
|
||||
const [section, setSection] = React.useState(0);
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
const [user, setUser] = React.useState('');
|
||||
|
||||
React.useEffect(() => {
|
||||
getChallengeInfo(setChallenge, setLoading, challengeName);
|
||||
getUser(setUser);
|
||||
}, [challengeName]);
|
||||
|
||||
const sectionRender = () => {
|
||||
switch (section) {
|
||||
case 0:
|
||||
return <Leaderboard challengeName={challengeName} mainMetric={challenge.mainMetric}/>;
|
||||
return <Leaderboard challengeName={challengeName} mainMetric={challenge.mainMetric} user={user}/>;
|
||||
case 1:
|
||||
return <Readme challengeName={challengeName} metric={challenge.mainMetric}
|
||||
description={challenge.description} deadline={challenge.deadline}/>;
|
||||
case 2:
|
||||
return <HowTo challengeName={challengeName}/>;
|
||||
return <HowTo challengeName={challengeName} user={user}/>;
|
||||
case 3:
|
||||
return <MyEntries challengeName={challengeName}/>;
|
||||
case 4:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user