immutable#Range JavaScript Examples

The following examples show how to use immutable#Range. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Header.js    From minerva with MIT License 6 votes vote down vote up 
JobFloatPanel = (props) => {
  const { projects } = props
  const cpuJobs = props.status.cpu.jobs
  const totalGPU = props.status.gpu.total
  const gpuJobs = props.status.gpu.jobs
  return (
    <div className='job-list'>
      <div className='jobs'>
        <p className='device-name'>CPU</p>
        {cpuJobs.length === 0 &&
          <p className='empty-message'>No Jobs</p>}
        {cpuJobs.length > 0 &&
          <ul>
            <JobList projects={projects} jobs={cpuJobs} />
          </ul>}
      </div>
      {Range(0, totalGPU).toJS().map((i) => (
        <div key={i} className='jobs'>
          <p className='device-name'>GPU:{i}</p>
          {(gpuJobs[i] === undefined || gpuJobs[i].length === 0) &&
            <p className='empty-message'>No Jobs</p>}
          {gpuJobs[i] !== undefined && gpuJobs[i].length > 0 &&
            <ul>
              <JobList projects={projects} jobs={gpuJobs[i]} />
            </ul>}
        </div>
      ))}
    </div>
  )
}
Example #2
Source File: graphs.js    From minerva with MIT License 5 votes vote down vote up 
Line = (props) => {
  const [activeTitle, setIsActiveTitle] = useState('')

  const colors = [
    '#2980b9', '#c0392b', '#16a085', '#d35400', '#f39c12', '#7f8c8d',
    '#3498db', '#e74c3c', '#1abc9c', '#e67e22', '#f1c40f'
  ]

  // Make up recharts data
  const maxX = Math.max(...props.values.map((value) => value.length))
  const data = Range(0, maxX).map((i) => ({ x: i + 1 })).toArray()
  props.values.forEach((value, dataIndex) => {
    value.forEach((v, timeIndex) => {
      data[timeIndex][props.titles[dataIndex]] = v
    })
  })

  const handleMouseEnter = ({ dataKey }) => {
    setIsActiveTitle(dataKey)
  }

  const handleMouseLeave = () => {
    setIsActiveTitle('')
  }

  return (
    <ResponsiveContainer>
      <LineChart
        data={data}
        height={300}
        margin={{ top: 0, bottom: 30 }}
      >
        <CartesianGrid strokeDasharray='3 3' />
        <XAxis
          dataKey='x'
          label={{
            value: props.xLabel,
            position: 'insideBottom',
            offset: -10
          }}
        />
        <YAxis
          label={{
            value: props.yLabel,
            angle: -90,
            position: 'insideLeft'
          }}
        />
        <Tooltip />
        <Legend
          wrapperStyle={{ fontSize: 10, paddingTop: 15 }}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        />
        {props.titles.map((title, i) => {
          let opacity = 1.0
          if (activeTitle !== '' && activeTitle !== title) {
            opacity = GRAPH_DIMMED_OPACITY
          }
          return (
            <RechartsLine
              strokeWidth={2}
              key={title}
              type='monotone'
              dataKey={title}
              strokeOpacity={opacity}
              stroke={colors[i % colors.length]}
              fill={colors[i % colors.length]}
              dot={false}
              isAnimationActive
              animationDuration={500}
            />
          )
        })}
      </LineChart>
    </ResponsiveContainer>
  )
}
Example #3
Source File: DownloadPolicyDialog.js    From minerva with MIT License 5 votes vote down vote up 
DownloadPolicyDialog = (props) => {
  const [epoch, setEpoch] = useState(-1)
  const [format, setFormat] = useState('torchscript')

  const { experiment } = props

  const handleClose = () => {
    setEpoch(-1)
    props.onClose()
  }

  const handleSubmit = () => {
    // Quick validation
    if (epoch === -1) {
      return
    }
    experiment.downloadPolicy(epoch, format)
    props.onClose()
  }

  const epochOptions = Range(1, props.totalEpoch + 1).map((i) => (
    { value: i, text: i }
  ))

  const formatOptions = [
    { value: 'torchscript', text: 'TorchScript' },
    { value: 'onnx', text: 'ONNX' }
  ]

  return (
    <Dialog
      isOpen={props.isOpen}
      title='Download policy'
      message={experiment.name}
      confirmText='DOWNLOAD'
      onConfirm={handleSubmit}
      onClose={handleClose}
    >
      <div>
        <div className='select-wrapper'>
          <span className='label'>EPOCH</span>
          <SelectForm
            placeholder='CHOOSE EPOCH TO DOWNLOAD'
            options={epochOptions}
            value={epoch}
            onChange={(v) => setEpoch(v)}
          />
        </div>
        <div className='select-wrapper'>
          <span className='label'>FORMAT</span>
          <SelectForm
            options={formatOptions}
            value={format}
            onChange={(v) => setFormat(v)}
          />
        </div>
      </div>
    </Dialog>
  )
}