<commit_before>import React from 'react';
import TimeStamp from 'react-timestamp';
import { Link } from 'react-router';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import LinearProgress from '@material-ui/core/LinearProgress';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';
import PropTypes from 'prop-types';

const styles = theme => ({
  rootPaper: {
    ...theme.mixins.gutters(),
    paddingTop: theme.spacing.unit * 2,
    paddingBottom: theme.spacing.unit * 2,
    marginTop: theme.spacing.unit * 2,
  },
  titleContainer: {
    display: 'flex',
    justifyContent: 'space-between',
    marginBottom: theme.spacing.unit,
  },
  label: {
    display: 'inline-block',
    fontWeight: 'bold',
    marginRight: theme.spacing.unit,
  },
  value: {
    display: 'inline-block',
  },
  contentContainer: {
    marginBottom: theme.spacing.unit,
  },
  actionButtons: {
    display: 'flex',
    justifyContent: 'space-between',
  },
  runStateContainer: {
    display: 'flex',
    justifyContent: 'space-between',
  },
  runStatePaper: {
    width: `calc(50% - ${theme.spacing.unit}px)`,
  },
  runTitle: {
    textDecoration: 'underline',
    marginBottom: theme.spacing.unit,
  },
});

function getStateWell(runObject, stateName, stateKey, classes) {
  return (
    <Paper
      className={classNames(classes.rootPaper, classes.runStatePaper)}
    >
      <Typography variant="headline" className={classes.runTitle}>
        {`${stateName} Pipeline State:`}
      </Typography>
      {
        runObject[stateKey].mode
        && (
          <div>
            <Typography className={classes.label}>Mode:</Typography>
            <Typography className={classes.value}>
              {runObject[stateKey].mode}
            </Typography>
          </div>
        )
      }
      {
        runObject[stateKey].waitingOn
        && (
          <div>
            <Typography className={classes.label}>Waiting on Users:</Typography>
            <Typography className={classes.value}>
              {runObject[stateKey].controllerState.includes('waiting on') ? runObject[stateKey].waitingOn.join(', ') : ''}
            </Typography>
          </div>
        )
      }
      {
        runObject[stateKey].controllerState
        && (
          <div>
            <Typography className={classes.label}>Controller State:</Typography>
            <Typography className={classes.value}>
              {runObject[stateKey].controllerState}
            </Typography>
          </div>
        )
      }
      {
        runObject[stateKey].currentIteration >= 0
        && (
          <div>
            <Typography className={classes.label}>Current Iteration:</Typography>
            <Typography className={classes.value}>
              {runObject[stateKey].currentIteration}
            </Typography>
          </div>
        )
      }
      {
        runObject[stateKey].pipelineStep >= 0
        && (
          <div>
            <Typography className={classes.label}>Step Count:</Typography>
            <Typography className={classes.value}>
              {`${runObject[stateKey].pipelineStep + 1} / ${runObject[stateKey].totalSteps}`}
            </Typography>
          </div>
        )
      }
    </Paper>
  );
}

