function CellProfilerModuleHeaderRenderer()

in client/src/components/special/cellprofiler/components/module.js [51:209]
152 lines of code
21 McCabe index (conditional complexity)

function CellProfilerModuleHeaderRenderer (props) {
  const {
    cpModule,
    movable,
    removable,
    hasErrors = false
  } = props;
  if (!cpModule) {
    return null;
  }
  /**
   * @type {Analysis}
   */
  const analysis = cpModule.analysis;
  /**
   * @type {AnalysisPipeline}
   */
  const pipeline = cpModule.pipeline;
  // eslint-disable-next-line
  const outputImage = analysis
    ? analysis.getOutputImageForModule(cpModule)
    : undefined;
  const hasOutputImage = !!outputImage;
  const selected = pipeline &&
    pipeline.graphicsOutput &&
    pipeline.graphicsOutput.outputIsSelectedAsOverlayImage(outputImage);
  const renderIcon = () => {
    if (!cpModule.statusReporting) {
      return null;
    }
    if (cpModule.pending || cpModule.done) {
      return (
        <Circle
          className={
            classNames({
              'cp-primary': cpModule.pending,
              'cp-success': cpModule.done
            })
          }
          pending={cpModule.pending}
        />
      );
    } else {
      return (
        <Circle
          className="cp-text-not-important"
          empty
        />
      );
    }
  };
  const prevent = (e) => {
    if (e) {
      e.stopPropagation();
    }
  };
  const moveUp = (e) => {
    prevent(e);
    cpModule.moveUp();
  };
  const moveDown = (e) => {
    prevent(e);
    cpModule.moveDown();
  };
  const remove = (e) => {
    prevent(e);
    cpModule.remove();
  };
  const onSelectOutput = (event) => {
    if (event) {
      event.preventDefault();
      event.stopPropagation();
    }
    if (!pipeline || !pipeline.graphicsOutput) {
      return;
    }
    if (selected) {
      (pipeline.graphicsOutput.setOverlayImage)(undefined, analysis.hcsImageViewer);
    } else {
      (pipeline.graphicsOutput.setOverlayImage)(outputImage, analysis.hcsImageViewer);
    }
  };
  return (
    <div
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        flex: 1
      }}
      className={hasErrors ? 'cp-error' : ''}
    >
      <b style={{marginRight: 'auto'}}>
        {renderIcon()}
        {cpModule.displayName}
        {
          hasOutputImage && (
            <Icon
              type="picture"
              className={
                classNames({
                  'cp-text-not-important': !selected,
                  'cp-primary': selected
                })
              }
              style={{
                cursor: 'pointer',
                marginLeft: 5,
                fontWeight: 'normal'
              }}
              onClick={onSelectOutput}
            />
          )
        }
      </b>
      {
        !cpModule.hidden && movable && (
          <Button
            className={styles.action}
            size="small"
            disabled={cpModule.isFirst}
            onClick={moveUp}
          >
            <Icon
              type="up"
            />
          </Button>
        )
      }
      {
        !cpModule.hidden && movable && (
          <Button
            className={styles.action}
            size="small"
            disabled={cpModule.isLast}
            onClick={moveDown}
          >
            <Icon
              type="down"
            />
          </Button>
        )
      }
      {
        !cpModule.hidden && removable && (
          <Button
            className={styles.action}
            size="small"
            type="danger"
            onClick={remove}
          >
            <Icon
              type="delete"
            />
          </Button>
        )
      }
    </div>
  );
}