const RunItem = ({ consortiumName, runObject, classes }) => (
  <Paper
    key={runObject.id}
    elevation={4}
    className={classNames(classes.rootPaper, 'run-item-paper')}
  >
    <div className={classes.titleContainer}>
      <Typography variant="headline">
        { consortiumName }
        {
          runObject.pipelineSnapshot
          && <span>{ ` || ${runObject.pipelineSnapshot.name}`}</span>
        }
      </Typography>
      {
        !runObject.endDate
        && (
          <Typography variant="headline">
            {'Started: '}
            <TimeStamp
              time={runObject.startDate / 1000}
              precision={2}
              autoUpdate={60}
              format="ago"
            />
          </Typography>
        )
      }
      {
        runObject.endDate
        && (
          <Typography variant="headline">
            {'Completed: '}
            <TimeStamp
              time={runObject.endDate / 1000}
              precision={2}
              autoUpdate={60}
              format="ago"
            />
          </Typography>
        )
      }
    </div>
    <div className={classes.contentContainer}>
      {
        runObject.status === 'started' && (runObject.localPipelineState || runObject.remotePipelineState)
        && (
          <LinearProgress
            variant="determinate"
            value={runObject.remotePipelineState
              ? ((runObject.remotePipelineState.pipelineStep + 1) / runObject.remotePipelineState.totalSteps) * 100
              : ((runObject.localPipelineState.pipelineStep + 1) / runObject.localPipelineState.totalSteps) * 100
            }
          />
        )
      }
      <div>
        <Typography className={classes.label}>
          Status:
        </Typography><commit_msg>Change progress bar to indefinite on computation run<commit_after>import React from 'react';
import TimeStamp from 'react-timestamp';
import { Link } from 'react-router';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import LinearProgress from '@material-ui/core/LinearProgress';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';
import PropTypes from 'prop-types';

const styles = theme => ({
  rootPaper: {
    ...theme.mixins.gutters(),
    paddingTop: theme.spacing.unit * 2,
    paddingBottom: theme.spacing.unit * 2,
    marginTop: theme.spacing.unit * 2,
  },
  titleContainer: {
    display: 'flex',
    justifyContent: 'space-between',
    marginBottom: theme.spacing.unit,
  },
  label: {
    display: 'inline-block',
    fontWeight: 'bold',
    marginRight: theme.spacing.unit,
  },
  value: {
    display: 'inline-block',
  },
  contentContainer: {
    marginBottom: theme.spacing.unit,
  },
  actionButtons: {
    display: 'flex',
    justifyContent: 'space-between',
  },
  runStateContainer: {
    display: 'flex',
    justifyContent: 'space-between',
  },
  runStatePaper: {
    width: `calc(50% - ${theme.spacing.unit}px)`,
  },
  runTitle: {
    textDecoration: 'underline',
    marginBottom: theme.spacing.unit,
  },
});

function getStateWell(runObject, stateName, stateKey, classes) {
  return (
    <Paper
      className={classNames(classes.rootPaper, classes.runStatePaper)}
    >
      <Typography variant="headline" className={classes.runTitle}>
        {`${stateName} Pipeline State:`}
      </Typography>
      {
        runObject[stateKey].mode
        && (
          <div>
            <Typography className={classes.label}>Mode:</Typography>
            <Typography className={classes.value}>
              {runObject[stateKey].mode}
            </Typography>
          </div>
        )
      }
      {
        runObject[stateKey].waitingOn
        && (
          <div>
            <Typography className={classes.label}>Waiting on Users:</Typography>
            <Typography className={classes.value}>
              {runObject[stateKey].controllerState.includes('waiting on') ? runObject[stateKey].waitingOn.join(', ') : ''}
            </Typography>
          </div>
        )
      }
      {
        runObject[stateKey].controllerState
        && (
          <div>
            <Typography className={classes.label}>Controller State:</Typography>
            <Typography className={classes.value}>
              {runObject[stateKey].controllerState}
            </Typography>
          </div>
        )
      }
      {
        runObject[stateKey].currentIteration >= 0
        && (
          <div>
            <Typography className={classes.label}>Current Iteration:</Typography>
            <Typography className={classes.value}>
              {runObject[stateKey].currentIteration}
            </Typography>
          </div>
        )
      }
      {
        runObject[stateKey].pipelineStep >= 0
        && (
          <div>
            <Typography className={classes.label}>Step Count:</Typography>
            <Typography className={classes.value}>
              {`${runObject[stateKey].pipelineStep + 1} / ${runObject[stateKey].totalSteps}`}
            </Typography>
          </div>
        )
      }
    </Paper>
  );
}

const RunItem = ({ consortiumName, runObject, classes }) => (
  <Paper
    key={runObject.id}
    elevation={4}
    className={classNames(classes.rootPaper, 'run-item-paper')}
  >
    <div className={classes.titleContainer}>
      <Typography variant="headline">
        { consortiumName }
        {
          runObject.pipelineSnapshot
          && <span>{ ` || ${runObject.pipelineSnapshot.name}`}</span>
        }
      </Typography>
      {
        !runObject.endDate
        && (
          <Typography variant="headline">
            {'Started: '}
            <TimeStamp
              time={runObject.startDate / 1000}
              precision={2}
              autoUpdate={60}
              format="ago"
            />
          </Typography>
        )
      }
      {
        runObject.endDate
        && (
          <Typography variant="headline">
            {'Completed: '}
            <TimeStamp
              time={runObject.endDate / 1000}
              precision={2}
              autoUpdate={60}
              format="ago"
            />
          </Typography>
        )
      }
    </div>
    <div className={classes.contentContainer}>
      {
        runObject.status === 'started' && (runObject.localPipelineState || runObject.remotePipelineState)
        && (
          <LinearProgress
            variant="indeterminate"
            value={runObject.remotePipelineState
              ? ((runObject.remotePipelineState.pipelineStep + 1) / runObject.remotePipelineState.totalSteps) * 100
              : ((runObject.localPipelineState.pipelineStep + 1) / runObject.localPipelineState.totalSteps) * 100
            }
          />
        )
      }
      <div>
        <Typography className={classes.label}>
          Status:
        </Typography>
{'fraction_non_alphanumeric': 0.13329447197124258, 'fraction_numerical': 0.006023511124064899, 'mean_word_length': 2.0347877358490565, 'pattern_counts': {'":': 0, '<': 107, '<?xml version=': 0, '>': 115, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5147149', 'n_tokens_mistral': 2945, 'n_tokens_neox': 2869, 'n_words': 466}